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.
 
 
 
 

171 lines
6.5 KiB

import React, { useState, useEffect } from "react";
import Navbar from "../../components/Navbar";
import Footer from "../Home/Footer";
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 "./index.scss";
import listIcon from "../../assets/icons/list.png";
import { connect } from "react-redux";
import scroll from "../../util/scroll.js";
import { book, publicApi } from "../../redux/actions";
import Loader from "../../components/Loader";
function VodTube({
selectedVideo,
info,
bookSection,
loading,
getInfo,
categories,
setVideoActive,
}: any) {
useEffect(() => {
scroll.goToTop();
// getInfo({
// bookId: 1,
// // window.location.pathname.slice(
// // window.location.pathname.lastIndexOf("/") + 1,
// // window.location.pathname.length
// // ),
// });
getInfo({ bookId: localStorage.getItem("bookId") });
}, []);
useEffect(() => {
if (localStorage.getItem("bookId")) {
setVideoActive(categories[0][0]);
} else {
if (!info) {
const cat: any = localStorage.getItem("category")?.split(",");
bookSection({ bookId: cat[0], categoryId: cat[1] });
}
}
}, [info]);
return (
<>
<div
className="video-tube main d-flex flex-column"
style={{ filter: loading ? "blur(8px)" : "" }}
>
<Navbar />
<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: any, i: any) => (
<Comment comment={comment} key={i} />
))}
</div>
</section>
<section className="desktop video-tube__content--addComment">
<AddComment />
</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 className="video-tube__sidebar--playlist___list d-flex flex-column">
{ localStorage.getItem("bookId")
? categories?.map((video: any, i: any) => (
<LessonPlayList category={video} key={i} />
))
:
info?.vods?.map((video: any, i: any) => (
<LessonPlayList 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: any, i: any) => (
<Attachments file={file} key={i} />
))}
</div>
</section>
)}
<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?.map((item: any, i: any) => (
<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: any, i: any) => (
<Comment comment={comment} key={i} />
))}
</div>
</section>
</div>
<section className="mobile video-tube__content--addComment">
<AddComment />
</section>
</main>
<Footer />
</div>
{loading && (
<div className="full-loader">
<Loader size={50} />
</div>
)}
</>
);
}
export default connect(
(state: any) => ({
selectedVideo: state.publicApi.selectedVideo,
info: state.publicApi.bookSection,
loading: state.publicApi.loading,
categories: state.publicApi.categories,
}),
{
getInfo: publicApi.bookInfo,
getBookList: book.list,
bookSection: publicApi.bookSection,
setVideoActive: publicApi.setVideoActive,
}
)(VodTube);