Elijah/drive
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add 3MF viewer and enable PDF thumbnails
All checks were successful
Automated Container Build / build-and-push (push) Successful in 1m12s
Details

Browse source
This commit is contained in:
Elijah 2026-05-31 21:28:47 -07:00
parent cd540499ca
commit 72b1de2937
5 changed files with 571 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/components/FilePreview.tsx
View file

@ -11,6 +11,7 @@ import { formatSize, getFileDisplayName } from '@/lib/utils';
const DynamicPdfViewer = dynamic(() => import('./PdfViewer'), { ssr: false });
const DynamicStlPreview = dynamic(() => import('./StlPreview'), { ssr: false });
const DynamicThreeMfPreview = dynamic(() => import('./ThreeMfPreview'), { ssr: false });
interface FilePreviewProps {
file: {
@ -86,7 +87,7 @@ export default function FilePreview({ file, onClose, downloadToken }: FilePrevie
exit={{ scale: 0.95, opacity: 0, y: 20 }}
onClick={(e) => e.stopPropagation()}
className={`relative flex flex-col max-w-[95vw] max-h-[95vh] rounded-2xl overflow-hidden shadow-2xl ${
(previewType === 'image' || previewType === 'video' || previewType === 'pdf' || previewType === 'stl' || previewType === 'audio') ? 'w-fit' : 'w-full'
(previewType === 'image' || previewType === 'video' || previewType === 'pdf' || previewType === 'stl' || previewType === '3mf' || previewType === 'audio') ? 'w-fit' : 'w-full'
} ${
(previewType === 'image' || previewType === 'video' || previewType === 'audio') ? 'h-fit' : 'h-full'
}`}
@ -171,6 +172,16 @@ export default function FilePreview({ file, onClose, downloadToken }: FilePrevie
)
)}
{previewType === '3mf' && (
!downloadToken ? (
<div className="flex items-center justify-center p-8"><Loader2 className="w-8 h-8 animate-spin text-accent" /></div>
) : (
<div className="w-[80vw] h-[80vh] max-w-[1200px] max-h-[800px]">
<DynamicThreeMfPreview url={downloadUrl} />
</div>
)
)}
{(previewType === 'text' || previewType === 'code') && (
<div className="absolute inset-0 p-4">
{loading ? (
@ -245,13 +256,14 @@ export default function FilePreview({ file, onClose, downloadToken }: FilePrevie
// --- Helpers ---
type PreviewType = 'image' | 'video' | 'audio' | 'text' | 'code' | 'pdf' | 'stl' | 'unsupported';
type PreviewType = 'image' | 'video' | 'audio' | 'text' | 'code' | 'pdf' | 'stl' | '3mf' | 'unsupported';
function getPreviewType(file: { name: string; mime_type: string }): PreviewType {
const ext = file.name.split('.').pop()?.toLowerCase() || '';
if (ext === 'pdf' || file.mime_type === 'application/pdf') return 'pdf';
if (ext === 'stl' || file.mime_type === 'model/stl') return 'stl';
if (ext === '3mf' || file.mime_type === 'model/3mf') return '3mf';
if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp'].includes(ext)) return 'image';
if (['mp4', 'webm', 'ogg'].includes(ext)) return 'video'; // Only browser-supported videos
if (['mp3', 'wav', 'flac', 'm4a', 'aac'].includes(ext)) return 'audio';