|
|
|
|
import React, { useState, useEffect } from "react";
|
|
|
|
|
import { connect } from "react-redux";
|
|
|
|
|
import { publicApi } from "../../redux/actions";
|
|
|
|
|
import poster from "../../assets/images/poster.svg";
|
|
|
|
|
import Divider from "../../components/Divider";
|
|
|
|
|
import Season from "./components/Season";
|
|
|
|
|
import DesktopVideoDisplay from "./Desktop";
|
|
|
|
|
|
|
|
|
|
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,
|
|
|
|
|
}) {
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
setHeaderOptions(headerOptions);
|
|
|
|
|
}, []);
|
|
|
|
|
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> :
|
|
|
|
|
<DesktopVideoDisplay />
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const mapStateToProps = (state) => ({
|
|
|
|
|
isMobile: state.publicApi.isMobile,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const mapDispatchToProps = {
|
|
|
|
|
setHeaderOptions: publicApi.setHeaderOptions,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(VideoDisplay);
|