|
|
|
@ -1,4 +1,4 @@ |
|
|
|
import React, { useEffect } from "react"; |
|
|
|
import React, { useState, useEffect } from "react"; |
|
|
|
import Navbar from "../../components/Navbar"; |
|
|
|
import Navbar from "../../components/Navbar"; |
|
|
|
import Footer from "../Home/Footer"; |
|
|
|
import Footer from "../Home/Footer"; |
|
|
|
import LessonPlayList from "./LessonPlayList"; |
|
|
|
import LessonPlayList from "./LessonPlayList"; |
|
|
|
@ -13,18 +13,12 @@ import listIcon from "../../assets/icons/list.png"; |
|
|
|
import { connect } from "react-redux"; |
|
|
|
import { connect } from "react-redux"; |
|
|
|
import scroll from "../../util/scroll.js"; |
|
|
|
import scroll from "../../util/scroll.js"; |
|
|
|
import { book, publicApi } from "../../redux/actions"; |
|
|
|
import { book, publicApi } from "../../redux/actions"; |
|
|
|
|
|
|
|
import Loader from "../../components/Loader"; |
|
|
|
|
|
|
|
|
|
|
|
function VodTube({ |
|
|
|
function VodTube({ selectedVideo, info, bookSection, loading }: any) { |
|
|
|
videoList, |
|
|
|
|
|
|
|
getBookList, |
|
|
|
|
|
|
|
list, |
|
|
|
|
|
|
|
selectedVideo, |
|
|
|
|
|
|
|
comments, |
|
|
|
|
|
|
|
info, |
|
|
|
|
|
|
|
getInfo, |
|
|
|
|
|
|
|
}: any) { |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
getBookList(); |
|
|
|
const free: any = localStorage.getItem("free")?.split(","); |
|
|
|
|
|
|
|
scroll.goToTop(); |
|
|
|
// getInfo({
|
|
|
|
// getInfo({
|
|
|
|
// bookId: 1,
|
|
|
|
// bookId: 1,
|
|
|
|
// // window.location.pathname.slice(
|
|
|
|
// // window.location.pathname.slice(
|
|
|
|
@ -32,105 +26,119 @@ function VodTube({ |
|
|
|
// // window.location.pathname.length
|
|
|
|
// // window.location.pathname.length
|
|
|
|
// // ),
|
|
|
|
// // ),
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
scroll.goToTop(); |
|
|
|
bookSection({ bookId: free[0], categoryId: free[1] }); |
|
|
|
}, []); |
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div className="video-tube main d-flex flex-column"> |
|
|
|
<> |
|
|
|
<Navbar /> |
|
|
|
<div |
|
|
|
<main className="d-flex"> |
|
|
|
className="video-tube main d-flex flex-column" |
|
|
|
<div className="video-tube__content d-flex flex-column"> |
|
|
|
style={{ filter: loading ? "blur(8px)" : "" }} |
|
|
|
<section className="video-tube__content--display d-flex flex-column"> |
|
|
|
> |
|
|
|
{/* <video controls> |
|
|
|
<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} /> |
|
|
|
<source src={selectedVideo.src} /> |
|
|
|
</video> */} |
|
|
|
</video> */} |
|
|
|
<Video fileIds={selectedVideo?.fileIds} /> |
|
|
|
<Video fileIds={selectedVideo?.fileIds} /> |
|
|
|
<span className="desktop">درس دوم / بیست و یکم</span> |
|
|
|
<span className="desktop">درس دوم / بیست و یکم</span> |
|
|
|
<h1 className="desktop">{selectedVideo?.name}</h1> |
|
|
|
<h1 className="desktop">{selectedVideo?.name}</h1> |
|
|
|
{/* <p className="desktop">{selectedVideo.text}</p> */} |
|
|
|
{/* <p className="desktop">{selectedVideo.text}</p> */} |
|
|
|
</section> |
|
|
|
</section> |
|
|
|
<section className="desktop video-tube__content--comments flex-column"> |
|
|
|
<section className="desktop video-tube__content--comments flex-column"> |
|
|
|
<header className="d-flex justify-content-between align-items-center"> |
|
|
|
<header className="d-flex justify-content-between align-items-center"> |
|
|
|
<h2>نظرات</h2> |
|
|
|
<h2>نظرات</h2> |
|
|
|
<button>بستن نظرات</button> |
|
|
|
<button>بستن نظرات</button> |
|
|
|
</header> |
|
|
|
</header> |
|
|
|
<div className="video-tube__content-comments___list d-flex flex-column"> |
|
|
|
<div className="video-tube__content-comments___list d-flex flex-column"> |
|
|
|
{comments?.map((comment: any, i: any) => ( |
|
|
|
{info?.comments?.map((comment: any, i: any) => ( |
|
|
|
<Comment comment={comment} key={i} /> |
|
|
|
<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> |
|
|
|
</div> |
|
|
|
<img src={listIcon} alt="" /> |
|
|
|
</section> |
|
|
|
</header> |
|
|
|
<section className="desktop video-tube__content--addComment"> |
|
|
|
<div className="video-tube__sidebar--playlist___list d-flex flex-column"> |
|
|
|
<AddComment /> |
|
|
|
{info?.vods.map((video: any, i: any) => ( |
|
|
|
</section> |
|
|
|
<LessonPlayList video={video} key={i} num={i + 1} /> |
|
|
|
</div> |
|
|
|
))} |
|
|
|
<div className="video-tube__sidebar d-flex flex-column"> |
|
|
|
</div> |
|
|
|
<section className="video-tube__sidebar--playlist d-flex flex-column"> |
|
|
|
</section> |
|
|
|
<header className="d-flex justify-content-between align-items-center"> |
|
|
|
<section className="video-tube__sidebar--attachments d-flex flex-column"> |
|
|
|
<div className="d-flex flex-column"> |
|
|
|
<header className="d-flex align-items-center"> |
|
|
|
<h2>لیست فیلمها</h2> |
|
|
|
<div className="d-flex flex-column"> |
|
|
|
<p>در این قسمت توضیحی کوتاه قرار می گیرد</p> |
|
|
|
<h2>فایل پیوست تمارین این فصل</h2> |
|
|
|
</div> |
|
|
|
<p>در این قسمت توضیحی کوتاه قرار می گیرد</p> |
|
|
|
<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> |
|
|
|
</div> |
|
|
|
</header> |
|
|
|
</section> |
|
|
|
<div className="video-tube__sidebar--attachments___list d-flex flex-column"> |
|
|
|
{info?.attachments.length > 0 && ( |
|
|
|
{videoList.attachments?.map((file: any, i: any) => ( |
|
|
|
<section className="video-tube__sidebar--attachments d-flex flex-column"> |
|
|
|
<Attachments file={file} key={i} /> |
|
|
|
<header className="d-flex align-items-center"> |
|
|
|
))} |
|
|
|
<div className="d-flex flex-column"> |
|
|
|
</div> |
|
|
|
<h2>فایل پیوست تمارین این فصل</h2> |
|
|
|
</section> |
|
|
|
<p>در این قسمت توضیحی کوتاه قرار می گیرد</p> |
|
|
|
<section className="video-tube__sidebar--suggests d-flex flex-column"> |
|
|
|
</div> |
|
|
|
<header className="d-flex justify-content-between align-items-center"> |
|
|
|
</header> |
|
|
|
<h2>پیشنهاد دانوین برای شما</h2> |
|
|
|
<div className="video-tube__sidebar--attachments___list d-flex flex-column"> |
|
|
|
<span>تا 50% تخفیف </span> |
|
|
|
{info?.attachments?.map((file: any, i: any) => ( |
|
|
|
</header> |
|
|
|
<Attachments file={file} key={i} /> |
|
|
|
<div className="video-tube__sidebar--suggests___list d-flex justify-content-between align-items-center"> |
|
|
|
))} |
|
|
|
{list?.slice(0, 3).map((item: any, i: any) => ( |
|
|
|
</div> |
|
|
|
<Book data={item} key={i} /> |
|
|
|
</section> |
|
|
|
))} |
|
|
|
)} |
|
|
|
</div> |
|
|
|
<section className="video-tube__sidebar--suggests d-flex flex-column"> |
|
|
|
</section> |
|
|
|
<header className="d-flex justify-content-between align-items-center"> |
|
|
|
<section className="mobile video-tube__content--comments flex-column"> |
|
|
|
<h2>پیشنهاد دانوین برای شما</h2> |
|
|
|
<header className="d-flex justify-content-between align-items-center"> |
|
|
|
<span>تا 50% تخفیف </span> |
|
|
|
<h2>نظرات</h2> |
|
|
|
</header> |
|
|
|
<button>بستن نظرات</button> |
|
|
|
<div className="video-tube__sidebar--suggests___list d-flex justify-content-between align-items-center"> |
|
|
|
</header> |
|
|
|
{info?.related?.map((item: any, i: any) => ( |
|
|
|
<div className="video-tube__content-comments___list d-flex flex-column"> |
|
|
|
<Book data={item} key={i} /> |
|
|
|
{comments?.map((comment: any, i: any) => ( |
|
|
|
))} |
|
|
|
<Comment comment={comment} key={i} /> |
|
|
|
</div> |
|
|
|
))} |
|
|
|
</section> |
|
|
|
</div> |
|
|
|
<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> |
|
|
|
</section> |
|
|
|
</div> |
|
|
|
</main> |
|
|
|
<section className="mobile video-tube__content--addComment"> |
|
|
|
<Footer /> |
|
|
|
<AddComment /> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
{loading && ( |
|
|
|
</main> |
|
|
|
<div className="full-loader"> |
|
|
|
<Footer /> |
|
|
|
<Loader size={50} /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
</> |
|
|
|
); |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export default connect( |
|
|
|
export default connect( |
|
|
|
(state: any) => ({ |
|
|
|
(state: any) => ({ |
|
|
|
videoList: state.book.mockVideoList, |
|
|
|
selectedVideo: state.publicApi.selectedVideo, |
|
|
|
selectedVideo: state.book.selectedVideo, |
|
|
|
info: state.publicApi.bookSection, |
|
|
|
list: state.book.list, |
|
|
|
loading: state.publicApi.loading, |
|
|
|
comments: state.book.comments, |
|
|
|
|
|
|
|
info: state.book.info, |
|
|
|
|
|
|
|
}), |
|
|
|
}), |
|
|
|
{ getInfo: publicApi.bookInfo, getBookList : book.list } |
|
|
|
{ |
|
|
|
|
|
|
|
getInfo: publicApi.bookInfo, |
|
|
|
|
|
|
|
getBookList: book.list, |
|
|
|
|
|
|
|
bookSection: publicApi.bookSection, |
|
|
|
|
|
|
|
} |
|
|
|
)(VodTube); |
|
|
|
)(VodTube); |
|
|
|
|
