reza added list

src/components/JolPlayer/index.js

@@ -1,7 +1,7 @@
 import JoLPlayer from "jol-player";
 import file from "../../assets/videos/sea.mp4";
 
-const Video = ({fileIds}) => {
+const Video = ({fileIds, posterId}) => {
   return (
     <div style={{direction: 'ltr', textAlign: 'left', marginBottom: 10,}}>
       <JoLPlayer
@@ -17,6 +17,7 @@ const Video = ({fileIds}) => {
           isShowScreenshot : window.innerWidth > 700,
           isShowSet : window.innerWidth > 700,
           isShowPauseButton : false,
+          poster:`https://dnvn.ir/api/v1/file/${posterId}`,
           quality: [{
             name: "SD", url : `https://dnvn.ir/api/v1/file/${fileIds}`,
           }]

src/views/Course/Lesson/index.scss

@@ -35,6 +35,9 @@
     }
     &--sample{
       color: white;
+      a{
+        color: white;
+      }
       li{
         text-align: center;
       }

src/views/Course/Lesson/index.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import whiteDropdown from "../../../assets/icons/white-dropdown.png";
 import whitePlay from "../../../assets/icons/white-play.png";
 import document from "../../../assets/icons/document.png";
@@ -6,12 +7,12 @@ import "./index.scss";
 import { connect } from "react-redux";
 import { book, publicApi } from "../../../redux/actions";
 
-function Lesson({toggle, lesson, activeCategory} : any) {
+function Lesson({ toggle, lesson, activeCategory, realCategories, vodDuration }: any) {
-  const duration = (value : number) => {
+  const duration = (value: number) => {
     const minute = value % 60;
     const hour = Math.round(value / 60);
-    return (hour > 0 ? (hour + ' ' + 'ساعت') : '') + ' ' + minute + ' ' + 'دقیقه';
+    return (hour > 0 ? hour + " " + "ساعت" : "") + " " + minute + " " + "دقیقه";
-  }
+  };
   return (
     <div className="lesson d-flex flex-column">
       <header
@@ -20,10 +21,16 @@ function Lesson({toggle, lesson, activeCategory} : any) {
       >
         <div className="d-flex align-items-center">
           <img src={whiteDropdown} alt="" />
-          <h4>{lesson[0].categoryId}</h4>
+          <h4>
+            {
+              realCategories.filter(
+                (item: any) => item.id === lesson[0].categoryId
+              )[0].name
+            }
+          </h4>
         </div>
         <div className="lesson__duration d-flex">
-          مدت زمان درس {lesson.duration}
+          {/* {duration(vodDuration)} */}
         </div>
       </header>
       <header
@@ -46,22 +53,24 @@ function Lesson({toggle, lesson, activeCategory} : any) {
         className={
           "lesson__files d-flex flex-column justify-content-around" +
           " " +
-          ((lesson[0].categoryId === activeCategory)  && "lesson__files--active")
+          (lesson[0].categoryId === activeCategory && "lesson__files--active")
         }
         style={{
-          height: lesson[0].categoryId === activeCategory
+          height:
-            ? lesson.length *
+            lesson[0].categoryId === activeCategory
-              (window.innerWidth > 1007
+              ? lesson.length *
-                ? window.innerWidth / 33 + 20
+                (window.innerWidth > 1007
-                : window.innerWidth / 33 + 45)
+                  ? window.innerWidth / 33 + 20
-            : "0px",
+                  : window.innerWidth / 33 + 45)
+              : "0px",
         }}
       >
         {lesson?.map((data: any, i: any) => (
           <li
             className="lesson__files--sample justify-content-between align-items-center"
             style={{
-              display: lesson[0].categoryId === activeCategory ? "flex" : "none",
+              display:
+                lesson[0].categoryId === activeCategory ? "flex" : "none",
             }}
           >
             <div className="d-flex align-items-center">
@@ -71,7 +80,9 @@ function Lesson({toggle, lesson, activeCategory} : any) {
             </div>
             <ul className="d-flex">
               <li>{data.type !== "pdf" && duration(data.duration)}</li>
-              <li>{data.isFree && "مشاهده"}</li>
+              <Link to="/video-tube">
+                <li>{"مشاهده"}</li>
+              </Link>
               {/* <li>{data.download ? "دانلود" : <img src={lock} alt="" />}</li> */}
             </ul>
           </li>
@@ -81,8 +92,13 @@ function Lesson({toggle, lesson, activeCategory} : any) {
   );
 }
 
-export default connect((state: any) => ({
+export default connect(
-  activeCategory : state.publicApi.activeCategory
+  (state: any) => ({
-}), {
+    activeCategory: state.publicApi.activeCategory,
-  toggle : publicApi.activeCategory,
+    realCategories: state.publicApi.bookInfo?.categories,
-})(Lesson);
+    vodDuration : state.publicApi.bookInfo?.vodDuration,
+  }),
+  {
+    toggle: publicApi.activeCategory,
+  }
+)(Lesson);

src/views/Course/index.tsx

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

src/views/VideoTube/LessonPlayList/index.scss

@@ -81,9 +81,9 @@
         width: 142px;
         height: 90px;
         position: relative;
-        video{
+        img{
-          width : 100%;
+          width: 100%;
-          height : 100%;
+          height: 100%;
         }
         span{
           font-size: 18px;
@@ -126,7 +126,7 @@
         width: 132px;
         height: 90px;
         position: relative;
-        video{
+        img{
           width : 100%;
           height : 100%;
         }
@@ -171,7 +171,7 @@
         width: 182px;
         // height: 90px;
         position: relative;
-        video{
+        img{
           width : 100%;
           height : 100%;
         }
@@ -216,7 +216,7 @@
         width: 132px;
         height: 90px;
         position: relative;
-        video{
+        img{
           width : 100%;
           height : 100%;
         }

src/views/VideoTube/LessonPlayList/index.tsx

@@ -3,33 +3,59 @@ import "./index.scss";
 import { connect } from "react-redux";
 import { publicApi } from "../../../redux/actions";
 
-function LessonPlayList({ video, selectedVideo, setVideoActive, num }: any) {
+function LessonPlayList({
+  category,
+  selectedVideo,
+  setVideoActive,
+  catergories,
+  realCategories,
+}: any) {
   return (
     <>
       {
-        video.isFreeVOD && 
         <div className="lesson-playlist d-flex flex-column">
-          <div
+          <header>
-            className={
+            <h3>
-              "lesson-playlist__item d-flex align-items-center" +
+              {
-              " " +
+                realCategories.filter(
-              (video.id === selectedVideo.id && "lesson-playlist__item--active")
+                  (item: any) => item.id === category[0].categoryId
-            }
+                )[0].name
-            // key={i}
+              }
-            onClick={() => setVideoActive(video)}
+            </h3>
-          >
+            <span></span>
-            <span className="lesson-playlist__item--count">{num}</span>
+          </header>
-            <div className="lesson-playlist__item--video">
+          {category.map((video: any, i: any) => (
-              <video>
+            <div
-                <source src={`https://dnvn.ir/api/v1/file/${video.fileIds}`} />
+              className={
-              </video>
+                "lesson-playlist__item d-flex align-items-center" +
-              <span>22:05</span>
+                " " +
+                (video?.id === selectedVideo?.id &&
+                  "lesson-playlist__item--active")
+              }
+              key={i}
+              onClick={() => setVideoActive(video)}
+            >
+              <span className="lesson-playlist__item--count">
+                {Number(i) + 1}
+              </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/${video.posterId}`}
+                  alt=""
+                />
+                <span>22:05</span>
+              </div>
+              <div className="lesson-playlist__item--text d-flex flex-column">
+                <h4>{video.name}</h4>
+                {/* <p>{file.text}</p> */}
+              </div>
             </div>
-            <div className="lesson-playlist__item--text d-flex flex-column">
+          ))}
-              <h4>{video.name}</h4>
-              {/* <p>{file.text}</p> */}
-            </div>
-          </div>
         </div>
       }
     </>
@@ -39,6 +65,7 @@ function LessonPlayList({ video, selectedVideo, setVideoActive, num }: any) {
 export default connect(
   (state: any) => ({
     selectedVideo: state.publicApi.selectedVideo,
+    realCategories: state.publicApi.bookInfo?.categories,
   }),
   {
     setVideoActive: publicApi.setVideoActive,

src/views/VideoTube/index.tsx

@@ -15,9 +15,17 @@ import scroll from "../../util/scroll.js";
 import { book, publicApi } from "../../redux/actions";
 import Loader from "../../components/Loader";
 
-function VodTube({ selectedVideo, info, bookSection, loading }: any) {
+function VodTube({
+  selectedVideo,
+  info,
+  bookSection,
+  loading,
+  getInfo,
+  categories,
+  setVideoActive,
+}: any) {
   useEffect(() => {
-    const free: any = localStorage.getItem("free")?.split(",");
+    // const free: any = localStorage.getItem("free")?.split(",");
     scroll.goToTop();
     // getInfo({
     //   bookId: 1,
@@ -26,9 +34,12 @@ function VodTube({ selectedVideo, info, bookSection, loading }: any) {
     //   //   window.location.pathname.length
     //   // ),
     // });
-    bookSection({ bookId: free[0], categoryId: free[1] });
+    getInfo({ bookId: localStorage.getItem("bookId") });
   }, []);
 
+  useEffect(() => {
+    setVideoActive(categories[0][0]);
+  }, [info]);
   return (
     <>
       <div
@@ -42,7 +53,7 @@ function VodTube({ selectedVideo, info, bookSection, loading }: any) {
               {/* <video controls>
               <source src={selectedVideo.src} />
             </video> */}
-              <Video fileIds={selectedVideo?.fileIds} />
+              <Video fileIds={selectedVideo?.fileIds} posterId={selectedVideo?.posterId} />
               <span className="desktop">درس دوم / بیست و یکم</span>
               <h1 className="desktop">{selectedVideo?.name}</h1>
               {/* <p className="desktop">{selectedVideo.text}</p> */}
@@ -72,8 +83,8 @@ function VodTube({ selectedVideo, info, bookSection, loading }: any) {
                 <img src={listIcon} alt="" />
               </header>
               <div className="video-tube__sidebar--playlist___list d-flex flex-column">
-                {info?.vods.map((video: any, i: any) => (
+                {categories?.map((video: any, i: any) => (
-                  <LessonPlayList video={video} key={i} num={i + 1} />
+                  <LessonPlayList category={video} key={i} />
                 ))}
               </div>
             </section>
@@ -135,10 +146,12 @@ export default connect(
     selectedVideo: state.publicApi.selectedVideo,
     info: state.publicApi.bookSection,
     loading: state.publicApi.loading,
+    categories: state.publicApi.categories,
   }),
   {
     getInfo: publicApi.bookInfo,
     getBookList: book.list,
     bookSection: publicApi.bookSection,
+    setVideoActive: publicApi.setVideoActive,
   }
 )(VodTube);