|
|
|
@ -1,4 +1,4 @@ |
|
|
|
import React from "react"; |
|
|
|
import React, { useState } from "react"; |
|
|
|
import { Link } from "react-router-dom"; |
|
|
|
import { Link } from "react-router-dom"; |
|
|
|
import whiteDropdown from "../../../assets/icons/white-dropdown.png"; |
|
|
|
import whiteDropdown from "../../../assets/icons/white-dropdown.png"; |
|
|
|
import whitePlay from "../../../assets/icons/white-play.png"; |
|
|
|
import whitePlay from "../../../assets/icons/white-play.png"; |
|
|
|
@ -6,13 +6,25 @@ import document from "../../../assets/icons/document.png"; |
|
|
|
import "./index.scss"; |
|
|
|
import "./index.scss"; |
|
|
|
import { connect } from "react-redux"; |
|
|
|
import { connect } from "react-redux"; |
|
|
|
import { book, publicApi } from "../../../redux/actions"; |
|
|
|
import { book, publicApi } from "../../../redux/actions"; |
|
|
|
|
|
|
|
import location from "../../../util/location"; |
|
|
|
|
|
|
|
|
|
|
|
function Lesson({ toggle, lesson, activeCategory, realCategories, vodDuration }: any) { |
|
|
|
function Lesson({ |
|
|
|
|
|
|
|
toggle, |
|
|
|
|
|
|
|
lesson, |
|
|
|
|
|
|
|
activeCategory, |
|
|
|
|
|
|
|
realCategories, |
|
|
|
|
|
|
|
vodDuration, |
|
|
|
|
|
|
|
}: any) { |
|
|
|
|
|
|
|
const [selectedLesson, setSelectedLesson] = useState(null); |
|
|
|
const duration = (value: number) => { |
|
|
|
const duration = (value: number) => { |
|
|
|
const minute = value % 60; |
|
|
|
const minute = value % 60; |
|
|
|
const hour = Math.round(value / 60); |
|
|
|
const hour = Math.round(value / 60); |
|
|
|
return (hour > 0 ? hour + " " + "ساعت" : "") + " " + minute + " " + "دقیقه"; |
|
|
|
return (hour > 0 ? hour + " " + "ساعت" : "") + " " + minute + " " + "دقیقه"; |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
const setCategory = (catId : any, videoId: any) => { |
|
|
|
|
|
|
|
localStorage.removeItem("bookId"); |
|
|
|
|
|
|
|
localStorage.setItem("category", location.getId() + "," + catId + "," + videoId ); |
|
|
|
|
|
|
|
}; |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div className="lesson d-flex flex-column"> |
|
|
|
<div className="lesson d-flex flex-column"> |
|
|
|
<header |
|
|
|
<header |
|
|
|
@ -42,8 +54,14 @@ function Lesson({ toggle, lesson, activeCategory, realCategories, vodDuration }: |
|
|
|
onClick={() => toggle(lesson[0].categoryId)} |
|
|
|
onClick={() => toggle(lesson[0].categoryId)} |
|
|
|
> |
|
|
|
> |
|
|
|
<div className="d-flex flex-column"> |
|
|
|
<div className="d-flex flex-column"> |
|
|
|
<h4>{lesson[0].categoryId}</h4> |
|
|
|
<h4> |
|
|
|
<span> مدت زمان درس {lesson.duration}</span> |
|
|
|
{ |
|
|
|
|
|
|
|
realCategories.filter( |
|
|
|
|
|
|
|
(item: any) => item.id === lesson[0].categoryId |
|
|
|
|
|
|
|
)[0].name |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
</h4> |
|
|
|
|
|
|
|
{/* <span> مدت زمان درس {lesson.duration}</span> */} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="lesson__duration d-flex"> |
|
|
|
<div className="lesson__duration d-flex"> |
|
|
|
<img src={whiteDropdown} alt="" /> |
|
|
|
<img src={whiteDropdown} alt="" /> |
|
|
|
@ -66,26 +84,41 @@ function Lesson({ toggle, lesson, activeCategory, realCategories, vodDuration }: |
|
|
|
}} |
|
|
|
}} |
|
|
|
> |
|
|
|
> |
|
|
|
{lesson?.map((data: any, i: any) => ( |
|
|
|
{lesson?.map((data: any, i: any) => ( |
|
|
|
<li |
|
|
|
<div className="d-flex flex-column"> |
|
|
|
className="lesson__files--sample justify-content-between align-items-center" |
|
|
|
<li |
|
|
|
style={{ |
|
|
|
className="lesson__files--sample justify-content-between align-items-center" |
|
|
|
display: |
|
|
|
style={{ |
|
|
|
lesson[0].categoryId === activeCategory ? "flex" : "none", |
|
|
|
display: |
|
|
|
}} |
|
|
|
lesson[0].categoryId === activeCategory ? "flex" : "none", |
|
|
|
> |
|
|
|
}} |
|
|
|
<div className="d-flex align-items-center"> |
|
|
|
onClick={() => |
|
|
|
{data.type === "video" && <img src={whitePlay} alt="" />} |
|
|
|
setSelectedLesson(selectedLesson === data.id ? null : data.id) |
|
|
|
{data.type === "pdf" && <img src={document} alt="" />} |
|
|
|
} |
|
|
|
<h5>{data.name}</h5> |
|
|
|
> |
|
|
|
</div> |
|
|
|
<div className="d-flex align-items-center"> |
|
|
|
<ul className="d-flex"> |
|
|
|
{data.type === "video" && <img src={whitePlay} alt="" />} |
|
|
|
<li>{data.type !== "pdf" && duration(data.duration)}</li> |
|
|
|
{data.type === "pdf" && <img src={document} alt="" />} |
|
|
|
<Link to="/video-tube"> |
|
|
|
<img |
|
|
|
<li>{"مشاهده"}</li> |
|
|
|
className={ |
|
|
|
</Link> |
|
|
|
selectedLesson === data.id |
|
|
|
{/* <li>{data.download ? "دانلود" : <img src={lock} alt="" />}</li> */} |
|
|
|
? "lesson__files--sample___active" |
|
|
|
</ul> |
|
|
|
: "" |
|
|
|
</li> |
|
|
|
} |
|
|
|
|
|
|
|
src={`https://dnvn.ir/api/v1/file/${data.posterId}`} |
|
|
|
|
|
|
|
alt="" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
<h5>{data.name}</h5> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<ul className="d-flex"> |
|
|
|
|
|
|
|
<li>{data.type !== "pdf" && duration(data.duration)}</li> |
|
|
|
|
|
|
|
<Link to="/video-tube" onClick={() => setCategory(lesson[0].categoryId, data.name)}> |
|
|
|
|
|
|
|
<li>{"مشاهده"}</li> |
|
|
|
|
|
|
|
</Link> |
|
|
|
|
|
|
|
{/* <li>{data.download ? "دانلود" : <img src={lock} alt="" />}</li> */} |
|
|
|
|
|
|
|
</ul> |
|
|
|
|
|
|
|
</li> |
|
|
|
|
|
|
|
{selectedLesson === data.id && <p>سلام</p>} |
|
|
|
|
|
|
|
</div> |
|
|
|
))} |
|
|
|
))} |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -96,7 +129,7 @@ export default connect( |
|
|
|
(state: any) => ({ |
|
|
|
(state: any) => ({ |
|
|
|
activeCategory: state.publicApi.activeCategory, |
|
|
|
activeCategory: state.publicApi.activeCategory, |
|
|
|
realCategories: state.publicApi.bookInfo?.categories, |
|
|
|
realCategories: state.publicApi.bookInfo?.categories, |
|
|
|
vodDuration : state.publicApi.bookInfo?.vodDuration, |
|
|
|
vodDuration: state.publicApi.bookInfo?.vodDuration, |
|
|
|
}), |
|
|
|
}), |
|
|
|
{ |
|
|
|
{ |
|
|
|
toggle: publicApi.activeCategory, |
|
|
|
toggle: publicApi.activeCategory, |
|
|
|
|
