rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: init lecture video view

Browse source
This commit is contained in:
swve 2023-01-15 17:36:43 +01:00
parent 054f07e0e9
commit 962a133a83
2 changed files with 85 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
"use client"; "use client";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import Link from "next/link"; import Link from "next/link";
import React, { useMemo } from "react"; import React, { useMemo } from "react";
import Layout from "../../../../../../../components/UI/Layout"; import Layout from "../../../../../../../components/UI/Layout";
import { getElement } from "../../../../../../../services/courses/elements"; import { getElement } from "../../../../../../../services/courses/elements";
@ -8,7 +8,7 @@ import { getBackendUrl } from "../../../../../../../services/config";
import Canva from "../../../../../../../components/LectureViews/DynamicCanva/DynamicCanva"; import Canva from "../../../../../../../components/LectureViews/DynamicCanva/DynamicCanva";
import styled from "styled-components"; import styled from "styled-components";
import { getCourse, getCourseMetadata } from "../../../../../../../services/courses/courses"; import { getCourse, getCourseMetadata } from "../../../../../../../services/courses/courses";
import VideoLecture from "@components/LectureViews/Video/Video";
function ElementPage(params: any) { function ElementPage(params: any) {
const router = useRouter(); const router = useRouter();
@ -28,7 +28,6 @@ function ElementPage(params: any) {
async function fetchCourseData() { async function fetchCourseData() {
const course = await getCourseMetadata("course_" + courseid); const course = await getCourseMetadata("course_" + courseid);
setCourse(course); setCourse(course);
console.log(course);
setIsLoading(false); setIsLoading(false);
} }
@ -50,28 +49,28 @@ function ElementPage(params: any) {
<LectureTopWrapper> <LectureTopWrapper>
<LectureThumbnail> <LectureThumbnail>
<Link href={`/org/${orgslug}/course/${courseid}`}> <Link href={`/org/${orgslug}/course/${courseid}`}>
<img src={`${getBackendUrl()}content/uploads/img/${course.course.thumbnail}`} alt="" /> <img src={`${getBackendUrl()}content/uploads/img/${course.course.thumbnail}`} alt="" />
</Link> </Link>
</LectureThumbnail> </LectureThumbnail>
<LectureInfo> <LectureInfo>
<p>Lecture</p> <p>Course</p>
<h1>{element.name}</h1> <h1>{course.course.name}</h1>
</LectureInfo> </LectureInfo>
</LectureTopWrapper> </LectureTopWrapper>
<ChaptersWrapper> <ChaptersWrapper>
{course.chapters.map((chapter: any) => { {course.chapters.map((chapter: any) => {
return ( return (
<> <>
<div style={{display:"flex" , flexDirection:"row"}}key={chapter.chapter_id}> <div style={{ display: "flex", flexDirection: "row" }} key={chapter.chapter_id}>
{chapter.elements.map((element: any) => { {chapter.elements.map((element: any) => {
return ( return (
<> <>
<Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}> <Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}>
<ChapterIndicator key={element.id} /> <ChapterIndicator key={element.id} />
</Link>{" "} </Link>{" "}
</> </>
); );
})} })}
</div> </div>
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
</> </>
@ -82,9 +81,7 @@ function ElementPage(params: any) {
<CourseContent> <CourseContent>
{element.type == "dynamic" && <Canva content={element.content} element={element} />} {element.type == "dynamic" && <Canva content={element.content} element={element} />}
{/* todo : use apis & streams instead of this */} {/* todo : use apis & streams instead of this */}
{element.type == "video" && ( {element.type == "video" && <VideoLecture course={course} element={element} />}
<video controls src={`${getBackendUrl()}content/uploads/video/${element.content.video.element_id}/${element.content.video.filename}`}></video>
)}
</CourseContent> </CourseContent>
</LectureLayout> </LectureLayout>
)} )}

73
front/components/LectureViews/Video/Video.tsx
View file

@ -1,9 +1,72 @@
import React from 'react' import { getBackendUrl } from "@services/config";
import React from "react";
import styled from "styled-components";
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;
}
function Video() {
return ( return (
<div>Video</div> <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 Video 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;
}
`;