You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
4.4 KiB
145 lines
4.4 KiB
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);
|
|
|