mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
fix: block issues
This commit is contained in:
swve
parent
759c68babb
commit
573b9a43fc
14 changed files with 214 additions and 176 deletions
|
|
@ -12,6 +12,7 @@ import { useRouter } from "next/navigation";
|
|||
import AuthenticatedClientElement from "@components/Security/AuthenticatedClientElement";
|
||||
import { getCourseThumbnailMediaDirectory } from "@services/media/media";
|
||||
import { useOrg } from "@components/Contexts/OrgContext";
|
||||
import { CourseProvider } from "@components/Contexts/CourseContext";
|
||||
|
||||
interface ActivityClientProps {
|
||||
activityid: string;
|
||||
|
|
@ -44,47 +45,49 @@ function ActivityClient(props: ActivityClientProps) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<GeneralWrapperStyled>
|
||||
<div className="space-y-4 pt-4">
|
||||
<div className="flex space-x-6">
|
||||
<div className="flex">
|
||||
<Link href={getUriWithOrg(orgslug, "") + `/course/${courseuuid}`}>
|
||||
<img className="w-[100px] h-[57px] rounded-md drop-shadow-md" src={`${getCourseThumbnailMediaDirectory(org?.org_uuid, course.course_uuid, course.thumbnail_image)}`} alt="" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col -space-y-1">
|
||||
<p className="font-bold text-gray-700 text-md">Course </p>
|
||||
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase" >{course.name}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<ActivityIndicators course_uuid={courseuuid} current_activity={activityid} activity={activity} orgslug={orgslug} course={course} />
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex flex-col -space-y-1">
|
||||
<p className="font-bold text-gray-700 text-md">Chapter : {getChapterName(activity.coursechapter_id)}</p>
|
||||
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase" >{activity.name}</h1>
|
||||
</div>
|
||||
<div className="flex space-x-2">
|
||||
<AuthenticatedClientElement checkMethod="authentication">
|
||||
<MarkStatus activity={activity} activityid={activityid} course={course} orgslug={orgslug} />
|
||||
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{activity ? (
|
||||
<div className={`p-7 pt-4 drop-shadow-sm rounded-lg ${activity.activity_type == 'TYPE_DYNAMIC' ? 'bg-white' : 'bg-zinc-950'}`}>
|
||||
<div>
|
||||
{activity.activity_type == "TYPE_DYNAMIC" && <Canva content={activity.content} activity={activity} />}
|
||||
{/* todo : use apis & streams instead of this */}
|
||||
{activity.activity_type == "TYPE_VIDEO" && <VideoActivity course={course} activity={activity} />}
|
||||
{activity.activity_type == "TYPE_DOCUMENT" && <DocumentPdfActivity course={course} activity={activity} />}
|
||||
<CourseProvider courseuuid={course?.course_uuid}>
|
||||
<GeneralWrapperStyled>
|
||||
<div className="space-y-4 pt-4">
|
||||
<div className="flex space-x-6">
|
||||
<div className="flex">
|
||||
<Link href={getUriWithOrg(orgslug, "") + `/course/${courseuuid}`}>
|
||||
<img className="w-[100px] h-[57px] rounded-md drop-shadow-md" src={`${getCourseThumbnailMediaDirectory(org?.org_uuid, course.course_uuid, course.thumbnail_image)}`} alt="" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col -space-y-1">
|
||||
<p className="font-bold text-gray-700 text-md">Course </p>
|
||||
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase" >{course.name}</h1>
|
||||
</div>
|
||||
</div>
|
||||
) : (<div></div>)}
|
||||
{<div style={{ height: "100px" }}></div>}
|
||||
</div>
|
||||
</GeneralWrapperStyled>
|
||||
<ActivityIndicators course_uuid={courseuuid} current_activity={activityid} activity={activity} orgslug={orgslug} course={course} />
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex flex-col -space-y-1">
|
||||
<p className="font-bold text-gray-700 text-md">Chapter : {getChapterName(activity.coursechapter_id)}</p>
|
||||
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase" >{activity.name}</h1>
|
||||
</div>
|
||||
<div className="flex space-x-2">
|
||||
<AuthenticatedClientElement checkMethod="authentication">
|
||||
<MarkStatus activity={activity} activityid={activityid} course={course} orgslug={orgslug} />
|
||||
|
||||
</AuthenticatedClientElement>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{activity ? (
|
||||
<div className={`p-7 pt-4 drop-shadow-sm rounded-lg ${activity.activity_type == 'TYPE_DYNAMIC' ? 'bg-white' : 'bg-zinc-950'}`}>
|
||||
<div>
|
||||
{activity.activity_type == "TYPE_DYNAMIC" && <Canva content={activity.content} activity={activity} />}
|
||||
{/* todo : use apis & streams instead of this */}
|
||||
{activity.activity_type == "TYPE_VIDEO" && <VideoActivity course={course} activity={activity} />}
|
||||
{activity.activity_type == "TYPE_DOCUMENT" && <DocumentPdfActivity course={course} activity={activity} />}
|
||||
</div>
|
||||
</div>
|
||||
) : (<div></div>)}
|
||||
{<div style={{ height: "100px" }}></div>}
|
||||
</div>
|
||||
</GeneralWrapperStyled>
|
||||
</CourseProvider>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -110,7 +113,7 @@ export function MarkStatus(props: { activity: any, activityid: string, course: a
|
|||
console.log('isActivityCompleted', isActivityCompleted());
|
||||
|
||||
return (
|
||||
<>{ isActivityCompleted() ? (
|
||||
<>{isActivityCompleted() ? (
|
||||
<div className="bg-teal-600 rounded-md drop-shadow-md flex flex-col p-3 text-sm text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out" >
|
||||
<i>
|
||||
<Check size={15}></Check>
|
||||
|
|
|
|||
|
|
@ -36,6 +36,8 @@ import ts from 'highlight.js/lib/languages/typescript'
|
|||
import html from 'highlight.js/lib/languages/xml'
|
||||
import python from 'highlight.js/lib/languages/python'
|
||||
import java from 'highlight.js/lib/languages/java'
|
||||
import { CourseProvider } from "@components/Contexts/CourseContext";
|
||||
import { OrgProvider } from "@components/Contexts/OrgContext";
|
||||
|
||||
|
||||
interface Editor {
|
||||
|
|
@ -127,71 +129,75 @@ function Editor(props: Editor) {
|
|||
|
||||
return (
|
||||
<Page>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.98 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
key="modal"
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 360,
|
||||
damping: 70,
|
||||
delay: 0.02,
|
||||
}}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<EditorTop className="fixed bg-white bg-opacity-95 backdrop-blur backdrop-brightness-125">
|
||||
<EditorDocSection>
|
||||
<EditorInfoWrapper>
|
||||
<Link href="/">
|
||||
<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_uuid, props.course.thumbnail_image)}`} alt=""></EditorInfoThumbnail>
|
||||
</Link>
|
||||
<EditorInfoDocName>
|
||||
{" "}
|
||||
<b>{props.course.name}</b> <SlashIcon /> {props.activity.name}{" "}
|
||||
</EditorInfoDocName>
|
||||
<OrgProvider orgslug={props.org?.slug}>
|
||||
<CourseProvider courseuuid={props.course.course_uuid}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.98 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
key="modal"
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 360,
|
||||
damping: 70,
|
||||
delay: 0.02,
|
||||
}}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<EditorTop className="fixed bg-white bg-opacity-95 backdrop-blur backdrop-brightness-125">
|
||||
<EditorDocSection>
|
||||
<EditorInfoWrapper>
|
||||
<Link href="/">
|
||||
<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_uuid, props.course.thumbnail_image)}`} alt=""></EditorInfoThumbnail>
|
||||
</Link>
|
||||
<EditorInfoDocName>
|
||||
{" "}
|
||||
<b>{props.course.name}</b> <SlashIcon /> {props.activity.name}{" "}
|
||||
</EditorInfoDocName>
|
||||
|
||||
</EditorInfoWrapper>
|
||||
<EditorButtonsWrapper>
|
||||
<ToolbarButtons editor={editor} />
|
||||
</EditorButtonsWrapper>
|
||||
</EditorDocSection>
|
||||
<EditorUsersSection>
|
||||
<EditorUserProfileWrapper>
|
||||
{!auth.isAuthenticated && <span>Loading</span>}
|
||||
{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_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>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
</EditorLeftOptionsSection>
|
||||
</EditorUsersSection>
|
||||
</EditorTop>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.99 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 360,
|
||||
damping: 70,
|
||||
delay: 0.5,
|
||||
}}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<EditorContentWrapper>
|
||||
<EditorContent editor={editor} />
|
||||
</EditorContentWrapper>
|
||||
</motion.div>
|
||||
</EditorInfoWrapper>
|
||||
<EditorButtonsWrapper>
|
||||
<ToolbarButtons editor={editor} />
|
||||
</EditorButtonsWrapper>
|
||||
</EditorDocSection>
|
||||
<EditorUsersSection>
|
||||
<EditorUserProfileWrapper>
|
||||
{!auth.isAuthenticated && <span>Loading</span>}
|
||||
{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_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>
|
||||
</Link>
|
||||
</ToolTip>
|
||||
</EditorLeftOptionsSection>
|
||||
</EditorUsersSection>
|
||||
</EditorTop>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.99 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{
|
||||
type: "spring",
|
||||
stiffness: 360,
|
||||
damping: 70,
|
||||
delay: 0.5,
|
||||
}}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<EditorContentWrapper>
|
||||
<EditorContent editor={editor} />
|
||||
</EditorContentWrapper>
|
||||
</motion.div>
|
||||
</CourseProvider>
|
||||
</OrgProvider>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,22 @@
|
|||
import { NodeViewWrapper } from "@tiptap/react";
|
||||
import React from "react";
|
||||
import React, { useEffect } from "react";
|
||||
import styled from "styled-components";
|
||||
import { Resizable } from 're-resizable';
|
||||
import { AlertTriangle, Image, Loader } from "lucide-react";
|
||||
import { uploadNewImageFile } from "../../../../../services/blocks/Image/images";
|
||||
import { UploadIcon } from "@radix-ui/react-icons";
|
||||
import { getActivityBlockMediaDirectory } from "@services/media/media";
|
||||
import { useOrg } from "@components/Contexts/OrgContext";
|
||||
import { useCourse } from "@components/Contexts/CourseContext";
|
||||
|
||||
function ImageBlockComponent(props: any) {
|
||||
const org = useOrg() as any;
|
||||
const course = useCourse() as any;
|
||||
const [image, setImage] = React.useState(null);
|
||||
const [isLoading, setIsLoading] = React.useState(false);
|
||||
const [blockObject, setblockObject] = React.useState(props.node.attrs.blockObject);
|
||||
const [imageSize, setImageSize] = React.useState({ width: props.node.attrs.size ? props.node.attrs.size.width : 300 });
|
||||
const fileId = blockObject ? `${blockObject.block_data.file_id}.${blockObject.block_data.file_format}` : null;
|
||||
|
||||
const fileId = blockObject ? `${blockObject.content.file_id}.${blockObject.content.file_format}` : null;
|
||||
const handleImageChange = (event: React.ChangeEvent<any>) => {
|
||||
setImage(event.target.files[0]);
|
||||
};
|
||||
|
|
@ -21,7 +24,7 @@ function ImageBlockComponent(props: any) {
|
|||
const handleSubmit = async (e: any) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
let object = await uploadNewImageFile(image, props.extension.options.activity.activity_id);
|
||||
let object = await uploadNewImageFile(image, props.extension.options.activity.activity_uuid);
|
||||
setIsLoading(false);
|
||||
setblockObject(object);
|
||||
props.updateAttributes({
|
||||
|
|
@ -30,6 +33,10 @@ function ImageBlockComponent(props: any) {
|
|||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
}
|
||||
, [course, org]);
|
||||
|
||||
return (
|
||||
<NodeViewWrapper className="block-image">
|
||||
{!blockObject && props.extension.options.editable && (
|
||||
|
|
@ -50,10 +57,10 @@ function ImageBlockComponent(props: any) {
|
|||
{blockObject && (
|
||||
<Resizable defaultSize={{ width: imageSize.width, height: "100%" }}
|
||||
handleStyles={{
|
||||
right: { position: 'unset', width: 7, height: 30, borderRadius: 20, cursor: 'col-resize', backgroundColor: 'black', opacity: '0.3', margin: 'auto', marginLeft:5 },
|
||||
right: { position: 'unset', width: 7, height: 30, borderRadius: 20, cursor: 'col-resize', backgroundColor: 'black', opacity: '0.3', margin: 'auto', marginLeft: 5 },
|
||||
|
||||
}}
|
||||
style={{ margin: "auto", display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }}
|
||||
style={{ margin: "auto", display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }}
|
||||
maxWidth={1000}
|
||||
minWidth={200}
|
||||
onResizeStop={(e, direction, ref, d) => {
|
||||
|
|
@ -68,15 +75,15 @@ function ImageBlockComponent(props: any) {
|
|||
}}
|
||||
>
|
||||
|
||||
<img
|
||||
src={`${getActivityBlockMediaDirectory(props.extension.options.activity.org_id,
|
||||
props.extension.options.activity.course_uuid,
|
||||
props.extension.options.activity.activity_id,
|
||||
blockObject.block_id,
|
||||
blockObject ? fileId : ' ', 'imageBlock')}`}
|
||||
alt=""
|
||||
className="rounded-lg shadow "
|
||||
/>
|
||||
<img
|
||||
src={`${getActivityBlockMediaDirectory(org?.org_uuid,
|
||||
course?.courseStructure.course_uuid,
|
||||
props.extension.options.activity.activity_uuid,
|
||||
blockObject.block_uuid,
|
||||
blockObject ? fileId : ' ', 'imageBlock')}`}
|
||||
alt=""
|
||||
className="rounded-lg shadow "
|
||||
/>
|
||||
|
||||
|
||||
</Resizable>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,21 @@
|
|||
import { NodeViewWrapper } from "@tiptap/react";
|
||||
import React from "react";
|
||||
import React, { useEffect } from "react";
|
||||
import styled from "styled-components";
|
||||
import { AlertCircle, AlertTriangle, FileText, Image, ImagePlus, Info, Loader } from "lucide-react";
|
||||
import { getPDFFile, uploadNewPDFFile } from "../../../../../services/blocks/Pdf/pdf";
|
||||
import { getBackendUrl } from "../../../../../services/config/config";
|
||||
import { UploadIcon } from "@radix-ui/react-icons";
|
||||
import { getActivityBlockMediaDirectory } from "@services/media/media";
|
||||
import { useOrg } from "@components/Contexts/OrgContext";
|
||||
import { useCourse } from "@components/Contexts/CourseContext";
|
||||
|
||||
function PDFBlockComponent(props: any) {
|
||||
const org = useOrg() as any;
|
||||
const course = useCourse() as any;
|
||||
const [pdf, setPDF] = React.useState(null);
|
||||
const [isLoading, setIsLoading] = React.useState(false);
|
||||
const [blockObject, setblockObject] = React.useState(props.node.attrs.blockObject);
|
||||
const fileId = blockObject ? `${blockObject.block_data.file_id}.${blockObject.block_data.file_format}` : null;
|
||||
const fileId = blockObject ? `${blockObject.content.file_id}.${blockObject.content.file_format}` : null;
|
||||
|
||||
const handlePDFChange = (event: React.ChangeEvent<any>) => {
|
||||
setPDF(event.target.files[0]);
|
||||
|
|
@ -20,7 +24,7 @@ function PDFBlockComponent(props: any) {
|
|||
const handleSubmit = async (e: any) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
let object = await uploadNewPDFFile(pdf, props.extension.options.activity.activity_id);
|
||||
let object = await uploadNewPDFFile(pdf, props.extension.options.activity.activity_uuid);
|
||||
setIsLoading(false);
|
||||
setblockObject(object);
|
||||
props.updateAttributes({
|
||||
|
|
@ -28,6 +32,10 @@ function PDFBlockComponent(props: any) {
|
|||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
}
|
||||
, [course, org]);
|
||||
|
||||
return (
|
||||
<NodeViewWrapper className="block-pdf">
|
||||
{!blockObject && (
|
||||
|
|
@ -49,10 +57,10 @@ function PDFBlockComponent(props: any) {
|
|||
<BlockPDF>
|
||||
<iframe
|
||||
className="shadow rounded-lg h-96 w-full object-scale-down bg-black"
|
||||
src={`${getActivityBlockMediaDirectory(props.extension.options.activity.org_id,
|
||||
props.extension.options.activity.course_uuid,
|
||||
props.extension.options.activity.activity_id,
|
||||
blockObject.block_id,
|
||||
src={`${getActivityBlockMediaDirectory(org?.org_uuid,
|
||||
course?.courseStructure.course_uuid,
|
||||
props.extension.options.activity.activity_uuid,
|
||||
blockObject.block_uuid,
|
||||
blockObject ? fileId : ' ', 'pdfBlock')}`}
|
||||
/>
|
||||
</BlockPDF>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,21 @@
|
|||
import { NodeViewWrapper } from "@tiptap/react";
|
||||
import { AlertTriangle, Image, Loader, Video } from "lucide-react";
|
||||
import React from "react";
|
||||
import React, { useEffect } from "react";
|
||||
import styled from "styled-components";
|
||||
import { getBackendUrl } from "../../../../../services/config/config";
|
||||
import { uploadNewVideoFile } from "../../../../../services/blocks/Video/video";
|
||||
import { getActivityBlockMediaDirectory } from "@services/media/media";
|
||||
import { UploadIcon } from "@radix-ui/react-icons";
|
||||
import { useOrg } from "@components/Contexts/OrgContext";
|
||||
import { useCourse } from "@components/Contexts/CourseContext";
|
||||
|
||||
function VideoBlockComponents(props: any) {
|
||||
const org = useOrg() as any;
|
||||
const course = useCourse() as any;
|
||||
const [video, setVideo] = React.useState(null);
|
||||
const [isLoading, setIsLoading] = React.useState(false);
|
||||
const [blockObject, setblockObject] = React.useState(props.node.attrs.blockObject);
|
||||
const fileId = blockObject ? `${blockObject.block_data.file_id}.${blockObject.block_data.file_format}` : null;
|
||||
const fileId = blockObject ? `${blockObject.content.file_id}.${blockObject.content.file_format}` : null;
|
||||
|
||||
const handleVideoChange = (event: React.ChangeEvent<any>) => {
|
||||
setVideo(event.target.files[0]);
|
||||
|
|
@ -20,7 +24,7 @@ function VideoBlockComponents(props: any) {
|
|||
const handleSubmit = async (e: any) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
let object = await uploadNewVideoFile(video, props.extension.options.activity.activity_id);
|
||||
let object = await uploadNewVideoFile(video, props.extension.options.activity.activity_uuid);
|
||||
setIsLoading(false);
|
||||
setblockObject(object);
|
||||
props.updateAttributes({
|
||||
|
|
@ -28,6 +32,10 @@ function VideoBlockComponents(props: any) {
|
|||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
}
|
||||
, [course, org]);
|
||||
|
||||
return (
|
||||
<NodeViewWrapper className="block-video">
|
||||
{!blockObject && (
|
||||
|
|
@ -50,10 +58,10 @@ function VideoBlockComponents(props: any) {
|
|||
<video
|
||||
controls
|
||||
className="rounded-lg shadow h-96 w-full object-scale-down bg-black"
|
||||
src={`${getActivityBlockMediaDirectory(props.extension.options.activity.org_id,
|
||||
props.extension.options.activity.course_uuid,
|
||||
props.extension.options.activity.activity_id,
|
||||
blockObject.block_id,
|
||||
src={`${getActivityBlockMediaDirectory(org?.org_uuid,
|
||||
course?.courseStructure.course_uuid,
|
||||
props.extension.options.activity.activity_uuid,
|
||||
blockObject.block_uuid,
|
||||
blockObject ? fileId : ' ', 'videoBlock')}`}
|
||||
></video>
|
||||
</BlockVideo>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { getAPIUrl } from "@services/config/config";
|
||||
import { RequestBody, RequestBodyForm } from "@services/utils/ts/requests";
|
||||
|
||||
export async function uploadNewImageFile(file: any, activity_id: string) {
|
||||
export async function uploadNewImageFile(file: any, activity_uuid: string) {
|
||||
// Send file thumbnail as form data
|
||||
const formData = new FormData();
|
||||
formData.append("file_object", file);
|
||||
formData.append("activity_id", activity_id);
|
||||
formData.append("activity_uuid", activity_uuid);
|
||||
|
||||
return fetch(`${getAPIUrl()}blocks/image`, RequestBodyForm("POST", formData, null))
|
||||
.then((result) => result.json())
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { getAPIUrl } from "@services/config/config";
|
||||
import { RequestBody, RequestBodyForm } from "@services/utils/ts/requests";
|
||||
|
||||
export async function uploadNewPDFFile(file: any, activity_id: string) {
|
||||
export async function uploadNewPDFFile(file: any, activity_uuid: string) {
|
||||
// Send file thumbnail as form data
|
||||
const formData = new FormData();
|
||||
formData.append("file_object", file);
|
||||
formData.append("activity_id", activity_id);
|
||||
formData.append("activity_uuid", activity_uuid);
|
||||
|
||||
return fetch(`${getAPIUrl()}blocks/pdf`, RequestBodyForm("POST", formData, null))
|
||||
.then((result) => result.json())
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { getAPIUrl } from "@services/config/config";
|
||||
import { RequestBody, RequestBodyForm } from "@services/utils/ts/requests";
|
||||
|
||||
export async function uploadNewVideoFile(file: any, activity_id: string) {
|
||||
export async function uploadNewVideoFile(file: any, activity_uuid: string) {
|
||||
// Send file thumbnail as form data
|
||||
const formData = new FormData();
|
||||
formData.append("file_object", file);
|
||||
formData.append("activity_id", activity_id);
|
||||
formData.append("activity_uuid", activity_uuid);
|
||||
|
||||
return fetch(`${getAPIUrl()}blocks/video`, RequestBodyForm("POST", formData, null))
|
||||
.then((result) => result.json())
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue