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);