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: remake content upload and diffusion

Browse source
This commit is contained in:
swve 2023-06-28 21:03:25 +02:00
parent aea9da388f
commit fd0b5494cf
29 changed files with 345 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

15
front/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx
View file

@ -7,12 +7,14 @@ import * as AspectRatio from '@radix-ui/react-aspect-ratio';
import { AlertCircle, AlertTriangle, Image, ImagePlus, Info } from "lucide-react";
import { getImageFile, uploadNewImageFile } from "../../../../../services/blocks/Image/images";
import { getBackendUrl } from "../../../../../services/config/config";
import { getActivityBlockMediaDirectory } from "@services/media/media";
function ImageBlockComponent(props: 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 handleImageChange = (event: React.ChangeEvent<any>) => {
setImage(event.target.files[0]);
@ -30,11 +32,6 @@ function ImageBlockComponent(props: any) {
});
};
console.log(props.node.attrs);
console.log(imageSize);
return (
<NodeViewWrapper className="block-image">
{!blockObject && (
@ -79,10 +76,14 @@ function ImageBlockComponent(props: any) {
<BlockImage>
<AspectRatio.Root ratio={16 / 9}>
<img
src={`${getBackendUrl()}content/uploads/files/activities/${props.extension.options.activity.activity_id}/blocks/imageBlock/${blockObject.block_id}/${blockObject.block_data.file_id}.${blockObject.block_data.file_format
}`}
src={`${getActivityBlockMediaDirectory(props.extension.options.activity.org_id,
props.extension.options.activity.course_id,
props.extension.options.activity.activity_id,
blockObject.block_id,
blockObject ? fileId : ' ', 'imageBlock')}`}
alt=""
/>
{blockObject.block_id}
</AspectRatio.Root>

10
front/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx
View file

@ -4,11 +4,13 @@ import styled from "styled-components";
import { AlertCircle, AlertTriangle, FileText, Image, ImagePlus, Info } from "lucide-react";
import { getPDFFile, uploadNewPDFFile } from "../../../../../services/blocks/Pdf/pdf";
import { getBackendUrl } from "../../../../../services/config/config";
import { getActivityBlockMediaDirectory } from "@services/media/media";
function PDFBlockComponent(props: 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 handlePDFChange = (event: React.ChangeEvent<any>) => {
setPDF(event.target.files[0]);
@ -41,9 +43,11 @@ function PDFBlockComponent(props: any) {
{blockObject && (
<BlockPDF>
<iframe
src={`${getBackendUrl()}content/uploads/files/activities/${props.extension.options.activity.activity_id}/blocks/pdfBlock/${blockObject.block_id}/${blockObject.block_data.file_id}.${
blockObject.block_data.file_format
}`}
src={`${getActivityBlockMediaDirectory(props.extension.options.activity.org_id,
props.extension.options.activity.course_id,
props.extension.options.activity.activity_id,
blockObject.block_id,
blockObject ? fileId : ' ', 'pdfBlock')}`}
/>
</BlockPDF>
)}

10
front/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
View file

@ -4,11 +4,13 @@ import React 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";
function VideoBlockComponents(props: 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 handleVideoChange = (event: React.ChangeEvent<any>) => {
setVideo(event.target.files[0]);
@ -42,9 +44,11 @@ function VideoBlockComponents(props: any) {
<BlockVideo>
<video
controls
src={`${getBackendUrl()}content/uploads/files/activities/${props.extension.options.activity.activity_id}/blocks/videoBlock/${blockObject.block_id}/${blockObject.block_data.file_id}.${
blockObject.block_data.file_format
}`}
src={`${getActivityBlockMediaDirectory(props.extension.options.activity.org_id,
props.extension.options.activity.course_id,
props.extension.options.activity.activity_id,
blockObject.block_id,
blockObject ? fileId : ' ', 'videoBlock')}`}
></video>
</BlockVideo>
)}

3
front/components/Objects/Menu/Menu.tsx
View file

@ -8,6 +8,7 @@ import ClientComponentSkeleton from "@components/Utils/ClientComp";
import { HeaderProfileBox } from "@components/Security/HeaderProfileBox";
import { swrFetcher } from "@services/utils/ts/requests";
import MenuLinks from "./MenuLinks";
import { getOrgLogoMediaDirectory } from "@services/media/media";
export const Menu = async (props: any) => {
const orgslug = props.orgslug;
@ -22,7 +23,7 @@ export const Menu = async (props: any) => {
<div className="flex w-auto h-9 rounded-md items-center m-auto justify-center" >
{org?.logo ? (
<img
src={`${getBackendUrl()}content/uploads/logos/${org?.logo}`}
src={`${getOrgLogoMediaDirectory(org.org_id, org?.logo)}`}
alt="Learnhouse"
style={{ width: "auto", height: "100%" }}
className="rounded-md"

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

@ -1,13 +1,14 @@
import { getBackendUrl } from "@services/config/config";
import { getActivityMediaDirectory } from "@services/media/media";
import React from "react";
function DocumentPdfActivity({ activity, course }: { activity: any; course: any }) {
return (
<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}`}
src={getActivityMediaDirectory(activity.org_id, activity.course_id, activity.activity_id, activity.content.documentpdf.filename, 'documentpdf')}
/>
</div>
);

10
front/components/Pages/Activities/Video/Video.tsx
View file

@ -2,6 +2,7 @@ import { getBackendUrl } from "@services/config/config";
import React from "react";
import styled from "styled-components";
import YouTube from 'react-youtube';
import { getActivityMediaDirectory } from "@services/media/media";
function VideoActivity({ activity, course }: { activity: any; course: any }) {
const [videoId, setVideoId] = React.useState('');
@ -36,13 +37,16 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
<div>
{videoType === 'video' && (
<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>
<video className="rounded-lg w-full h-[500px]" controls
src={getActivityMediaDirectory(activity.org_id, activity.course_id, activity.activity_id, activity.content.video.filename, 'video')}
></video>
</div>
)}
{videoType === 'external_video' && (
<div>
<YouTube
className="rounded-md overflow-hidden m-8 bg-zinc-900 mt-14"
<YouTube
className="rounded-md overflow-hidden m-8 bg-zinc-900 mt-14"
opts={
{
width: '1300',