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

fix: block issues

Browse source
This commit is contained in:
swve 2023-12-14 21:15:24 +01:00
parent 759c68babb
commit 573b9a43fc
14 changed files with 214 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

12
apps/api/src/routers/blocks.py
View file

@ -28,14 +28,14 @@ router = APIRouter()
async def api_create_image_file_block(
request: Request,
file_object: UploadFile,
activity_id: str = Form(),
activity_uuid: str = Form(),
db_session=Depends(get_db_session),
current_user: PublicUser = Depends(get_current_user),
) -> BlockRead:
"""
Create new image file
"""
return await create_image_block(request, file_object, activity_id, db_session)
return await create_image_block(request, file_object, activity_uuid, db_session)
@router.get("/image")
@ -60,14 +60,14 @@ async def api_get_image_file_block(
async def api_create_video_file_block(
request: Request,
file_object: UploadFile,
activity_id: str = Form(),
activity_uuid: str = Form(),
db_session=Depends(get_db_session),
current_user: PublicUser = Depends(get_current_user),
) -> BlockRead:
"""
Create new video file
"""
return await create_video_block(request, file_object, activity_id, db_session)
return await create_video_block(request, file_object, activity_uuid, db_session)
@router.get("/video")
@ -92,14 +92,14 @@ async def api_get_video_file_block(
async def api_create_pdf_file_block(
request: Request,
file_object: UploadFile,
activity_id: str = Form(),
activity_uuid: str = Form(),
db_session=Depends(get_db_session),
current_user: PublicUser = Depends(get_current_user),
) -> BlockRead:
"""
Create new pdf file
"""
return await create_pdf_block(request, file_object, activity_id, db_session)
return await create_pdf_block(request, file_object, activity_uuid, db_session)
@router.get("/pdf")

18
apps/api/src/services/blocks/block_types/imageBlock/imageBlock.py
View file

@ -1,5 +1,6 @@
from datetime import datetime
from uuid import uuid4
from src.db.organizations import Organization
from fastapi import HTTPException, status, UploadFile, Request
from sqlmodel import Session, select
from src.db.activities import Activity
@ -10,9 +11,9 @@ from src.services.users.users import PublicUser
async def create_image_block(
request: Request, image_file: UploadFile, activity_id: str, db_session: Session
request: Request, image_file: UploadFile, activity_uuid: str, db_session: Session
):
statement = select(Activity).where(Activity.id == activity_id)
statement = select(Activity).where(Activity.activity_uuid == activity_uuid)
activity = db_session.exec(statement).first()
if not activity:
@ -22,8 +23,9 @@ async def create_image_block(
block_type = "imageBlock"
# get org_id from activity
org_id = activity.org_id
# get org_uuid
statement = select(Organization).where(Organization.id == activity.org_id)
org = db_session.exec(statement).first()
# get course
statement = select(Course).where(Course.id == activity.course_id)
@ -40,12 +42,12 @@ async def create_image_block(
block_data = await upload_file_and_return_file_object(
request,
image_file,
activity_id,
activity_uuid,
block_uuid,
["jpg", "jpeg", "png", "gif"],
block_type,
str(org_id),
str(course.id),
org.org_uuid,
str(course.course_uuid),
)
# create block
@ -53,7 +55,7 @@ async def create_image_block(
activity_id=activity.id if activity.id else 0,
block_type=BlockTypeEnum.BLOCK_IMAGE,
content=block_data.dict(),
org_id=org_id,
org_id=org.id if org.id else 0,
course_id=course.id if course.id else 0,
block_uuid=block_uuid,
creation_date=str(datetime.now()),

18
apps/api/src/services/blocks/block_types/pdfBlock/pdfBlock.py
View file

@ -1,5 +1,6 @@
from datetime import datetime
from uuid import uuid4
from src.db.organizations import Organization
from fastapi import HTTPException, status, UploadFile, Request
from sqlmodel import Session, select
from src.db.activities import Activity
@ -11,9 +12,9 @@ from src.services.users.users import PublicUser
async def create_pdf_block(
request: Request, pdf_file: UploadFile, activity_id: str, db_session: Session
request: Request, pdf_file: UploadFile, activity_uuid: str, db_session: Session
):
statement = select(Activity).where(Activity.id == activity_id)
statement = select(Activity).where(Activity.activity_uuid == activity_uuid)
activity = db_session.exec(statement).first()
if not activity:
@ -23,8 +24,9 @@ async def create_pdf_block(
block_type = "pdfBlock"
# get org_id from activity
org_id = activity.org_id
# get org_uuid
statement = select(Organization).where(Organization.id == activity.org_id)
org = db_session.exec(statement).first()
# get course
statement = select(Course).where(Course.id == activity.course_id)
@ -41,12 +43,12 @@ async def create_pdf_block(
block_data = await upload_file_and_return_file_object(
request,
pdf_file,
activity_id,
activity_uuid,
block_uuid,
["pdf"],
block_type,
str(org_id),
str(course.id),
org.org_uuid,
str(course.course_uuid),
)
# create block
@ -54,7 +56,7 @@ async def create_pdf_block(
activity_id=activity.id if activity.id else 0,
block_type=BlockTypeEnum.BLOCK_DOCUMENT_PDF,
content=block_data.dict(),
org_id=org_id,
org_id=org.id if org.id else 0,
course_id=course.id if course.id else 0,
block_uuid=block_uuid,
creation_date=str(datetime.now()),

18
apps/api/src/services/blocks/block_types/videoBlock/videoBlock.py
View file

@ -1,5 +1,6 @@
from datetime import datetime
from uuid import uuid4
from src.db.organizations import Organization
from fastapi import HTTPException, status, UploadFile, Request
from sqlmodel import Session, select
from src.db.activities import Activity
@ -11,9 +12,9 @@ from src.services.users.users import PublicUser
async def create_video_block(
request: Request, video_file: UploadFile, activity_id: str, db_session: Session
request: Request, video_file: UploadFile, activity_uuid: str, db_session: Session
):
statement = select(Activity).where(Activity.id == activity_id)
statement = select(Activity).where(Activity.activity_uuid == activity_uuid)
activity = db_session.exec(statement).first()
if not activity:
@ -23,8 +24,9 @@ async def create_video_block(
block_type = "videoBlock"
# get org_id from activity
org_id = activity.org_id
# get org_uuid
statement = select(Organization).where(Organization.id == activity.org_id)
org = db_session.exec(statement).first()
# get course
statement = select(Course).where(Course.id == activity.course_id)
@ -41,12 +43,12 @@ async def create_video_block(
block_data = await upload_file_and_return_file_object(
request,
video_file,
activity_id,
activity_uuid,
block_uuid,
["mp4", "webm", "ogg"],
block_type,
str(org_id),
str(course.id),
org.org_uuid,
str(course.course_uuid),
)
# create block
@ -54,7 +56,7 @@ async def create_video_block(
activity_id=activity.id if activity.id else 0,
block_type=BlockTypeEnum.BLOCK_VIDEO,
content=block_data.dict(),
org_id=org_id,
org_id=org.id if org.id else 0,
course_id=course.id if course.id else 0,
block_uuid=block_uuid,
creation_date=str(datetime.now()),

2
apps/api/src/services/blocks/schemas/files.py
View file

@ -7,4 +7,4 @@ class BlockFile(BaseModel):
file_name: str
file_size: int
file_type: str
activity_id: str
activity_uuid: str

12
apps/api/src/services/blocks/utils/upload_files.py
View file

@ -7,12 +7,12 @@ from src.services.utils.upload_content import upload_content
async def upload_file_and_return_file_object(
request: Request,
file: UploadFile,
activity_id: str,
activity_uuid: str,
block_id: str,
list_of_allowed_file_formats: list,
type_of_block: str,
org_id: str,
course_id: str,
org_uuid: str,
course_uuid: str,
):
# get file id
file_id = str(uuid.uuid4())
@ -45,12 +45,12 @@ async def upload_file_and_return_file_object(
file_name=file_name,
file_size=file_size,
file_type=file_type,
activity_id=activity_id,
activity_uuid=activity_uuid,
)
await upload_content(
f"courses/{course_id}/activities/{activity_id}/dynamic/blocks/{type_of_block}/{block_id}",
org_id=org_id,
f"courses/{course_uuid}/activities/{activity_uuid}/dynamic/blocks/{type_of_block}/{block_id}",
org_uuid=org_uuid,
file_binary=file_binary,
file_and_format=f"{file_id}.{file_format}",
)

83
apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
View file

@ -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>

134
apps/web/components/Objects/Editor/Editor.tsx
View file

@ -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>
);
}

37
apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx
View file

@ -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>

22
apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx
View file

@ -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>

22
apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
View file

@ -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>

4
apps/web/services/blocks/Image/images.ts
View file

@ -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())

4
apps/web/services/blocks/Pdf/pdf.ts
View file

@ -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())

4
apps/web/services/blocks/Video/video.ts
View file

@ -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())