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

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);