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

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

@ -1,7 +1,7 @@
import React, { useState } from "react";
import {Link} from 'react-router-dom';
import { connect } from "react-redux";
import separate from '../../utils/separate';
import StarRating from "../StarRating";
// import Tag from "../Tag";
// import ReactTooltip from "react-tooltip";
@ -159,7 +159,7 @@ const ProductDesign = ({
)}
</div>
<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>
</div>
{/* add to cart */}

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

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

@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
import {Link} from 'react-router-dom';
import StarRating from "../StarRating";
import ReactTooltip from "react-tooltip";
@ -20,6 +20,7 @@ import RedDotIcon from "./redDotIcon.svg";
import PurpleDotIcon from "./purpleDotIcon.svg";
import LightBlueDotIcon from "./lightBlueDotIcon.svg";
import whitePlayIcon from "./white-play-button-icon.svg";
import { book } from "../../redux/actions";
const videoImages = [
videoImage1,
@ -31,32 +32,26 @@ const videoImages = [
];
const VodProduct = ({
video,
index,
productColor,
colors,
likeBtn,
discount,
discountPricePercent,
discountPrice,
productContent,
star,
productTags,
priceDirection,
productTitleAlignment,
priceHolder,
productCat,
rangeHolder,
priceTitle,
addToCartHolder,
productTitleCategoryHolder,
productTitleCategoryHolderAlignment,
priceStarHolder,
priceStarAlignment,
rangeWidth,
productTitle,
poster,
price,
height,
grades,
// minHeight,
}) => {
const [progressFlag, setProgressFlag] = useState(false);
@ -71,7 +66,11 @@ const VodProduct = ({
return (
<>
{/* 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 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)]})`,
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
height : height
height: height,
// minHeight: minHeight,
}}
data-modal-toggle="large-modal"
@ -138,21 +137,16 @@ const VodProduct = ({
<div className="px-2">
{/* content */}
<div className="mt-4 flex flex-col">
<div
className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `}
>
<div className={`flex justify-between `}>
<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>
{productCat && (
<span
className={`text-xs font-light text-darkCrimsonTextColor`}
>
{productCat}
</span>
)}
{console.log(video?.gradeId)}
<span className={`text-sm font-light text-blueC0`}>
{ 'پایه' + ' ' + grades[video?.gradeId]}
</span>
</div>
{productContent && (
<p
@ -180,23 +174,22 @@ const VodProduct = ({
: "flex"
}`}
>
{priceTitle && (
<span className="text-xs text-borderColor ml-2">
قیمت
</span>
)}
{discountPrice && (
<span className="text-xs text-borderColor ml-2">
</span>
{/* {discountPrice && (
<p className="line-through text-xs text-borderColor">
<span> قیمت</span> 140<span>تومان</span>
</p>
)}
)} */}
</div>
<p
{/* <p
className={`text-sm font-semibold inline text-productPrice`}
>
{price}
{video?.price}
<span>تومان</span>
</p>
</p> */}
</div>
{/* add to cart */}
{addToCartHolder && (
@ -210,14 +203,14 @@ const VodProduct = ({
)}
</div>
)}
{star && (
{/* {star && (
<div className="flex items-center">
<StarRating />
<span className="text-xs text-productContent font-bold mr-2">
39
</span>
</div>
)}
)} */}
</div>
{productTags && (
<div className="mt-2 flex flex-wrap">
@ -245,7 +238,7 @@ const VodProduct = ({
</div>
</div>
</div>
</div>
</Link>
{/* <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"
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(() => {
if (loginFlag) {
// navigate("/");
navigate("/");
}
}, [loginFlag]);
const light = theme === "light";

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

@ -75,7 +75,7 @@ const DesktopHome = ({ grades, getList, books }) => {
<div className="mb-16">
<img src={HomeImg} />
</div>
<Part4 />
<Part4 books={books} grades={grades} />
</div>
);
};
@ -86,6 +86,7 @@ const mapStateToProps = (state) => ({
books: state.book.list,
gradeFilterBooks: state.book.gradeFilterBooks,
selectedGrade: state.book.selectedGrade,
grades: state.publicApi.grades
});
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 (
<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">
@ -103,44 +61,42 @@ export const Main = ({
))}
</ul>
</div>
<div className="relative w-full" style={{ direction: "ltr" }}>
<Carousel
show={Math.round(window.innerWidth / 500)}
slide={2}
swiping={true}
useArrowKeys={true}
transition={0.5}
className="flex flex-row"
rightArrow={
<img
className="absolute top-1/2 transform -translate-y-1/2 cursor-pointer p-2"
src={arrow}
alt=""
/>
}
leftArrow={
<img
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer -rotate-180 p-2"
src={arrow}
alt=""
/>
}
>
{videosData.map((video, index) => (
<VodProduct
productTitle={`دوره ی ویدیویی ${video.name}`}
productCat={video.grade}
price={video.price}
priceTitle={false}
discountPrice={false}
key={index}
index={index}
height={"calc(100vh / 5)"}
/>
))}
</Carousel>
</div>
{books?.length > 0 && (
<div className="relative w-full" style={{ direction: "ltr" }}>
<Carousel
show={Math.round(window.innerWidth / 500)}
slide={2}
swiping={true}
useArrowKeys={true}
transition={0.5}
className="flex flex-row"
rightArrow={
<img
className="absolute top-1/2 transform -translate-y-1/2 cursor-pointer p-2"
src={arrow}
alt=""
/>
}
leftArrow={
<img
className="absolute top-1/2 transform -translate-y-1/2 -translate-x-5 cursor-pointer -rotate-180 p-2"
src={arrow}
alt=""
/>
}
>
{books?.map((video, index) => (
<VodProduct
video={video}
key={index}
index={index}
height={"calc(100vh / 5)"}
grades={grades}
/>
))}
</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">
{selectedGrade
@ -173,6 +129,7 @@ export const Main = ({
product={product}
index={Number(index)}
imageSize={4.5}
grades={grades}
/>
</Link>
))}

@ -1,8 +1,12 @@
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,
@ -12,6 +16,14 @@ const Season = ({
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);
@ -24,7 +36,7 @@ const Season = ({
);
};
// const [activeSeason, setActiveSeason] = useState(null);
const Unit = ({ unit }) => {
const Unit = ({ unit, index }) => {
return isMobile ? (
<Link
to="/videos/0/display"
@ -58,9 +70,9 @@ const Season = ({
</div> */}
</Link>
) : (
<Link to="/videos/0/display" className="d-flex flex-column">
<div className="d-flex flex-column">
<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={{
display: season[0].categoryId === activeSeason ? "flex" : "none",
}}
@ -68,11 +80,28 @@ const Season = ({
// 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>
<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>
</li>
</Link>
</div>
);
};
return isMobile ? (
@ -99,21 +128,38 @@ const Season = ({
season.map((unit, index) => <Unit unit={unit} key={index} />)}
</div>
) : (
<li
className="w-full flex flex-col bg-grayF7 rounded-md overflow-hidden cursor-pointer"
onClick={() => toggle(season[0].categoryId)}
>
<header className="w-full flex flex-row justify-between p-4">
<strong className="text-tiny text-gray1 font-medium">
<li className="w-full flex flex-col bg-blueFF1 rounded-md overflow-hidden shadow-md">
<header
className="w-full flex flex-row justify-between items-center py-3 px-6"
onClick={() => toggle(season[0].categoryId)}
>
<strong className="text-tiny text-blueC0 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-4 divide-y-2 divide-solid divide-gray-200">
{season[0].categoryId === activeSeason &&
season.map((unit, index) => <Unit unit={unit} key={index} />)}
<ul
className={`w-full flex flex-col px-4 divide-y-2 divide-solid transform origin-bottom transition-all divide-blue-100 overflow-hidden`}
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>
</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 { connect } from "react-redux";
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 Divider from "../../components/Divider";
import Season from "./components/Season";
import DesktopVideoDisplay from "./Desktop";
function VideoDisplay({
isMobile,
@ -48,17 +51,24 @@ function VideoDisplay({
seasons,
grades,
getBook,
getSeason,
selectedVideo,
}) {
useEffect(() => {
const id = window.location.pathname.slice(
8,
window.location.pathname.lastIndexOf("/")
);
getBook({bookId : id});
setHeaderOptions(headerOptions);
// getBook({ bookId: id });
const cat = localStorage.getItem("season")?.split(",");
getSeason({ bookId: cat[0], categoryId: cat[1] });
}, []);
useEffect(() => {
},[])
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>';
return isMobile ? (
@ -92,21 +102,58 @@ function VideoDisplay({
</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) => ({
isMobile: state.publicApi.isMobile,
book: state.publicApi.bookInfo,
grades: state.publicApi.categories,
book: state.publicApi.bookSection,
seasons: state.publicApi.categories,
grades: state.publicApi.grades,
selectedVideo: state.publicApi.selectedVideo,
});
const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,
getBook: publicApi.getBook,
getBook: publicApi.bookInfo,
getSeason: publicApi.bookSection
};
export default connect(mapStateToProps, mapDispatchToProps)(VideoDisplay);

Loading…
Cancel
Save