You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							142 lines
						
					
					
						
							3.9 KiB
						
					
					
				
			
		
		
	
	
							142 lines
						
					
					
						
							3.9 KiB
						
					
					
				| import React, { useState, useEffect } from "react"; | |
| import { | |
|   View, | |
|   StyleSheet, | |
|   Dimensions, | |
|   ScrollView, | |
|   SafeAreaView, | |
|   StatusBar, | |
|   LayoutAnimation, | |
|   Appearance, | |
|   Text, | |
|   Platform, | |
| } from "react-native"; | |
| import { connect } from "react-redux"; | |
| import { publicApi } from "../../redux/actions"; | |
| 
 | |
| //components | |
| import Navbar from "../../components/Navbar"; | |
| import Drawer from "../../components/Drawer"; | |
| import { Video } from "expo-av"; | |
| import * as ScreenOrientation from "expo-screen-orientation"; | |
| import Season from "./components/Season"; | |
| import Divider from "../../components/Divider"; | |
| 
 | |
| import tw from "tailwind-rn"; | |
| import fontSize from "../../constants/fontSize"; | |
| import Colors from "../../constants/Colors"; | |
| 
 | |
| const ios = Platform.OS === "ios"; | |
| 
 | |
| function VideoDisplay({ route, mobile }) { | |
|   const colorScheme = Appearance.getColorScheme(); | |
|   const video = React.useRef(null); | |
|   const [width, setWidth] = useState(Dimensions.get("window").width); | |
|   const [status, setStatus] = React.useState({}); | |
|   const [position, setPosition] = useState("100%"); | |
| 
 | |
|   const setBoxPosition = () => { | |
|     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); | |
|     setPosition(position === "100%" ? "0%" : "100%"); | |
|   }; | |
| 
 | |
|   function setOrientation() { | |
|     if (Dimensions.get("window").height > Dimensions.get("window").width) { | |
|       //Device is in portrait mode, rotate to landscape mode. | |
|       ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE); | |
|     } else { | |
|       //Device is in landscape mode, rotate to portrait mode. | |
|       ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT); | |
|     } | |
|   } | |
| 
 | |
|   return ( | |
|     <SafeAreaView | |
|       style={{ | |
|         paddingTop: !ios ? StatusBar.currentHeight : 0, | |
|         position: "relative", | |
|       }} | |
|     > | |
|       <Navbar | |
|         setBoxPosition={setBoxPosition} | |
|         headerOptions={{ | |
|           logo: false, | |
|           menu: true, | |
|           hamburgerMenu: false, | |
|           title: "", | |
|           bookmark: false, | |
|           qr: false, | |
|           back: true, | |
|         }} | |
|       /> | |
|       <Drawer setBoxPosition={setBoxPosition} position={position} /> | |
|       <ScrollView | |
|         contentContainerStyle={styles.contentContainerStyle} | |
|         style={styles.container} | |
|         onLayout={() => setWidth(Dimensions.get("window").width)} | |
|       > | |
|         {!mobile && <View style={tw("mt-5")}></View>} | |
| 
 | |
|         <View style={tw("flex ")}> | |
|           <Video | |
|             ref={video} | |
|             style={{ width: "100%", height: (width * 9) / 16 - 16 }} | |
|             source={{ | |
|               uri: `https://dnvn.ir/api/v1/file/${route.params.unit?.fileIds}`, | |
|             }} | |
|             useNativeControls | |
|             resizeMode="cover" | |
|             onFullscreenUpdate={setOrientation} | |
|             isLooping | |
|             onPlaybackStatusUpdate={(status) => setStatus(() => status)} | |
|           /> | |
|           <Text | |
|             style={{ | |
|               fontSize: fontSize.xl, | |
|               fontFamily: "bold", | |
|               marginTop: mobile ? 8 : 12, | |
|               color: Colors.theme1[colorScheme].gray20, | |
|               textAlign: ios ? "right" : "auto", | |
|             }} | |
|           > | |
|             {route.params.unit?.name} | |
|           </Text> | |
|           <View | |
|             style={[ | |
|               tw("flex  flex-1 justify-between"), | |
|               { | |
|                 paddingRight: 10, | |
|               }, | |
|             ]} | |
|           > | |
|             <Divider type={"vertical"} /> | |
|           </View> | |
|           <Season | |
|             season={route.params.season} | |
|             activeUnit={route.params.unit} | |
|             name={route.params.name} | |
|           /> | |
|         </View> | |
|       </ScrollView> | |
|     </SafeAreaView> | |
|   ); | |
| } | |
| 
 | |
| const styles = StyleSheet.create({ | |
|   contentContainerStyle: { | |
|     paddingBottom: 100, | |
|   }, | |
|   container: { | |
|     backgroundColor: "white", | |
|     flexDirection: "column", | |
|     paddingVertical: 5, | |
|     paddingHorizontal: 16, | |
|   }, | |
| }); | |
| 
 | |
| const mapStateToProps = (state) => ({ | |
|   grades: state.publicApi.grades, | |
|   mobile: state.publicApi.mobile, | |
| }); | |
| 
 | |
| export default connect(mapStateToProps)(VideoDisplay);
 | |
| 
 |