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