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.
 
 
 
 

136 lines
5.2 KiB

import React, { 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";
function VodTube({
videoList,
getBookList,
list,
selectedVideo,
comments,
info,
getInfo,
}: any) {
useEffect(() => {
getBookList();
// getInfo({
// bookId: 1,
// // window.location.pathname.slice(
// // window.location.pathname.lastIndexOf("/") + 1,
// // window.location.pathname.length
// // ),
// });
scroll.goToTop();
}, []);
return (
<div className="video-tube main d-flex flex-column">
<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} />
<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">
{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>{videoList.name}</h2>
<p>در این قسمت توضیحی کوتاه قرار می گیرد</p>
</div>
<img src={listIcon} alt="" />
</header>
<div className="video-tube__sidebar--playlist___list d-flex flex-column">
{info?.vods.map((video: any, i: any) => (
<LessonPlayList video={video} key={i} num={i + 1} />
))}
</div>
</section>
<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">
{videoList.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">
{list?.slice(0, 3).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">
{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>
);
}
export default connect(
(state: any) => ({
videoList: state.book.mockVideoList,
selectedVideo: state.book.selectedVideo,
list: state.book.list,
comments: state.book.comments,
info: state.book.info,
}),
{ getInfo: publicApi.bookInfo, getBookList : book.list }
)(VodTube);