import { useState, useRef, useEffect } from 'react'; import { Head } from '@inertiajs/react'; import { ArrowDownTrayIcon, ArrowsPointingOutIcon, ArrowsPointingInIcon, DocumentIcon, LockClosedIcon, CheckIcon, EyeIcon } from '@heroicons/react/24/solid'; interface SharedFile { id: number; name: string; url: string; mime_type?: string; file_size?: number; created_at?: string; } interface SharePreviewProps { token?: string; file: SharedFile | null; error: string | null; } function formatBytes(bytes?: number) { if (!bytes || bytes === 0) return '0 B'; const k = 1024; const sizes = ['B', 'KB', 'MB', 'GB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]; } export default function SharePreview({ token, file, error }: SharePreviewProps) { const containerRef = useRef(null); const [isFullScreen, setIsFullScreen] = useState(false); const isImage = file?.url ? /\.(png|jpe?g|gif|webp|svg)(\?.*)?$/i.test(file.url) : false; const isVideo = file?.url ? /\.(mp4|webm|ogg|mov)(\?.*)?$/i.test(file.url) : false; const isPdf = file?.url ? /\.pdf(\?.*)?$/i.test(file.url) : false; const downloadFileUrl = () => { if (!file?.url) return '#'; if (token) { const url = new URL(`/share/${token}/file-download`, window.location.origin); url.searchParams.set('url', file.url); url.searchParams.set('name', file.name); return url.toString(); } return file.url; }; useEffect(() => { const handleFullscreenChange = () => { setIsFullScreen(!!document.fullscreenElement); }; document.addEventListener('fullscreenchange', handleFullscreenChange); return () => document.removeEventListener('fullscreenchange', handleFullscreenChange); }, []); const toggleFullScreen = () => { if (!document.fullscreenElement) { if (containerRef.current?.requestFullscreen) { containerRef.current.requestFullscreen().catch(() => { setIsFullScreen(true); }); } else { setIsFullScreen(true); } } else { if (document.exitFullscreen) { document.exitFullscreen(); } else { setIsFullScreen(false); } } }; if (error || !file) { return (

Tautan Bagikan Tidak Tersedia

{error || 'Tautan ini tidak aktif, telah kedaluwarsa, atau ditutup oleh pemilik berkas.'}

SIM-NATAGARA • Sistem Informasi Manajemen

); } return (

{/* Top Bar */}

{file.name}

{formatBytes(file.file_size)} {file.created_at && ( <> • {file.created_at} )} Hanya Lihat

Unduh Berkas

{/* Main Content Area */}

{/* Floating Buttons inside preview */}

{/* Media rendering */} {isImage ? (

) : isPdf ? (