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.
 
 
 

197 lines
7.0 KiB

import React, { useState, useEffect, useRef } from "react";
import Navbar from "../../../components/Navbar";
import LessonPlayList from "./LessonPlayList";
import Attachments from "./Attachments";
import Book from "./Book";
import Comment from "./Comment";
import AddComment from "./AddComment";
import Video from "../../../components/JolPlayer";
import Test from "../Test";
import listIcon from "../../../assets/icons/list.png";
import { connect } from "react-redux";
import _ from "lodash";
import scroll from "../../../utils/scroll.js";
import location from "../../../utils/location.js";
import { book, publicApi } from "../../../redux/actions";
// import Loader from "../../components/Loader";
function VodTube({
autoPlay,
page,
selectedVideo,
info,
// bookSection,
// loading,
getInfo,
// categories,
// setVideoActive,
// allBooks,
theme,
}) {
const [top, setTop] = useState(window.innerHeight);
const videoListTag = useRef(null);
useEffect(() => {
window.addEventListener("scroll", (e) => {
setTop(scroll.homeScrollHandler(page));
});
// localStorage.setItem("scroll-list", "on");
getInfo({
bookId: 8,
});
}, []);
// useEffect(() => {
// if (allBooks && localStorage.getItem("category")) {
// const cat = localStorage.getItem("category")?.split(",");
// bookSection({ bookId: cat[0], categoryId: cat[1] });
// }
// }, [allBooks]);
const light = theme === "light";
return (
<div
onClick={(e) => e.stopPropagation()}
className={_.join(
[
"fixed flex flex-row rtl pt-20 lg:px-5 xl:px-10 w-full bg-white dark:bg-black bg-opacity-80 transition-opacity duration-500 min-h-screen backdrop-filter backdrop-blur-md",
top > 0 ? "opacity-0 z-0" : "opacity-100 z-10",
],
" "
)}
style={{ top: top }}
>
{/* <Navbar /> */}
<div className="ml-4.5 flex flex-col ml-2" style={{ flex: 8 }}>
<section className="pb-7 flex flex-col">
<div
className="w-full flex flex-col overflow-y-hidden"
style={{ height: window.innerHeight - 200 }}
>
<Video
fileIds={selectedVideo?.fileIds}
posterId={selectedVideo?.posterId}
autoPlay={autoPlay}
/>
<Test />
</div>
{/* <span className="desktop">درس دوم / بیست و یکم</span> */}
<h1 className="md:hidden sm:hidden xs:hidden mb-5">
{selectedVideo?.name}
</h1>
{/* <p className="desktop">{selectedVideo.text}</p> */}
</section>
<section className="md:hidden sm:hidden xs:hidden pb-7 flex flex-col">
<header className="flex flex-row justify-between items-center px-5 py-0">
<h2 className="m-0">نظرات</h2>
<button className="border-0">بستن نظرات</button>
</header>
{/* <div className="flex flex-col">
{info?.comments?.map((comment, i) => (
<Comment comment={comment} key={i} />
))}
</div> */}
</section>
<section className="md:hidden sm:hidden xs:hidden px-4 py-0">
<AddComment theme={theme} />
</section>
</div>
<div className="flex flex-col" style={{ flex: 3 }}>
<section
className="mb-7 flex flex-col rounded-md overflow-hidden"
style={{ border: "1px solid #70707070" }}
>
<header className="w-full flex justify-between items-center px-2 py-2 bg-gray-100">
<div className="flex flex-col">
<h2 className="m-0">
{localStorage.getItem("category")?.split(",")[1] ||
"لیست فیلمها"}
</h2>
{/* <p>در این قسمت توضیحی کوتاه قرار می گیرد</p> */}
</div>
<img src={listIcon} alt="" />
</header>
<div
ref={videoListTag}
className="pt-2.5 overflow-y-scroll flex flex-col"
id="list"
style={{
minHeight: window.innerHeight / 1.5,
maxHeight: window.innerHeight / 1.5,
}}
>
{/* {localStorage.getItem("bookId")
? categories?.map((video, i) => (
<LessonPlayList theme={theme} category={video} key={i} />
))
: info?.vods.map((video, i) => (
<LessonPlayList theme={theme} category={video} key={i} />
))} */}
{/* {info?.vods.map((video, i) => ( */}
<LessonPlayList theme={theme} list={info?.vods} />
{/* ))} */}
</div>
</section>
{1 > 0 && (
<section className="flex flex-col mb-7">
<header className="flex items-center w-full">
<div className="flex flex-col">
<h2 className="m-0">فایل پیوست تمارین این فصل</h2>
{/* <p>در این قسمت توضیحی کوتاه قرار می گیرد</p> */}
</div>
</header>
<div className="overflow-y-scroll flex flex-col">
{info?.attachments?.map((file, i) => (
<Attachments file={file} key={i} />
))}
</div>
</section>
)}
{info?.related && (
<section className="video-tube__sidebar--suggests flex flex-col bg-transparent">
<header className="flex justify-between items-center w-full">
<h2 className="m-0">پیشنهاد دانوین برای شما</h2>
<span className="px-2 py-1">تا 50% تخفیف </span>
</header>
<div className="video-tube__sidebar--suggests___list flex justify-between align-items-center">
{info?.related.slice(0, 3).map((item, i) => (
<Book data={item} key={i} />
))}
</div>
</section>
)}
{/* <section className="mobile video-tube__content--comments flex-col">
<header className="flex justify-between align-items-center">
<h2>نظرات</h2>
<button>بستن نظرات</button>
</header>
<div className="video-tube__content-comments___list flex flex-col">
{info?.comments?.map((comment, i) => (
<Comment comment={comment} key={i} />
))}
</div>
</section> */}
</div>
{/* <section className="mobile video-tube__content--addComment">
<AddComment />
</section> */}
</div>
);
}
export default connect(
(state) => ({
selectedVideo: state.publicApi.selectedVideo,
info: state.publicApi?.bookInfo,
loading: state.publicApi.loading,
categories: state.publicApi.categories,
allBooks: state.publicApi.bookInfo?.vods,
theme: state.publicApi.theme,
}),
{
getInfo: publicApi.bookInfo,
getBookList: book.list,
bookSection: publicApi.bookSection,
setVideoActive: publicApi.setVideoActive,
}
)(VodTube);