reza added Video

navigation/index.js

@@ -20,6 +20,7 @@ import Profile from "../src/screens/Profile";
 import Videos from "../src/screens/Videos";
 import Exams from "../src/screens/Exams";
 import ShoppingCart from "../src/screens/ShoppingCart";
+import Video from "../src/screens/Video";
 
 const width = Dimensions.get("window").width;
 
@@ -140,6 +141,7 @@ const VODStackScreen = () => {
       screenOptions={{ headerShown: false }}
     >
       <VODStack.Screen name="VOD" component={Videos} />
+      <VODStack.Screen name="Video" component={Video} />
       <VODStack.Screen name="QR" component={QR} />
       <VODStack.Screen name="Orders" component={OrderStackScreen} />
       <VODStack.Screen name="Faq" component={Faq} />

src/redux/proxy.js

@@ -150,10 +150,10 @@ class Proxy {
       console.log("proxy logout error : ", error);
     }
   };
-  status = () => {
+  status = async () => {
     try {
-      let refresh = AsyncStorage.getItem("refresh");
-      let userData = AsyncStorage.getItem("userData");
+      let refresh = await AsyncStorage.getItem("refresh");
+      let userData = await AsyncStorage.getItem("userData");
       if (!refresh) return false;
       if (refresh == "undefined") {
         const keys = ["refresh", "access", "userData"];

src/redux/reducers/user.js

@@ -1,8 +1,13 @@
 import proxy from "../proxy";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 
+const checkStatus = async () => {
+  let status = await proxy.status();
+  return status;
+}
+
 let initialState = {
-  status: proxy.status(),
+  status: checkStatus(),
   loading: false,
   error: null,
   list: null,

src/screens/Home/index.js

@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
+import React, { useState, useEffect } from "react";
+import { connect } from "react-redux";
 import {
   View,
   StyleSheet,
@@ -21,7 +21,7 @@ import Drawer from "../../components/Drawer";
 // import { SafeAreaView } from 'react-native-safe-area-context';
 
 // Within your render function
-function Home(props) {
+const Home = ({ isLogin }) => {
   const [position, setPosition] = useState("100%");
 
   const setBoxPosition = () => {
@@ -49,7 +49,7 @@ function Home(props) {
       </ScrollView>
     </SafeAreaView>
   );
-}
+};
 
 // Later on in your styles..
 const styles = StyleSheet.create({
@@ -65,4 +65,10 @@ const styles = StyleSheet.create({
   },
 });
 
-export default Home;
+const mapStateToProps = (state) => ({
+  isLogin: state.user.status,
+});
+
+const mapDispatchToProps = {};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Home);

src/screens/Splash/index.js

@@ -5,8 +5,7 @@ import Logo from "../../assets/images/logo.png";
 
 const { width, height } = Dimensions.get("window");
 
-function Splash({ navigation, isLogin, loading}) {
-  
+function Splash({ navigation, isLogin}) {
   useEffect(() => {
     setTimeout(() => {
       !isLogin
@@ -33,7 +32,6 @@ function Splash({ navigation, isLogin, loading}) {
 
 const mapStateToProps = (state) => ({
   isLogin: state.user.status,
-  loading : state.userProduct.loading,
 });
 
 const mapDispatchToProps = {};

src/screens/Video/components/Season.js

@@ -0,0 +1,148 @@
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  Dimensions,
+  Pressable,
+  TouchableOpacity,
+} from "react-native";
+import tw from "tailwind-rn";
+import Colors from "../../../constants/Colors";
+const { width, height } = Dimensions.get("window");
+
+const Season = ({ season }) => {
+  const [activeSeason, setActiveSeason] = useState(null);
+  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,
+                },
+              ]}
+            >
+              <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")}>
+      <TouchableOpacity
+        style={[
+          tw(
+            "flex flex-row-reverse justify-between items-center rounded-md py-2 px-3 mb-3"
+          ),
+          { backgroundColor: Colors.theme1.light.blue5 },
+        ]}
+        onPress={() =>
+          setActiveSeason(season.name === activeSeason ? null : season.name)
+        }
+      >
+        <Text
+          style={[
+            {
+              fontFamily: "regular",
+              fontSize: width / 34,
+              color: "white",
+            },
+          ]}
+        >
+          {season.name}
+        </Text>
+        <Text
+          style={[
+            {
+              fontFamily: "regular",
+              fontSize: width / 36,
+              color: "white",
+            },
+          ]}
+        >
+          {season.duration}
+        </Text>
+      </TouchableOpacity>
+
+      {season.name === activeSeason &&
+        season.units.map((unit, index) => <Unit unit={unit} key={index} />)}
+    </View>
+  );
+};
+
+export default Season;

src/screens/Video/index.js

@@ -0,0 +1,157 @@
+import React, { useState } from "react";
+import {
+  View,
+  StyleSheet,
+  Dimensions,
+  ScrollView,
+  SafeAreaView,
+  StatusBar,
+  LayoutAnimation,
+  Image,
+  Text,
+} from "react-native";
+import { connect } from "react-redux";
+import userImage from "./assets/user.png";
+import poster from "./assets/poster.png";
+import Navbar from "../../components/Navbar";
+import Drawer from "../../components/Drawer";
+import Divider from "../../components/Divider";
+import Season from "./components/Season";
+import tw from "tailwind-rn";
+
+const { height, width } = Dimensions.get("window");
+
+function Product({
+  product = {
+    type: "کتاب ها",
+    name: "ریاضی",
+    price: "145.000 تومان",
+    imageUrl: "https://dnvn.ir/api/v1/file/2105",
+    poster: poster,
+    grade: "پایه هفتم ابتدایی",
+    seasons: [
+      {
+        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 [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")}>
+          <View
+            style={[
+              tw(
+                "w-full flex flex-row flex-1 justify-between items-center relative overflow-hidden"
+              ),
+              { height: height / 3.8 },
+            ]}
+          >
+            <Image
+              source={product.poster}
+              style={tw("w-full rounded-md h-full absolute left-0 top-0")}
+            />
+            <Image
+              source={{ uri: product.imageUrl }}
+              style={[
+                tw("rounded-md h-full rounded-md ml-2"),
+                { width: 70, height: 100 },
+              ]}
+            />
+          </View>
+
+          <View
+            style={[
+              tw("flex flex-col flex-1 justify-between"),
+              {
+                paddingRight: 10,
+              },
+            ]}
+          >
+            <View style={tw("flex flex-col")}>
+              <Text
+                style={{
+                  marginTop: 5,
+                  color: "#05335F",
+                  fontSize: width / 21,
+                  marginBottom: 0,
+                  fontFamily: "bold",
+                }}
+              >
+                {product.name}
+              </Text>
+              <Text
+                style={{
+                  color: "#196EC0",
+                  fontSize: width / 37,
+                  marginBottom: 5,
+                  fontFamily: "light",
+                }}
+              >
+                {product.grade}
+              </Text>
+            </View>
+            <Divider type={"vertical"} />
+          </View>
+        </View>
+        <View style={tw('flex flex-col')}>
+          {
+            product.seasons.map((season, index) => <Season season={season} key={index} />)
+          }
+        </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 Product;

src/screens/Videos/components/MostViewedVideo.js

@@ -19,7 +19,7 @@ function MostViewedVideo({}) {
           },
           tw("flex flex-col items-end rounded-md ml-4"),
         ]}
-        onPress={() => navigation.navigate("Product")}
+        onPress={() => navigation.navigate("Video")}
       >
         <View
           style={[

src/screens/Videos/components/NewestVideo.js

@@ -19,7 +19,7 @@ const NewestVideo = () => {
           },
           tw("flex flex-col items-end mb-4"),
         ]}
-        onPress={() => navigation.navigate("Product")}
+        onPress={() => navigation.navigate("Video")}
       >
         <Image
           source={video.poster}