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.
106 lines
3.2 KiB
106 lines
3.2 KiB
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);
|
|
|