|  |  |  | @ -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 ( | 
			
		
	
		
			
				
					|  |  |  |  |     <SafeAreaView | 
			
		
	
		
			
				
					|  |  |  |  |       style={{ | 
			
		
	
		
			
				
					|  |  |  |  |         paddingTop: !ios ? StatusBar.currentHeight : 0, | 
			
		
	
		
			
				
					|  |  |  |  |         position: "relative", | 
			
		
	
		
			
				
					|  |  |  |  |       }} | 
			
		
	
		
			
				
					|  |  |  |  |     > | 
			
		
	
		
			
				
					|  |  |  |  |       style={{flex: 1, paddingTop: insets.top, paddingBottom: insets.bottom}}> | 
			
		
	
		
			
				
					|  |  |  |  |       <Navbar | 
			
		
	
		
			
				
					|  |  |  |  |         setBoxPosition={setBoxPosition} | 
			
		
	
		
			
				
					|  |  |  |  |         headerOptions={{ | 
			
		
	
		
			
				
					|  |  |  |  |           logo: false, | 
			
		
	
		
			
				
					|  |  |  |  |           menu: true, | 
			
		
	
		
			
				
					|  |  |  |  |           hamburgerMenu: false, | 
			
		
	
		
			
				
					|  |  |  |  |           title: "", | 
			
		
	
		
			
				
					|  |  |  |  |           title: '', | 
			
		
	
		
			
				
					|  |  |  |  |           bookmark: false, | 
			
		
	
		
			
				
					|  |  |  |  |           qr: false, | 
			
		
	
		
			
				
					|  |  |  |  |           back: true, | 
			
		
	
	
		
			
				
					|  |  |  | @ -81,61 +78,58 @@ function VideoDisplay({ route, mobile, theme }) { | 
			
		
	
		
			
				
					|  |  |  |  |       <ScrollView | 
			
		
	
		
			
				
					|  |  |  |  |         contentContainerStyle={styles.contentContainerStyle} | 
			
		
	
		
			
				
					|  |  |  |  |         style={styles.container} | 
			
		
	
		
			
				
					|  |  |  |  |         onLayout={() => setWidth(Dimensions.get("window").width)} | 
			
		
	
		
			
				
					|  |  |  |  |       > | 
			
		
	
		
			
				
					|  |  |  |  |         {!mobile ? <View style={tw("mt-5")}></View> : null} | 
			
		
	
		
			
				
					|  |  |  |  |         <View style={tw("flex ")}> | 
			
		
	
		
			
				
					|  |  |  |  |         onLayout={() => setWidth(Dimensions.get('window').width)}> | 
			
		
	
		
			
				
					|  |  |  |  |         {!mobile ? <View style={tw('mt-5')}></View> : null} | 
			
		
	
		
			
				
					|  |  |  |  |         <View style={tw('flex')}> | 
			
		
	
		
			
				
					|  |  |  |  |           <Video | 
			
		
	
		
			
				
					|  |  |  |  |             source={{ | 
			
		
	
		
			
				
					|  |  |  |  |               uri: `https://dnvn.ir/api/v1/file/${route.params.unit?.fileIds}`, | 
			
		
	
		
			
				
					|  |  |  |  |             }} // Can be a URL or a local file.
 | 
			
		
	
		
			
				
					|  |  |  |  |             ref={video} | 
			
		
	
		
			
				
					|  |  |  |  |             resizeMode="cover" | 
			
		
	
		
			
				
					|  |  |  |  |             fullscreen={true} | 
			
		
	
		
			
				
					|  |  |  |  |             fullscreenOrientation='landscape' | 
			
		
	
		
			
				
					|  |  |  |  |             // Store reference
 | 
			
		
	
		
			
				
					|  |  |  |  |             onBuffer={() => {}} // Callback when remote video is buffering
 | 
			
		
	
		
			
				
					|  |  |  |  |             onError={() => {}} // Callback when video cannot be loaded
 | 
			
		
	
		
			
				
					|  |  |  |  |             style={{ | 
			
		
	
		
			
				
					|  |  |  |  |               width: "100%", | 
			
		
	
		
			
				
					|  |  |  |  |               width: '100%', | 
			
		
	
		
			
				
					|  |  |  |  |               height: (width * 3) / 4.57 - 16, | 
			
		
	
		
			
				
					|  |  |  |  |               borderWidth: 1, | 
			
		
	
		
			
				
					|  |  |  |  |               borderColor: | 
			
		
	
		
			
				
					|  |  |  |  |                 theme === "light" | 
			
		
	
		
			
				
					|  |  |  |  |                   ? Colors.theme1.gray2077 + "66" | 
			
		
	
		
			
				
					|  |  |  |  |                   : Colors.theme1.white + "55", | 
			
		
	
		
			
				
					|  |  |  |  |               shadowColor: "#00000055", | 
			
		
	
		
			
				
					|  |  |  |  |               shadowOffset: { width: 0, height: 1 }, | 
			
		
	
		
			
				
					|  |  |  |  |                 theme === 'light' | 
			
		
	
		
			
				
					|  |  |  |  |                   ? Colors.theme1.gray2077 + '66' | 
			
		
	
		
			
				
					|  |  |  |  |                   : Colors.theme1.white + '55', | 
			
		
	
		
			
				
					|  |  |  |  |               shadowColor: '#00000055', | 
			
		
	
		
			
				
					|  |  |  |  |               shadowOffset: {width: 0, height: 1}, | 
			
		
	
		
			
				
					|  |  |  |  |               shadowOpacity: 0.8, | 
			
		
	
		
			
				
					|  |  |  |  |               shadowRadius: 2, | 
			
		
	
		
			
				
					|  |  |  |  |               elevation: 5, | 
			
		
	
		
			
				
					|  |  |  |  |               zIndex : 100, | 
			
		
	
		
			
				
					|  |  |  |  |             }} | 
			
		
	
		
			
				
					|  |  |  |  |             source={{ | 
			
		
	
		
			
				
					|  |  |  |  |               uri: `https://dnvn.ir/api/v1/file/${route.params.unit?.fileIds}`, | 
			
		
	
		
			
				
					|  |  |  |  |             }} | 
			
		
	
		
			
				
					|  |  |  |  |             useNativeControls | 
			
		
	
		
			
				
					|  |  |  |  |             resizeMode="cover" | 
			
		
	
		
			
				
					|  |  |  |  |             onFullscreenUpdate={onFullscreenUpdate} | 
			
		
	
		
			
				
					|  |  |  |  |             usePoster={true} | 
			
		
	
		
			
				
					|  |  |  |  |             posterSource={posterImage} | 
			
		
	
		
			
				
					|  |  |  |  |             posterStyle={{ | 
			
		
	
		
			
				
					|  |  |  |  |               width: "100%", | 
			
		
	
		
			
				
					|  |  |  |  |               height: "100%", | 
			
		
	
		
			
				
					|  |  |  |  |               zIndex: 100, | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |             }} | 
			
		
	
		
			
				
					|  |  |  |  |             controls | 
			
		
	
		
			
				
					|  |  |  |  |             // poster={{ uri : posterImage }}
 | 
			
		
	
		
			
				
					|  |  |  |  |           /> | 
			
		
	
		
			
				
					|  |  |  |  |           <Text | 
			
		
	
		
			
				
					|  |  |  |  |             style={{ | 
			
		
	
		
			
				
					|  |  |  |  |               fontSize: fontSize.xl, | 
			
		
	
		
			
				
					|  |  |  |  |               fontFamily: "Medium", | 
			
		
	
		
			
				
					|  |  |  |  |               fontFamily: 'Medium', | 
			
		
	
		
			
				
					|  |  |  |  |               marginTop: mobile ? 20 : 12, | 
			
		
	
		
			
				
					|  |  |  |  |               color: | 
			
		
	
		
			
				
					|  |  |  |  |                 theme === "light" ? Colors.theme1.gray20 : Colors.theme1.white, | 
			
		
	
		
			
				
					|  |  |  |  |               textAlign: "right", | 
			
		
	
		
			
				
					|  |  |  |  |             }} | 
			
		
	
		
			
				
					|  |  |  |  |           > | 
			
		
	
		
			
				
					|  |  |  |  |                 theme === 'light' ? Colors.theme1.gray20 : Colors.theme1.white, | 
			
		
	
		
			
				
					|  |  |  |  |               textAlign: 'right', | 
			
		
	
		
			
				
					|  |  |  |  |             }}> | 
			
		
	
		
			
				
					|  |  |  |  |             {route.params.unit?.name} | 
			
		
	
		
			
				
					|  |  |  |  |           </Text> | 
			
		
	
		
			
				
					|  |  |  |  |           <View | 
			
		
	
		
			
				
					|  |  |  |  |             style={[ | 
			
		
	
		
			
				
					|  |  |  |  |               tw("flex  flex-1 justify-between"), | 
			
		
	
		
			
				
					|  |  |  |  |               tw('flex  flex-1 justify-between'), | 
			
		
	
		
			
				
					|  |  |  |  |               { | 
			
		
	
		
			
				
					|  |  |  |  |                 paddingRight: 10, | 
			
		
	
		
			
				
					|  |  |  |  |               }, | 
			
		
	
		
			
				
					|  |  |  |  |             ]} | 
			
		
	
		
			
				
					|  |  |  |  |           > | 
			
		
	
		
			
				
					|  |  |  |  |             <Divider type={"vertical"} /> | 
			
		
	
		
			
				
					|  |  |  |  |             ]}> | 
			
		
	
		
			
				
					|  |  |  |  |             <Divider type={'vertical'} /> | 
			
		
	
		
			
				
					|  |  |  |  |           </View> | 
			
		
	
		
			
				
					|  |  |  |  |           {route?.params?.videoBuyed ? ( | 
			
		
	
		
			
				
					|  |  |  |  |             <Season | 
			
		
	
	
		
			
				
					|  |  |  | @ -161,7 +155,7 @@ const styles = StyleSheet.create({ | 
			
		
	
		
			
				
					|  |  |  |  |   }, | 
			
		
	
		
			
				
					|  |  |  |  | }); | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | const mapStateToProps = (state) => ({ | 
			
		
	
		
			
				
					|  |  |  |  | const mapStateToProps = state => ({ | 
			
		
	
		
			
				
					|  |  |  |  |   grades: state.publicApi.grades, | 
			
		
	
		
			
				
					|  |  |  |  |   mobile: state.publicApi.mobile, | 
			
		
	
		
			
				
					|  |  |  |  |   theme: state.publicApi.theme, | 
			
		
	
	
		
			
				
					|  |  |  | 
 |