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: implement youtube video page

Browse source
This commit is contained in:
swve 2023-05-14 15:28:13 +00:00
parent 77d4f5fa1c
commit 131a5139ef
3 changed files with 156 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

63
front/components/Pages/Activities/Video/Video.tsx
View file

@ -1,8 +1,12 @@
import { getBackendUrl } from "@services/config/config";
import React from "react";
import styled from "styled-components";
import YouTube from 'react-youtube';
function VideoActivity({ activity, course }: { activity: any; course: any }) {
const [videoId, setVideoId] = React.useState('');
const [videoType, setVideoType] = React.useState('');
function getChapterName() {
let chapterName = "";
let chapterId = activity.chapter_id;
@ -14,19 +18,68 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
return chapterName;
}
function getYouTubeEmbed(url: any) {
// Extract video ID from the YouTube URL
var videoId = url.match(/(?:\?v=|\/embed\/|\/\d\/|\/vi\/|\/v\/|https?:\/\/(?:www\.)?youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))([^#\&\?\/]+)/)[1];
// Create the embed object
var embedObject = {
videoId: videoId,
width: 560,
height: 315
};
return embedObject;
}
React.useEffect(() => {
console.log(activity);
if (activity.content.video) {
setVideoType('video');
}
if (activity.content.external_video) {
setVideoType('external_video');
setVideoId(getYouTubeEmbed(activity.content.external_video.uri).videoId);
}
}, [activity]);
return (
<VideoActivityLayout>
<VideoTitle>
<p>Chapter : {getChapterName()}</p>
{activity.name}
<p>{getChapterName()}</p>
<p>{activity.name}</p>
</VideoTitle>
<VideoPlayerWrapper>
<video controls src={`${getBackendUrl()}content/uploads/video/${activity.content.video.activity_id}/${activity.content.video.filename}`}></video>
</VideoPlayerWrapper>
{videoType === 'video' && (
<VideoPlayerWrapper>
<video controls src={`${getBackendUrl()}content/uploads/video/${activity.content.video.activity_id}/${activity.content.video.filename}`}></video>
</VideoPlayerWrapper>
)}
{videoType === 'external_video' && (
<VideoPlayerWrapper>
<YouTube
className="rounded-md overflow-hidden"
opts={
{
width: '1300',
height: '500',
playerVars: {
autoplay: 0,
},
}
}
videoId={videoId} />
</VideoPlayerWrapper>
)}
</VideoActivityLayout>
);
}
export default VideoActivity;
const VideoActivityLayout = styled.div`