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