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.
 
 
 
 
 

131 lines
3.4 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";
//assets
import tw from "tailwind-rn";
import fontSize from "../../constants/fontSize";
import Colors from "../../constants/Colors";
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%");
};
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={() => video.current.presentFullscreenPlayer()}
>
{!mobile ? <View style={tw("mt-5")}></View> : null}
<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="contain"
/>
<Text
style={{
fontSize: fontSize.xl,
fontFamily: "bold",
marginTop: mobile ? 8 : 12,
color:
theme === "light" ? Colors.theme1.gray20 : Colors.theme1.white,
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: {
paddingVertical: 5,
paddingHorizontal: 16,
},
});
const mapStateToProps = (state) => ({
grades: state.publicApi.grades,
mobile: state.publicApi.mobile,
theme: state.publicApi.theme,
});
export default connect(mapStateToProps)(VideoDisplay);