|
|
|
|
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";
|
|
|
|
|
|
|
|
|
|
function VideoDisplay({
|
|
|
|
|
isMobile,
|
|
|
|
|
product = {
|
|
|
|
|
type: "کتاب ها",
|
|
|
|
|
name: "ریاضی",
|
|
|
|
|
price: "145.000 تومان",
|
|
|
|
|
imageUrl: "https://dnvn.ir/api/v1/file/2105",
|
|
|
|
|
poster: poster,
|
|
|
|
|
grade: "پایه هفتم ابتدایی",
|
|
|
|
|
seasons: [
|
|
|
|
|
{
|
|
|
|
|
name: "فصل اول: مباحث جوشش مواد مذاب در مرکز زمین",
|
|
|
|
|
duration: "2:30:13",
|
|
|
|
|
units: [
|
|
|
|
|
{
|
|
|
|
|
name: "مقدمه جالب توجه نویسنده کتاب برای شما",
|
|
|
|
|
duration: "14:30",
|
|
|
|
|
download: true,
|
|
|
|
|
play: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "چگونگی ساخت نیروگاههای برقی ",
|
|
|
|
|
duration: "14:30",
|
|
|
|
|
download: false,
|
|
|
|
|
play: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "آیا گوگل از ما دزدی میکند ؟",
|
|
|
|
|
duration: "14:30",
|
|
|
|
|
download: true,
|
|
|
|
|
play: true,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
headerOptions,
|
|
|
|
|
setHeaderOptions,
|
|
|
|
|
book,
|
|
|
|
|
seasons,
|
|
|
|
|
grades,
|
|
|
|
|
getBook,
|
|
|
|
|
getSeason,
|
|
|
|
|
selectedVideo,
|
|
|
|
|
}) {
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
const id = window.location.pathname.slice(
|
|
|
|
|
8,
|
|
|
|
|
window.location.pathname.lastIndexOf("/")
|
|
|
|
|
);
|
|
|
|
|
getBook({bookId : id}, {id});
|
|
|
|
|
setHeaderOptions(headerOptions);
|
|
|
|
|
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&Code=x8oNSO7tTnqAniyPpPyN"><img referrerpolicy="origin" src="https://Trustseal.eNamad.ir/logo.aspx?id=224965&Code=x8oNSO7tTnqAniyPpPyN" alt="" style="cursor:pointer" id="x8oNSO7tTnqAniyPpPyN"></a>';
|
|
|
|
|
return isMobile ? (
|
|
|
|
|
<div className="w-full flex flex-col px-4">
|
|
|
|
|
<div className="w-full flex flex-col mb-6">
|
|
|
|
|
<div className="w-full flex flex-row flex-1 justify-between items-center overflow-hidden relative">
|
|
|
|
|
<video
|
|
|
|
|
style={{ width: "100%", height: "calc(100vw * 9 / 16 - 16)" }}
|
|
|
|
|
controls
|
|
|
|
|
>
|
|
|
|
|
<source
|
|
|
|
|
src={`https://dnvn.ir/api/v1/file/20540`}
|
|
|
|
|
type="video/mp4"
|
|
|
|
|
/>
|
|
|
|
|
</video>
|
|
|
|
|
</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 className="flex flex-col">
|
|
|
|
|
{product.seasons.map((season, index) => (
|
|
|
|
|
<Season season={season} key={index} />
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
) : (
|
|
|
|
|
<div className="w-11/12 flex flex-col mb-6 justify-center items-center mx-auto pt-24 pb-20">
|
|
|
|
|
<div className="w-full flex flex-row justify-between 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.bookSection,
|
|
|
|
|
seasons: state.publicApi.categories,
|
|
|
|
|
grades: state.publicApi.grades,
|
|
|
|
|
selectedVideo: state.publicApi.selectedVideo,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const mapDispatchToProps = {
|
|
|
|
|
setHeaderOptions: publicApi.setHeaderOptions,
|
|
|
|
|
getBook: publicApi.bookInfo,
|
|
|
|
|
getSeason: publicApi.bookSection
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(VideoDisplay);
|