import React, { useEffect } from "react"; import { connect } from "react-redux"; // import { publicApi } from "../../../redux/actions"; import { Link } from "react-router-dom"; import _ from 'lodash'; function LessonPlayList({ category, selectedVideo, setVideoActive, catergories, realCategories, vods, theme, }) { const bookId = localStorage.getItem("bookId"); useEffect(() => { if (localStorage.getItem("scroll-list") && vods) { const list = document.getElementById("list"); const listItem = document.getElementById( "listItem" + selectedVideo?.id ); const elementHeight = (listItem)?.offsetHeight; const listHeight = (list).offsetHeight; const index = vods?.findIndex( (item) => item?.name === selectedVideo?.name ); console.log(index); console.log(listHeight, elementHeight * (Number(index) + 1)); if (elementHeight * (Number(index) + 1) > listHeight) { list.scrollTo(0, elementHeight * (Number(index) + 1) + elementHeight); } localStorage.removeItem("scroll-list"); } }, [vods]); const light = theme === "light"; return ( <> { <div className={_.join( [ "lesson-playlist d-flex flex-column", light ? "lesson-playlist-light" : "lesson-playlist-dark", ], " " )} > {bookId && ( <header> <h3> { realCategories.filter( (item) => item.id === category[0].categoryId )[0].name } </h3> <span></span> </header> )} {bookId ? ( category.map((video, i) => ( <Link to={"/video/" + video.id} className={ "lesson-playlist__item d-flex align-items-center" + " " + (video?.id === selectedVideo?.id && "lesson-playlist__item--active") } key={i} id={"listItem" + video.id} 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> </Link> )) ) : ( <Link to={"/video/" + category.id} className={ "lesson-playlist__item d-flex align-items-center" + " " + (category?.id === selectedVideo?.id && "lesson-playlist__item--active") } onClick={() => setVideoActive(category)} id={"listItem" + category.id} > <span className="lesson-playlist__item--count"></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/${category.posterId}`} alt="" /> <span>22:05</span> </div> <div className="lesson-playlist__item--text d-flex flex-column"> <h4>{category.name}</h4> {/* <p>{file.text}</p> */} </div> </Link> )} </div> } </> ); } export default connect( (state) => ({ selectedVideo: state.publicApi.selectedVideo, realCategories: state.publicApi.bookInfo?.categories, vods: state.publicApi.bookSection?.vods, }), { // setVideoActive: publicApi.setVideoActive, } )(LessonPlayList);