diff --git a/navigation/index.js b/navigation/index.js index 99c29d8..bd34215 100644 --- a/navigation/index.js +++ b/navigation/index.js @@ -2,7 +2,12 @@ import React from "react"; import { NavigationContainer } from "@react-navigation/native"; import { createNativeStackNavigator } from "@react-navigation/native-stack"; import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; -import { Entypo, FontAwesome, Ionicons, MaterialIcons } from "@expo/vector-icons"; +import { + Entypo, + FontAwesome, + Ionicons, + MaterialIcons, +} from "@expo/vector-icons"; import OrderDetails from "../src/screens/OrderDetails"; import OrdersFollowUp from "../src/screens/OrdersFollowUp"; import { Dimensions } from "react-native"; @@ -13,7 +18,7 @@ import Login from "../src/screens/Login"; import Otp from "../src/screens/Otp"; import Product from "../src/screens/Product"; import QR from "../src/screens/QR"; -import Faq from "../src/screens/Faq" +import Faq from "../src/screens/Faq"; import Activation from "../src/screens/Activation"; import { connect } from "react-redux"; import Profile from "../src/screens/Profile"; @@ -21,6 +26,7 @@ import Videos from "../src/screens/Videos"; import Exams from "../src/screens/Exams"; import ShoppingCart from "../src/screens/ShoppingCart"; import Video from "../src/screens/Video"; +import VideoDisplay from "../src/screens/VideoDisplay"; const width = Dimensions.get("window").width; @@ -71,7 +77,11 @@ const BottomTabNavigator = () => { component={VODStackScreen} options={{ tabBarIcon: ({ focused, color }) => ( - + ), }} /> @@ -121,9 +131,7 @@ const HomeStackScreen = () => { const ProductsStack = createNativeStackNavigator(); const ProductsStackScreen = () => { return ( - + @@ -137,11 +145,10 @@ const ProductsStackScreen = () => { const VODStack = createNativeStackNavigator(); const VODStackScreen = () => { return ( - + + @@ -166,7 +173,7 @@ const AuthStackScreen = () => { const OrderStack = createNativeStackNavigator(); const OrderStackScreen = () => { - return( + return ( { ); -} +}; const Stack = createNativeStackNavigator(); -const Navigation = ({ }) => { +const Navigation = ({}) => { return ( { }; const mapStateToProps = (state) => { - return { - - }; + return {}; }; export default connect(mapStateToProps)(Navigation); diff --git a/package.json b/package.json index b43b309..23e71f1 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "axios": "^0.24.0", "expo": "^44.0.1", "expo-app-loading": "~1.3.0", + "expo-av": "~10.2.0", "expo-barcode-scanner": "~11.2.0", "expo-camera": "~12.1.0", "expo-device": "~4.1.0", @@ -49,6 +50,5 @@ "devDependencies": { "@babel/core": "^7.12.9" }, - "private": true } diff --git a/src/assets/video.mp4 b/src/assets/video.mp4 new file mode 100644 index 0000000..fd6954b Binary files /dev/null and b/src/assets/video.mp4 differ diff --git a/src/screens/Video/components/Season.js b/src/screens/Video/components/Season.js index b8593ba..fff6175 100644 --- a/src/screens/Video/components/Season.js +++ b/src/screens/Video/components/Season.js @@ -8,9 +8,11 @@ import { } from "react-native"; import tw from "tailwind-rn"; import Colors from "../../../constants/Colors"; +import { useNavigation } from "@react-navigation/native"; const { width, height } = Dimensions.get("window"); const Season = ({ season }) => { + const navigation = useNavigation(); const [activeSeason, setActiveSeason] = useState(null); const Unit = ({ unit }) => { return ( @@ -66,6 +68,7 @@ const Season = ({ season }) => { backgroundColor: Colors.theme1.light.blue8, }, ]} + onPress={() => navigation.navigate("VideoDisplay")} > - { + const navigation = useNavigation(); + const Unit = ({ unit }) => { + return ( + + + + {unit.name} + + + {unit.duration} + + + + {unit.play && ( + navigation.navigate("VideoDisplay")} + > + + نمایش + + + )} + {unit.download && ( + + + دانلود + + + )} + + + ); + }; + return ( + + + + {season.name} + + + {season.duration} + + + + {season.units.map((unit, index) => ( + + ))} + + ); +}; + +export default Season; diff --git a/src/screens/VideoDisplay/index.js b/src/screens/VideoDisplay/index.js new file mode 100644 index 0000000..9b69cac --- /dev/null +++ b/src/screens/VideoDisplay/index.js @@ -0,0 +1,102 @@ +import React, { useState } from "react"; +import { + View, + StyleSheet, + Dimensions, + ScrollView, + SafeAreaView, + StatusBar, + LayoutAnimation, +} from "react-native"; +import { connect } from "react-redux"; +import Navbar from "../../components/Navbar"; +import Drawer from "../../components/Drawer"; +import { Video, AVPlaybackStatus } from "expo-av"; +import tw from "tailwind-rn"; +import Season from './components/Season'; +import movie from "../../assets/video.mp4"; + +const { height, width } = Dimensions.get("window"); + +function VideoDisplay({ + product = { + type: "کتاب ها", + name: "ریاضی", + grade: "پایه هفتم ابتدایی", + video: movie, + season: { + name: "فصل اول: مباحث جوشش مواد مذاب در مرکز زمین", + duration: "2:30:13", + units: [ + { + name: "مقدمه جالب توجه نویسنده کتاب برای شما", + duration: "14:30", + download: true, + play: true, + }, + { + name: "چگونگی ساخت نیروگاه‌های برقی ", + duration: "14:30", + download: false, + play: true, + }, + { + name: "آیا گوگل از ما دزدی می‌کند ؟", + duration: "14:30", + download: true, + play: true, + }, + ], + }, + }, +}) { + const video = React.useRef(null); + const [status, setStatus] = React.useState({}); + const [position, setPosition] = useState("100%"); + const setBoxPosition = () => { + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); + setPosition(position === "100%" ? "0%" : "100%"); + }; + return ( + + + + + + + + + ); +} + +const styles = StyleSheet.create({ + contentContainerStyle: { + paddingBottom: 100, + }, + container: { + width: Dimensions.get("window").width, + backgroundColor: "white", + flexDirection: "column", + paddingVertical: 5, + paddingHorizontal: 16, + }, +}); +export default VideoDisplay; diff --git a/yarn.lock b/yarn.lock index a22da5d..44b04c8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2842,6 +2842,13 @@ expo-asset@~8.4.5: path-browserify "^1.0.0" url-parse "^1.4.4" +expo-av@~10.2.0: + version "10.2.0" + resolved "https://registry.yarnpkg.com/expo-av/-/expo-av-10.2.0.tgz#4bc4b1f409f3ad2e247586f22e4fb9e1aa666b0a" + integrity sha512-jo7Nv3IgJPAiOerKRwlL4guKkULZfvE5KIRZmgLurgPvJFHHAye4pFe2IlqQftKd66NHo1vq2zIGF3B3fsTPmw== + dependencies: + "@expo/config-plugins" "^4.0.2" + expo-barcode-scanner@~11.2.0: version "11.2.0" resolved "https://registry.yarnpkg.com/expo-barcode-scanner/-/expo-barcode-scanner-11.2.0.tgz#9d316a36962f74f117f19f7c722de1334a4fd8d2"