mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: add expand functionality and modal support for image, PDF, and video components
This commit is contained in:
swve
parent
7ef7f9feee
commit
70ce4bcac6
3 changed files with 314 additions and 166 deletions
|
|
@ -1,7 +1,7 @@
|
|||
import { NodeViewWrapper } from '@tiptap/react'
|
||||
import React, { useEffect } from 'react'
|
||||
import { Resizable } from 're-resizable'
|
||||
import { AlertTriangle, Image, Download, AlignLeft, AlignCenter, AlignRight } from 'lucide-react'
|
||||
import { AlertTriangle, Image, Download, AlignLeft, AlignCenter, AlignRight, Expand } from 'lucide-react'
|
||||
import { uploadNewImageFile } from '../../../../../services/blocks/Image/images'
|
||||
import { getActivityBlockMediaDirectory } from '@services/media/media'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
|
|
@ -10,6 +10,7 @@ import { useEditorProvider } from '@components/Contexts/Editor/EditorContext'
|
|||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { FileUploadBlock, FileUploadBlockButton, FileUploadBlockInput } from '../../FileUploadBlock'
|
||||
import { constructAcceptValue } from '@/lib/constants';
|
||||
import Modal from '@components/Objects/StyledElements/Modal/Modal'
|
||||
|
||||
const SUPPORTED_FILES = constructAcceptValue(['image'])
|
||||
|
||||
|
|
@ -30,6 +31,7 @@ function ImageBlockComponent(props: any) {
|
|||
width: props.node.attrs.size ? props.node.attrs.size.width : 300,
|
||||
})
|
||||
const [alignment, setAlignment] = React.useState(props.node.attrs.alignment || 'center')
|
||||
const [isModalOpen, setIsModalOpen] = React.useState(false)
|
||||
|
||||
const fileId = blockObject
|
||||
? `${blockObject.content.file_id}.${blockObject.content.file_format}`
|
||||
|
|
@ -78,6 +80,10 @@ function ImageBlockComponent(props: any) {
|
|||
document.body.removeChild(link);
|
||||
};
|
||||
|
||||
const handleExpand = () => {
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const handleAlignmentChange = (newAlignment: string) => {
|
||||
setAlignment(newAlignment);
|
||||
props.updateAttributes({
|
||||
|
|
@ -85,6 +91,15 @@ function ImageBlockComponent(props: any) {
|
|||
});
|
||||
};
|
||||
|
||||
const imageUrl = blockObject ? getActivityBlockMediaDirectory(
|
||||
org?.org_uuid,
|
||||
course?.courseStructure.course_uuid,
|
||||
props.extension.options.activity.activity_uuid,
|
||||
blockObject.block_uuid,
|
||||
fileId || '',
|
||||
'imageBlock'
|
||||
) : null;
|
||||
|
||||
useEffect(() => {}, [course, org])
|
||||
|
||||
const getAlignmentClass = () => {
|
||||
|
|
@ -99,6 +114,7 @@ function ImageBlockComponent(props: any) {
|
|||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<NodeViewWrapper className="block-image w-full">
|
||||
<FileUploadBlock isEditable={isEditable} isLoading={isLoading} isEmpty={!blockObject} Icon={Image}>
|
||||
<FileUploadBlockInput onChange={handleImageChange} accept={SUPPORTED_FILES} />
|
||||
|
|
@ -146,14 +162,7 @@ function ImageBlockComponent(props: any) {
|
|||
>
|
||||
<div className="relative">
|
||||
<img
|
||||
src={`${getActivityBlockMediaDirectory(
|
||||
org?.org_uuid,
|
||||
course?.courseStructure.course_uuid,
|
||||
props.extension.options.activity.activity_uuid,
|
||||
blockObject.block_uuid,
|
||||
blockObject ? fileId : ' ',
|
||||
'imageBlock'
|
||||
)}`}
|
||||
src={imageUrl || ''}
|
||||
alt=""
|
||||
className="rounded-lg shadow-sm max-w-full h-auto"
|
||||
style={{ width: '100%' }}
|
||||
|
|
@ -180,6 +189,14 @@ function ImageBlockComponent(props: any) {
|
|||
>
|
||||
<AlignRight size={16} />
|
||||
</button>
|
||||
<div className="w-px h-4 bg-gray-300"></div>
|
||||
<button
|
||||
onClick={handleExpand}
|
||||
className="p-1.5 rounded-md hover:bg-gray-100 text-gray-600"
|
||||
title="Expand image"
|
||||
>
|
||||
<Expand size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Resizable>
|
||||
|
|
@ -190,27 +207,29 @@ function ImageBlockComponent(props: any) {
|
|||
<div className={`w-full flex ${getAlignmentClass()}`}>
|
||||
<div className="relative">
|
||||
<img
|
||||
src={`${getActivityBlockMediaDirectory(
|
||||
org?.org_uuid,
|
||||
course?.courseStructure.course_uuid,
|
||||
props.extension.options.activity.activity_uuid,
|
||||
blockObject.block_uuid,
|
||||
blockObject ? fileId : ' ',
|
||||
'imageBlock'
|
||||
)}`}
|
||||
src={imageUrl || ''}
|
||||
alt=""
|
||||
className="rounded-lg shadow-sm max-w-full h-auto"
|
||||
style={{ width: imageSize.width, maxWidth: '100%' }}
|
||||
/>
|
||||
<div className="absolute top-2 right-2 flex gap-1">
|
||||
<button
|
||||
onClick={handleExpand}
|
||||
className="p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
|
||||
title="Expand image"
|
||||
>
|
||||
<Expand className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDownload}
|
||||
className="absolute top-2 right-2 p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
|
||||
className="p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
|
||||
title="Download image"
|
||||
>
|
||||
<Download className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading && (
|
||||
|
|
@ -219,6 +238,26 @@ function ImageBlockComponent(props: any) {
|
|||
</div>
|
||||
)}
|
||||
</NodeViewWrapper>
|
||||
|
||||
{blockObject && imageUrl && (
|
||||
<Modal
|
||||
isDialogOpen={isModalOpen}
|
||||
onOpenChange={setIsModalOpen}
|
||||
dialogTitle="Image Viewer"
|
||||
minWidth="lg"
|
||||
minHeight="lg"
|
||||
dialogContent={
|
||||
<div className="w-full flex items-center justify-center">
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt=""
|
||||
className="max-w-full max-h-[80vh] object-contain rounded-lg shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { NodeViewWrapper } from '@tiptap/react'
|
||||
import React, { useEffect } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { AlertTriangle, FileText, Download } from 'lucide-react'
|
||||
import { AlertTriangle, FileText, Download, Expand } from 'lucide-react'
|
||||
import { uploadNewPDFFile } from '../../../../../services/blocks/Pdf/pdf'
|
||||
import { getActivityBlockMediaDirectory } from '@services/media/media'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
|
|
@ -10,6 +10,7 @@ import { useEditorProvider } from '@components/Contexts/Editor/EditorContext'
|
|||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { FileUploadBlock, FileUploadBlockButton, FileUploadBlockInput } from '../../FileUploadBlock'
|
||||
import { constructAcceptValue } from '@/lib/constants';
|
||||
import Modal from '@components/Objects/StyledElements/Modal/Modal'
|
||||
|
||||
const SUPPORTED_FILES = constructAcceptValue(['pdf'])
|
||||
|
||||
|
|
@ -23,6 +24,7 @@ function PDFBlockComponent(props: any) {
|
|||
const [blockObject, setblockObject] = React.useState(
|
||||
props.node.attrs.blockObject
|
||||
)
|
||||
const [isModalOpen, setIsModalOpen] = React.useState(false)
|
||||
const fileId = blockObject
|
||||
? `${blockObject.content.file_id}.${blockObject.content.file_format}`
|
||||
: null
|
||||
|
|
@ -70,9 +72,23 @@ function PDFBlockComponent(props: any) {
|
|||
document.body.removeChild(link);
|
||||
};
|
||||
|
||||
const handleExpand = () => {
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const pdfUrl = blockObject ? getActivityBlockMediaDirectory(
|
||||
org?.org_uuid,
|
||||
course?.courseStructure.course_uuid,
|
||||
props.extension.options.activity.activity_uuid,
|
||||
blockObject.block_uuid,
|
||||
fileId || '',
|
||||
'pdfBlock'
|
||||
) : null;
|
||||
|
||||
useEffect(() => { }, [course, org])
|
||||
|
||||
return (
|
||||
<>
|
||||
<NodeViewWrapper className="block-pdf">
|
||||
<FileUploadBlock isEditable={isEditable} isLoading={isLoading} isEmpty={!blockObject} Icon={FileText}>
|
||||
<FileUploadBlockInput onChange={handlePDFChange} accept={SUPPORTED_FILES} />
|
||||
|
|
@ -84,25 +100,27 @@ function PDFBlockComponent(props: any) {
|
|||
<div className="relative">
|
||||
<iframe
|
||||
className="shadow-sm rounded-lg h-96 w-full object-scale-down bg-black"
|
||||
src={`${getActivityBlockMediaDirectory(
|
||||
org?.org_uuid,
|
||||
course?.courseStructure.course_uuid,
|
||||
props.extension.options.activity.activity_uuid,
|
||||
blockObject.block_uuid,
|
||||
blockObject ? fileId : ' ',
|
||||
'pdfBlock'
|
||||
)}`}
|
||||
src={pdfUrl || ''}
|
||||
/>
|
||||
<div className="absolute top-2 right-2 flex gap-1">
|
||||
<button
|
||||
onClick={handleExpand}
|
||||
className="p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
|
||||
title="Expand PDF"
|
||||
>
|
||||
<Expand className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
{!isEditable && (
|
||||
<button
|
||||
onClick={handleDownload}
|
||||
className="absolute top-2 right-2 p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
|
||||
className="p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
|
||||
title="Download PDF"
|
||||
>
|
||||
<Download className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</BlockPDF>
|
||||
)}
|
||||
{isLoading && (
|
||||
|
|
@ -111,6 +129,26 @@ function PDFBlockComponent(props: any) {
|
|||
</div>
|
||||
)}
|
||||
</NodeViewWrapper>
|
||||
|
||||
{blockObject && pdfUrl && (
|
||||
<Modal
|
||||
isDialogOpen={isModalOpen}
|
||||
onOpenChange={setIsModalOpen}
|
||||
dialogTitle="PDF Document"
|
||||
minWidth="xl"
|
||||
minHeight="xl"
|
||||
dialogContent={
|
||||
<div className="w-full h-[80vh]">
|
||||
<iframe
|
||||
className="w-full h-full rounded-lg shadow-lg border"
|
||||
src={pdfUrl}
|
||||
title="PDF Document"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { Node } from '@tiptap/core'
|
|||
import {
|
||||
Loader2, Video, Upload, X, HelpCircle,
|
||||
Maximize2, Minimize2, ArrowLeftRight,
|
||||
CheckCircle2, AlertCircle, Download
|
||||
CheckCircle2, AlertCircle, Download, Expand
|
||||
} from 'lucide-react'
|
||||
import React from 'react'
|
||||
import { uploadNewVideoFile } from '../../../../../services/blocks/Video/video'
|
||||
|
|
@ -16,6 +16,7 @@ import { constructAcceptValue } from '@/lib/constants'
|
|||
import { cn } from '@/lib/utils'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import styled from 'styled-components'
|
||||
import Modal from '@components/Objects/StyledElements/Modal/Modal'
|
||||
|
||||
const SUPPORTED_FILES = constructAcceptValue(['webm', 'mp4'])
|
||||
|
||||
|
|
@ -189,6 +190,7 @@ function VideoBlockComponent(props: ExtendedNodeViewProps) {
|
|||
const [uploadProgress, setUploadProgress] = React.useState(0)
|
||||
const [blockObject, setBlockObject] = React.useState<VideoBlockObject | null>(initialBlockObject)
|
||||
const [selectedSize, setSelectedSize] = React.useState<VideoSize>(initialBlockObject?.size || 'medium')
|
||||
const [isModalOpen, setIsModalOpen] = React.useState(false)
|
||||
|
||||
// Update block object when size changes
|
||||
React.useEffect(() => {
|
||||
|
|
@ -323,10 +325,15 @@ function VideoBlockComponent(props: ExtendedNodeViewProps) {
|
|||
document.body.removeChild(link);
|
||||
};
|
||||
|
||||
const handleExpand = () => {
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
// If we're in preview mode and have a video, show only the video player
|
||||
if (!isEditable && blockObject && videoUrl) {
|
||||
const width = VIDEO_SIZES[blockObject.size].width
|
||||
return (
|
||||
<>
|
||||
<NodeViewWrapper className="block-video w-full">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
|
|
@ -346,17 +353,45 @@ function VideoBlockComponent(props: ExtendedNodeViewProps) {
|
|||
className="w-full aspect-video object-contain rounded-lg shadow-sm"
|
||||
src={videoUrl}
|
||||
/>
|
||||
<div className="absolute top-2 right-2 flex gap-1">
|
||||
<button
|
||||
onClick={handleExpand}
|
||||
className="p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
|
||||
title="Expand video"
|
||||
>
|
||||
<Expand className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDownload}
|
||||
className="absolute top-2 right-2 p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
|
||||
className="p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
|
||||
title="Download video"
|
||||
>
|
||||
<Download className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</NodeViewWrapper>
|
||||
|
||||
<Modal
|
||||
isDialogOpen={isModalOpen}
|
||||
onOpenChange={setIsModalOpen}
|
||||
dialogTitle="Video Player"
|
||||
minWidth="lg"
|
||||
minHeight="lg"
|
||||
dialogContent={
|
||||
<div className="w-full">
|
||||
<video
|
||||
controls
|
||||
autoPlay
|
||||
className="w-full aspect-video object-contain rounded-lg shadow-lg bg-black"
|
||||
src={videoUrl}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -524,12 +559,48 @@ function VideoBlockComponent(props: ExtendedNodeViewProps) {
|
|||
)}
|
||||
src={videoUrl}
|
||||
/>
|
||||
<div className="absolute top-2 right-2 flex gap-1">
|
||||
<button
|
||||
onClick={handleExpand}
|
||||
className="p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
|
||||
title="Expand video"
|
||||
>
|
||||
<Expand className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDownload}
|
||||
className="p-2 bg-black/50 hover:bg-black/70 rounded-full transition-colors"
|
||||
title="Download video"
|
||||
>
|
||||
<Download className="w-4 h-4 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VideoContainer>
|
||||
</motion.div>
|
||||
)}
|
||||
</VideoWrapper>
|
||||
|
||||
{blockObject && videoUrl && (
|
||||
<Modal
|
||||
isDialogOpen={isModalOpen}
|
||||
onOpenChange={setIsModalOpen}
|
||||
dialogTitle="Video Player"
|
||||
minWidth="lg"
|
||||
minHeight="lg"
|
||||
dialogContent={
|
||||
<div className="w-full">
|
||||
<video
|
||||
controls
|
||||
autoPlay
|
||||
className="w-full aspect-video object-contain rounded-lg shadow-lg bg-black"
|
||||
src={videoUrl}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</motion.div>
|
||||
</NodeViewWrapper>
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue