You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
3.7 KiB
86 lines
3.7 KiB
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);
|
|
|