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.
 
 
 

91 lines
3.5 KiB

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