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.
 
 
 
 

119 lines
4.9 KiB

import React, { useEffect } from "react";
import Navbar from "../../components/Navbar/index";
import Footer from "../../views/Home/Footer/index";
import LessonPlayList from "./LessonPlayList/index";
import Attachments from "./Attachments/index";
import Book from "./Book/index";
import Comment from "./Comment/index";
import AddComment from "./AddComment/index";
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 } from "../../redux/actions";
function VodTube({ videoList, getList, list, selectedVideo, comments }: any) {
useEffect(() => {
getList();
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 />
<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">
{videoList.lessons?.map((lesson: any, i: any) => (
<LessonPlayList lesson={lesson} 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,
}),
{ getList: book.list }
)(VodTube);