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: add expand functionality and modal support for image, PDF, and video components

Browse source
This commit is contained in:
swve 2025-07-09 16:05:11 +02:00
parent 7ef7f9feee
commit 70ce4bcac6
3 changed files with 314 additions and 166 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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,47 +72,83 @@ 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} />
<FileUploadBlockButton onClick={handleSubmit} disabled={!pdf}/>
</FileUploadBlock>
{blockObject && (
<BlockPDF>
<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'
)}`}
/>
{!isEditable && (
<button
onClick={handleDownload}
className="absolute top-2 right-2 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>
)}
<>
<NodeViewWrapper className="block-pdf">
<FileUploadBlock isEditable={isEditable} isLoading={isLoading} isEmpty={!blockObject} Icon={FileText}>
<FileUploadBlockInput onChange={handlePDFChange} accept={SUPPORTED_FILES} />
<FileUploadBlockButton onClick={handleSubmit} disabled={!pdf}/>
</FileUploadBlock>
{blockObject && (
<BlockPDF>
<div className="relative">
<iframe
className="shadow-sm rounded-lg h-96 w-full object-scale-down bg-black"
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="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 && (
<div>
<AlertTriangle color="#e1e0e0" size={50} />
</div>
</BlockPDF>
)}
</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>
}
/>
)}
{isLoading && (
<div>
<AlertTriangle color="#e1e0e0" size={50} />
</div>
)}
</NodeViewWrapper>
</>
)
}