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

71
front/components/Pages/Activities/DocumentPdf/DocumentPdf.tsx
View file

@ -1,75 +1,18 @@
import { getBackendUrl } from "@services/config/config";
import React from "react";
import styled from "styled-components";
function DocumentPdfActivity({ activity, course }: { activity: any; course: any }) {
function getChapterName() {
let chapterName = "";
let chapterId = activity.chapter_id;
course.chapters.forEach((chapter: any) => {
if (chapter.chapter_id === chapterId) {
chapterName = chapter.name;
}
});
return chapterName;
}
return (
<DocumentPdfActivityLayout>
<DocumentPdfTitle>
<p>Chapter : {getChapterName()}</p>
{activity.name}
</DocumentPdfTitle>
<DocumentPdfPlayerWrapper>
<iframe
src={`${getBackendUrl()}content/uploads/documents/documentpdf/${activity.content.documentpdf.activity_id}/${activity.content.documentpdf.filename}`}
/>
</DocumentPdfPlayerWrapper>
</DocumentPdfActivityLayout>
<div className="m-8 bg-zinc-900 rounded-md mt-14">
<iframe
className="rounded-lg w-full h-[900px]"
src={`${getBackendUrl()}content/uploads/documents/documentpdf/${activity.content.documentpdf.activity_id}/${activity.content.documentpdf.filename}`}
/>
</div>
);
}
export default DocumentPdfActivity;
const DocumentPdfActivityLayout = styled.div`
display: flex;
flex-direction: column;
margin-top: 10px;
background: #141414;
min-width: 100%;
min-height: 1200px;
`;
const DocumentPdfTitle = 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 DocumentPdfPlayerWrapper = styled.div`
display: flex;
width: 1300px;
margin: 0 auto;
justify-content: center;
padding-top: 20px;
iframe {
width: 1300px;
height: 500px;
border-radius: 7px;
background-color: black;
border: none;
}
`;

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;
}
`;

2
front/components/Pages/Courses/ActivityIndicators.tsx
View file

@ -54,7 +54,7 @@ function ActivityIndicators(props: Props) {
<div className='grid grid-flow-col justify-stretch space-x-2'>
{chapter.activities.map((activity: any) => {
return (
<ToolTip sideOffset={-5} slateBlack content={activity.name} key={activity.id}>
<ToolTip sideOffset={8} slateBlack content={activity.name} key={activity.id}>
<Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}>
<div className={`h-[7px] w-auto ${getActivityClass(activity)} rounded-lg shadow-md`}></div>