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: improve activities UI

Browse source
This commit is contained in:
swve 2023-06-22 19:42:49 +02:00
parent d351e8864d
commit 3a898eb29a
6 changed files with 110 additions and 276 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,9 +7,10 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
const [videoId, setVideoId] = React.useState('');
const [videoType, setVideoType] = React.useState('');
function getChapterName() {
let chapterId = activity.chapter_id;
function getChapterName(chapterId: string) {
let chapterName = "";
let chapterId = activity.chapter_id;
course.chapters.forEach((chapter: any) => {
if (chapter.chapter_id === chapterId) {
chapterName = chapter.name;
@ -45,18 +46,14 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
}, [activity]);
return (
<VideoActivityLayout>
<VideoTitle>
<p>{getChapterName()}</p>
<p>{activity.name}</p>
</VideoTitle>
<div>
{videoType === 'video' && (
<VideoPlayerWrapper>
<video controls src={`${getBackendUrl()}content/uploads/video/${activity.content.video.activity_id}/${activity.content.video.filename}`}></video>
</VideoPlayerWrapper>
<div className="m-8 bg-zinc-900 rounded-md mt-14">
<video className="rounded-lg w-full h-[500px]" controls src={`${getBackendUrl()}content/uploads/video/${activity.content.video.activity_id}/${activity.content.video.filename}`}></video>
</div>
)}
{videoType === 'external_video' && (
<VideoPlayerWrapper>
<div>
<YouTube
className="rounded-md overflow-hidden"
opts={
@ -70,10 +67,10 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
}
}
videoId={videoId} />
</VideoPlayerWrapper>
</div>
)}
</VideoActivityLayout>
</div>
);
}
@ -82,44 +79,4 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
export default VideoActivity;
const VideoActivityLayout = 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;
}
`;