diff --git a/src/assets/icons/dropdown-blue.svg b/src/assets/icons/dropdown-blue.svg new file mode 100644 index 0000000..26e9ee6 --- /dev/null +++ b/src/assets/icons/dropdown-blue.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/CourseChapter/index.js b/src/components/CourseChapter/index.js index d973b8b..df92b20 100644 --- a/src/components/CourseChapter/index.js +++ b/src/components/CourseChapter/index.js @@ -1,112 +1,160 @@ import React, { useState } from "react"; -import './index.css'; - -const CourseChapter = ({ chapters }) => { - const [selectedLesson, setSelectedLesson] = useState(null); +import { connect } from "react-redux"; +import { publicApi } from "../../redux/actions"; +import { toast } from "react-toastify"; +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 ( -
-
- {/* top */} -
-
-

سرفصل دوره

-
-
- علوم تجربی - پایه ششم -
+
+
+
+

سرفصل دوره

- {/* divider */} -
- {/* course title */} -
- {chapters.map((chapter, index) => ( -
-
-

{chapter.title}

- {chapter.duration} -
- {/* course lessons */} - {chapter.lessons.map((lesson, i) => ( +
+ {book?.name} + + {"پایه" + " " + grades[book?.gradeId]} + +
+
+ +
+
+ {/*

+ {(seasons.length > 0 && playList.length > 0) && + seasons?.filter((item) => item?.id === playList[0]?.categoryId)[0] + ?.name} +

*/} + {/* {video?.duration} */} +
+ {playList?.map((video, index) => ( +
+
+ {/* right div dot dot */}
- {/* right div dot dot */} + + + +
+ {/* left div content */} +
-
- -
- {/* left div content */} -
setSelectedLesson(lesson)} + onClick={() => + video?.isFreeVod || +userId === 140 + ? setVideoActive(video) + : toast.error("ابتدا محصول رو خریداری کن!") + } + disabled={true} > {/* top */} -
+

- {lesson.title} + {video?.name}

- {lesson.duration} + {duration(video?.duration)}
{/* divider */}
{/* bottom */} - {lesson.play} + پخش
- ))} +
))} -
- {/* blue left border */} - {/*
*/}
); }; -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: [ diff --git a/src/components/JolPlayer/index.js b/src/components/JolPlayer/index.js index 62c0c22..e23d7cd 100644 --- a/src/components/JolPlayer/index.js +++ b/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", diff --git a/src/components/Product/index.js b/src/components/Product/index.js index 04e2376..95642f7 100644 --- a/src/components/Product/index.js +++ b/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 = ({ )}

- {product?.product[1]?.price} تومان + {separate(product?.product[1]?.price)} تومان

{/* add to cart */} diff --git a/src/components/ProductStatusCard/index.js b/src/components/ProductStatusCard/index.js index f0aa378..0a3cdd9 100644 --- a/src/components/ProductStatusCard/index.js +++ b/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 = ({ ))}

- {price} + {separate(price)} تومان

diff --git a/src/components/ProductSuggestion/index.js b/src/components/ProductSuggestion/index.js index 2b0d810..e4d6826 100644 --- a/src/components/ProductSuggestion/index.js +++ b/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 (

@@ -43,11 +50,15 @@ const ProductSuggestion = ({ suggestions, isDark, id, getSimilar, book, similarL ${selectedProduct === book ? "bg-white" : ""}`} onClick={() => setSelectedProduct(book)} > - +

{book?.name}

- {book?.price} - تومان + {separate(book?.price)} + تومان

{/*
انتخاب شما @@ -72,8 +83,7 @@ const ProductSuggestion = ({ suggestions, isDark, id, getSimilar, book, similarL

 جمع لوازم اختیاری خریداری شده  - {price} -   + {separate(price)} تومان

@@ -84,7 +94,7 @@ const ProductSuggestion = ({ suggestions, isDark, id, getSimilar, book, similarL در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید

-
+ {/* ); }; @@ -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 = { diff --git a/src/views/Products/layouts/Main.js b/src/views/Products/layouts/Main.js index 1b39799..7ee9b89 100644 --- a/src/views/Products/layouts/Main.js +++ b/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 (
@@ -103,44 +61,42 @@ export const Main = ({ ))}
- -
- - } - leftArrow={ - - } - > - {videosData.map((video, index) => ( - - ))} - -
+ {books?.length > 0 && ( +
+ + } + leftArrow={ + + } + > + {books?.map((video, index) => ( + + ))} + +
+ )}
{selectedGrade @@ -173,6 +129,7 @@ export const Main = ({ product={product} index={Number(index)} imageSize={4.5} + grades={grades} /> ))} diff --git a/src/views/Video/components/Season.js b/src/views/Video/components/Season.js index 896f8fc..a3e306f 100644 --- a/src/views/Video/components/Season.js +++ b/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 ? ( */} ) : ( - +
  • -
    +
    {unit.name}
    +
    + setCategory(season[0].categoryId, unit.name)} + > + {Number(index) === 0 ? "تماشا" : "قفل"} + +
  • - +
    ); }; return isMobile ? ( @@ -99,21 +128,38 @@ const Season = ({ season.map((unit, index) => )}
    ) : ( -
  • toggle(season[0].categoryId)} - > -
    - +
  • +
    toggle(season[0].categoryId)} + > + { realSeasons.filter((item) => item.id === season[0].categoryId)[0] .name } +
    -
      - {season[0].categoryId === activeSeason && - season.map((unit, index) => )} +
        + {season.map((unit, index) => ( + + ))}
      ); diff --git a/src/views/VideoDisplay/Desktop/index.js b/src/views/VideoDisplay/Desktop/index.js deleted file mode 100644 index 0eba82d..0000000 --- a/src/views/VideoDisplay/Desktop/index.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from "react"; -import CourseChapter from "../../../components/CourseChapter"; -import VideoPlayer from "../../../components/VideoPlayer"; -const DesktopVideoDisplay = () =>{ - return( -
      -
      -
      -
      - - - - -

      ساز های باستانی ایران عزیز

      -

      - لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. -

      -
      - -
      - {/*
      -
      - - {product.name} - - {product.grade} -
      - -
      */} -
      - -
      -
      -
      - ); -}; - -export default DesktopVideoDisplay; \ No newline at end of file diff --git a/src/views/VideoDisplay/index.js b/src/views/VideoDisplay/index.js index 444f031..8d2d199 100644 --- a/src/views/VideoDisplay/index.js +++ b/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 = ''; return isMobile ? ( @@ -92,21 +102,58 @@ function VideoDisplay({
  • ) : ( - +
    +
    +
    + +

    + {selectedVideo?.name} +

    +

    + لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با + استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در + ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، + و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای + زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و + متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان + رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد + کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه + راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل + حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود + طراحی اساسا مورد استفاده قرار گیرد. +

    +
    + +
    + {/*
    +
    + + {product.name} + + {product.grade} +
    + +
    */} +
    +
    ); } const mapStateToProps = (state) => ({ isMobile: state.publicApi.isMobile, - book: state.publicApi.bookInfo, - grades: state.publicApi.categories, + book: state.publicApi.bookSection, + 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);