feat: init lecture video view

front/app/_orgs/[orgslug]/course/[courseid]/element/[elementid]/page.tsx

@@ -8,7 +8,7 @@ import { getBackendUrl } from "../../../../../../../services/config";
 import Canva from "../../../../../../../components/LectureViews/DynamicCanva/DynamicCanva";
 import styled from "styled-components";
 import { getCourse, getCourseMetadata } from "../../../../../../../services/courses/courses";
-
+import VideoLecture from "@components/LectureViews/Video/Video";
 
 function ElementPage(params: any) {
   const router = useRouter();
@@ -28,7 +28,6 @@ function ElementPage(params: any) {
   async function fetchCourseData() {
     const course = await getCourseMetadata("course_" + courseid);
     setCourse(course);
-    console.log(course);
     setIsLoading(false);
   }
 
@@ -54,8 +53,8 @@ function ElementPage(params: any) {
               </Link>
             </LectureThumbnail>
             <LectureInfo>
-              <p>Lecture</p>
-              <h1>{element.name}</h1>
+              <p>Course</p>
+              <h1>{course.course.name}</h1>
             </LectureInfo>
           </LectureTopWrapper>
           <ChaptersWrapper>
@@ -82,9 +81,7 @@ function ElementPage(params: any) {
           <CourseContent>
             {element.type == "dynamic" && <Canva content={element.content} element={element} />}
             {/* todo : use apis & streams instead of this */}
-            {element.type == "video" && (
-              <video controls src={`${getBackendUrl()}content/uploads/video/${element.content.video.element_id}/${element.content.video.filename}`}></video>
-            )}
+            {element.type == "video" && <VideoLecture course={course} element={element} />}
           </CourseContent>
         </LectureLayout>
       )}

front/components/LectureViews/Video/Video.tsx

@@ -1,9 +1,72 @@
-import React from 'react'
+import { getBackendUrl } from "@services/config";
+import React from "react";
+import styled from "styled-components";
 
-function Video() {
-  return (
-    <div>Video</div>
-  )
+function VideoLecture({ element, course }: { element: any; course: any }) {
+  function getChapterName() {
+    let chapterName = "";
+    let chapterId = element.chapter_id;
+    course.chapters.forEach((chapter: any) => {
+      if (chapter.chapter_id === chapterId) {
+        chapterName = chapter.name;
+      }
+    });
+    return chapterName;
   }
 
-export default Video
+  return (
+    <VideoLectureLayout>
+      <VideoTitle>
+        <p>Chapter : {getChapterName()}</p>
+        {element.name}
+      </VideoTitle>
+      <VideoPlayerWrapper>
+        <video controls src={`${getBackendUrl()}content/uploads/video/${element.content.video.element_id}/${element.content.video.filename}`}></video>
+      </VideoPlayerWrapper>
+    </VideoLectureLayout>
+  );
+}
+
+export default VideoLecture;
+
+const VideoLectureLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
+  background: #141414;
+  min-width: 100%;
+  min-height: 1200px;
+`;
+
+const VideoTitle = styled.div`
+  display: flex;
+  width: 1300px;
+  margin: 0 auto;
+  padding-top: 20px;
+  font-size: 24px;
+  font-weight: 700;
+  color: #fff;
+  flex-direction: column;
+
+  p {
+    font-size: 14px;
+    padding: 0;
+    margin: 0;
+    color: #ffffffaa;
+  }
+`;
+
+const VideoPlayerWrapper = styled.div`
+  display: flex;
+  width: 1300px;
+  margin: 0 auto;
+  justify-content: center;
+  padding-top: 20px;
+
+  video {
+    width: 1300px;
+    height: 500px;
+    border-radius: 7px;
+    background-color: black;
+  }
+`;