reza fixed video path

src/assets/icons/dropdown-blue.svg

@@ -0,0 +1,6 @@
+<svg id="vuesax_linear_arrow-down" data-name="vuesax/linear/arrow-down" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="arrow-down">
+    <path id="Vector" d="M15.84,0,9.32,6.52a1.986,1.986,0,0,1-2.8,0L0,0" transform="translate(4.08 8.95)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(24 24) rotate(180)" fill="none" opacity="0"/>
+  </g>
+</svg>

src/components/CourseChapter/index.js

@@ -1,112 +1,160 @@
 import React, { useState } from "react";
-import './index.css';
+import { connect } from "react-redux";
-
+import { publicApi } from "../../redux/actions";
-const CourseChapter = ({ chapters }) => {
+import { toast } from "react-toastify";
-  const [selectedLesson, setSelectedLesson] = useState(null);
+import "./index.css";
 
+const CourseChapter = ({
+  playList,
+  seasons,
+  book,
+  grades,
+  selectedVideo,
+  userId,
+  setVideoActive,
+}) => {
+  const duration = (value) => {
+    const minute = value % 60;
+    const hour = Math.round(value / 60);
+    return (
+      (hour > 0
+        ? (hour.toString().length === 1 ? "0" + hour.toString() : hour) + ""
+        : "") +
+      ":" +
+      (minute.toString().length === 1 ? "0" + minute.toString() : minute)
+    );
+  };
   return (
-    <section style={{ width: "40%" }} className="bg-white mx-auto my-20 p-4">
+    <section
-      <div
+      className="bg-blueFF1 py-5 pr-5 overflow-hidden flex flex-col"
-        className="rounded py-5 px-4 relative"
+      style={{
-        style={{ backgroundColor: "#196EC033", height: '530px'}}
+        width: "calc(100% / 12 * 3.5)",
-      >
+        height: "calc(100vh - 300px)",
-        {/* top */}
+      }}
-        <div className="flex flex-row items-center justify-between">
+    >
-          <div>
+      <div className="flex flex-row w-full items-center justify-between">
-            <h2 className="text-blue-800 text-base">سرفصل دوره</h2>
+        <div>
-          </div>
+          <h2 className="text-blue-800 text-base font-semibold">سرفصل دوره</h2>
-          <div className="flex flex-row-reverse items-center divide-x transform translate-x-2">
-            <span className="text-blue-800 text-sm px-2">علوم تجربی</span>
-            <span className="text-blue-800 text-sm px-2">پایه ششم</span>
-          </div>
         </div>
-        {/* divider */}
+        <div className="flex flex-row-reverse items-center divide-x divide-solid transform translate-x-2">
-        <div className="border-b border-blue-300 border-solid bg-opacity-10 my-5"></div>
+          <span className="text-blue-800 text-sm px-2">{book?.name}</span>
-        {/* course title */}
+          <span className="text-blue-800 text-sm px-2">
-        <div className="overflow-y-scroll w-full hasScrollbar"  style={{
+            {"پایه" + " " + grades[book?.gradeId]}
-          height: '430px'
+          </span>
-        }}>
+        </div>
-        {chapters.map((chapter, index) => (
+      </div>
-          <div className="flex flex-col" key={index}>
+      <span className="w-full h-px bg-blue-200 my-4"></span>
-            <div className="bg-blue-600 rounded-sm p-4 flex flex-row items-center justify-between">
+      <div className="overflow-y-scroll w-full hasScrollbar flex-1 flex flex-col">
-              <p className="text-sm text-white">{chapter.title}</p>
+        <div className="bg-blue-600 rounded-sm p-4 flex flex-row items-center justify-between mb-2">
-              <span className="text-sm text-white">{chapter.duration}</span>
+          {/* <p className="text-sm text-white">
-            </div>
+            {(seasons.length > 0 && playList.length > 0) &&
-            {/* course lessons */}
+              seasons?.filter((item) => item?.id === playList[0]?.categoryId)[0]
-            {chapter.lessons.map((lesson, i) => (
+                ?.name}
+          </p> */}
+          {/* <span className="text-sm text-white">{video?.duration}</span> */}
+        </div>
+        {playList?.map((video, index) => (
+          <div className="flex flex-col pl-4" key={index}>
+            <div
+              className="flex flex-row items-center justify-around"
+              key={index}
+            >
+              {/* right div dot dot */}
               <div
-                className="flex flex-row items-center  justify-around"
+                className="flex items-center justify-center relative flex-col h-full"
-                key={i}
+                style={{ width: "10%" }}
               >
-                {/* right div dot dot */}
+                <span
+                  className={`w-px flex-1 transform -translate-x-0 ${
+                    Number(index) !== 0 ? "border-dashed" : ""
+                  } border-r border-blueC0`}
+                ></span>
+                <span className={`w-4 h-4 rounded-full bg-blueC0`}></span>
+                <span
+                  className={`w-px flex-1 transform -translate-x-0 ${
+                    Number(index) !== playList?.length - 1
+                      ? "border-dashed"
+                      : ""
+                  } border-r border-blueC0`}
+                ></span>
+              </div>
+              {/* left div content  */}
+              <div className="py-1.5" style={{ width: "90%" }}>
                 <div
-                  className="flex items-center relative flex-col "
+                  className={`w-full bg-white flex flex-col transition duration-400  hover:scale-95 shadow-md transform rounded-md
-                  style={{ width: "10%", transform: "translateY(30px)" }}
+                  ${
-                >
+                    selectedVideo?.id === video?.id
-                  <div
+                      ? "bg-blue-600 text-white-700"
-                    className={`flex justify-center items-center w-4 h-4 rounded-full 
+                      : "text-blue-500"
-                    ${selectedLesson === lesson ? "bg-red-600" : "bg-blue-600"},
+                  }
-                    ${lesson.passed ? "bg-blue-600" : "bg-gray-400"}
                   `}
-                  ></div>
+                  onClick={() =>
-                  <span
+                    video?.isFreeVod || +userId === 140
-                    className="w-1"
+                      ? setVideoActive(video)
-                    style={{
+                      : toast.error("ابتدا محصول رو خریداری کن!")
-                      borderRight: "2px dashed #86A0B9",
+                  }
-                      transform: "translateX(-1px)",
+                  disabled={true}
-                      height: "65px",
-                    }}
-                  ></span>
-                </div>
-                {/* left div content  */}
-                <div
-                  className={`mt-2 bg-white border border-blue-300 flex flex-col border border-solid cursor-pointer transition duration-200 ease-in-out group  hover:bg-blue-600
-                  ${selectedLesson === lesson ? "bg-blue-600 text-white-700" : "text-blue-500"}`}
-                  style={{ width: "80%" }}
-                  onClick={() => setSelectedLesson(lesson)}
                 >
                   {/* top */}
-                  <div className="flex flex-row items-center justify-between p-4 border-0 border-b border-solid border-blue-500">
+                  <div className="flex flex-row items-center justify-between p-3 border-0 border-b border-solid border-blue-300">
                     <p
-                      className={`text-sm group-hover:text-white
+                      className={`text-tiny
-                      ${selectedLesson === lesson ? "text-white" : ""}`}
+                      ${selectedVideo?.id === video?.id ? "text-white" : ""}`}
                     >
-                      {lesson.title}
+                      {video?.name}
                     </p>
                     <span
-                      className={`text-xs group-hover:text-white border-r border-solid border-blue-200 pr-1
+                      className={`text-sm  border-r border-solid border-blue-200 pr-1
-                    ${selectedLesson === lesson ? "text-white" : "text-blue-500"}`}
+                    ${
+                      selectedVideo?.id === video?.id
+                        ? "text-white"
+                        : "text-blue-500"
+                    }`}
                     >
-                      {lesson.duration}
+                      {duration(video?.duration)}
                     </span>
                   </div>
                   {/* divider */}
                   <div
-                    className={`border-t border-blue-600 group-hover:border-white ${
+                    className={`border-t border-blue-600 ${
-                      selectedLesson === lesson ? "border-red-600" : ""
+                      selectedVideo?.id === video?.id ? "border-red-600" : ""
                     }`}
                   ></div>
                   {/* bottom */}
                   <span
-                    className={`text-xs text-center  group-hover:text-white p-2
+                    className={`text-tiny text-center  p-3
-                  ${selectedLesson === lesson ? "text-white" : "text-blue-500"}`}
+                  ${
+                    selectedVideo?.id === video?.id
+                      ? "text-white"
+                      : "text-blue-500"
+                  }`}
                   >
-                    {lesson.play}
+                    پخش
                   </span>
                 </div>
               </div>
-            ))}
+            </div>
           </div>
         ))}
-        </div>
-        {/* blue left border */}
-        {/* <div className="absolute top-1/2 left-0.5 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 w-1 h-20 rounded"></div> */}
       </div>
     </section>
   );
 };
 
-export default CourseChapter;
+const mapStateToProps = (state) => ({
+  selectedVideo: state.publicApi.selectedVideo,
+  seasons: state.publicApi.bookInfo?.categories,
+  book: state.publicApi.bookInfo,
+  grades: state.publicApi.grades,
+  // vods: state.publicApi.bookSection?.vods,
+  userId: state?.user?.status?.id,
+});
+
+const mapDispatchToProps = {
+  setVideoActive: publicApi.setVideoActive,
+};
+
+export default connect(mapStateToProps)(CourseChapter);
 
 CourseChapter.defaultProps = {
   chapters: [

src/components/JolPlayer/index.js

@@ -21,7 +21,7 @@ function Video({ fileIds, posterId, autoPlay }) {
           width: "100%",
           height:
             window.innerWidth > 1024
-              ? window.innerHeight - 200
+              ? window.innerHeight - 300
               : window.innerHeight / 3.6,
           theme: "#4dd35b",
           language: "en",

src/components/Product/index.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import {Link} from 'react-router-dom';
 import { connect } from "react-redux";
-
+import separate from '../../utils/separate';
 import StarRating from "../StarRating";
 // import Tag from "../Tag";
 // import ReactTooltip from "react-tooltip";
@@ -159,7 +159,7 @@ const ProductDesign = ({
                     )}
                   </div>
                   <p className="text-lg text-productPrice font-semibold inline text-blue5F">
-                    {product?.product[1]?.price} <span>تومان</span>
+                    {separate(product?.product[1]?.price)} <span>تومان</span>
                   </p>
                 </div>
                 {/* add to cart */}

src/components/ProductStatusCard/index.js

@@ -2,6 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import { userProduct } from "../../redux/actions";
 import { toast } from "react-toastify";
+import separate from '../../utils/separate';
 import Button from "../Button";
 
 import arrow from "./arrow-icon.svg";
@@ -52,7 +53,7 @@ const ProductStatusCard = ({
         ))}
         <div className="flex flex-col items-center py-3">
           <p className="text-xl text-blue-600">
-            {price}
+            {separate(price)}
             <span className="text-sm text-gray-700 font-light">تومان</span>
           </p>
           <p className="text-xs font-light text-gray-600 mt-2">

src/components/ProductSuggestion/index.js

@@ -1,13 +1,20 @@
 import React, { useState, useEffect } from "react";
 import { product } from "../../redux/actions";
 import { connect } from "react-redux";
-
+import separate from "../../utils/separate";
 import Button from "../Button";
 
 import productImg from "./product-chair.svg";
 import plus from "./plus.svg";
 
-const ProductSuggestion = ({ suggestions, isDark, id, getSimilar, book, similarList }) => {
+const ProductSuggestion = ({
+  suggestions,
+  isDark,
+  id,
+  getSimilar,
+  book,
+  similarList,
+}) => {
   const [selectedProduct, setSelectedProduct] = useState(null);
   const [price, setPrice] = useState(0);
 
@@ -17,14 +24,14 @@ const ProductSuggestion = ({ suggestions, isDark, id, getSimilar, book, similarL
     }
   }, [book]);
   useEffect(() => {
-    if(similarList.length > 0) {
+    if (similarList.length > 0) {
       let allPrice = 0;
-      for(let item of similarList) {
+      for (let item of similarList) {
         allPrice = item.price + allPrice;
       }
       setPrice(() => allPrice);
     }
-  },[similarList]);
+  }, [similarList]);
   return (
     <section className="mt-10 border-2 border-gray-300 py-10 rounded-lg bg-grayF9">
       <h2 className="text-center text-lg font-bold text-productPrice">
@@ -43,11 +50,15 @@ const ProductSuggestion = ({ suggestions, isDark, id, getSimilar, book, similarL
                ${selectedProduct === book ? "bg-white" : ""}`}
               onClick={() => setSelectedProduct(book)}
             >
-              <img src={`https://dnvn.ir/api/v1/file/${book?.book?.fileIds}`} alt="" className="w-2/3 rounded-md" />
+              <img
+                src={`https://dnvn.ir/api/v1/file/${book?.book?.fileIds}`}
+                alt=""
+                className="w-2/3 rounded-md"
+              />
               <h2 className="my-3 text-tiny">{book?.name}</h2>
               <p className="text-base text-blueC0 font-medium">
-                {book?.price}
+                {separate(book?.price)}
-                <span className="mr-1 text-xs text-black">تومان</span>
+                <span className="mx-1 text-xs text-black">تومان</span>
               </p>
               {/* <div className="flex flex-col items-center mt-3">
                 <span className="text-xs">انتخاب شما</span>
@@ -72,8 +83,7 @@ const ProductSuggestion = ({ suggestions, isDark, id, getSimilar, book, similarL
         <div className="flex flex-row mb-5">
           <p className="text-base text-productPrice font-bold">
             &nbsp;جمع لوازم اختیاری خریداری شده&nbsp;
-            <span>{price}</span>
+            <span className="mx-1">{separate(price)}</span>
-            &nbsp;
             تومان
           </p>
           <span className="text-lightBlueTextColor text-base mr-1 font-bold">
@@ -84,7 +94,7 @@ const ProductSuggestion = ({ suggestions, isDark, id, getSimilar, book, similarL
           در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید
         </p>
         <Button
-          title="اصافه کردن به سبد خرید"
+          title="اضافه کردن به سبد خرید"
           backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"}
           border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
           width="calc(100% / 5)"

src/components/VodProduct/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-
+import {Link} from 'react-router-dom';
 import StarRating from "../StarRating";
 import ReactTooltip from "react-tooltip";
 
@@ -20,6 +20,7 @@ import RedDotIcon from "./redDotIcon.svg";
 import PurpleDotIcon from "./purpleDotIcon.svg";
 import LightBlueDotIcon from "./lightBlueDotIcon.svg";
 import whitePlayIcon from "./white-play-button-icon.svg";
+import { book } from "../../redux/actions";
 
 const videoImages = [
   videoImage1,
@@ -31,32 +32,26 @@ const videoImages = [
 ];
 
 const VodProduct = ({
+  video,
   index,
   productColor,
-  colors,
   likeBtn,
-  discount,
   discountPricePercent,
   discountPrice,
   productContent,
   star,
   productTags,
   priceDirection,
-  productTitleAlignment,
   priceHolder,
-  productCat,
   rangeHolder,
   priceTitle,
   addToCartHolder,
-  productTitleCategoryHolder,
-  productTitleCategoryHolderAlignment,
   priceStarHolder,
   priceStarAlignment,
   rangeWidth,
-  productTitle,
-  poster,
   price,
   height,
+  grades,
   // minHeight,
 }) => {
   const [progressFlag, setProgressFlag] = useState(false);
@@ -71,7 +66,11 @@ const VodProduct = ({
   return (
     <>
       {/* product UI Design */}
-      <div className="flex flex-wrap sm:flex-nowrap justify-around" style={{direction: 'rtl'}}>
+      <Link
+        to={'/videos/' + video?.id}
+        className="flex flex-wrap sm:flex-nowrap justify-around"
+        style={{ direction: "rtl" }}
+      >
         <div className="w-full flex flex-wrap items-center justify-around my-3 px-1 sm:px-4">
           <div
             className={`w-full mx-1 sm:w-60 md:w-96  rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`}
@@ -83,7 +82,7 @@ const VodProduct = ({
                 backgroundImage: `url(${videoImages[Number(index)]})`,
                 backgroundSize: "100% 100%",
                 backgroundRepeat: "no-repeat",
-                height : height
+                height: height,
                 // minHeight: minHeight,
               }}
               data-modal-toggle="large-modal"
@@ -138,21 +137,16 @@ const VodProduct = ({
             <div className="px-2">
               {/* content */}
               <div className="mt-4 flex flex-col">
-                <div
+                <div className={`flex justify-between `}>
-                  className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `}
-                >
                   <h2
-                    className={`leading-4 text-base mb-2 font-semibold text-darkCrimsonTextColor ${productTitleAlignment}`}
+                    className={`leading-4 text-tiny mb-2 font-normal text-blue5F text-right`}
                   >
-                    {productTitle}
+                    {"دوره ویدیویی" + " " + video?.name}
                   </h2>
-                  {productCat && (
+                  {console.log(video?.gradeId)}
-                    <span
+                  <span className={`text-sm font-light text-blueC0`}>
-                      className={`text-xs font-light text-darkCrimsonTextColor`}
+                    { 'پایه' + ' ' + grades[video?.gradeId]}
-                    >
+                  </span>
-                      {productCat}
-                    </span>
-                  )}
                 </div>
                 {productContent && (
                   <p
@@ -180,23 +174,22 @@ const VodProduct = ({
                             : "flex"
                         }`}
                       >
-                        {priceTitle && (
+                        <span className="text-xs text-borderColor ml-2">
-                          <span className="text-xs text-borderColor ml-2">
+                          
-                            قیمت
+                        </span>
-                          </span>
+
-                        )}
+                        {/* {discountPrice && (
-                        {discountPrice && (
                           <p className="line-through text-xs text-borderColor">
                             <span> قیمت</span> 140<span>تومان</span>
                           </p>
-                        )}
+                        )} */}
                       </div>
-                      <p
+                      {/* <p
                         className={`text-sm font-semibold inline text-productPrice`}
                       >
-                        {price}
+                        {video?.price}
                         <span>تومان</span>
-                      </p>
+                      </p> */}
                     </div>
                     {/* add to cart */}
                     {addToCartHolder && (
@@ -210,14 +203,14 @@ const VodProduct = ({
                     )}
                   </div>
                 )}
-                {star && (
+                {/* {star && (
                   <div className="flex items-center">
                     <StarRating />
                     <span className="text-xs text-productContent font-bold mr-2">
                       39
                     </span>
                   </div>
-                )}
+                )} */}
               </div>
               {productTags && (
                 <div className="mt-2 flex flex-wrap">
@@ -245,7 +238,7 @@ const VodProduct = ({
             </div>
           </div>
         </div>
-      </div>
+      </Link>
       {/* <div
         class="hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center md:inset-0 h-modal sm:h-full"
         id="large-modal"

src/utils/separate.js

@@ -0,0 +1,12 @@
+const separate = (number) => {
+  number += "";
+  number = number.replace(",", "");
+  let x = number.split(".");
+  let y = x[0];
+  let z = x.length > 1 ? "." + x[1] : "";
+  let rgx = /(\d+)(\d{3})/;
+  while (rgx.test(y)) y = y.replace(rgx, "$1" + "," + "$2");
+  return y + z;
+};
+
+export default separate;

src/views/Auth/SignUp/index.js

@@ -130,7 +130,7 @@ function SignUp({
 
   useEffect(() => {
     if (loginFlag) {
-      // navigate("/");
+      navigate("/");
     }
   }, [loginFlag]);
   const light = theme === "light";

src/views/Home/Desktop/Part4/index.js

@@ -3,7 +3,7 @@ import Button from "../../../../components/Button";
 import VodProduct from "../../../../components/VodProduct";
 import { Link } from "react-router-dom";
 import posterImage from "../../../../assets/images/poster.svg";
-const Part4 = () => {
+const Part4 = ({ books, grades }) => {
   const videosData = [
     {
       id: 0,
@@ -86,25 +86,20 @@ const Part4 = () => {
         style={{}}
       >
         <ul className="flex flex-wrap justify-center ">
-          {videosData.slice(0, 6).map((video, index) => (
+          {books.slice(0, 6).map((video, index) => (
             <li
               className={`flex flex-col border-solid border-gray-200 ${
                 index != 3 && index != 4 && index != 5 ? "border-b" : null
               } video ${index != 0 && index != 3 ? "border-r" : null}`}
               style={{ width: "33.333333%" }}
             >
-              <Link to={"/videos/" + video.id}>
+              <VodProduct
-                <VodProduct
+                video={video}
-                  productTitle={`دوره ی ویدیویی ${video.name}`}
+                key={index}
-                  productCat={video.grade}
+                index={index}
-                  price={video.price}
+                height={"calc(100vh / 3.8)"}
-                  priceTitle={false}
+                grades={grades}
-                  discountPrice={false}
+              />
-                  key={index}
-                  index={index}
-                  height={"calc(100vh / 3.8)"}
-                />
-              </Link>
             </li>
           ))}
         </ul>

src/views/Home/Desktop/index.js

@@ -75,7 +75,7 @@ const DesktopHome = ({ grades, getList, books }) => {
       <div className="mb-16">
         <img src={HomeImg} />
       </div>
-      <Part4 />
+      <Part4 books={books} grades={grades} />
     </div>
   );
 };
@@ -86,6 +86,7 @@ const mapStateToProps = (state) => ({
   books: state.book.list,
   gradeFilterBooks: state.book.gradeFilterBooks,
   selectedGrade: state.book.selectedGrade,
+  grades: state.publicApi.grades
 });
 
 const mapDispatchToProps = {

src/views/Products/layouts/Main.js

@@ -43,48 +43,6 @@ export const Main = ({
     },
   ];
 
-  const videosData = [
-    {
-      id: 0,
-      name: "ریاضی",
-      price: "145.000",
-      grade: " پایه چهارم ",
-      imageUrl: "https://dnvn.ir/api/v1/file/2105",
-      poster: posterImage,
-    },
-    {
-      id: 2,
-      name: "علوم تجربی",
-      price: "145.000 ",
-      grade: "پایه سوم",
-      imageUrl: "https://dnvn.ir/api/v1/file/2105",
-      poster: posterImage,
-    },
-    {
-      id: 1,
-      name: "زمین شناسی",
-      price: "145.000 ",
-      grade: "پایه چهارم",
-      imageUrl: "https://dnvn.ir/api/v1/file/2105",
-      poster: posterImage,
-    },
-    {
-      id: 3,
-      name: "ریاضی",
-      price: "145.000 ",
-      grade: "پایه چهارم",
-      imageUrl: "https://dnvn.ir/api/v1/file/2105",
-      poster: posterImage,
-    },
-    {
-      id: 5,
-      name: "ریاضی",
-      price: "145.000 ",
-      grade: "پایه چهارم",
-      imageUrl: "https://dnvn.ir/api/v1/file/2105",
-      poster: posterImage,
-    },
-  ];
   return (
     <div className="flex flex-col w-3/4 p-4 pb-20">
       <div className="flex w-full bg-blue rounded-lg border border-solid border-gray-200 p-2 items-center my-1.5 justify-center text-blue52">
@@ -103,44 +61,42 @@ export const Main = ({
           ))}
         </ul>
       </div>
-
+      {books?.length > 0 && (
-      <div className="relative w-full" style={{ direction: "ltr" }}>
+        <div className="relative w-full" style={{ direction: "ltr" }}>
-        <Carousel
+          <Carousel
-          show={Math.round(window.innerWidth / 500)}
+            show={Math.round(window.innerWidth / 500)}
-          slide={2}
+            slide={2}
-          swiping={true}
+            swiping={true}
-          useArrowKeys={true}
+            useArrowKeys={true}
-          transition={0.5}
+            transition={0.5}
-          className="flex flex-row"
+            className="flex flex-row"
-          rightArrow={
+            rightArrow={
-            <img
+              <img
-              className="absolute top-1/2 transform -translate-y-1/2 cursor-pointer p-2"
+                className="absolute top-1/2 transform -translate-y-1/2 cursor-pointer p-2"
-              src={arrow}
+                src={arrow}
-              alt=""
+                alt=""
-            />
+              />
-          }
+            }
-          leftArrow={
+            leftArrow={
-            <img
+              <img
-              className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer -rotate-180 p-2"
+                className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer -rotate-180 p-2"
-              src={arrow}
+                src={arrow}
-              alt=""
+                alt=""
-            />
+              />
-          }
+            }
-        >
+          >
-          {videosData.map((video, index) => (
+            {books?.map((video, index) => (
-            <VodProduct
+              <VodProduct
-              productTitle={`دوره ی ویدیویی ${video.name}`}
+                video={video}
-              productCat={video.grade}
+                key={index}
-              price={video.price}
+                index={index}
-              priceTitle={false}
+                height={"calc(100vh / 5)"}
-              discountPrice={false}
+                grades={grades}
-              key={index}
+              />
-              index={index}
+            ))}
-              height={"calc(100vh / 5)"}
+          </Carousel>
-            />
+        </div>
-          ))}
+      )}
-        </Carousel>
-      </div>
 
       <div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden justify-evenly">
         {selectedGrade
@@ -173,6 +129,7 @@ export const Main = ({
                   product={product}
                   index={Number(index)}
                   imageSize={4.5}
+                  grades={grades}
                 />
               </Link>
             ))}

src/views/Video/components/Season.js

@@ -1,8 +1,12 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
+import location from "../../../utils/location";
 import { Link } from "react-router-dom";
 import { publicApi } from "../../../redux/actions";
 
+//assets
+import dropdownIcon from "../../../assets/icons/dropdown-blue.svg";
+
 const Season = ({
   toggle,
   season,
@@ -12,6 +16,14 @@ const Season = ({
   realSeasons,
   vodDuration,
 }) => {
+  const setCategory = (seasonId, videoId) => {
+    localStorage.removeItem("bookId");
+    localStorage.setItem(
+      "season",
+      location.getId() + "," + seasonId + "," + videoId
+    );
+  };
+
   const duration = (value) => {
     const minute = value % 60;
     const hour = Math.round(value / 60);
@@ -24,7 +36,7 @@ const Season = ({
     );
   };
   // const [activeSeason, setActiveSeason] = useState(null);
-  const Unit = ({ unit }) => {
+  const Unit = ({ unit, index }) => {
     return isMobile ? (
       <Link
         to="/videos/0/display"
@@ -58,9 +70,9 @@ const Season = ({
         </div> */}
       </Link>
     ) : (
-      <Link to="/videos/0/display" className="d-flex flex-column">
+      <div className="d-flex flex-column">
         <li
-          className="lesson__files--sample justify-content-between align-items-center p-5"
+          className="lesson__files--sample justify-content-between align-items-center py-2 px-6"
           style={{
             display: season[0].categoryId === activeSeason ? "flex" : "none",
           }}
@@ -68,11 +80,28 @@ const Season = ({
           //   setSelectedLesson(selectedLesson === data.id ? null : data.id)
           // }
         >
-          <div className="d-flex align-items-center">
+          <div className="flex items-center justify-between w-full">
             <h5>{unit.name}</h5>
+            <div className="flex items-center gap-4">
+              <Link
+                to={
+                  Number(index) === 0
+                    ? window.location.pathname + "/display"
+                    : "#"
+                }
+                className={`bg-white border border-solid ${
+                  Number(index) === 0
+                    ? "border-blue-300 text-blueC0"
+                    : "border-gray-300 text-gray70"
+                } py-2.5 w-24 text-center text-tiny  rounded-sm shadow-sm`}
+                onClick={() => setCategory(season[0].categoryId, unit.name)}
+              >
+                {Number(index) === 0 ? "تماشا" : "قفل"}
+              </Link>
+            </div>
           </div>
         </li>
-      </Link>
+      </div>
     );
   };
   return isMobile ? (
@@ -99,21 +128,38 @@ const Season = ({
         season.map((unit, index) => <Unit unit={unit} key={index} />)}
     </div>
   ) : (
-    <li
+    <li className="w-full flex flex-col bg-blueFF1 rounded-md overflow-hidden shadow-md">
-      className="w-full flex flex-col bg-grayF7 rounded-md overflow-hidden cursor-pointer"
+      <header
-      onClick={() => toggle(season[0].categoryId)}
+        className="w-full flex flex-row justify-between items-center py-3 px-6"
-    >
+        onClick={() => toggle(season[0].categoryId)}
-      <header className="w-full flex flex-row justify-between p-4">
+      >
-        <strong className="text-tiny text-gray1 font-medium">
+        <strong className="text-tiny text-blueC0 font-medium">
           {
             realSeasons.filter((item) => item.id === season[0].categoryId)[0]
               .name
           }
         </strong>
+        <img
+          src={dropdownIcon}
+          alt=""
+          className={`w-6 transform transition-all ${
+            season[0].categoryId === activeSeason ? "rotate-180" : ""
+          }`}
+        />
       </header>
-      <ul className="w-full flex flex-col px-4 divide-y-2 divide-solid divide-gray-200">
+      <ul
-        {season[0].categoryId === activeSeason &&
+        className={`w-full flex flex-col px-4 divide-y-2 divide-solid transform origin-bottom  transition-all divide-blue-100 overflow-hidden`}
-          season.map((unit, index) => <Unit unit={unit} key={index} />)}
+        style={{
+          height: isMobile
+            ? "auto"
+            : season[0].categoryId === activeSeason
+            ? (24 + 34.5) * season.length
+            : 0,
+        }}
+      >
+        {season.map((unit, index) => (
+          <Unit unit={unit} key={index} index={index} />
+        ))}
       </ul>
     </li>
   );

src/views/VideoDisplay/Desktop/index.js

@@ -1,38 +0,0 @@
-import React from "react";
-import CourseChapter from "../../../components/CourseChapter";
-import VideoPlayer from "../../../components/VideoPlayer";
-const DesktopVideoDisplay = () =>{
-    return(
-        <div className="w-full flex flex-col px-4 items-center">
-      <div className="w-4/5 flex flex-col mb-6 justify-center items-center">
-        <div className="w-full flex flex-row flex-1 justify-center overflow-hidden relative">
-          <div className="flex flex-col w-4/5">
-
-            
-            <VideoPlayer playerWidth='100%' />
-            
-            <h1 className="mx-4 my-2 text-4xl text-blue52 py-6 border-b-2 border-solid border-gray-300">ساز های باستانی ایران عزیز</h1>
-            <p className="m-4 text-gray-600">
-            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
-            </p>
-        </div>
-          <CourseChapter />
-        </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 dark:text-white">
-              {product.name}
-            </strong>
-            <span className="text-blueC0 text-xs mb-1 dark:text-greenBA">{product.grade}</span>
-          </div>
-          <Divider type={"vertical"} />
-        </div> */}
-        <div>
-            
-        </div>
-      </div>
-      </div>
-    );
-};
-
-export default DesktopVideoDisplay;

src/views/VideoDisplay/index.js

@@ -1,10 +1,13 @@
 import React, { useState, useEffect } from "react";
 import { connect } from "react-redux";
 import { publicApi } from "../../redux/actions";
+import PlayList from "../../components/CourseChapter";
+import VideoPlayer from "../../components/VideoPlayer";
+import JolPlayer from "../../components/JolPlayer";
+
 import poster from "../../assets/images/poster.svg";
 import Divider from "../../components/Divider";
 import Season from "./components/Season";
-import DesktopVideoDisplay from "./Desktop";
 
 function VideoDisplay({
   isMobile,
@@ -48,17 +51,24 @@ function VideoDisplay({
   seasons,
   grades,
   getBook,
+  getSeason,
+  selectedVideo,
 }) {
   useEffect(() => {
     const id = window.location.pathname.slice(
       8,
       window.location.pathname.lastIndexOf("/")
     );
-
+    getBook({bookId : id});
     setHeaderOptions(headerOptions);
-    // getBook({ bookId: id });
+    const cat = localStorage.getItem("season")?.split(",");
+    getSeason({ bookId: cat[0], categoryId: cat[1] });
   }, []);
 
+  useEffect(() => {
+
+  },[])
+
   const enamad =
     '<a referrerpolicy="origin" target="_blank" href="https://trustseal.enamad.ir/?id=224965&amp;Code=x8oNSO7tTnqAniyPpPyN"><img referrerpolicy="origin" src="https://Trustseal.eNamad.ir/logo.aspx?id=224965&amp;Code=x8oNSO7tTnqAniyPpPyN" alt="" style="cursor:pointer" id="x8oNSO7tTnqAniyPpPyN"></a>';
   return isMobile ? (
@@ -92,21 +102,58 @@ function VideoDisplay({
       </div>
     </div>
   ) : (
-    <DesktopVideoDisplay />
+    <div className="w-11/12 flex flex-col mb-6 justify-center items-center mx-auto">
+      <div className="w-full flex flex-row justify-center overflow-hidden relative gap-2 mt-4">
+        <div className="flex flex-col w-8/12">
+          <JolPlayer
+            fileIds={selectedVideo?.fileIds}
+            posterId={selectedVideo?.posterId}
+          />
+          <h1 className="mx-4 my-2 text-4xl text-blue52 pb-4 border-b-2 border-solid border-gray-200">
+            {selectedVideo?.name}
+          </h1>
+          <p className="m-4 text-gray70 leading-7 font-normal text-tiny">
+            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
+            استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
+            ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز،
+            و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای
+            زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و
+            متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان
+            رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد
+            کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه
+            راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل
+            حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود
+            طراحی اساسا مورد استفاده قرار گیرد.
+          </p>
+        </div>
+        <PlayList playList={book?.vods} />
+      </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 dark:text-white">
+              {product.name}
+            </strong>
+            <span className="text-blueC0 text-xs mb-1 dark:text-greenBA">{product.grade}</span>
+          </div>
+          <Divider type={"vertical"} />
+        </div> */}
+      <div></div>
+    </div>
   );
 }
 
 const mapStateToProps = (state) => ({
   isMobile: state.publicApi.isMobile,
-  book: state.publicApi.bookInfo,
+  book: state.publicApi.bookSection,
-  grades: state.publicApi.categories,
+  seasons: state.publicApi.categories,
   grades: state.publicApi.grades,
   selectedVideo: state.publicApi.selectedVideo,
 });
 
 const mapDispatchToProps = {
   setHeaderOptions: publicApi.setHeaderOptions,
-  getBook: publicApi.getBook,
+  getBook: publicApi.bookInfo,
+  getSeason: publicApi.bookSection
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(VideoDisplay);