|
|
|
import React, { useState, useEffect } from "react";
|
|
|
|
import { connect } from "react-redux";
|
|
|
|
import { publicApi } from "../../redux/actions";
|
|
|
|
import PlayList from "../../components/CourseChapter";
|
|
|
|
import JolPlayer from "../../components/JolPlayer";
|
|
|
|
|
|
|
|
function VideoDisplay({
|
|
|
|
isMobile,
|
|
|
|
headerOptions,
|
|
|
|
setHeaderOptions,
|
|
|
|
book,
|
|
|
|
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] });
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
return isMobile ? (
|
|
|
|
<div className="w-full flex flex-col px-4 pb-24 pt-4">
|
|
|
|
<div className="w-full flex flex-col mb-6">
|
|
|
|
<JolPlayer
|
|
|
|
fileIds={selectedVideo?.fileIds}
|
|
|
|
posterId={selectedVideo?.posterId}
|
|
|
|
/>
|
|
|
|
<h1 className="mt-2 font-bold text-4xl text-blue52 dark:text-white pb-4 border-b-2 border-solid border-gray-200">
|
|
|
|
{selectedVideo?.name}
|
|
|
|
</h1>
|
|
|
|
</div>
|
|
|
|
<PlayList playList={book?.vods} />
|
|
|
|
</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></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);
|