reza added video

src/router.js

@@ -13,6 +13,7 @@ import Product from "./views/Product";
 import ShoppingCart from "./views/ShoppingCart";
 import DeliveryForm from "./views/DeliveryForm";
 import Videos from "./views/Videos";
+import Video from "./views/Video";
 import QR from "./views/QR";
 import NotFound from "./views/404";
 import Orders from "./views/Orders";
@@ -27,7 +28,7 @@ function Router({ isDark, isLogin, headerOptions }) {
           [
             "min-h-screen min-w-screen rtl overflow-x-hidden pb-20 lg:py-0",
             isDark ? "" : "bg-white",
-            headerOptions?.shown ? "pt-16" : "pt-4",
+            headerOptions?.shown ? "pt-20" : "pt-4",
           ],
           " "
         )}
@@ -139,6 +140,24 @@ function Router({ isDark, isLogin, headerOptions }) {
                 />
               }
             />
+            <Route
+              path="/videos/:id"
+              exact
+              element={
+                <Video
+                  headerOptions={{
+                    logo: false,
+                    hamburgerMenu: false,
+                    qr: false,
+                    title: false,
+                    back: true,
+                    shown: true,
+                    menu: true,
+                    bookmark: true,
+                  }}
+                />
+              }
+            />
             <Route
               path="/scan"
               exact

src/views/Video/components/Season.js

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import {Link} from 'react-router-dom';
+
+const Season = ({ season }) => {
+  const [activeSeason, setActiveSeason] = useState(null);
+  const Unit = ({ unit }) => {
+    return (
+      <div className="w-full flex flex-col rounded-md overflow-hidden mb-3 border border-solid border-blueFE">
+        <div className="w-full flex flex-row justify-between items-center py-1.5 px-2 border-b border-solid border-blueFE">
+          <strong className="text-blueC0 text-xs">{unit.name}</strong>
+          <span className="text-xs text-blueC0">{unit.duration}</span>
+        </div>
+        <div className="w-full flex flex-row">
+          {unit.play && (
+            <Link
+              to={"/videos/:id/display"}
+              className="flex flex-1 flex-row items-center py-1.5 px-2 border-l border-solid border-blueFE justify-center text-xs text-blueC0"
+            >
+              نمایش
+            </Link>
+          )}
+          {unit.download && (
+            <Link to="/videos/:id/download" className="flex flex-1 flex-row items-center py-1.5 px-2 justify-center text-xs text-blueC0">
+              دانلود
+            </Link>
+          )}
+        </div>
+      </div>
+    );
+  };
+  return (
+    <div className="w-full flex flex-col">
+      <button
+        className="flex flex-row justify-between items-center rounded-md py-2 px-3 mb-3 bg-blueC0"
+        onClick={() =>
+          setActiveSeason(season.name === activeSeason ? null : season.name)
+        }
+      >
+        <strong className="text-xs text-white">{season.name}</strong>
+        <span className="text-xs text-white">{season.duration}</span>
+      </button>
+
+      {season.name === activeSeason &&
+        season.units.map((unit, index) => <Unit unit={unit} key={index} />)}
+    </div>
+  );
+};
+
+export default Season;

src/views/Video/index.js

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from "react";
+import { connect } from "react-redux";
+import { publicApi } from "../../redux/actions";
+import poster from "../../assets/images/poster.svg";
+import Divider from "../../components/Divider";
+import Season from "./components/Season";
+
+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,
+          },
+        ],
+      },
+    ],
+  },
+  headerOptions,
+  setHeaderOptions,
+}) {
+  useEffect(() => {
+    setHeaderOptions(headerOptions);
+  }, []);
+  return (
+    <div className="w-full flex flex-col px-4">
+      <div className="w-full flex flex-col">
+        <div
+          className="w-full flex flex-row flex-1 justify-between items-center relative overflow-hidden"
+          style={{
+            backgroundImage: `url(${product.poster})`,
+            backgroundSize: "100% 100%",
+            repeat: "no-repeat",
+            minWidth: "calc(100vw / 1.5)",
+            minHeight: "calc(100vw / 1.5 * 11 / 16)",
+          }}
+        >
+          <img
+            src={product.imageUrl}
+            className="rounded-md absolute left-2 top-1/2 transform -translate-y-1/2"
+            style={{ width: 70, height: 100 }}
+          />
+        </div>
+        <div className="flex flex-col flex-1 justify-between pr-2">
+          <div className="flex flex-col">
+            <strong className="mt-1 text-blue5F text-base">
+              {product.name}
+            </strong>
+            <span className="text-blueC0 text-xs mb-1">{product.grade}</span>
+          </div>
+          <Divider type={"vertical"} />
+        </div>
+      </div>
+      <div className="flex flex-col">
+        {product.seasons.map((season, index) => (
+          <Season season={season} key={index} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const mapStateToProps = (state) => ({});
+
+const mapDispatchToProps = {
+  setHeaderOptions: publicApi.setHeaderOptions,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Product);

src/views/Videos/components/MostViewedVideo.js

@@ -1,5 +1,5 @@
 import React from "react";
-import {Link} from 'react-router-dom';
+import { Link } from "react-router-dom";
 import Header from "../../../components/Header";
 import posterImage from "../../../assets/images/poster.svg";
 
@@ -7,35 +7,36 @@ function MostViewedVideo({}) {
   const Video = ({ video }) => {
     return (
       <Link
-        to={"/products/" + video.id}
+        to={"/videos/" + video.id}
         className="flex flex-col rounded-md ml-4"
       >
         <div
           className="w-full flex flex-row flex-1 justify-between items-center relative overflow-hidden"
           style={{
-            backgroundImage : `url(${video.poster})`,
-            backgroundSize : '100% 100%',
-            repeat : 'no-repeat',
-            minWidth: 'calc(100vw / 1.5)',
-            minHeight: 'calc(100vw / 1.5 * 9 / 16)' 
+            backgroundImage: `url(${video.poster})`,
+            backgroundSize: "100% 100%",
+            repeat: "no-repeat",
+            minWidth: "calc(100vw / 1.5)",
+            minHeight: "calc(100vw / 1.5 * 9 / 16)",
           }}
         >
           <img
-            src={video.imageUrl }
+            src={video.imageUrl}
             className="rounded-md h-full absolute left-2 top-1/2 transform -translate-y-1/2"
-            style={{ width: 'calc(100vw / 7)', height: 'calc(100vw / 8 * 15 / 9)' }}
+            style={{
+              width: "calc(100vw / 7)",
+              height: "calc(100vw / 8 * 15 / 9)",
+            }}
           />
         </div>
-        <strong
-          className="text-sm mt-1 text-blue5F"
-        >
+        <strong className="text-sm mt-1 text-blue5F dark:text-white">
           {video.name}
         </strong>
         <div className="w-full flex flex-row justify-between items-center">
-          <strong className="mt-2 text-blue52 text-xs">
+          <strong className="mt-2 text-blue52 text-xs dark:text-greenBA">
             {video.price}
           </strong>
-          <span className="text-blueC0 text-xs mt-1">
+          <span className="text-blueC0 text-xs mt-1 dark:text-white">
             {"پایه" + " " + video.grade}
           </span>
         </div>
@@ -50,7 +51,7 @@ function MostViewedVideo({}) {
           <Video
             key={index}
             video={{
-              id : 0,
+              id: 0,
               name: "ریاضی",
               price: "145.000 تومان",
               grade: "4",

src/views/Videos/components/NewestVideo.js

@@ -7,7 +7,7 @@ const NewestVideo = () => {
   const Video = ({ video }) => {
     return (
       <Link
-        to={'/products/product'}
+        to={'/videos/' + video.id}
         className="flex flex-col items-start mb-4"
         style={{width: 'calc(100vw / 2.3)'}}
       >
@@ -16,11 +16,11 @@ const NewestVideo = () => {
           className="w-full rounded-md"
         />
         <strong
-          className="text-sm mt-1 text-blue5F"
+          className="text-sm mt-1 text-blue5F dark:text-white"
         >
           {video.name}
         </strong>
-        <span className="text-blueC0 text-xs mt-1">
+        <span className="text-blueC0 text-xs mt-1 dark:text-greenBA">
           {"پایه" + " " + video.grade}
         </span>
       </Link>
@@ -34,6 +34,7 @@ const NewestVideo = () => {
           <Video
             key={index}
             video={{
+              id : 0,
               name: "ریاضی",
               price: "145.000 تومان",
               grade: "4",

src/views/Videos/components/VerticalGradeFilter.js

@@ -2,12 +2,11 @@ import React from "react";
 import { connect } from "react-redux";
 import Header from "../../../components/Header";
 
-
 const VerticalGradeFilter = ({ grades }) => {
   const Grade = ({ grade }) => {
     return (
-      <button className="px-4 py-0.5 ml-2.5 rounded-sm border border-gray-300 mt-2 bg-grayF9">
-        <strong className="text-xs text-gray-600">{grades[grade]}</strong>
+      <button className="px-4 py-0.5 ml-2.5 rounded-sm border border-gray-300 mt-2 bg-grayF9 dark:bg-blueC0 dark:bg-opacity-10 dark:border-blueC0 dark:border-opacity-60">
+        <strong className="text-xs text-gray-600 dark:text-white">{grades[grade]}</strong>
       </button>
     );
   };