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.
218 lines
7.2 KiB
218 lines
7.2 KiB
import React, { useState } from "react"; |
|
import { connect } from "react-redux"; |
|
import { publicApi } from "../../redux/actions"; |
|
import { toast } from "react-toastify"; |
|
import "./index.css"; |
|
|
|
const CourseChapter = ({ |
|
playList, |
|
seasons, |
|
book, |
|
grades, |
|
selectedVideo, |
|
userId, |
|
setVideoActive, |
|
}) => { |
|
const duration = (value) => { |
|
const minute = value % 60; |
|
const hour = Math.round(value / 60); |
|
return ( |
|
(hour > 0 |
|
? (hour.toString().length === 1 ? "0" + hour.toString() : hour) + "" |
|
: "") + |
|
":" + |
|
(minute.toString().length === 1 ? "0" + minute.toString() : minute) |
|
); |
|
}; |
|
return ( |
|
<section |
|
className={`bg-green1 bg-opacity-10 shadow-md py-5 pr-5 overflow-hidden flex flex-col rounded-md`} |
|
style={{ |
|
minWidth: "calc(100% / 12 * 3.5)", |
|
height: "calc(100vh - 300px)", |
|
}} |
|
> |
|
<div className="flex flex-row w-full items-center justify-between"> |
|
<div> |
|
<h2 className="text-green7B bg-opacity-5 text-base font-semibold"> |
|
سرفصل دوره |
|
</h2> |
|
</div> |
|
<div className="flex flex-row-reverse items-center divide-x divide-solid transform translate-x-2"> |
|
<span className="text-green7B text-sm px-2">{book?.name}</span> |
|
<span className="text-green7B text-sm px-2"> |
|
{"پایه" + " " + grades[book?.gradeId]} |
|
</span> |
|
</div> |
|
</div> |
|
<span className="w-full h-px bg-blue-200 my-4"></span> |
|
<div className="overflow-y-scroll w-full hasScrollbar flex-1 flex flex-col"> |
|
<div className="bg-green-600 rounded-sm p-4 flex flex-row items-center justify-between mb-2"> |
|
<p className="text-tiny font-bold text-white"> |
|
{seasons?.length > 0 && |
|
playList?.length > 0 && |
|
seasons?.filter((item) => item?.id === playList[0]?.categoryId)[0] |
|
?.name} |
|
</p> |
|
{/* <span className="text-sm text-white">{video?.duration}</span> */} |
|
</div> |
|
{playList?.map((video, index) => ( |
|
<div |
|
className={`flex flex-col pl-4 ${ |
|
video?.isFreeVod ? "cursor-pointer" : "cursor-not-allowed" |
|
}`} |
|
key={index} |
|
> |
|
<div |
|
className="flex flex-row items-center justify-around" |
|
key={index} |
|
> |
|
{/* right div dot dot */} |
|
<div |
|
className="flex items-center justify-center relative flex-col h-full" |
|
style={{ width: "10%" }} |
|
> |
|
<span |
|
className={`w-px flex-1 transform -translate-x-0 ${ |
|
Number(index) !== 0 ? "border-dashed" : "" |
|
} border-r border-blueC0`} |
|
></span> |
|
<span className={`w-4 h-4 rounded-full bg-blueC0`}></span> |
|
<span |
|
className={`w-px flex-1 transform -translate-x-0 ${ |
|
Number(index) !== playList?.length - 1 |
|
? "border-dashed" |
|
: "" |
|
} border-r border-blueC0`} |
|
></span> |
|
</div> |
|
{/* left div content */} |
|
<div className="py-1.5" style={{ width: "90%" }}> |
|
<div |
|
className={`w-full bg-white flex flex-col transition duration-400 hover:scale-95 shadow-md transform rounded-md |
|
${ |
|
selectedVideo?.id === video?.id |
|
? "bg-green-600 text-white" |
|
: "text-blueC0" |
|
} |
|
`} |
|
onClick={() => |
|
video?.isFreeVod || +userId === 140 |
|
? setVideoActive(video) |
|
: toast.error("ابتدا محصول رو خریداری کن!") |
|
} |
|
disabled={true} |
|
> |
|
{/* top */} |
|
<div className="flex flex-row items-center justify-between p-3 border-0 border-b border-solid border-green-200"> |
|
<p |
|
className={`text-tiny font-bold |
|
${selectedVideo?.id === video?.id ? "text-white" : ""}`} |
|
> |
|
{video?.name} |
|
</p> |
|
<span |
|
className={`text-tiny border-r border-solid border-blue-200 pr-1 |
|
${ |
|
selectedVideo?.id === video?.id |
|
? "text-white" |
|
: "text-blueC0" |
|
}`} |
|
> |
|
{duration(video?.duration)} |
|
</span> |
|
</div> |
|
{/* divider */} |
|
<div |
|
className={`border-t border-blue-600 ${ |
|
selectedVideo?.id === video?.id ? "border-red-600" : "" |
|
}`} |
|
></div> |
|
{/* bottom */} |
|
<span |
|
className={`text-tiny text-center font-medium p-3 |
|
${ |
|
selectedVideo?.id === video?.id |
|
? "text-white" |
|
: "text-blueC0" |
|
}`} |
|
> |
|
{selectedVideo?.id === video?.id ? "در حال پخش" : "پخش"} |
|
</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
))} |
|
</div> |
|
</section> |
|
); |
|
}; |
|
|
|
const mapStateToProps = (state) => ({ |
|
selectedVideo: state.publicApi.selectedVideo, |
|
seasons: state.publicApi.bookInfo?.categories, |
|
book: state.publicApi.bookInfo, |
|
grades: state.publicApi.grades, |
|
// vods: state.publicApi.bookSection?.vods, |
|
userId: state?.user?.status?.id, |
|
}); |
|
|
|
const mapDispatchToProps = { |
|
setVideoActive: publicApi.setVideoActive, |
|
}; |
|
|
|
export default connect(mapStateToProps)(CourseChapter); |
|
|
|
CourseChapter.defaultProps = { |
|
chapters: [ |
|
{ |
|
title: "فصل اول: مباحث جوشش مواد مذاب در مرکز", |
|
duration: "2:30:13", |
|
lessons: [ |
|
{ |
|
title: "آیا گوگل از ما دزدی میکند؟", |
|
duration: "14:30", |
|
play: "پخش", |
|
passed: true, |
|
}, |
|
{ |
|
title: "چگونگی ساخت نیروگاه های برقی", |
|
duration: "22:31", |
|
play: "در حال پخش", |
|
passed: true, |
|
}, |
|
{ |
|
title: "آیا از اینترنت می توان درآمد داشت؟", |
|
duration: "10:09", |
|
play: "نمایش", |
|
passed: false, |
|
}, |
|
{ |
|
title: "زمین سبز و آسمان آبی", |
|
duration: "56:09", |
|
play: "نمایش", |
|
passed: false, |
|
}, |
|
{ |
|
title: "زمین سبز و آسمان آبی", |
|
duration: "56:09", |
|
play: "نمایش", |
|
passed: false, |
|
}, |
|
{ |
|
title: "زمین سبز و آسمان آبی", |
|
duration: "56:09", |
|
play: "نمایش", |
|
passed: false, |
|
}, |
|
{ |
|
title: "زمین سبز و آسمان آبی", |
|
duration: "56:09", |
|
play: "نمایش", |
|
passed: false, |
|
}, |
|
], |
|
}, |
|
], |
|
};
|
|
|