reza fixed video path

temp
Reza_ashrafi 3 years ago
parent b50071f0f2
commit 89e3085230
  1. 6
      src/assets/icons/dropdown-blue.svg
  2. 198
      src/components/CourseChapter/index.js
  3. 2
      src/components/JolPlayer/index.js
  4. 4
      src/components/Product/index.js
  5. 3
      src/components/ProductStatusCard/index.js
  6. 32
      src/components/ProductSuggestion/index.js
  7. 65
      src/components/VodProduct/index.js
  8. 12
      src/utils/separate.js
  9. 2
      src/views/Auth/SignUp/index.js
  10. 23
      src/views/Home/Desktop/Part4/index.js
  11. 3
      src/views/Home/Desktop/index.js
  12. 117
      src/views/Products/layouts/Main.js
  13. 74
      src/views/Video/components/Season.js
  14. 38
      src/views/VideoDisplay/Desktop/index.js
  15. 61
      src/views/VideoDisplay/index.js

@ -0,0 +1,6 @@
<svg id="vuesax_linear_arrow-down" data-name="vuesax/linear/arrow-down" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="arrow-down">
<path id="Vector" d="M15.84,0,9.32,6.52a1.986,1.986,0,0,1-2.8,0L0,0" transform="translate(4.08 8.95)" fill="none" stroke="#196ec0" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-2" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(24 24) rotate(180)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 516 B

@ -1,112 +1,160 @@
import React, { useState } from "react"; import React, { useState } from "react";
import './index.css'; import { connect } from "react-redux";
import { publicApi } from "../../redux/actions";
const CourseChapter = ({ chapters }) => { import { toast } from "react-toastify";
const [selectedLesson, setSelectedLesson] = useState(null); 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 ( return (
<section style={{ width: "40%" }} className="bg-white mx-auto my-20 p-4"> <section
<div className="bg-blueFF1 py-5 pr-5 overflow-hidden flex flex-col"
className="rounded py-5 px-4 relative" style={{
style={{ backgroundColor: "#196EC033", height: '530px'}} width: "calc(100% / 12 * 3.5)",
> height: "calc(100vh - 300px)",
{/* top */} }}
<div className="flex flex-row items-center justify-between"> >
<div> <div className="flex flex-row w-full items-center justify-between">
<h2 className="text-blue-800 text-base">سرفصل دوره</h2> <div>
</div> <h2 className="text-blue-800 text-base font-semibold">سرفصل دوره</h2>
<div className="flex flex-row-reverse items-center divide-x transform translate-x-2">
<span className="text-blue-800 text-sm px-2">علوم تجربی</span>
<span className="text-blue-800 text-sm px-2">پایه ششم</span>
</div>
</div> </div>
{/* divider */} <div className="flex flex-row-reverse items-center divide-x divide-solid transform translate-x-2">
<div className="border-b border-blue-300 border-solid bg-opacity-10 my-5"></div> <span className="text-blue-800 text-sm px-2">{book?.name}</span>
{/* course title */} <span className="text-blue-800 text-sm px-2">
<div className="overflow-y-scroll w-full hasScrollbar" style={{ {"پایه" + " " + grades[book?.gradeId]}
height: '430px' </span>
}}> </div>
{chapters.map((chapter, index) => ( </div>
<div className="flex flex-col" key={index}> <span className="w-full h-px bg-blue-200 my-4"></span>
<div className="bg-blue-600 rounded-sm p-4 flex flex-row items-center justify-between"> <div className="overflow-y-scroll w-full hasScrollbar flex-1 flex flex-col">
<p className="text-sm text-white">{chapter.title}</p> <div className="bg-blue-600 rounded-sm p-4 flex flex-row items-center justify-between mb-2">
<span className="text-sm text-white">{chapter.duration}</span> {/* <p className="text-sm text-white">
</div> {(seasons.length > 0 && playList.length > 0) &&
{/* course lessons */} seasons?.filter((item) => item?.id === playList[0]?.categoryId)[0]
{chapter.lessons.map((lesson, i) => ( ?.name}
</p> */}
{/* <span className="text-sm text-white">{video?.duration}</span> */}
</div>
{playList?.map((video, index) => (
<div className="flex flex-col pl-4" key={index}>
<div
className="flex flex-row items-center justify-around"
key={index}
>
{/* right div dot dot */}
<div <div
className="flex flex-row items-center justify-around" className="flex items-center justify-center relative flex-col h-full"
key={i} style={{ width: "10%" }}
> >
{/* right div dot dot */} <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 <div
className="flex items-center relative flex-col " className={`w-full bg-white flex flex-col transition duration-400 hover:scale-95 shadow-md transform rounded-md
style={{ width: "10%", transform: "translateY(30px)" }} ${
> selectedVideo?.id === video?.id
<div ? "bg-blue-600 text-white-700"
className={`flex justify-center items-center w-4 h-4 rounded-full : "text-blue-500"
${selectedLesson === lesson ? "bg-red-600" : "bg-blue-600"}, }
${lesson.passed ? "bg-blue-600" : "bg-gray-400"}
`} `}
></div> onClick={() =>
<span video?.isFreeVod || +userId === 140
className="w-1" ? setVideoActive(video)
style={{ : toast.error("ابتدا محصول رو خریداری کن!")
borderRight: "2px dashed #86A0B9", }
transform: "translateX(-1px)", disabled={true}
height: "65px",
}}
></span>
</div>
{/* left div content */}
<div
className={`mt-2 bg-white border border-blue-300 flex flex-col border border-solid cursor-pointer transition duration-200 ease-in-out group hover:bg-blue-600
${selectedLesson === lesson ? "bg-blue-600 text-white-700" : "text-blue-500"}`}
style={{ width: "80%" }}
onClick={() => setSelectedLesson(lesson)}
> >
{/* top */} {/* top */}
<div className="flex flex-row items-center justify-between p-4 border-0 border-b border-solid border-blue-500"> <div className="flex flex-row items-center justify-between p-3 border-0 border-b border-solid border-blue-300">
<p <p
className={`text-sm group-hover:text-white className={`text-tiny
${selectedLesson === lesson ? "text-white" : ""}`} ${selectedVideo?.id === video?.id ? "text-white" : ""}`}
> >
{lesson.title} {video?.name}
</p> </p>
<span <span
className={`text-xs group-hover:text-white border-r border-solid border-blue-200 pr-1 className={`text-sm border-r border-solid border-blue-200 pr-1
${selectedLesson === lesson ? "text-white" : "text-blue-500"}`} ${
selectedVideo?.id === video?.id
? "text-white"
: "text-blue-500"
}`}
> >
{lesson.duration} {duration(video?.duration)}
</span> </span>
</div> </div>
{/* divider */} {/* divider */}
<div <div
className={`border-t border-blue-600 group-hover:border-white ${ className={`border-t border-blue-600 ${
selectedLesson === lesson ? "border-red-600" : "" selectedVideo?.id === video?.id ? "border-red-600" : ""
}`} }`}
></div> ></div>
{/* bottom */} {/* bottom */}
<span <span
className={`text-xs text-center group-hover:text-white p-2 className={`text-tiny text-center p-3
${selectedLesson === lesson ? "text-white" : "text-blue-500"}`} ${
selectedVideo?.id === video?.id
? "text-white"
: "text-blue-500"
}`}
> >
{lesson.play} پخش
</span> </span>
</div> </div>
</div> </div>
))} </div>
</div> </div>
))} ))}
</div>
{/* blue left border */}
{/* <div className="absolute top-1/2 left-0.5 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 w-1 h-20 rounded"></div> */}
</div> </div>
</section> </section>
); );
}; };
export default CourseChapter; 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 = { CourseChapter.defaultProps = {
chapters: [ chapters: [

@ -21,7 +21,7 @@ function Video({ fileIds, posterId, autoPlay }) {
width: "100%", width: "100%",
height: height:
window.innerWidth > 1024 window.innerWidth > 1024
? window.innerHeight - 200 ? window.innerHeight - 300
: window.innerHeight / 3.6, : window.innerHeight / 3.6,
theme: "#4dd35b", theme: "#4dd35b",
language: "en", language: "en",

@ -1,7 +1,7 @@
import React, { useState } from "react"; import React, { useState } from "react";
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
import { connect } from "react-redux"; import { connect } from "react-redux";
import separate from '../../utils/separate';
import StarRating from "../StarRating"; import StarRating from "../StarRating";
// import Tag from "../Tag"; // import Tag from "../Tag";
// import ReactTooltip from "react-tooltip"; // import ReactTooltip from "react-tooltip";
@ -159,7 +159,7 @@ const ProductDesign = ({
)} )}
</div> </div>
<p className="text-lg text-productPrice font-semibold inline text-blue5F"> <p className="text-lg text-productPrice font-semibold inline text-blue5F">
{product?.product[1]?.price} <span>تومان</span> {separate(product?.product[1]?.price)} <span>تومان</span>
</p> </p>
</div> </div>
{/* add to cart */} {/* add to cart */}

@ -2,6 +2,7 @@ import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { userProduct } from "../../redux/actions"; import { userProduct } from "../../redux/actions";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import separate from '../../utils/separate';
import Button from "../Button"; import Button from "../Button";
import arrow from "./arrow-icon.svg"; import arrow from "./arrow-icon.svg";
@ -52,7 +53,7 @@ const ProductStatusCard = ({
))} ))}
<div className="flex flex-col items-center py-3"> <div className="flex flex-col items-center py-3">
<p className="text-xl text-blue-600"> <p className="text-xl text-blue-600">
{price} {separate(price)}
<span className="text-sm text-gray-700 font-light">تومان</span> <span className="text-sm text-gray-700 font-light">تومان</span>
</p> </p>
<p className="text-xs font-light text-gray-600 mt-2"> <p className="text-xs font-light text-gray-600 mt-2">

@ -1,13 +1,20 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { product } from "../../redux/actions"; import { product } from "../../redux/actions";
import { connect } from "react-redux"; import { connect } from "react-redux";
import separate from "../../utils/separate";
import Button from "../Button"; import Button from "../Button";
import productImg from "./product-chair.svg"; import productImg from "./product-chair.svg";
import plus from "./plus.svg"; import plus from "./plus.svg";
const ProductSuggestion = ({ suggestions, isDark, id, getSimilar, book, similarList }) => { const ProductSuggestion = ({
suggestions,
isDark,
id,
getSimilar,
book,
similarList,
}) => {
const [selectedProduct, setSelectedProduct] = useState(null); const [selectedProduct, setSelectedProduct] = useState(null);
const [price, setPrice] = useState(0); const [price, setPrice] = useState(0);
@ -17,14 +24,14 @@ const ProductSuggestion = ({ suggestions, isDark, id, getSimilar, book, similarL
} }
}, [book]); }, [book]);
useEffect(() => { useEffect(() => {
if(similarList.length > 0) { if (similarList.length > 0) {
let allPrice = 0; let allPrice = 0;
for(let item of similarList) { for (let item of similarList) {
allPrice = item.price + allPrice; allPrice = item.price + allPrice;
} }
setPrice(() => allPrice); setPrice(() => allPrice);
} }
},[similarList]); }, [similarList]);
return ( return (
<section className="mt-10 border-2 border-gray-300 py-10 rounded-lg bg-grayF9"> <section className="mt-10 border-2 border-gray-300 py-10 rounded-lg bg-grayF9">
<h2 className="text-center text-lg font-bold text-productPrice"> <h2 className="text-center text-lg font-bold text-productPrice">
@ -43,11 +50,15 @@ const ProductSuggestion = ({ suggestions, isDark, id, getSimilar, book, similarL
${selectedProduct === book ? "bg-white" : ""}`} ${selectedProduct === book ? "bg-white" : ""}`}
onClick={() => setSelectedProduct(book)} onClick={() => setSelectedProduct(book)}
> >
<img src={`https://dnvn.ir/api/v1/file/${book?.book?.fileIds}`} alt="" className="w-2/3 rounded-md" /> <img
src={`https://dnvn.ir/api/v1/file/${book?.book?.fileIds}`}
alt=""
className="w-2/3 rounded-md"
/>
<h2 className="my-3 text-tiny">{book?.name}</h2> <h2 className="my-3 text-tiny">{book?.name}</h2>
<p className="text-base text-blueC0 font-medium"> <p className="text-base text-blueC0 font-medium">
{book?.price} {separate(book?.price)}
<span className="mr-1 text-xs text-black">تومان</span> <span className="mx-1 text-xs text-black">تومان</span>
</p> </p>
{/* <div className="flex flex-col items-center mt-3"> {/* <div className="flex flex-col items-center mt-3">
<span className="text-xs">انتخاب شما</span> <span className="text-xs">انتخاب شما</span>
@ -72,8 +83,7 @@ const ProductSuggestion = ({ suggestions, isDark, id, getSimilar, book, similarL
<div className="flex flex-row mb-5"> <div className="flex flex-row mb-5">
<p className="text-base text-productPrice font-bold"> <p className="text-base text-productPrice font-bold">
&nbsp;جمع لوازم اختیاری خریداری شده&nbsp; &nbsp;جمع لوازم اختیاری خریداری شده&nbsp;
<span>{price}</span> <span className="mx-1">{separate(price)}</span>
&nbsp;
تومان تومان
</p> </p>
<span className="text-lightBlueTextColor text-base mr-1 font-bold"> <span className="text-lightBlueTextColor text-base mr-1 font-bold">
@ -84,7 +94,7 @@ const ProductSuggestion = ({ suggestions, isDark, id, getSimilar, book, similarL
در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید
</p> </p>
<Button <Button
title=صافه کردن به سبد خرید" title=ضافه کردن به سبد خرید"
backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"} backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }} border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
width="calc(100% / 5)" width="calc(100% / 5)"

@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import {Link} from 'react-router-dom';
import StarRating from "../StarRating"; import StarRating from "../StarRating";
import ReactTooltip from "react-tooltip"; import ReactTooltip from "react-tooltip";
@ -20,6 +20,7 @@ import RedDotIcon from "./redDotIcon.svg";
import PurpleDotIcon from "./purpleDotIcon.svg"; import PurpleDotIcon from "./purpleDotIcon.svg";
import LightBlueDotIcon from "./lightBlueDotIcon.svg"; import LightBlueDotIcon from "./lightBlueDotIcon.svg";
import whitePlayIcon from "./white-play-button-icon.svg"; import whitePlayIcon from "./white-play-button-icon.svg";
import { book } from "../../redux/actions";
const videoImages = [ const videoImages = [
videoImage1, videoImage1,
@ -31,32 +32,26 @@ const videoImages = [
]; ];
const VodProduct = ({ const VodProduct = ({
video,
index, index,
productColor, productColor,
colors,
likeBtn, likeBtn,
discount,
discountPricePercent, discountPricePercent,
discountPrice, discountPrice,
productContent, productContent,
star, star,
productTags, productTags,
priceDirection, priceDirection,
productTitleAlignment,
priceHolder, priceHolder,
productCat,
rangeHolder, rangeHolder,
priceTitle, priceTitle,
addToCartHolder, addToCartHolder,
productTitleCategoryHolder,
productTitleCategoryHolderAlignment,
priceStarHolder, priceStarHolder,
priceStarAlignment, priceStarAlignment,
rangeWidth, rangeWidth,
productTitle,
poster,
price, price,
height, height,
grades,
// minHeight, // minHeight,
}) => { }) => {
const [progressFlag, setProgressFlag] = useState(false); const [progressFlag, setProgressFlag] = useState(false);
@ -71,7 +66,11 @@ const VodProduct = ({
return ( return (
<> <>
{/* product UI Design */} {/* product UI Design */}
<div className="flex flex-wrap sm:flex-nowrap justify-around" style={{direction: 'rtl'}}> <Link
to={'/videos/' + video?.id}
className="flex flex-wrap sm:flex-nowrap justify-around"
style={{ direction: "rtl" }}
>
<div className="w-full flex flex-wrap items-center justify-around my-3 px-1 sm:px-4"> <div className="w-full flex flex-wrap items-center justify-around my-3 px-1 sm:px-4">
<div <div
className={`w-full mx-1 sm:w-60 md:w-96 rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`} className={`w-full mx-1 sm:w-60 md:w-96 rounded-lg shadow-sm p-2 my-3 border border-grayBorderColor`}
@ -83,7 +82,7 @@ const VodProduct = ({
backgroundImage: `url(${videoImages[Number(index)]})`, backgroundImage: `url(${videoImages[Number(index)]})`,
backgroundSize: "100% 100%", backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat", backgroundRepeat: "no-repeat",
height : height height: height,
// minHeight: minHeight, // minHeight: minHeight,
}} }}
data-modal-toggle="large-modal" data-modal-toggle="large-modal"
@ -138,21 +137,16 @@ const VodProduct = ({
<div className="px-2"> <div className="px-2">
{/* content */} {/* content */}
<div className="mt-4 flex flex-col"> <div className="mt-4 flex flex-col">
<div <div className={`flex justify-between `}>
className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `}
>
<h2 <h2
className={`leading-4 text-base mb-2 font-semibold text-darkCrimsonTextColor ${productTitleAlignment}`} className={`leading-4 text-tiny mb-2 font-normal text-blue5F text-right`}
> >
{productTitle} {"دوره ویدیویی" + " " + video?.name}
</h2> </h2>
{productCat && ( {console.log(video?.gradeId)}
<span <span className={`text-sm font-light text-blueC0`}>
className={`text-xs font-light text-darkCrimsonTextColor`} { 'پایه' + ' ' + grades[video?.gradeId]}
> </span>
{productCat}
</span>
)}
</div> </div>
{productContent && ( {productContent && (
<p <p
@ -180,23 +174,22 @@ const VodProduct = ({
: "flex" : "flex"
}`} }`}
> >
{priceTitle && ( <span className="text-xs text-borderColor ml-2">
<span className="text-xs text-borderColor ml-2">
قیمت </span>
</span>
)} {/* {discountPrice && (
{discountPrice && (
<p className="line-through text-xs text-borderColor"> <p className="line-through text-xs text-borderColor">
<span> قیمت</span> 140<span>تومان</span> <span> قیمت</span> 140<span>تومان</span>
</p> </p>
)} )} */}
</div> </div>
<p {/* <p
className={`text-sm font-semibold inline text-productPrice`} className={`text-sm font-semibold inline text-productPrice`}
> >
{price} {video?.price}
<span>تومان</span> <span>تومان</span>
</p> </p> */}
</div> </div>
{/* add to cart */} {/* add to cart */}
{addToCartHolder && ( {addToCartHolder && (
@ -210,14 +203,14 @@ const VodProduct = ({
)} )}
</div> </div>
)} )}
{star && ( {/* {star && (
<div className="flex items-center"> <div className="flex items-center">
<StarRating /> <StarRating />
<span className="text-xs text-productContent font-bold mr-2"> <span className="text-xs text-productContent font-bold mr-2">
39 39
</span> </span>
</div> </div>
)} )} */}
</div> </div>
{productTags && ( {productTags && (
<div className="mt-2 flex flex-wrap"> <div className="mt-2 flex flex-wrap">
@ -245,7 +238,7 @@ const VodProduct = ({
</div> </div>
</div> </div>
</div> </div>
</div> </Link>
{/* <div {/* <div
class="hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center md:inset-0 h-modal sm:h-full" class="hidden overflow-y-auto overflow-x-hidden fixed right-0 left-0 top-4 z-50 justify-center items-center md:inset-0 h-modal sm:h-full"
id="large-modal" id="large-modal"

@ -0,0 +1,12 @@
const separate = (number) => {
number += "";
number = number.replace(",", "");
let x = number.split(".");
let y = x[0];
let z = x.length > 1 ? "." + x[1] : "";
let rgx = /(\d+)(\d{3})/;
while (rgx.test(y)) y = y.replace(rgx, "$1" + "," + "$2");
return y + z;
};
export default separate;

@ -130,7 +130,7 @@ function SignUp({
useEffect(() => { useEffect(() => {
if (loginFlag) { if (loginFlag) {
// navigate("/"); navigate("/");
} }
}, [loginFlag]); }, [loginFlag]);
const light = theme === "light"; const light = theme === "light";

@ -3,7 +3,7 @@ import Button from "../../../../components/Button";
import VodProduct from "../../../../components/VodProduct"; import VodProduct from "../../../../components/VodProduct";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import posterImage from "../../../../assets/images/poster.svg"; import posterImage from "../../../../assets/images/poster.svg";
const Part4 = () => { const Part4 = ({ books, grades }) => {
const videosData = [ const videosData = [
{ {
id: 0, id: 0,
@ -86,25 +86,20 @@ const Part4 = () => {
style={{}} style={{}}
> >
<ul className="flex flex-wrap justify-center "> <ul className="flex flex-wrap justify-center ">
{videosData.slice(0, 6).map((video, index) => ( {books.slice(0, 6).map((video, index) => (
<li <li
className={`flex flex-col border-solid border-gray-200 ${ className={`flex flex-col border-solid border-gray-200 ${
index != 3 && index != 4 && index != 5 ? "border-b" : null index != 3 && index != 4 && index != 5 ? "border-b" : null
} video ${index != 0 && index != 3 ? "border-r" : null}`} } video ${index != 0 && index != 3 ? "border-r" : null}`}
style={{ width: "33.333333%" }} style={{ width: "33.333333%" }}
> >
<Link to={"/videos/" + video.id}> <VodProduct
<VodProduct video={video}
productTitle={`دوره ی ویدیویی ${video.name}`} key={index}
productCat={video.grade} index={index}
price={video.price} height={"calc(100vh / 3.8)"}
priceTitle={false} grades={grades}
discountPrice={false} />
key={index}
index={index}
height={"calc(100vh / 3.8)"}
/>
</Link>
</li> </li>
))} ))}
</ul> </ul>

@ -75,7 +75,7 @@ const DesktopHome = ({ grades, getList, books }) => {
<div className="mb-16"> <div className="mb-16">
<img src={HomeImg} /> <img src={HomeImg} />
</div> </div>
<Part4 /> <Part4 books={books} grades={grades} />
</div> </div>
); );
}; };
@ -86,6 +86,7 @@ const mapStateToProps = (state) => ({
books: state.book.list, books: state.book.list,
gradeFilterBooks: state.book.gradeFilterBooks, gradeFilterBooks: state.book.gradeFilterBooks,
selectedGrade: state.book.selectedGrade, selectedGrade: state.book.selectedGrade,
grades: state.publicApi.grades
}); });
const mapDispatchToProps = { const mapDispatchToProps = {

@ -43,48 +43,6 @@ export const Main = ({
}, },
]; ];
const videosData = [
{
id: 0,
name: "ریاضی",
price: "145.000",
grade: " پایه چهارم ",
imageUrl: "https://dnvn.ir/api/v1/file/2105",
poster: posterImage,
},
{
id: 2,
name: "علوم تجربی",
price: "145.000 ",
grade: "پایه سوم",
imageUrl: "https://dnvn.ir/api/v1/file/2105",
poster: posterImage,
},
{
id: 1,
name: "زمین شناسی",
price: "145.000 ",
grade: "پایه چهارم",
imageUrl: "https://dnvn.ir/api/v1/file/2105",
poster: posterImage,
},
{
id: 3,
name: "ریاضی",
price: "145.000 ",
grade: "پایه چهارم",
imageUrl: "https://dnvn.ir/api/v1/file/2105",
poster: posterImage,
},
{
id: 5,
name: "ریاضی",
price: "145.000 ",
grade: "پایه چهارم",
imageUrl: "https://dnvn.ir/api/v1/file/2105",
poster: posterImage,
},
];
return ( return (
<div className="flex flex-col w-3/4 p-4 pb-20"> <div className="flex flex-col w-3/4 p-4 pb-20">
<div className="flex w-full bg-blue rounded-lg border border-solid border-gray-200 p-2 items-center my-1.5 justify-center text-blue52"> <div className="flex w-full bg-blue rounded-lg border border-solid border-gray-200 p-2 items-center my-1.5 justify-center text-blue52">
@ -103,44 +61,42 @@ export const Main = ({
))} ))}
</ul> </ul>
</div> </div>
{books?.length > 0 && (
<div className="relative w-full" style={{ direction: "ltr" }}> <div className="relative w-full" style={{ direction: "ltr" }}>
<Carousel <Carousel
show={Math.round(window.innerWidth / 500)} show={Math.round(window.innerWidth / 500)}
slide={2} slide={2}
swiping={true} swiping={true}
useArrowKeys={true} useArrowKeys={true}
transition={0.5} transition={0.5}
className="flex flex-row" className="flex flex-row"
rightArrow={ rightArrow={
<img <img
className="absolute top-1/2 transform -translate-y-1/2 cursor-pointer p-2" className="absolute top-1/2 transform -translate-y-1/2 cursor-pointer p-2"
src={arrow} src={arrow}
alt="" alt=""
/> />
} }
leftArrow={ leftArrow={
<img <img
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer -rotate-180 p-2" className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer -rotate-180 p-2"
src={arrow} src={arrow}
alt="" alt=""
/> />
} }
> >
{videosData.map((video, index) => ( {books?.map((video, index) => (
<VodProduct <VodProduct
productTitle={`دوره ی ویدیویی ${video.name}`} video={video}
productCat={video.grade} key={index}
price={video.price} index={index}
priceTitle={false} height={"calc(100vh / 5)"}
discountPrice={false} grades={grades}
key={index} />
index={index} ))}
height={"calc(100vh / 5)"} </Carousel>
/> </div>
))} )}
</Carousel>
</div>
<div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden justify-evenly"> <div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden justify-evenly">
{selectedGrade {selectedGrade
@ -173,6 +129,7 @@ export const Main = ({
product={product} product={product}
index={Number(index)} index={Number(index)}
imageSize={4.5} imageSize={4.5}
grades={grades}
/> />
</Link> </Link>
))} ))}

@ -1,8 +1,12 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import location from "../../../utils/location";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { publicApi } from "../../../redux/actions"; import { publicApi } from "../../../redux/actions";
//assets
import dropdownIcon from "../../../assets/icons/dropdown-blue.svg";
const Season = ({ const Season = ({
toggle, toggle,
season, season,
@ -12,6 +16,14 @@ const Season = ({
realSeasons, realSeasons,
vodDuration, vodDuration,
}) => { }) => {
const setCategory = (seasonId, videoId) => {
localStorage.removeItem("bookId");
localStorage.setItem(
"season",
location.getId() + "," + seasonId + "," + videoId
);
};
const duration = (value) => { const duration = (value) => {
const minute = value % 60; const minute = value % 60;
const hour = Math.round(value / 60); const hour = Math.round(value / 60);
@ -24,7 +36,7 @@ const Season = ({
); );
}; };
// const [activeSeason, setActiveSeason] = useState(null); // const [activeSeason, setActiveSeason] = useState(null);
const Unit = ({ unit }) => { const Unit = ({ unit, index }) => {
return isMobile ? ( return isMobile ? (
<Link <Link
to="/videos/0/display" to="/videos/0/display"
@ -58,9 +70,9 @@ const Season = ({
</div> */} </div> */}
</Link> </Link>
) : ( ) : (
<Link to="/videos/0/display" className="d-flex flex-column"> <div className="d-flex flex-column">
<li <li
className="lesson__files--sample justify-content-between align-items-center p-5" className="lesson__files--sample justify-content-between align-items-center py-2 px-6"
style={{ style={{
display: season[0].categoryId === activeSeason ? "flex" : "none", display: season[0].categoryId === activeSeason ? "flex" : "none",
}} }}
@ -68,11 +80,28 @@ const Season = ({
// setSelectedLesson(selectedLesson === data.id ? null : data.id) // setSelectedLesson(selectedLesson === data.id ? null : data.id)
// } // }
> >
<div className="d-flex align-items-center"> <div className="flex items-center justify-between w-full">
<h5>{unit.name}</h5> <h5>{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-blue-300 text-blueC0"
: "border-gray-300 text-gray70"
} py-2.5 w-24 text-center text-tiny rounded-sm shadow-sm`}
onClick={() => setCategory(season[0].categoryId, unit.name)}
>
{Number(index) === 0 ? "تماشا" : "قفل"}
</Link>
</div>
</div> </div>
</li> </li>
</Link> </div>
); );
}; };
return isMobile ? ( return isMobile ? (
@ -99,21 +128,38 @@ const Season = ({
season.map((unit, index) => <Unit unit={unit} key={index} />)} season.map((unit, index) => <Unit unit={unit} key={index} />)}
</div> </div>
) : ( ) : (
<li <li className="w-full flex flex-col bg-blueFF1 rounded-md overflow-hidden shadow-md">
className="w-full flex flex-col bg-grayF7 rounded-md overflow-hidden cursor-pointer" <header
onClick={() => toggle(season[0].categoryId)} className="w-full flex flex-row justify-between items-center py-3 px-6"
> onClick={() => toggle(season[0].categoryId)}
<header className="w-full flex flex-row justify-between p-4"> >
<strong className="text-tiny text-gray1 font-medium"> <strong className="text-tiny text-blueC0 font-medium">
{ {
realSeasons.filter((item) => item.id === season[0].categoryId)[0] realSeasons.filter((item) => item.id === season[0].categoryId)[0]
.name .name
} }
</strong> </strong>
<img
src={dropdownIcon}
alt=""
className={`w-6 transform transition-all ${
season[0].categoryId === activeSeason ? "rotate-180" : ""
}`}
/>
</header> </header>
<ul className="w-full flex flex-col px-4 divide-y-2 divide-solid divide-gray-200"> <ul
{season[0].categoryId === activeSeason && className={`w-full flex flex-col px-4 divide-y-2 divide-solid transform origin-bottom transition-all divide-blue-100 overflow-hidden`}
season.map((unit, index) => <Unit unit={unit} key={index} />)} style={{
height: isMobile
? "auto"
: season[0].categoryId === activeSeason
? (24 + 34.5) * season.length
: 0,
}}
>
{season.map((unit, index) => (
<Unit unit={unit} key={index} index={index} />
))}
</ul> </ul>
</li> </li>
); );

@ -1,38 +0,0 @@
import React from "react";
import CourseChapter from "../../../components/CourseChapter";
import VideoPlayer from "../../../components/VideoPlayer";
const DesktopVideoDisplay = () =>{
return(
<div className="w-full flex flex-col px-4 items-center">
<div className="w-4/5 flex flex-col mb-6 justify-center items-center">
<div className="w-full flex flex-row flex-1 justify-center overflow-hidden relative">
<div className="flex flex-col w-4/5">
<VideoPlayer playerWidth='100%' />
<h1 className="mx-4 my-2 text-4xl text-blue52 py-6 border-b-2 border-solid border-gray-300">ساز های باستانی ایران عزیز</h1>
<p className="m-4 text-gray-600">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</p>
</div>
<CourseChapter />
</div>
{/* <div className="flex flex-col flex-1 justify-between pr-2">
<div className="flex flex-col">
<strong className="mt-1 text-blue5F text-base dark:text-white">
{product.name}
</strong>
<span className="text-blueC0 text-xs mb-1 dark:text-greenBA">{product.grade}</span>
</div>
<Divider type={"vertical"} />
</div> */}
<div>
</div>
</div>
</div>
);
};
export default DesktopVideoDisplay;

@ -1,10 +1,13 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { publicApi } from "../../redux/actions"; import { publicApi } from "../../redux/actions";
import PlayList from "../../components/CourseChapter";
import VideoPlayer from "../../components/VideoPlayer";
import JolPlayer from "../../components/JolPlayer";
import poster from "../../assets/images/poster.svg"; import poster from "../../assets/images/poster.svg";
import Divider from "../../components/Divider"; import Divider from "../../components/Divider";
import Season from "./components/Season"; import Season from "./components/Season";
import DesktopVideoDisplay from "./Desktop";
function VideoDisplay({ function VideoDisplay({
isMobile, isMobile,
@ -48,17 +51,24 @@ function VideoDisplay({
seasons, seasons,
grades, grades,
getBook, getBook,
getSeason,
selectedVideo,
}) { }) {
useEffect(() => { useEffect(() => {
const id = window.location.pathname.slice( const id = window.location.pathname.slice(
8, 8,
window.location.pathname.lastIndexOf("/") window.location.pathname.lastIndexOf("/")
); );
getBook({bookId : id});
setHeaderOptions(headerOptions); setHeaderOptions(headerOptions);
// getBook({ bookId: id }); const cat = localStorage.getItem("season")?.split(",");
getSeason({ bookId: cat[0], categoryId: cat[1] });
}, []); }, []);
useEffect(() => {
},[])
const enamad = const enamad =
'<a referrerpolicy="origin" target="_blank" href="https://trustseal.enamad.ir/?id=224965&amp;Code=x8oNSO7tTnqAniyPpPyN"><img referrerpolicy="origin" src="https://Trustseal.eNamad.ir/logo.aspx?id=224965&amp;Code=x8oNSO7tTnqAniyPpPyN" alt="" style="cursor:pointer" id="x8oNSO7tTnqAniyPpPyN"></a>'; '<a referrerpolicy="origin" target="_blank" href="https://trustseal.enamad.ir/?id=224965&amp;Code=x8oNSO7tTnqAniyPpPyN"><img referrerpolicy="origin" src="https://Trustseal.eNamad.ir/logo.aspx?id=224965&amp;Code=x8oNSO7tTnqAniyPpPyN" alt="" style="cursor:pointer" id="x8oNSO7tTnqAniyPpPyN"></a>';
return isMobile ? ( return isMobile ? (
@ -92,21 +102,58 @@ function VideoDisplay({
</div> </div>
</div> </div>
) : ( ) : (
<DesktopVideoDisplay /> <div className="w-11/12 flex flex-col mb-6 justify-center items-center mx-auto">
<div className="w-full flex flex-row justify-center overflow-hidden relative gap-2 mt-4">
<div className="flex flex-col w-8/12">
<JolPlayer
fileIds={selectedVideo?.fileIds}
posterId={selectedVideo?.posterId}
/>
<h1 className="mx-4 my-2 text-4xl text-blue52 pb-4 border-b-2 border-solid border-gray-200">
{selectedVideo?.name}
</h1>
<p className="m-4 text-gray70 leading-7 font-normal text-tiny">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز،
و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای
زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و
متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان
رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد
کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه
راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل
حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود
طراحی اساسا مورد استفاده قرار گیرد.
</p>
</div>
<PlayList playList={book?.vods} />
</div>
{/* <div className="flex flex-col flex-1 justify-between pr-2">
<div className="flex flex-col">
<strong className="mt-1 text-blue5F text-base dark:text-white">
{product.name}
</strong>
<span className="text-blueC0 text-xs mb-1 dark:text-greenBA">{product.grade}</span>
</div>
<Divider type={"vertical"} />
</div> */}
<div></div>
</div>
); );
} }
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
isMobile: state.publicApi.isMobile, isMobile: state.publicApi.isMobile,
book: state.publicApi.bookInfo, book: state.publicApi.bookSection,
grades: state.publicApi.categories, seasons: state.publicApi.categories,
grades: state.publicApi.grades, grades: state.publicApi.grades,
selectedVideo: state.publicApi.selectedVideo, selectedVideo: state.publicApi.selectedVideo,
}); });
const mapDispatchToProps = { const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions, setHeaderOptions: publicApi.setHeaderOptions,
getBook: publicApi.getBook, getBook: publicApi.bookInfo,
getSeason: publicApi.bookSection
}; };
export default connect(mapStateToProps, mapDispatchToProps)(VideoDisplay); export default connect(mapStateToProps, mapDispatchToProps)(VideoDisplay);

Loading…
Cancel
Save