From 8a9ae7046cfdcceafc736c914a98f600ed12d028 Mon Sep 17 00:00:00 2001 From: Pkpedram Date: Thu, 27 Jan 2022 23:21:32 +0330 Subject: [PATCH] Video Display Desktop Separated --- src/components/CourseChapter/index.js | 139 ++++++++++++++++++++++++ src/views/VideoDisplay/Desktop/index.js | 30 +++++ src/views/VideoDisplay/index.js | 10 +- 3 files changed, 177 insertions(+), 2 deletions(-) create mode 100644 src/components/CourseChapter/index.js create mode 100644 src/views/VideoDisplay/Desktop/index.js diff --git a/src/components/CourseChapter/index.js b/src/components/CourseChapter/index.js new file mode 100644 index 0000000..8c024ed --- /dev/null +++ b/src/components/CourseChapter/index.js @@ -0,0 +1,139 @@ +import React, { useState } from "react"; + +const CourseChapter = ({ chapters }) => { + const [selectedLesson, setSelectedLesson] = useState(null); + + return ( +
+
+ {/* top */} +
+
+

سرفصل دوره

+
+
+ علوم تجربی + پایه ششم +
+
+ {/* divider */} +
+ {/* course title */} + {chapters.map((chapter, index) => ( +
+
+

{chapter.title}

+ {chapter.duration} +
+ {/* course lessons */} + {chapter.lessons.map((lesson, i) => ( +
+ {/* right div dot dot */} +
+
+ +
+ {/* left div content */} +
setSelectedLesson(lesson)} + > + {/* top */} +
+

+ {lesson.title} +

+ + {lesson.duration} + +
+ {/* divider */} +
+ {/* bottom */} + + {lesson.play} + +
+
+ ))} +
+ ))} + {/* blue left border */} +
+
+
+ ); +}; + +export default CourseChapter; + +CourseChapter.defaultProps = { + chapters: [ + { + title: "فصل اول: مباحث جوشش مواد مذاب در مرکز", + duration: "2:30:13", + lessons: [ + { + title: "آیا گوگل از ما دزدی میکند؟", + duration: "14:30", + play: "پخش", + passed: true, + }, + { + title: "چگونگی ساخت نیروگاه های برقی", + duration: "22:31", + play: "در حال پخش", + passed: true, + }, + { + title: "آیا از اینترنت می توان درآمد داشت؟", + duration: "10:09", + play: "نمایش", + passed: false, + }, + { + title: "زمین سبز و آسمان آبی", + duration: "56:09", + play: "نمایش", + passed: false, + }, + ], + }, + ], +}; diff --git a/src/views/VideoDisplay/Desktop/index.js b/src/views/VideoDisplay/Desktop/index.js new file mode 100644 index 0000000..18aa300 --- /dev/null +++ b/src/views/VideoDisplay/Desktop/index.js @@ -0,0 +1,30 @@ +import React from "react"; +import CourseChapter from "../../../components/CourseChapter"; +const DesktopVideoDisplay = () =>{ + return( +
+
+
+ + +
+ {/*
+
+ + {product.name} + + {product.grade} +
+ +
*/} +
+
+ ); +}; + +export default DesktopVideoDisplay; \ No newline at end of file diff --git a/src/views/VideoDisplay/index.js b/src/views/VideoDisplay/index.js index fd34c15..1de60a6 100644 --- a/src/views/VideoDisplay/index.js +++ b/src/views/VideoDisplay/index.js @@ -4,8 +4,10 @@ import { publicApi } from "../../redux/actions"; import poster from "../../assets/images/poster.svg"; import Divider from "../../components/Divider"; import Season from "./components/Season"; +import DesktopVideoDisplay from "./Desktop"; function VideoDisplay({ + isMobile, product = { type: "کتاب ها", name: "ریاضی", @@ -47,6 +49,7 @@ function VideoDisplay({ setHeaderOptions(headerOptions); }, []); return ( + isMobile ?
@@ -72,11 +75,14 @@ function VideoDisplay({ ))}
-
+
: + ); } -const mapStateToProps = (state) => ({}); +const mapStateToProps = (state) => ({ + isMobile: state.publicApi.isMobile, +}); const mapDispatchToProps = { setHeaderOptions: publicApi.setHeaderOptions,