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