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.
 
 
 

184 lines
6.8 KiB

import React, { useState, useEffect, useRef } from "react";
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 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({
selectedVideo,
info,
bookSection,
loading,
getInfo,
categories,
setVideoActive,
allBooks,
theme,
}) {
const videoListTag = useRef(null);
useEffect(() => {
localStorage.setItem("scroll-list", "on");
scroll.goToTop();
getInfo({
bookId: localStorage.getItem("bookId")
? localStorage.getItem("bookId")
: localStorage.getItem("category")?.split(",")[0],
});
}, []);
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
className={_.join(
[
"video-tube main d-flex flex-column",
light ? "video-tube-light bg-white" : "video-tube-dark bg-black",
],
" "
)}
style={{ filter: loading ? "blur(8px)" : "" }}
>
<main className="d-flex">
<div className="video-tube__content d-flex flex-column">
<section className="video-tube__content--display d-flex flex-column">
{/* <video controls>
<source src={selectedVideo.src} />
</video> */}
<Video
fileIds={selectedVideo?.fileIds}
posterId={selectedVideo?.posterId}
/>
{/* <span className="desktop">درس دوم / بیست و یکم</span> */}
<h1 className="desktop">{selectedVideo?.name}</h1>
{/* <p className="desktop">{selectedVideo.text}</p> */}
</section>
<section className="desktop video-tube__content--comments flex-column">
<header className="d-flex justify-content-between align-items-center">
<h2>نظرات</h2>
<button>بستن نظرات</button>
</header>
<div className="video-tube__content-comments___list d-flex flex-column">
{info?.comments?.map((comment, i) => (
<Comment comment={comment} key={i} />
))}
</div>
</section>
<section className="desktop video-tube__content--addComment">
<AddComment theme={theme} />
</section>
</div>
<div className="video-tube__sidebar d-flex flex-column">
<section className="video-tube__sidebar--playlist d-flex flex-column">
<header className="d-flex justify-content-between align-items-center">
<div className="d-flex flex-column">
<h2>
{localStorage.getItem("category")?.split(",")[1] ||
"لیست فیلمها"}
</h2>
{/* <p>در این قسمت توضیحی کوتاه قرار می گیرد</p> */}
</div>
<img src={listIcon} alt="" />
</header>
<div
ref={videoListTag}
className="video-tube__sidebar--playlist___list d-flex flex-column"
id="list"
>
{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} />
))}
</div>
</section>
{info?.attachments.length > 0 && (
<section className="video-tube__sidebar--attachments d-flex flex-column">
<header className="d-flex align-items-center">
<div className="d-flex flex-column">
<h2>فایل پیوست تمارین این فصل</h2>
{/* <p>در این قسمت توضیحی کوتاه قرار می گیرد</p> */}
</div>
</header>
<div className="video-tube__sidebar--attachments___list d-flex flex-column">
{info?.attachments?.map((file, i) => (
<Attachments file={file} key={i} />
))}
</div>
</section>
)}
{info?.related && (
<section className="video-tube__sidebar--suggests d-flex flex-column">
<header className="d-flex justify-content-between align-items-center">
<h2>پیشنهاد دانوین برای شما</h2>
<span>تا 50% تخفیف </span>
</header>
<div className="video-tube__sidebar--suggests___list d-flex justify-content-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-column">
<header className="d-flex justify-content-between align-items-center">
<h2>نظرات</h2>
<button>بستن نظرات</button>
</header>
<div className="video-tube__content-comments___list d-flex flex-column">
{info?.comments?.map((comment, i) => (
<Comment comment={comment} key={i} />
))}
</div>
</section>
</div>
<section className="mobile video-tube__content--addComment">
<AddComment />
</section>
</main>
</div>
{loading && (
<div className="full-loader">
<Loader size={50} />
</div>
)}
</>
);
}
export default connect(
(state) => ({
selectedVideo: state.publicApi.selectedVideo,
info: state.publicApi.bookSection,
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);