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

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,
},
],
},
],
};