reza added VideoDisplay

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 }) => (
-            <MaterialIcons name="ondemand-video" size={focused ? 27 : 23} color={color} />
+            <MaterialIcons
+              name="ondemand-video"
+              size={focused ? 27 : 23}
+              color={color}
+            />
           ),
         }}
       />
@@ -121,9 +131,7 @@ const HomeStackScreen = () => {
 const ProductsStack = createNativeStackNavigator();
 const ProductsStackScreen = () => {
   return (
-    <ProductsStack.Navigator
+    <ProductsStack.Navigator screenOptions={{ headerShown: false }}>
-      screenOptions={{ headerShown: false }}
-    >
       <ProductsStack.Screen name="Products" component={Products} />
       <ProductsStack.Screen name="QR" component={QR} />
       <ProductsStack.Screen name="Product" component={Product} />
@@ -137,11 +145,10 @@ const ProductsStackScreen = () => {
 const VODStack = createNativeStackNavigator();
 const VODStackScreen = () => {
   return (
-    <VODStack.Navigator
+    <VODStack.Navigator screenOptions={{ headerShown: false }}>
-      screenOptions={{ headerShown: false }}
-    >
       <VODStack.Screen name="VOD" component={Videos} />
       <VODStack.Screen name="Video" component={Video} />
+      <VODStack.Screen name="VideoDisplay" component={VideoDisplay} />
       <VODStack.Screen name="QR" component={QR} />
       <VODStack.Screen name="Orders" component={OrderStackScreen} />
       <VODStack.Screen name="Faq" component={Faq} />
@@ -175,7 +182,7 @@ const OrderStackScreen = () => {
       <OrderStack.Screen name="Order" component={OrderDetails} />
     </OrderStack.Navigator>
   );
-}
+};
 
 const Stack = createNativeStackNavigator();
 const Navigation = ({}) => {
@@ -195,9 +202,7 @@ const Navigation = ({ }) => {
 };
 
 const mapStateToProps = (state) => {
-  return {
+  return {};
-   
-  };
 };
 
 export default connect(mapStateToProps)(Navigation);

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
 }

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")}
             >
               <Text
                 style={{

src/screens/Video/index.js

@@ -97,7 +97,6 @@ function Product({
               ]}
             />
           </View>
-
           <View
             style={[
               tw("flex flex-col flex-1 justify-between"),

src/screens/VideoDisplay/components/Season/index.js

@@ -0,0 +1,147 @@
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  Dimensions,
+  Pressable,
+} 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 Unit = ({ unit }) => {
+    return (
+      <View
+        style={[
+          tw("w-full flex flex-col rounded-md overflow-hidden mb-3"),
+          { borderWidth: 1, borderColor: Colors.theme1.light.blue3 },
+        ]}
+      >
+        <View
+          style={[
+            tw(
+              "w-full flex flex-row-reverse justify-between items-center py-1.5 px-2"
+            ),
+            {
+              borderBottomWidth: 1,
+              borderColor: Colors.theme1.light.blue3,
+              backgroundColor: Colors.theme1.light.blue8,
+            },
+          ]}
+        >
+          <Text
+            style={[
+              {
+                fontFamily: "regular",
+                fontSize: width / 34,
+                color: Colors.theme1.light.blue5,
+              },
+            ]}
+          >
+            {unit.name}
+          </Text>
+          <Text
+            style={[
+              {
+                fontFamily: "regular",
+                fontSize: width / 36,
+                color: Colors.theme1.light.blue5,
+              },
+            ]}
+          >
+            {unit.duration}
+          </Text>
+        </View>
+        <View style={[tw("w-full flex flex-row-reverse")]}>
+          {unit.play && (
+            <Pressable
+              style={[
+                tw("flex flex-1 flex-row items-center py-1.5 px-2"),
+                {
+                  borderLeftWidth: 1,
+                  borderColor: Colors.theme1.light.blue3,
+                  backgroundColor: Colors.theme1.light.blue8,
+                },
+              ]}
+              onPress={() => navigation.navigate("VideoDisplay")}
+            >
+              <Text
+                style={{
+                  width: "100%",
+                  textAlign: "center",
+                  fontFamily: "regular",
+                  fontSize: width / 34,
+                  color: Colors.theme1.light.blue5,
+                }}
+              >
+                نمایش
+              </Text>
+            </Pressable>
+          )}
+          {unit.download && (
+            <Pressable
+              style={tw("flex flex-1 flex-row items-center py-1.5 px-2")}
+            >
+              <Text
+                style={{
+                  width: "100%",
+                  textAlign: "center",
+                  fontFamily: "regular",
+                  fontSize: width / 34,
+                  color: Colors.theme1.light.blue5,
+                  backgroundColor: Colors.theme1.light.blue8,
+                }}
+              >
+                دانلود
+              </Text>
+            </Pressable>
+          )}
+        </View>
+      </View>
+    );
+  };
+  return (
+    <View style={tw("w-full flex flex-col mt-5")}>
+      <Pressable
+        style={[
+          tw(
+            "flex flex-row-reverse justify-between items-center rounded-md py-2 px-3 mb-3"
+          ),
+          { backgroundColor: Colors.theme1.light.blue5 },
+        ]}
+      >
+        <Text
+          style={[
+            {
+              fontFamily: "regular",
+              fontSize: width / 34,
+              color: "white",
+            },
+          ]}
+        >
+          {season.name}
+        </Text>
+        <Text
+          style={[
+            {
+              fontFamily: "regular",
+              fontSize: width / 36,
+              color: "white",
+            },
+          ]}
+        >
+          {season.duration}
+        </Text>
+      </Pressable>
+
+      {season.units.map((unit, index) => (
+        <Unit unit={unit} key={index} />
+      ))}
+    </View>
+  );
+};
+
+export default Season;

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 (
+    <SafeAreaView
+      style={{
+        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
+        position: "relative",
+      }}
+    >
+      <Navbar setBoxPosition={setBoxPosition} back={true} />
+      <Drawer setBoxPosition={setBoxPosition} position={position} />
+      <ScrollView
+        contentContainerStyle={styles.contentContainerStyle}
+        style={styles.container}
+      >
+        <View style={tw("flex flex-col")}>
+          <Video
+            ref={video}
+            style={{ width: "100%", height: (width * 9) / 16 - 16 }}
+            source={product.video}
+            useNativeControls
+            resizeMode="cover"
+            isLooping
+            onPlaybackStatusUpdate={(status) => setStatus(() => status)}
+          />
+          <Season season={product.season} />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  contentContainerStyle: {
+    paddingBottom: 100,
+  },
+  container: {
+    width: Dimensions.get("window").width,
+    backgroundColor: "white",
+    flexDirection: "column",
+    paddingVertical: 5,
+    paddingHorizontal: 16,
+  },
+});
+export default VideoDisplay;

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"