|
|
import React from "react"; |
|
|
import { Link } from "react-router-dom"; |
|
|
import { ScrollingCarousel } from "@trendyol-js/react-carousel"; |
|
|
import { connect } from "react-redux"; |
|
|
import Progress from "../../../../../components/Progress"; |
|
|
|
|
|
//assets |
|
|
import arrowGreenIcon from "../../../../../assets/icons/dropdown-blue.svg"; |
|
|
import arrowWhiteIcon from "../../../../../assets/icons/arrow-left-white.svg"; |
|
|
import whitePlayIcon from "../../../../../components/VodProduct/white-play-button-icon.svg"; |
|
|
|
|
|
function Videos({ videos, grades, isDark, isMobile }) { |
|
|
const Video = ({ video }) => { |
|
|
return ( |
|
|
<li className="flex flex-col lg:ml-6 lg:p-2 lg:border lg:border-solid lg:border-green-200 lg:rounded-md"> |
|
|
<Link to={"/videos/" + video.id}> |
|
|
<div className="relative w-full"> |
|
|
<img |
|
|
src={`https://dnvn.ir/api/v1/file/${video?.fileIds}`} |
|
|
alt="" |
|
|
className="rounded-sm" |
|
|
style={{ |
|
|
height: isMobile ? "" : "calc(100vw / 6 * 3 / 4.5)", |
|
|
width: isMobile ? "" : "calc(100vw / 6 )", |
|
|
maxHeight: isMobile ? "calc(100vw / 2 * 2 / 3)" : "", |
|
|
minWidth: isMobile ? "calc(100vw / 2)" : "", |
|
|
}} |
|
|
/> |
|
|
<div |
|
|
className={`absolute left-1/2 top-1/2 rounded-full p-3 group-hover:scale-125 transform -translate-x-1/2 -translate-y-1/2 duration-300 bg-playButtonIcon bg-black bg-opacity-20 backdrop-filter backdrop-blur-md`} |
|
|
> |
|
|
<img src={whitePlayIcon} alt="" className="w-4 h-4" /> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h2 className="mt-3 mb-4 text-sm font-semibold text-blue5F dark:text-white lg:mt-4 lg:text-tiny lg:mb-5"> |
|
|
{"دوره ویدئویی" + " " + video?.product[2]?.name} |
|
|
</h2> |
|
|
{/* <p className="font-medium text-blueC0 dark:text-greenBA text-xs mt-1 lg:mt-2 lg:text-sm">{`پایه ${ |
|
|
grades[video.gradeId] |
|
|
}`}</p> */} |
|
|
<Progress percent={60} direction="float-right" /> |
|
|
</Link> |
|
|
</li> |
|
|
); |
|
|
}; |
|
|
return ( |
|
|
<div className="w-full px-4 lg:py-4"> |
|
|
<div className="w-full flex flex-col py-4 lg:px-3 overflow-hidden lg:border lg:border-solid lg:border-gray-200 rounded-md lg:bg-blueC0 lg:bg-opacity-5"> |
|
|
<header className="w-full flex justify-between items-center"> |
|
|
<strong className="text-green7B dark:text-white font-bold text-base lg:text-base mt-2"> |
|
|
دورههای ویدئویی شما |
|
|
</strong> |
|
|
{isDark ? ( |
|
|
<img |
|
|
src={arrowWhiteIcon} |
|
|
alt="" |
|
|
className={`transform lg:hidden w-7`} |
|
|
/> |
|
|
) : ( |
|
|
<img |
|
|
src={arrowGreenIcon} |
|
|
alt="" |
|
|
className={`transform lg:hidden rotate-90`} |
|
|
/> |
|
|
)} |
|
|
</header> |
|
|
{isMobile ? ( |
|
|
<ul className="list-none w-full overflow-x-scroll pt-3 gap-3 lg:gap-5 flex lg:pt-5 lg:flex-wrap lg:overflow-y-scroll no-scrollbar"> |
|
|
{videos?.slice(0, 5)?.map((video, index) => ( |
|
|
<Video video={video} key={index} /> |
|
|
))} |
|
|
</ul> |
|
|
) : ( |
|
|
<ScrollingCarousel className="mt-6 pb-0"> |
|
|
{videos?.map((video, index) => ( |
|
|
<Video video={video} key={index} /> |
|
|
))} |
|
|
</ScrollingCarousel> |
|
|
)} |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
} |
|
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
isDark: state.publicApi.isDark, |
|
|
isMobile: state.publicApi.isMobile, |
|
|
}); |
|
|
|
|
|
export default connect(mapStateToProps)(Videos);
|
|
|
|