Video Display Desktop Separated

src/components/CourseChapter/index.js

@@ -0,0 +1,139 @@
+import React, { useState } from "react";
+
+const CourseChapter = ({ chapters }) => {
+  const [selectedLesson, setSelectedLesson] = useState(null);
+
+  return (
+    <section style={{ width: "30%" }} className="bg-white mx-auto my-20 p-4">
+      <div
+        className="rounded py-5 px-4 relative"
+        style={{ backgroundColor: "#196EC033" }}
+      >
+        {/* top */}
+        <div className="flex flex-row items-center justify-between">
+          <div>
+            <h2 className="text-blue-800 text-base">سرفصل دوره</h2>
+          </div>
+          <div className="flex flex-row-reverse items-center divide-x transform translate-x-2">
+            <span className="text-blue-800 text-sm px-2">علوم تجربی</span>
+            <span className="text-blue-800 text-sm px-2">پایه ششم</span>
+          </div>
+        </div>
+        {/* divider */}
+        <div className="border-b border-blue-300 bg-opacity-10 my-5"></div>
+        {/* course title */}
+        {chapters.map((chapter, index) => (
+          <div className="flex flex-col" key={index}>
+            <div className="bg-blue-600 rounded-sm p-4 flex flex-row items-center justify-between">
+              <p className="text-sm text-white">{chapter.title}</p>
+              <span className="text-sm text-white">{chapter.duration}</span>
+            </div>
+            {/* course lessons */}
+            {chapter.lessons.map((lesson, i) => (
+              <div
+                className="flex flex-row items-center justify-around"
+                key={i}
+              >
+                {/* right div dot dot */}
+                <div
+                  className="flex items-center relative flex-col "
+                  style={{ width: "10%", transform: "translateY(30px)" }}
+                >
+                  <div
+                    className={`flex justify-center items-center w-4 h-4 rounded-full 
+                    ${selectedLesson === lesson ? "bg-red-600" : "bg-blue-600"},
+                    ${lesson.passed ? "bg-red-600" : "bg-blue-600"}
+                  `}
+                  ></div>
+                  <span
+                    className="w-1"
+                    style={{
+                      borderRight: "2px dotted yellow",
+                      transform: "translateX(-1px)",
+                      height: "65px",
+                    }}
+                  ></span>
+                </div>
+                {/* left div content  */}
+                <div
+                  className={`mt-2 bg-white border border-blue-600 flex flex-col rounded-md cursor-pointer transition duration-200 ease-in-out group  hover:bg-blue-600
+                  ${selectedLesson === lesson ? "bg-blue-600" : ""}`}
+                  style={{ width: "80%" }}
+                  onClick={() => setSelectedLesson(lesson)}
+                >
+                  {/* top */}
+                  <div className="flex flex-row items-center justify-between p-2">
+                    <p
+                      className={`text-sm text-blue-500 group-hover:text-white
+                      ${selectedLesson === lesson ? "text-red-600" : ""}`}
+                    >
+                      {lesson.title}
+                    </p>
+                    <span
+                      className={`text-xs text-blue-500 group-hover:text-white border-r border-blue-200 pr-1
+                    ${selectedLesson === lesson ? "text-red-600" : ""}`}
+                    >
+                      {lesson.duration}
+                    </span>
+                  </div>
+                  {/* divider */}
+                  <div
+                    className={`border-t border-blue-600 group-hover:border-white ${
+                      selectedLesson === lesson ? "border-red-600" : ""
+                    }`}
+                  ></div>
+                  {/* bottom */}
+                  <span
+                    className={`text-xs text-center text-blue-500 group-hover:text-white p-2
+                  ${selectedLesson === lesson ? "text-red-600" : ""}`}
+                  >
+                    {lesson.play}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+        ))}
+        {/* blue left border */}
+        <div className="absolute top-1/2 left-0.5 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 w-1 h-20 rounded"></div>
+      </div>
+    </section>
+  );
+};
+
+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,
+        },
+      ],
+    },
+  ],
+};

src/views/VideoDisplay/Desktop/index.js

@@ -0,0 +1,30 @@
+import React from "react";
+import CourseChapter from "../../../components/CourseChapter";
+const DesktopVideoDisplay = () =>{
+    return(
+        <div className="w-full flex flex-col px-4 items-center">
+      <div className="w-11/12 flex flex-col mb-6 items-center">
+        <div className="w-full flex flex-row flex-1 justify-between items-center overflow-hidden relative">
+          <video style={{ width: "70%",  }} controls>
+            <source
+              src={`https://dnvn.ir/api/v1/file/20540`}
+              type="video/mp4"
+            />
+          </video>
+          <CourseChapter />
+        </div>
+        {/* <div className="flex flex-col flex-1 justify-between pr-2">
+          <div className="flex flex-col">
+            <strong className="mt-1 text-blue5F text-base dark:text-white">
+              {product.name}
+            </strong>
+            <span className="text-blueC0 text-xs mb-1 dark:text-greenBA">{product.grade}</span>
+          </div>
+          <Divider type={"vertical"} />
+        </div> */}
+      </div>
+      </div>
+    );
+};
+
+export default DesktopVideoDisplay;

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 ?
     <div className="w-full flex flex-col px-4">
       <div className="w-full flex flex-col mb-6">
         <div className="w-full flex flex-row flex-1 justify-between items-center overflow-hidden relative">
@@ -72,11 +75,14 @@ function VideoDisplay({
           <Season season={season} key={index} />
         ))}
       </div>
-    </div>
+    </div> :
+      <DesktopVideoDisplay />
   );
 }
 
-const mapStateToProps = (state) => ({});
+const mapStateToProps = (state) => ({
+  isMobile: state.publicApi.isMobile,
+});
 
 const mapDispatchToProps = {
   setHeaderOptions: publicApi.setHeaderOptions,