import React from "react"; import "./index.scss"; import { connect } from "react-redux"; import { publicApi } from "../../../redux/actions"; function LessonPlayList({ category, selectedVideo, setVideoActive, catergories, realCategories, }: any) { const bookId = localStorage.getItem("bookId"); return ( <> { <div className="lesson-playlist d-flex flex-column"> {bookId && ( <header> <h3> { realCategories.filter( (item: any) => item.id === category[0].categoryId )[0].name } </h3> <span></span> </header> )} {bookId ? ( category.map((video: any, i: any) => ( <div className={ "lesson-playlist__item d-flex align-items-center" + " " + (video?.id === selectedVideo?.id && "lesson-playlist__item--active") } key={i} 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> </div> )) ) : ( <div className={ "lesson-playlist__item d-flex align-items-center" + " " + (category?.id === selectedVideo?.id && "lesson-playlist__item--active") } onClick={() => setVideoActive(category)} > <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> </div> )} </div> } </> ); } export default connect( (state: any) => ({ selectedVideo: state.publicApi.selectedVideo, realCategories: state.publicApi.bookInfo?.categories, }), { setVideoActive: publicApi.setVideoActive, } )(LessonPlayList);