mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: improve activities UI
This commit is contained in:
swve
parent
d351e8864d
commit
3a898eb29a
6 changed files with 110 additions and 276 deletions
|
|
@ -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;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
import React from 'react';
|
||||
import * as Tooltip from '@radix-ui/react-tooltip';
|
||||
import { styled, keyframes } from '@stitches/react';
|
||||
import { violet, blackA } from '@radix-ui/colors';
|
||||
import { PlusIcon } from '@radix-ui/react-icons';
|
||||
|
||||
|
||||
type TooltipProps = {
|
||||
|
|
@ -24,7 +22,6 @@ const ToolTip = (props: TooltipProps) => {
|
|||
<Tooltip.Portal>
|
||||
<TooltipContent slateBlack={props.slateBlack} side="bottom" sideOffset={props.sideOffset}>
|
||||
{props.content}
|
||||
<TooltipArrow />
|
||||
</TooltipContent>
|
||||
</Tooltip.Portal>
|
||||
</Tooltip.Root>
|
||||
|
|
@ -62,7 +59,7 @@ const TooltipContent = styled(Tooltip.Content, {
|
|||
variants: {
|
||||
slateBlack: {
|
||||
true: {
|
||||
backgroundColor: " #5a5a5a",
|
||||
backgroundColor: " #0d0d0d",
|
||||
color: 'white',
|
||||
},
|
||||
},
|
||||
|
|
@ -96,25 +93,6 @@ const TooltipContent = styled(Tooltip.Content, {
|
|||
},
|
||||
});
|
||||
|
||||
const TooltipArrow = styled(Tooltip.Arrow, {
|
||||
fill: 'white',
|
||||
|
||||
});
|
||||
|
||||
const IconButton = styled('button', {
|
||||
all: 'unset',
|
||||
fontFamily: 'inherit',
|
||||
borderRadius: '100%',
|
||||
height: 35,
|
||||
width: 35,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: violet.violet11,
|
||||
backgroundColor: 'white',
|
||||
boxShadow: `0 2px 10px ${blackA.blackA7}`,
|
||||
'&:hover': { backgroundColor: violet.violet3 },
|
||||
'&:focus': { boxShadow: `0 0 0 2px black` },
|
||||
});
|
||||
|
||||
export default ToolTip;
|
||||
Loading…
Add table
Add a link
Reference in a new issue