import React, { useState, useEffect, useRef } from "react"; import LessonPlayList from "./LessonPlayList"; import Attachments from "./Attachments"; import Book from "./Book"; import Comment from "./Comment"; import AddComment from "./AddComment"; import Video from "../../../components/JolPlayer"; import listIcon from "../../assets/icons/list.png"; import { connect } from "react-redux"; import _ from "lodash"; import scroll from "../../../utils/scroll.js"; import location from "../../../utils/location.js"; import { book, publicApi } from "../../redux/actions"; import Loader from "../../components/Loader"; function VodTube({ selectedVideo, info, bookSection, loading, getInfo, categories, setVideoActive, allBooks, theme, }) { const videoListTag = useRef(null); useEffect(() => { localStorage.setItem("scroll-list", "on"); scroll.goToTop(); getInfo({ bookId: localStorage.getItem("bookId") ? localStorage.getItem("bookId") : localStorage.getItem("category")?.split(",")[0], }); }, []); useEffect(() => { if (allBooks && localStorage.getItem("category")) { const cat = localStorage.getItem("category")?.split(","); bookSection({ bookId: cat[0], categoryId: cat[1] }); } }, [allBooks]); const light = theme === "light"; return ( <> <div className={_.join( [ "video-tube main d-flex flex-column", light ? "video-tube-light bg-white" : "video-tube-dark bg-black", ], " " )} style={{ filter: loading ? "blur(8px)" : "" }} > <main className="d-flex"> <div className="video-tube__content d-flex flex-column"> <section className="video-tube__content--display d-flex flex-column"> {/* <video controls> <source src={selectedVideo.src} /> </video> */} <Video fileIds={selectedVideo?.fileIds} posterId={selectedVideo?.posterId} /> {/* <span className="desktop">درس دوم / بیست و یکم</span> */} <h1 className="desktop">{selectedVideo?.name}</h1> {/* <p className="desktop">{selectedVideo.text}</p> */} </section> <section className="desktop video-tube__content--comments flex-column"> <header className="d-flex justify-content-between align-items-center"> <h2>نظرات</h2> <button>بستن نظرات</button> </header> <div className="video-tube__content-comments___list d-flex flex-column"> {info?.comments?.map((comment, i) => ( <Comment comment={comment} key={i} /> ))} </div> </section> <section className="desktop video-tube__content--addComment"> <AddComment theme={theme} /> </section> </div> <div className="video-tube__sidebar d-flex flex-column"> <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> {localStorage.getItem("category")?.split(",")[1] || "لیست فیلمها"} </h2> {/* <p>در این قسمت توضیحی کوتاه قرار می گیرد</p> */} </div> <img src={listIcon} alt="" /> </header> <div ref={videoListTag} className="video-tube__sidebar--playlist___list d-flex flex-column" id="list" > {localStorage.getItem("bookId") ? categories?.map((video, i) => ( <LessonPlayList theme={theme} category={video} key={i} /> )) : info?.vods.map((video, i) => ( <LessonPlayList theme={theme} category={video} key={i} /> ))} </div> </section> {info?.attachments.length > 0 && ( <section className="video-tube__sidebar--attachments d-flex flex-column"> <header className="d-flex align-items-center"> <div className="d-flex flex-column"> <h2>فایل پیوست تمارین این فصل</h2> {/* <p>در این قسمت توضیحی کوتاه قرار می گیرد</p> */} </div> </header> <div className="video-tube__sidebar--attachments___list d-flex flex-column"> {info?.attachments?.map((file, i) => ( <Attachments file={file} key={i} /> ))} </div> </section> )} {info?.related && ( <section className="video-tube__sidebar--suggests d-flex flex-column"> <header className="d-flex justify-content-between align-items-center"> <h2>پیشنهاد دانوین برای شما</h2> <span>تا 50% تخفیف </span> </header> <div className="video-tube__sidebar--suggests___list d-flex justify-content-between align-items-center"> {info?.related.slice(0, 3).map((item, i) => ( <Book data={item} key={i} /> ))} </div> </section> )} <section className="mobile video-tube__content--comments flex-column"> <header className="d-flex justify-content-between align-items-center"> <h2>نظرات</h2> <button>بستن نظرات</button> </header> <div className="video-tube__content-comments___list d-flex flex-column"> {info?.comments?.map((comment, i) => ( <Comment comment={comment} key={i} /> ))} </div> </section> </div> <section className="mobile video-tube__content--addComment"> <AddComment /> </section> </main> </div> {loading && ( <div className="full-loader"> <Loader size={50} /> </div> )} </> ); } export default connect( (state) => ({ selectedVideo: state.publicApi.selectedVideo, info: state.publicApi.bookSection, loading: state.publicApi.loading, categories: state.publicApi.categories, allBooks: state.publicApi.bookInfo?.vods, theme: state.publicApi.theme, }), { getInfo: publicApi.bookInfo, getBookList: book.list, bookSection: publicApi.bookSection, setVideoActive: publicApi.setVideoActive, } )(VodTube);