reza added some change

src/redux/reducers/public.tsx

@@ -33,7 +33,7 @@ const initialState = {
   bookInfo: null,
   activeCategory: null,
   categories: null,
-  bookSection : null,
+  bookSection: null,
 };
 
 const grades = [
@@ -69,12 +69,13 @@ export default function publicApi(state = initialState, action: PublicAction) {
         error: null,
       };
     case "public/vod/bookSection":
+      const videoId: any = localStorage.getItem("category")?.split(",")[2];
       return {
         ...state,
         loading: false,
         bookSection: data,
         error: null,
-        selectedVideo : data?.vods[0]
+        selectedVideo: data?.vods?.filter((item: any) => item.name === videoId)[0],
       };
 
     case "public/vod/bookCourse":

src/views/Course/Lesson/index.scss

@@ -29,11 +29,27 @@
     border-right: 1px solid #b3b3b3;
     transition: all 0.4s ease-in;
     overflow: hidden;
+    p{
+      color: white;
+      padding: 10px 20px;
+      background-color: rgb(58, 58, 58);
+      margin: 0px !important;
+    }
     & img{
       width: 30px;
       margin-right: 15px;
     }
     &--sample{
+      transition: all 0.5s;
+      cursor: pointer;
+      padding: 5px 0px;
+      &:hover{
+        background-color: rgb(58, 58, 58);
+      }
+      &___active{
+        transition: all 0.5s;
+        transform: scale(1.3);
+      }
       color: white;
       a{
         color: white;
@@ -175,7 +191,7 @@
     header {
       border-top-right-radius: 10px;
       border-top-left-radius: 10px;
-      padding: 15px 5px !important;
+      padding: 10px 5px !important;
       h4 {
         font-size: calc(100vw / 30);
       }
@@ -203,7 +219,7 @@
         }
         h5{
           font-size: calc(100vw/ 33);
-          margin-right: 5px;
+          margin-right: 15px;
         }
       }
       &--active{

src/views/Course/Lesson/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import whiteDropdown from "../../../assets/icons/white-dropdown.png";
 import whitePlay from "../../../assets/icons/white-play.png";
@@ -6,13 +6,25 @@ import document from "../../../assets/icons/document.png";
 import "./index.scss";
 import { connect } from "react-redux";
 import { book, publicApi } from "../../../redux/actions";
+import location from "../../../util/location";
 
-function Lesson({ toggle, lesson, activeCategory, realCategories, vodDuration }: any) {
+function Lesson({
+  toggle,
+  lesson,
+  activeCategory,
+  realCategories,
+  vodDuration,
+}: any) {
+  const [selectedLesson, setSelectedLesson] = useState(null);
   const duration = (value: number) => {
     const minute = value % 60;
     const hour = Math.round(value / 60);
     return (hour > 0 ? hour + " " + "ساعت" : "") + " " + minute + " " + "دقیقه";
   };
+  const setCategory = (catId : any, videoId: any) => {
+    localStorage.removeItem("bookId");
+    localStorage.setItem("category", location.getId() + "," + catId + "," + videoId );
+  };
   return (
     <div className="lesson d-flex flex-column">
       <header
@@ -42,8 +54,14 @@ function Lesson({ toggle, lesson, activeCategory, realCategories, vodDuration }:
         onClick={() => toggle(lesson[0].categoryId)}
       >
         <div className="d-flex flex-column">
-          <h4>{lesson[0].categoryId}</h4>
-          <span> مدت زمان درس {lesson.duration}</span>
+          <h4>
+            {
+              realCategories.filter(
+                (item: any) => item.id === lesson[0].categoryId
+              )[0].name
+            }
+          </h4>
+          {/* <span> مدت زمان درس {lesson.duration}</span> */}
         </div>
         <div className="lesson__duration d-flex">
           <img src={whiteDropdown} alt="" />
@@ -66,26 +84,41 @@ function Lesson({ toggle, lesson, activeCategory, realCategories, vodDuration }:
         }}
       >
         {lesson?.map((data: any, i: any) => (
+          <div className="d-flex flex-column">
             <li
               className="lesson__files--sample justify-content-between align-items-center"
               style={{
                 display:
                   lesson[0].categoryId === activeCategory ? "flex" : "none",
               }}
+              onClick={() =>
+                setSelectedLesson(selectedLesson === data.id ? null : data.id)
+              }
             >
               <div className="d-flex align-items-center">
                 {data.type === "video" && <img src={whitePlay} alt="" />}
                 {data.type === "pdf" && <img src={document} alt="" />}
+                <img
+                  className={
+                    selectedLesson === data.id
+                      ? "lesson__files--sample___active"
+                      : ""
+                  }
+                  src={`https://dnvn.ir/api/v1/file/${data.posterId}`}
+                  alt=""
+                />
                 <h5>{data.name}</h5>
               </div>
               <ul className="d-flex">
                 <li>{data.type !== "pdf" && duration(data.duration)}</li>
-              <Link to="/video-tube">
+                <Link to="/video-tube" onClick={() => setCategory(lesson[0].categoryId, data.name)}>
                   <li>{"مشاهده"}</li>
                 </Link>
                 {/* <li>{data.download ? "دانلود" : <img src={lock} alt="" />}</li> */}
               </ul>
             </li>
+            {selectedLesson === data.id && <p>سلام</p>}
+          </div>
         ))}
       </ul>
     </div>
@@ -96,7 +129,7 @@ export default connect(
   (state: any) => ({
     activeCategory: state.publicApi.activeCategory,
     realCategories: state.publicApi.bookInfo?.categories,
-    vodDuration : state.publicApi.bookInfo?.vodDuration,
+    vodDuration: state.publicApi.bookInfo?.vodDuration,
   }),
   {
     toggle: publicApi.activeCategory,

src/views/Course/index.tsx

@@ -33,7 +33,9 @@ function Course({ getInfo, info, categories, loading }: any) {
   const checkFreeCat = () => {
     // const freeCat = info?.vods.filter((item: any) => item?.isFreeVOD)[0];
     // localStorage.setItem("free", location.getId() + "," + freeCat?.categoryId);
+    // local => bookId, category
     localStorage.setItem("bookId", location.getId());
+    localStorage.removeItem("category");
   };
   return (
     <div

src/views/VideoTube/LessonPlayList/index.tsx

@@ -10,21 +10,25 @@ function LessonPlayList({
   catergories,
   realCategories,
 }: any) {
+  const bookId = localStorage.getItem("bookId");
   return (
     <>
       {
         <div className="lesson-playlist d-flex flex-column">
+          {bookId && (
             <header>
               <h3>
-              {
-                realCategories.filter(
+                { realCategories.filter(
                       (item: any) => item.id === category[0].categoryId
                     )[0].name
                 }
               </h3>
               <span></span>
             </header>
-          {category.map((video: any, i: any) => (
+          )}
+
+          {bookId ? (
+            category.map((video: any, i: any) => (
               <div
                 className={
                   "lesson-playlist__item d-flex align-items-center" +
@@ -55,7 +59,36 @@ function LessonPlayList({
                   {/* <p>{file.text}</p> */}
                 </div>
               </div>
-          ))}
+            ))
+          ) : (
+            <div
+              className={
+                "lesson-playlist__item d-flex align-items-center" +
+                " " +
+                (category?.id === selectedVideo?.id &&
+                  "lesson-playlist__item--active")
+              }
+              onClick={() => setVideoActive(category)}
+            >
+              <span className="lesson-playlist__item--count"></span>
+              <div className="lesson-playlist__item--video">
+                {/* <video>
+                  <source
+                    src={`https://dnvn.ir/api/v1/file/${video.fileIds}`}
+                  />
+                </video> */}
+                <img
+                  src={`https://dnvn.ir/api/v1/file/${category.posterId}`}
+                  alt=""
+                />
+                <span>22:05</span>
+              </div>
+              <div className="lesson-playlist__item--text d-flex flex-column">
+                <h4>{category.name}</h4>
+                {/* <p>{file.text}</p> */}
+              </div>
+            </div>
+          )}
         </div>
       }
     </>

src/views/VideoTube/index.tsx

@@ -25,7 +25,6 @@ function VodTube({
   setVideoActive,
 }: any) {
   useEffect(() => {
-    // const free: any = localStorage.getItem("free")?.split(",");
     scroll.goToTop();
     // getInfo({
     //   bookId: 1,
@@ -38,7 +37,14 @@ function VodTube({
   }, []);
 
   useEffect(() => {
+    if (localStorage.getItem("bookId")) {
       setVideoActive(categories[0][0]);
+    } else {
+      if (!info) {
+        const cat: any = localStorage.getItem("category")?.split(",");
+        bookSection({ bookId: cat[0], categoryId: cat[1] });
+      }
+    }
   }, [info]);
   return (
     <>
@@ -53,7 +59,10 @@ function VodTube({
               {/* <video controls>
               <source src={selectedVideo.src} />
             </video> */}
-              <Video fileIds={selectedVideo?.fileIds} posterId={selectedVideo?.posterId} />
+              <Video
+                fileIds={selectedVideo?.fileIds}
+                posterId={selectedVideo?.posterId}
+              />
               <span className="desktop">درس دوم / بیست و یکم</span>
               <h1 className="desktop">{selectedVideo?.name}</h1>
               {/* <p className="desktop">{selectedVideo.text}</p> */}
@@ -77,13 +86,18 @@ function VodTube({
             <section className="video-tube__sidebar--playlist d-flex flex-column">
               <header className="d-flex justify-content-between align-items-center">
                 <div className="d-flex flex-column">
-                  <h2>لیست فیلم‌ها</h2>
+                  <h2>{localStorage.getItem("category")?.split(',')[1] || 'لیست فیلم‌ها' }</h2>
                   <p>در این قسمت توضیحی کوتاه قرار می گیرد</p>
                 </div>
                 <img src={listIcon} alt="" />
               </header>
               <div className="video-tube__sidebar--playlist___list d-flex flex-column">
-                {categories?.map((video: any, i: any) => (
+                { localStorage.getItem("bookId")
+                  ? categories?.map((video: any, i: any) => (
+                      <LessonPlayList category={video} key={i} />
+                    ))
+                  : 
+                  info?.vods?.map((video: any, i: any) => (
                       <LessonPlayList category={video} key={i} />
                     ))}
               </div>