From dbb6ad203a1aeec991ad20662e1087771caa3dd6 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Tue, 19 Oct 2021 23:29:46 +0330 Subject: [PATCH] reza added some change --- src/redux/reducers/public.tsx | 5 +- src/views/Course/Lesson/index.scss | 20 ++++- src/views/Course/Lesson/index.tsx | 83 ++++++++++++++------ src/views/Course/index.tsx | 2 + src/views/VideoTube/LessonPlayList/index.tsx | 73 ++++++++++++----- src/views/VideoTube/index.tsx | 28 +++++-- 6 files changed, 155 insertions(+), 56 deletions(-) diff --git a/src/redux/reducers/public.tsx b/src/redux/reducers/public.tsx index c6b677b..a43c101 100644 --- a/src/redux/reducers/public.tsx +++ b/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": diff --git a/src/views/Course/Lesson/index.scss b/src/views/Course/Lesson/index.scss index 8ede840..698ceea 100644 --- a/src/views/Course/Lesson/index.scss +++ b/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{ diff --git a/src/views/Course/Lesson/index.tsx b/src/views/Course/Lesson/index.tsx index 46826de..0e3cf31 100644 --- a/src/views/Course/Lesson/index.tsx +++ b/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 (
toggle(lesson[0].categoryId)} >
-

{lesson[0].categoryId}

- مدت زمان درس {lesson.duration} +

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

+ {/* مدت زمان درس {lesson.duration} */}
@@ -66,26 +84,41 @@ function Lesson({ toggle, lesson, activeCategory, realCategories, vodDuration }: }} > {lesson?.map((data: any, i: any) => ( -
  • -
    - {data.type === "video" && } - {data.type === "pdf" && } -
    {data.name}
    -
    -
      -
    • {data.type !== "pdf" && duration(data.duration)}
      • - -
    • {"مشاهده"}
      • - - {/*
    • {data.download ? "دانلود" : }
      • */} -
    -
    • +
    +
  • + setSelectedLesson(selectedLesson === data.id ? null : data.id) + } + > +
    + {data.type === "video" && } + {data.type === "pdf" && } + +
    {data.name}
    +
    +
      +
    • {data.type !== "pdf" && duration(data.duration)}
      • + setCategory(lesson[0].categoryId, data.name)}> +
    • {"مشاهده"}
      • + + {/*
    • {data.download ? "دانلود" : }
      • */} +
    +
    • + {selectedLesson === data.id &&

    سلام

    } +
    ))}
    @@ -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, diff --git a/src/views/Course/index.tsx b/src/views/Course/index.tsx index 514cbc7..0e7d0b6 100644 --- a/src/views/Course/index.tsx +++ b/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 (
    {
    -
    -

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

    - -
    - {category.map((video: any, i: any) => ( + {bookId && ( +
    +

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

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

    {video.name}

    + {/*

    {file.text}

    */} +
    +
    + )) + ) : (
    setVideoActive(video)} + onClick={() => setVideoActive(category)} > - - {Number(i) + 1} - +
    {/* */} 22:05
    -

    {video.name}

    +

    {category.name}

    {/*

    {file.text}

    */}
    - ))} + )}
    } diff --git a/src/views/VideoTube/index.tsx b/src/views/VideoTube/index.tsx index 0873b7a..4d488ef 100644 --- a/src/views/VideoTube/index.tsx +++ b/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(() => { - setVideoActive(categories[0][0]); + 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({ {/* */} -