From bd59ebc506ad137b78b27f07de1c1e9909a0b24e Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Tue, 19 Oct 2021 13:02:13 +0330 Subject: [PATCH] reza added list --- src/components/JolPlayer/index.js | 3 +- src/views/Course/Lesson/index.scss | 3 + src/views/Course/Lesson/index.tsx | 56 +++++++++------ src/views/Course/index.tsx | 5 +- src/views/VideoTube/LessonPlayList/index.scss | 12 ++-- src/views/VideoTube/LessonPlayList/index.tsx | 71 +++++++++++++------ src/views/VideoTube/index.tsx | 25 +++++-- 7 files changed, 118 insertions(+), 57 deletions(-) diff --git a/src/components/JolPlayer/index.js b/src/components/JolPlayer/index.js index 6f4a16e..1b7b24e 100644 --- a/src/components/JolPlayer/index.js +++ b/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 (
{ 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}`, }] diff --git a/src/views/Course/Lesson/index.scss b/src/views/Course/Lesson/index.scss index c063b34..8ede840 100644 --- a/src/views/Course/Lesson/index.scss +++ b/src/views/Course/Lesson/index.scss @@ -35,6 +35,9 @@ } &--sample{ color: white; + a{ + color: white; + } li{ text-align: center; } diff --git a/src/views/Course/Lesson/index.tsx b/src/views/Course/Lesson/index.tsx index 9cd354a..46826de 100644 --- a/src/views/Course/Lesson/index.tsx +++ b/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) { - const duration = (value : number) => { +function Lesson({ toggle, lesson, activeCategory, realCategories, vodDuration }: any) { + 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 (
-

{lesson[0].categoryId}

+

+ { + realCategories.filter( + (item: any) => item.id === lesson[0].categoryId + )[0].name + } +

- مدت زمان درس {lesson.duration} + {/* {duration(vodDuration)} */}
1007 - ? window.innerWidth / 33 + 20 - : window.innerWidth / 33 + 45) - : "0px", + height: + lesson[0].categoryId === activeCategory + ? lesson.length * + (window.innerWidth > 1007 + ? window.innerWidth / 33 + 20 + : window.innerWidth / 33 + 45) + : "0px", }} > {lesson?.map((data: any, i: any) => (
  • @@ -71,7 +80,9 @@ function Lesson({toggle, lesson, activeCategory} : any) {
    • {data.type !== "pdf" && duration(data.duration)}
      • -
    • {data.isFree && "مشاهده"}
      • + +
    • {"مشاهده"}
      • + {/*
    • {data.download ? "دانلود" : }
      • */}
    • @@ -81,8 +92,13 @@ function Lesson({toggle, lesson, activeCategory} : any) { ); } -export default connect((state: any) => ({ - activeCategory : state.publicApi.activeCategory -}), { - toggle : publicApi.activeCategory, -})(Lesson); +export default connect( + (state: any) => ({ + activeCategory: state.publicApi.activeCategory, + realCategories: state.publicApi.bookInfo?.categories, + vodDuration : state.publicApi.bookInfo?.vodDuration, + }), + { + toggle: publicApi.activeCategory, + } +)(Lesson); diff --git a/src/views/Course/index.tsx b/src/views/Course/index.tsx index 80c70f0..514cbc7 100644 --- a/src/views/Course/index.tsx +++ b/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]; - localStorage.setItem("free", location.getId() + "," + freeCat?.categoryId); + // const freeCat = info?.vods.filter((item: any) => item?.isFreeVOD)[0]; + // localStorage.setItem("free", location.getId() + "," + freeCat?.categoryId); + localStorage.setItem("bookId", location.getId()); }; return (
    { - video.isFreeVOD &&
    -
    setVideoActive(video)} - > - {num} -
    - - 22:05 +
    +

    + { + realCategories.filter( + (item: any) => item.id === category[0].categoryId + )[0].name + } +

    + +
    + {category.map((video: any, i: any) => ( +
    setVideoActive(video)} + > + + {Number(i) + 1} + +
    + {/* */} + + 22:05 +
    +
    +

    {video.name}

    + {/*

    {file.text}

    */} +
    -
    -

    {video.name}

    - {/*

    {file.text}

    */} -
    -
    + ))}
    } @@ -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, diff --git a/src/views/VideoTube/index.tsx b/src/views/VideoTube/index.tsx index 1d3c349..0873b7a 100644 --- a/src/views/VideoTube/index.tsx +++ b/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 ( <>
    */} -
    - {info?.vods.map((video: any, i: any) => ( - + {categories?.map((video: any, i: any) => ( + ))}
    @@ -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);