mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
fix: activitiy issues
This commit is contained in:
swve
parent
669270441b
commit
53f40f3f34
20 changed files with 138 additions and 105 deletions
|
|
@ -27,7 +27,7 @@ function ActivityElement(props: ActivitiyElementProps) {
|
|||
const [selectedActivity, setSelectedActivity] = React.useState<string | undefined>(undefined);
|
||||
|
||||
async function deleteActivityUI() {
|
||||
await deleteActivity(props.activity.id);
|
||||
await deleteActivity(props.activity.activity_uuid);
|
||||
mutate(`${getAPIUrl()}courses/${props.course_uuid}/meta`);
|
||||
await revalidateTags(['courses'], props.orgslug);
|
||||
router.refresh();
|
||||
|
|
@ -80,14 +80,14 @@ function ActivityElement(props: ActivitiyElementProps) {
|
|||
<div className="flex flex-row space-x-2">
|
||||
{props.activity.activity_type === "TYPE_DYNAMIC" && <>
|
||||
<Link
|
||||
href={''}
|
||||
href={getUriWithOrg(props.orgslug, "") + `/course/${props.course_uuid.replace("course_", "")}/activity/${props.activity.activity_uuid.replace("activity_", "")}/edit`}
|
||||
className=" hover:cursor-pointer p-1 px-3 bg-sky-700 rounded-md items-center"
|
||||
rel="noopener noreferrer">
|
||||
<div className="text-sky-100 font-bold text-xs" >Edit </div>
|
||||
</Link>
|
||||
</>}
|
||||
<Link
|
||||
href={''}
|
||||
href={getUriWithOrg(props.orgslug, "") + `/course/${props.course_uuid.replace("course_", "")}/activity/${props.activity.activity_uuid.replace("activity_", "")}`}
|
||||
className=" hover:cursor-pointer p-1 px-3 bg-gray-200 rounded-md"
|
||||
rel="noopener noreferrer">
|
||||
<Eye strokeWidth={2} size={15} className="text-gray-600" />
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import ChapterElement from './DraggableElements/ChapterElement';
|
|||
import PageLoading from '@components/Objects/Loaders/PageLoading';
|
||||
import { createChapter, updateCourseOrderStructure } from '@services/courses/chapters';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { CourseStructureContext } from 'app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page';
|
||||
import { useCourse, useCourseDispatch } from '@components/Contexts/CourseContext';
|
||||
import { Hexagon } from 'lucide-react';
|
||||
import Modal from '@components/StyledElements/Modal/Modal';
|
||||
|
|
|
|||
|
|
@ -1,14 +1,20 @@
|
|||
import { useOrg } from "@components/Contexts/OrgContext";
|
||||
import { getBackendUrl } from "@services/config/config";
|
||||
import { getActivityMediaDirectory } from "@services/media/media";
|
||||
import React from "react";
|
||||
|
||||
function DocumentPdfActivity({ activity, course }: { activity: any; course: any }) {
|
||||
const org = useOrg() as any;
|
||||
|
||||
React.useEffect(() => {
|
||||
console.log(activity);
|
||||
}, [activity, org]);
|
||||
|
||||
return (
|
||||
<div className="m-8 bg-zinc-900 rounded-md mt-14">
|
||||
<iframe
|
||||
className="rounded-lg w-full h-[900px]"
|
||||
src={getActivityMediaDirectory(activity.org_id, activity.course_uuid, activity.activity_id, activity.content.documentpdf.filename, 'documentpdf')}
|
||||
src={getActivityMediaDirectory(org?.org_uuid, course?.course_uuid, activity.activity_uuid, activity.content.filename, 'documentpdf')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,10 +3,11 @@ import React from "react";
|
|||
import styled from "styled-components";
|
||||
import YouTube from 'react-youtube';
|
||||
import { getActivityMediaDirectory } from "@services/media/media";
|
||||
import { useOrg } from "@components/Contexts/OrgContext";
|
||||
|
||||
function VideoActivity({ activity, course }: { activity: any; course: any }) {
|
||||
const org = useOrg() as any;
|
||||
const [videoId, setVideoId] = React.useState('');
|
||||
const [videoType, setVideoType] = React.useState('');
|
||||
|
||||
function getYouTubeEmbed(url: any) {
|
||||
// Extract video ID from the YouTube URL
|
||||
|
|
@ -24,42 +25,38 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
|
|||
|
||||
|
||||
React.useEffect(() => {
|
||||
if (activity.content.video) {
|
||||
setVideoType('video');
|
||||
}
|
||||
if (activity.content.external_video) {
|
||||
setVideoType('external_video');
|
||||
setVideoId(getYouTubeEmbed(activity.content.external_video.uri).videoId);
|
||||
}
|
||||
}, [activity]);
|
||||
console.log(activity);
|
||||
}, [activity, org]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{videoType === 'video' && (
|
||||
<div className="m-8 bg-zinc-900 rounded-md mt-14">
|
||||
<video className="rounded-lg w-full h-[500px]" controls
|
||||
src={getActivityMediaDirectory(activity.org_id, activity.course_uuid, activity.activity_id, activity.content.video.filename, 'video')}
|
||||
></video>
|
||||
{activity &&
|
||||
<>
|
||||
{activity.activity_sub_type === 'SUBTYPE_VIDEO_HOSTED' && (
|
||||
<div className="m-8 bg-zinc-900 rounded-md mt-14">
|
||||
<video className="rounded-lg w-full h-[500px]" controls
|
||||
src={getActivityMediaDirectory(org?.org_uuid, course?.course_uuid, activity.activity_uuid, activity.content?.filename, 'video')}
|
||||
></video>
|
||||
|
||||
</div>
|
||||
)}
|
||||
{videoType === 'external_video' && (
|
||||
<div>
|
||||
<YouTube
|
||||
className="rounded-md overflow-hidden m-8 bg-zinc-900 mt-14"
|
||||
opts={
|
||||
{
|
||||
width: '1300',
|
||||
height: '500',
|
||||
playerVars: {
|
||||
autoplay: 0,
|
||||
},
|
||||
</div>
|
||||
)}
|
||||
{activity.activity_sub_type === 'SUBTYPE_VIDEO_YOUTUBE' && (
|
||||
<div>
|
||||
<YouTube
|
||||
className="rounded-md overflow-hidden m-8 bg-zinc-900 mt-14"
|
||||
opts={
|
||||
{
|
||||
width: '1300',
|
||||
height: '500',
|
||||
playerVars: {
|
||||
autoplay: 0,
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
videoId={videoId} />
|
||||
</div>
|
||||
)}
|
||||
}
|
||||
}
|
||||
videoId={videoId} />
|
||||
</div>
|
||||
)}</>}
|
||||
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@ interface Editor {
|
|||
ydoc: any;
|
||||
provider: any;
|
||||
activity: any;
|
||||
orgslug: string
|
||||
course: any;
|
||||
org: any;
|
||||
setContent: (content: string) => void;
|
||||
|
|
@ -52,10 +51,10 @@ interface Editor {
|
|||
function Editor(props: Editor) {
|
||||
const auth: any = React.useContext(AuthContext);
|
||||
// remove course_ from course_uuid
|
||||
const course_uuid = props.course.course.course_uuid.substring(7);
|
||||
const course_uuid = props.course.course_uuid.substring(7);
|
||||
|
||||
// remove activity_ from activity_id
|
||||
const activity_id = props.activity.activity_id.substring(9);
|
||||
// remove activity_ from activity_uuid
|
||||
const activity_uuid = props.activity.activity_uuid.substring(9);
|
||||
|
||||
// Code Block Languages for Lowlight
|
||||
lowlight.register('html', html)
|
||||
|
|
@ -147,11 +146,11 @@ function Editor(props: Editor) {
|
|||
<EditorInfoLearnHouseLogo width={25} height={25} src={learnhouseIcon} alt="" />
|
||||
</Link>
|
||||
<Link target="_blank" href={`/course/${course_uuid}/edit`}>
|
||||
<EditorInfoThumbnail src={`${getCourseThumbnailMediaDirectory(props.org?.org_uuid, props.course.course.course_uuid, props.course.course.thumbnail_image)}`} alt=""></EditorInfoThumbnail>
|
||||
<EditorInfoThumbnail src={`${getCourseThumbnailMediaDirectory(props.org?.org_uuid, props.course.course_uuid, props.course.thumbnail_image)}`} alt=""></EditorInfoThumbnail>
|
||||
</Link>
|
||||
<EditorInfoDocName>
|
||||
{" "}
|
||||
<b>{props.course.course.name}</b> <SlashIcon /> {props.activity.name}{" "}
|
||||
<b>{props.course.name}</b> <SlashIcon /> {props.activity.name}{" "}
|
||||
</EditorInfoDocName>
|
||||
|
||||
</EditorInfoWrapper>
|
||||
|
|
@ -162,13 +161,13 @@ function Editor(props: Editor) {
|
|||
<EditorUsersSection>
|
||||
<EditorUserProfileWrapper>
|
||||
{!auth.isAuthenticated && <span>Loading</span>}
|
||||
{auth.isAuthenticated && <Avvvatars value={auth.userInfo.user_object.user_id} style="shape" />}
|
||||
{auth.isAuthenticated && <Avvvatars value={auth.userInfo.user_uuid} style="shape" />}
|
||||
</EditorUserProfileWrapper>
|
||||
<DividerVerticalIcon style={{ marginTop: "auto", marginBottom: "auto", color: "grey", opacity: '0.5' }} />
|
||||
<EditorLeftOptionsSection className="space-x-2 pl-2 pr-3">
|
||||
<div className="bg-sky-600 hover:bg-sky-700 transition-all ease-linear px-3 py-2 font-black text-sm shadow text-teal-100 rounded-lg hover:cursor-pointer" onClick={() => props.setContent(editor.getJSON())}> Save </div>
|
||||
<ToolTip content="Preview">
|
||||
<Link target="_blank" href={`/course/${course_uuid}/activity/${activity_id}`}>
|
||||
<Link target="_blank" href={`/course/${course_uuid}/activity/${activity_uuid}`}>
|
||||
<div className="flex bg-neutral-600 hover:bg-neutral-700 transition-all ease-linear h-9 px-3 py-2 font-black justify-center items-center text-sm shadow text-neutral-100 rounded-lg hover:cursor-pointer">
|
||||
<Eye className="mx-auto items-center" size={15} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ interface EditorWrapperProps {
|
|||
content: string;
|
||||
activity: any;
|
||||
course: any
|
||||
orgslug: string;
|
||||
org: any;
|
||||
}
|
||||
|
||||
|
|
@ -27,6 +26,7 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
|
|||
// setProviderState(provider);
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -35,7 +35,7 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
|
|||
activity.content = content;
|
||||
|
||||
toast.promise(
|
||||
updateActivity(activity, activity.activity_id),
|
||||
updateActivity(activity, activity.activity_uuid),
|
||||
{
|
||||
loading: 'Saving...',
|
||||
success: <b>Activity saved!</b>,
|
||||
|
|
@ -50,7 +50,7 @@ function EditorWrapper(props: EditorWrapperProps): JSX.Element {
|
|||
} else {
|
||||
return <>
|
||||
<Toast></Toast>
|
||||
<Editor org={props.org} orgslug={props.orgslug} course={props.course} activity={props.activity} content={props.content} setContent={setContent} provider={providerState} ydoc={ydocState}></Editor>;
|
||||
<Editor org={props.org} course={props.course} activity={props.activity} content={props.content} setContent={setContent} provider={providerState} ydoc={ydocState}></Editor>;
|
||||
|
||||
</>
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue