b5425e705e
All checks were successful
Build and Push Docker Image / build (push) Successful in 10m33s
104 lines
3.1 KiB
TypeScript
104 lines
3.1 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from '@/components/ui/dialog'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Eye, Download, FileText, Image as ImageIcon, Video, File } from 'lucide-react'
|
|
|
|
interface FilePreviewProps {
|
|
fileName: string
|
|
mimeType: string
|
|
downloadUrl: string
|
|
}
|
|
|
|
function getPreviewType(mimeType: string): 'pdf' | 'image' | 'video' | 'unsupported' {
|
|
if (mimeType === 'application/pdf') return 'pdf'
|
|
if (mimeType.startsWith('image/')) return 'image'
|
|
if (mimeType.startsWith('video/')) return 'video'
|
|
return 'unsupported'
|
|
}
|
|
|
|
function getFileIcon(mimeType: string) {
|
|
if (mimeType === 'application/pdf') return FileText
|
|
if (mimeType.startsWith('image/')) return ImageIcon
|
|
if (mimeType.startsWith('video/')) return Video
|
|
return File
|
|
}
|
|
|
|
export function FilePreview({ fileName, mimeType, downloadUrl }: FilePreviewProps) {
|
|
const [open, setOpen] = useState(false)
|
|
const previewType = getPreviewType(mimeType)
|
|
const Icon = getFileIcon(mimeType)
|
|
const canPreview = previewType !== 'unsupported'
|
|
|
|
if (!canPreview) {
|
|
return (
|
|
<Button variant="outline" size="sm" asChild>
|
|
<a href={downloadUrl} target="_blank" rel="noopener noreferrer">
|
|
<Download className="mr-2 h-4 w-4" />
|
|
Download
|
|
</a>
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button variant="outline" size="sm">
|
|
<Eye className="mr-2 h-4 w-4" />
|
|
Preview
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="max-w-4xl max-h-[90vh]">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2 truncate">
|
|
<Icon className="h-4 w-4 shrink-0" />
|
|
{fileName}
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="overflow-auto">
|
|
{previewType === 'pdf' && (
|
|
<iframe
|
|
src={`${downloadUrl}#toolbar=0`}
|
|
className="w-full h-[70vh] rounded-md"
|
|
title={fileName}
|
|
/>
|
|
)}
|
|
{previewType === 'image' && (
|
|
<img
|
|
src={downloadUrl}
|
|
alt={fileName}
|
|
className="w-full h-auto max-h-[70vh] object-contain rounded-md"
|
|
/>
|
|
)}
|
|
{previewType === 'video' && (
|
|
<video
|
|
src={downloadUrl}
|
|
controls
|
|
className="w-full max-h-[70vh] rounded-md"
|
|
preload="metadata"
|
|
>
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
)}
|
|
</div>
|
|
<div className="flex justify-end">
|
|
<Button variant="outline" size="sm" asChild>
|
|
<a href={downloadUrl} target="_blank" rel="noopener noreferrer">
|
|
<Download className="mr-2 h-4 w-4" />
|
|
Download
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|