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