|
|
|
|
@ -1,112 +1,160 @@ |
|
|
|
|
import React, { useState } from "react"; |
|
|
|
|
import './index.css'; |
|
|
|
|
|
|
|
|
|
const CourseChapter = ({ chapters }) => { |
|
|
|
|
const [selectedLesson, setSelectedLesson] = useState(null); |
|
|
|
|
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 ( |
|
|
|
|
<section style={{ width: "40%" }} className="bg-white mx-auto my-20 p-4"> |
|
|
|
|
<div |
|
|
|
|
className="rounded py-5 px-4 relative" |
|
|
|
|
style={{ backgroundColor: "#196EC033", height: '530px'}} |
|
|
|
|
(hour > 0 |
|
|
|
|
? (hour.toString().length === 1 ? "0" + hour.toString() : hour) + "" |
|
|
|
|
: "") + |
|
|
|
|
":" + |
|
|
|
|
(minute.toString().length === 1 ? "0" + minute.toString() : minute) |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
return ( |
|
|
|
|
<section |
|
|
|
|
className="bg-blueFF1 py-5 pr-5 overflow-hidden flex flex-col" |
|
|
|
|
style={{ |
|
|
|
|
width: "calc(100% / 12 * 3.5)", |
|
|
|
|
height: "calc(100vh - 300px)", |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{/* top */} |
|
|
|
|
<div className="flex flex-row items-center justify-between"> |
|
|
|
|
<div className="flex flex-row w-full items-center justify-between"> |
|
|
|
|
<div> |
|
|
|
|
<h2 className="text-blue-800 text-base">سرفصل دوره</h2> |
|
|
|
|
<h2 className="text-blue-800 text-base font-semibold">سرفصل دوره</h2> |
|
|
|
|
</div> |
|
|
|
|
<div className="flex flex-row-reverse items-center divide-x transform translate-x-2"> |
|
|
|
|
<span className="text-blue-800 text-sm px-2">علوم تجربی</span> |
|
|
|
|
<span className="text-blue-800 text-sm px-2">پایه ششم</span> |
|
|
|
|
<div className="flex flex-row-reverse items-center divide-x divide-solid transform translate-x-2"> |
|
|
|
|
<span className="text-blue-800 text-sm px-2">{book?.name}</span> |
|
|
|
|
<span className="text-blue-800 text-sm px-2"> |
|
|
|
|
{"پایه" + " " + grades[book?.gradeId]} |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
{/* divider */} |
|
|
|
|
<div className="border-b border-blue-300 border-solid bg-opacity-10 my-5"></div> |
|
|
|
|
{/* course title */} |
|
|
|
|
<div className="overflow-y-scroll w-full hasScrollbar" style={{ |
|
|
|
|
height: '430px' |
|
|
|
|
}}> |
|
|
|
|
{chapters.map((chapter, index) => ( |
|
|
|
|
<div className="flex flex-col" key={index}> |
|
|
|
|
<div className="bg-blue-600 rounded-sm p-4 flex flex-row items-center justify-between"> |
|
|
|
|
<p className="text-sm text-white">{chapter.title}</p> |
|
|
|
|
<span className="text-sm text-white">{chapter.duration}</span> |
|
|
|
|
<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-blue-600 rounded-sm p-4 flex flex-row items-center justify-between mb-2"> |
|
|
|
|
{/* <p className="text-sm 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> |
|
|
|
|
{/* course lessons */} |
|
|
|
|
{chapter.lessons.map((lesson, i) => ( |
|
|
|
|
{playList?.map((video, index) => ( |
|
|
|
|
<div className="flex flex-col pl-4" key={index}> |
|
|
|
|
<div |
|
|
|
|
className="flex flex-row items-center justify-around" |
|
|
|
|
key={i} |
|
|
|
|
key={index} |
|
|
|
|
> |
|
|
|
|
{/* right div dot dot */} |
|
|
|
|
<div |
|
|
|
|
className="flex items-center relative flex-col " |
|
|
|
|
style={{ width: "10%", transform: "translateY(30px)" }} |
|
|
|
|
className="flex items-center justify-center relative flex-col h-full" |
|
|
|
|
style={{ width: "10%" }} |
|
|
|
|
> |
|
|
|
|
<div |
|
|
|
|
className={`flex justify-center items-center w-4 h-4 rounded-full
|
|
|
|
|
${selectedLesson === lesson ? "bg-red-600" : "bg-blue-600"}, |
|
|
|
|
${lesson.passed ? "bg-blue-600" : "bg-gray-400"} |
|
|
|
|
`}
|
|
|
|
|
></div> |
|
|
|
|
<span |
|
|
|
|
className="w-1" |
|
|
|
|
style={{ |
|
|
|
|
borderRight: "2px dashed #86A0B9", |
|
|
|
|
transform: "translateX(-1px)", |
|
|
|
|
height: "65px", |
|
|
|
|
}} |
|
|
|
|
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={`mt-2 bg-white border border-blue-300 flex flex-col border border-solid cursor-pointer transition duration-200 ease-in-out group hover:bg-blue-600
|
|
|
|
|
${selectedLesson === lesson ? "bg-blue-600 text-white-700" : "text-blue-500"}`}
|
|
|
|
|
style={{ width: "80%" }} |
|
|
|
|
onClick={() => setSelectedLesson(lesson)} |
|
|
|
|
className={`w-full bg-white flex flex-col transition duration-400 hover:scale-95 shadow-md transform rounded-md
|
|
|
|
|
${ |
|
|
|
|
selectedVideo?.id === video?.id |
|
|
|
|
? "bg-blue-600 text-white-700" |
|
|
|
|
: "text-blue-500" |
|
|
|
|
} |
|
|
|
|
`}
|
|
|
|
|
onClick={() => |
|
|
|
|
video?.isFreeVod || +userId === 140 |
|
|
|
|
? setVideoActive(video) |
|
|
|
|
: toast.error("ابتدا محصول رو خریداری کن!") |
|
|
|
|
} |
|
|
|
|
disabled={true} |
|
|
|
|
> |
|
|
|
|
{/* top */} |
|
|
|
|
<div className="flex flex-row items-center justify-between p-4 border-0 border-b border-solid border-blue-500"> |
|
|
|
|
<div className="flex flex-row items-center justify-between p-3 border-0 border-b border-solid border-blue-300"> |
|
|
|
|
<p |
|
|
|
|
className={`text-sm group-hover:text-white
|
|
|
|
|
${selectedLesson === lesson ? "text-white" : ""}`}
|
|
|
|
|
className={`text-tiny
|
|
|
|
|
${selectedVideo?.id === video?.id ? "text-white" : ""}`}
|
|
|
|
|
> |
|
|
|
|
{lesson.title} |
|
|
|
|
{video?.name} |
|
|
|
|
</p> |
|
|
|
|
<span |
|
|
|
|
className={`text-xs group-hover:text-white border-r border-solid border-blue-200 pr-1
|
|
|
|
|
${selectedLesson === lesson ? "text-white" : "text-blue-500"}`}
|
|
|
|
|
className={`text-sm border-r border-solid border-blue-200 pr-1
|
|
|
|
|
${ |
|
|
|
|
selectedVideo?.id === video?.id |
|
|
|
|
? "text-white" |
|
|
|
|
: "text-blue-500" |
|
|
|
|
}`}
|
|
|
|
|
> |
|
|
|
|
{lesson.duration} |
|
|
|
|
{duration(video?.duration)} |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
{/* divider */} |
|
|
|
|
<div |
|
|
|
|
className={`border-t border-blue-600 group-hover:border-white ${ |
|
|
|
|
selectedLesson === lesson ? "border-red-600" : "" |
|
|
|
|
className={`border-t border-blue-600 ${ |
|
|
|
|
selectedVideo?.id === video?.id ? "border-red-600" : "" |
|
|
|
|
}`}
|
|
|
|
|
></div> |
|
|
|
|
{/* bottom */} |
|
|
|
|
<span |
|
|
|
|
className={`text-xs text-center group-hover:text-white p-2
|
|
|
|
|
${selectedLesson === lesson ? "text-white" : "text-blue-500"}`}
|
|
|
|
|
className={`text-tiny text-center p-3
|
|
|
|
|
${ |
|
|
|
|
selectedVideo?.id === video?.id |
|
|
|
|
? "text-white" |
|
|
|
|
: "text-blue-500" |
|
|
|
|
}`}
|
|
|
|
|
> |
|
|
|
|
{lesson.play} |
|
|
|
|
پخش |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
{/* blue left border */} |
|
|
|
|
{/* <div className="absolute top-1/2 left-0.5 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 w-1 h-20 rounded"></div> */} |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
</section> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export default CourseChapter; |
|
|
|
|
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: [ |
|
|
|
|
|
Reza_ashrafi
3 years ago
