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

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