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.
 
 
 
 
 

170 lines
4.6 KiB

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 (
<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> : null}
<View style={tw("flex ")}>
<Video
ref={video}
style={{
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 },
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%",
}}
/>
<Text
style={{
fontSize: fontSize.xl,
fontFamily: "bold",
marginTop: mobile ? 20 : 12,
color:
theme === "light" ? Colors.theme1.gray20 : Colors.theme1.white,
textAlign: "right",
}}
>
{route.params.unit?.name}
</Text>
<View
style={[
tw("flex flex-1 justify-between"),
{
paddingRight: 10,
},
]}
>
<Divider type={"vertical"} />
</View>
{route?.params?.videoBuyed ? (
<Season
season={route.params.season}
videoBuyed={route.params.videoBuyed}
activeUnit={route.params.unit}
name={route.params.name}
/>
) : null}
</View>
</ScrollView>
</SafeAreaView>
);
}
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);