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.
 
 
 

196 lines
6.4 KiB

import React, { useState } from "react";
import { connect } from "react-redux";
import location from "../../../utils/location";
import { Link } from "react-router-dom";
import { publicApi } from "../../../redux/actions";
//assets
import dropdownIcon from "../../../assets/icons/dropdown-blue.svg";
const Season = ({
toggle,
season,
id,
isMobile,
activeSeason,
realSeasons,
vodDuration,
}) => {
const setCategory = (seasonId, videoId) => {
localStorage.removeItem("bookId");
localStorage.setItem(
"season",
location.getId() + "," + seasonId + "," + videoId
);
};
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)
);
};
// const [activeSeason, setActiveSeason] = useState(null);
const Unit = ({ unit, index }) => {
return isMobile ? (
<div className="d-flex flex-column">
<li
className="lesson__files--sample justify-content-between align-items-center py-2 px-0 shadow-sm"
style={{
display: season[0].categoryId === activeSeason ? "flex" : "none",
}}
>
<div className="flex items-center justify-between w-full">
<h5 className="text-tiny font-bold text-green7B dark:text-white">
{unit.name}
</h5>
<div className="flex items-center gap-4">
<Link
to={
Number(index) === 0
? window.location.pathname + "/display"
: "#"
}
className={`bg-white border border-solid ${
Number(index) === 0
? "border-green-300 text-blueC0 dark:bg-opacity-0"
: "border-gray-300 text-gray70 cursor-not-allowed dark:bg-opacity-10"
} py-2 w-20 text-center text-tiny rounded-sm shadow-md`}
onClick={() => setCategory(season[0].categoryId, unit.name)}
>
{Number(index) === 0
? `${window.t("تماشا")}`
: `${window.t("قفل")}`}
</Link>
</div>
</div>
</li>
</div>
) : (
<div className="d-flex flex-column">
<li
className="lesson__files--sample justify-content-between align-items-center py-2 px-6"
style={{
display: season[0].categoryId === activeSeason ? "flex" : "none",
}}
// onClick={() =>
// setSelectedLesson(selectedLesson === data.id ? null : data.id)
// }
>
<div className="flex items-center justify-between w-full">
<h5 className="text-tiny text-green7B">{unit.name}</h5>
<div className="flex items-center gap-4">
<Link
to={
Number(index) === 0
? window.location.pathname + "/display"
: "#"
}
className={`bg-white border border-solid ${
Number(index) === 0
? "border-green-300 text-greenBA"
: "border-gray-300 text-gray70 cursor-not-allowed"
} py-2.5 w-24 text-center text-tiny rounded-sm shadow-md`}
onClick={() => setCategory(season[0].categoryId, unit.name)}
>
{Number(index) === 0
? `${window.t("تماشا")}`
: `${window.t("قفل")}`}
</Link>
</div>
</div>
</li>
</div>
);
};
return isMobile ? (
<div
className="w-full flex flex-col"
onClick={() => toggle(season[0].categoryId)}
>
<button
className="flex justify-between items-center rounded-md py-3 px-3 mb-3 bg-blueC0 bg-opacity-5 border border-solid border-green-300"
// onClick={() =>
// setActiveSeason(season.name === activeSeason ? null : season.name)
// }
>
<strong className="text-tiny text-green7B font-bold dark:text-white">
{
realSeasons.filter((item) => item.id === season[0].categoryId)[0]
.name
}
</strong>
<img
src={dropdownIcon}
alt=""
className={`w-4 transform transition-all ${
season[0].categoryId === activeSeason ? "rotate-180" : ""
}`}
/>
</button>
<ul
className={`w-full flex flex-col px-2 ${
season[0].categoryId === activeSeason ? "" : ""
} transform origin-bottom duration-1000 transition-all overflow-hidden`}
style={{
maxHeight: season[0].categoryId === activeSeason ? 1000 : 0,
}}
>
{season.map((unit, index) => (
<Unit unit={unit} key={index} index={index} />
))}
</ul>
</div>
) : (
<li className="w-full flex flex-col bg-blueC0 bg-opacity-10 rounded-md overflow-hidden shadow-md mb-1">
<header
className="w-full flex justify-between items-center py-3 px-6"
onClick={() => toggle(season[0].categoryId)}
>
<strong className="text-tiny text-green7B font-medium">
{
realSeasons.filter((item) => item.id === season[0].categoryId)[0]
.name
}
</strong>
<img
src={dropdownIcon}
alt=""
className={`w-6 transform transition-all ${
season[0].categoryId === activeSeason ? "rotate-180" : ""
}`}
/>
</header>
<ul
className={`w-full flex flex-col px-1.5 transform origin-bottom transition-all overflow-hidden`}
style={{
maxHeight: season[0].categoryId === activeSeason ? 1000 : 0,
}}
>
{season.map((unit, index) => (
<Unit unit={unit} key={index} index={index} />
))}
</ul>
</li>
);
};
const mapStateToProps = (state) => ({
isMobile: state.publicApi.isMobile,
activeSeason: state.publicApi.activeCategory,
realSeasons: state.publicApi.bookInfo?.categories,
vodDuration: state.publicApi.bookInfo?.vodDuration,
});
const mapDispatchToProps = {
toggle: publicApi.activeCategory,
};
export default connect(mapStateToProps, mapDispatchToProps)(Season);