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

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