diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml index 634a081..f8e1c77 100644 --- a/android/app/src/main/AndroidManifest.xml +++ b/android/app/src/main/AndroidManifest.xml @@ -16,7 +16,8 @@ android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" - android:exported="true"> + android:exported="true" + android:screenOrientation="portrait"> diff --git a/android/build.gradle b/android/build.gradle index 497b8b0..0e9977a 100644 --- a/android/build.gradle +++ b/android/build.gradle @@ -40,6 +40,7 @@ allprojects { // Android JSC is installed from npm url("$rootDir/../node_modules/jsc-android/dist") } + mavenCentral { // We don't want to fetch react-native from Maven Central as there are // older versions over there. @@ -49,5 +50,6 @@ allprojects { } google() maven { url 'https://www.jitpack.io' } + jcenter() } } diff --git a/package.json b/package.json index 45eff24..e297940 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "react-native-screens": "3.10.2", "react-native-select-dropdown": "1.13.0", "react-native-svg": "^12.3.0", + "react-native-video": "5.1.1", "react-redux": "^8.0.2", "redux": "^4.2.0", "redux-persist": "^6.0.0", diff --git a/src/navigation.js b/src/navigation.js index 9c075e0..e0a9707 100644 --- a/src/navigation.js +++ b/src/navigation.js @@ -26,7 +26,7 @@ import Product from "../src/screens/Product"; // import Activation from "../src/screens/Activation"; import Videos from '../src/screens/Videos'; import Video from "../src/screens/Video"; -// import VideoDisplay from "../src/screens/VideoDisplay"; +import VideoDisplay from "../src/screens/VideoDisplay"; // import Contact from "../src/screens/Contact"; // import Tests from "../src/screens/Tests"; import ShoppingCart from '../src/screens/ShoppingCart'; @@ -476,8 +476,9 @@ const HomeStackScreen = ({theme, startUserGuide}) => { - {/* + + {/* @@ -524,8 +525,7 @@ const VODStackScreen = ({theme}) => { initialRouteName="VOD"> } /> - {/* - */} + ); }; @@ -566,7 +566,7 @@ const PROFILEStackScreen = ({theme}) => { {/* - + diff --git a/src/screens/VideoDisplay/index.js b/src/screens/VideoDisplay/index.js index bdd4a25..accdc9f 100644 --- a/src/screens/VideoDisplay/index.js +++ b/src/screens/VideoDisplay/index.js @@ -1,77 +1,74 @@ -import React, { useState, useEffect } from "react"; +import React, {useState, useEffect} from 'react'; import { View, StyleSheet, Dimensions, ScrollView, - SafeAreaView, StatusBar, LayoutAnimation, Text, Platform, -} from "react-native"; -import { connect } from "react-redux"; -import { publicApi } from "../../redux/actions"; -import { Video } from "expo-av"; -import * as ScreenOrientation from "expo-screen-orientation"; +} from 'react-native'; +import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context'; +import {connect} from 'react-redux'; +import Video from 'react-native-video'; + +// import * as ScreenOrientation from 'expo-screen-orientation'; //components -import Navbar from "../../components/Navbar"; -import Drawer from "../../components/Drawer"; -import Season from "./components/Season"; -import Divider from "../../components/Divider"; +import Navbar from '../../components/Navbar'; +import Drawer from '../../components/Drawer'; +import Season from './components/Season'; +import Divider from '../../components/Divider'; //style -import tw from "tailwind-rn"; -import fontSize from "../../constants/fontSize"; -import Colors from "../../constants/Colors"; +import tw from 'tailwind-rn'; +import fontSize from '../../constants/fontSize'; +import Colors from '../../constants/Colors'; //assets -import posterImage from "../../assets/images/poster.png"; +import posterImage from '../../assets/images/poster.png'; -const ios = Platform.OS === "ios"; +const ios = Platform.OS === 'ios'; -function VideoDisplay({ route, mobile, theme }) { +function VideoDisplay({route, mobile, theme}) { + const insets = useSafeAreaInsets(); const video = React.useRef(null); - const [width, setWidth] = useState(Dimensions.get("window").width); - const [position, setPosition] = useState("100%"); + const [width, setWidth] = useState(Dimensions.get('window').width); + const [position, setPosition] = useState('100%'); const setBoxPosition = () => { LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); - setPosition(position === "100%" ? "0%" : "100%"); + setPosition(position === '100%' ? '0%' : '100%'); }; - const onFullscreenUpdate = async ({ fullscreenUpdate }) => { - if (fullscreenUpdate === Video.FULLSCREEN_UPDATE_PLAYER_DID_PRESENT) { - await ScreenOrientation.unlockAsync(); - } else if ( - fullscreenUpdate === Video.FULLSCREEN_UPDATE_PLAYER_WILL_DISMISS - ) { - await ScreenOrientation.lockAsync( - ScreenOrientation.OrientationLock.PORTRAIT - ); - } - }; + // const onFullscreenUpdate = async ({fullscreenUpdate}) => { + // if (fullscreenUpdate === Video.FULLSCREEN_UPDATE_PLAYER_DID_PRESENT) { + // await ScreenOrientation.unlockAsync(); + // } else if ( + // fullscreenUpdate === Video.FULLSCREEN_UPDATE_PLAYER_WILL_DISMISS + // ) { + // await ScreenOrientation.lockAsync( + // ScreenOrientation.OrientationLock.PORTRAIT, + // ); + // } + // }; React.useEffect(() => { - video.current.replayAsync(); - video.current.playAsync(); + // video.current.replayAsync(); + // video.current.playAsync(); }, [route]); return ( + style={{flex: 1, paddingTop: insets.top, paddingBottom: insets.bottom}}> setWidth(Dimensions.get("window").width)} - > - {!mobile ? : null} - + onLayout={() => setWidth(Dimensions.get('window').width)}> + {!mobile ? : null} +