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"; //components 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"; //assets import posterImage from "../../assets/images/poster.png"; const ios = Platform.OS === "ios"; function VideoDisplay({ route, mobile, theme }) { const video = React.useRef(null); 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%"); }; 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(); }, [route]); return ( setWidth(Dimensions.get("window").width)} > {!mobile ? : null} ); } const styles = StyleSheet.create({ contentContainerStyle: { paddingBottom: 100, }, container: { paddingVertical: 5, paddingHorizontal: 16, }, }); const mapStateToProps = (state) => ({ grades: state.publicApi.grades, mobile: state.publicApi.mobile, theme: state.publicApi.theme, }); export default connect(mapStateToProps)(VideoDisplay);