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

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