feat: add expand functionality and modal support for image, PDF, and video components

apps/web/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx

@@ -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(
+                  src={imageUrl || ''}
-                  org?.org_uuid,
-                  course?.courseStructure.course_uuid,
-                  props.extension.options.activity.activity_uuid,
-                  blockObject.block_uuid,
-                  blockObject ? fileId : ' ',
-                  'imageBlock'
-                )}`}
                   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(
+                src={imageUrl || ''}
-                org?.org_uuid,
-                course?.courseStructure.course_uuid,
-                props.extension.options.activity.activity_uuid,
-                blockObject.block_uuid,
-                blockObject ? fileId : ' ',
-                'imageBlock'
-              )}`}
                 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>
+          }
+        />
+      )}
+    </>
   )
 }
 

apps/web/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx

@@ -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(
+                src={pdfUrl || ''}
-                org?.org_uuid,
-                course?.courseStructure.course_uuid,
-                props.extension.options.activity.activity_uuid,
-                blockObject.block_uuid,
-                blockObject ? fileId : ' ',
-                'pdfBlock'
-              )}`}
               />
+              <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>
+          }
+        />
+      )}
+    </>
   )
 }
 

apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx

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