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
						
					
					
				
			
		
		
	
	
							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);
 | 
						|
 |