VPS 4 Deploy Agent
210 lines
8.8 KiB
TypeScript
210 lines
8.8 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useRef, useState, useCallback } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { X, Send, FileText, Film, Music, Archive, File, ZoomIn, ZoomOut } from 'lucide-react';
|
|
|
|
interface FilePreviewModalProps {
|
|
file: File | null;
|
|
onConfirm: (file: File, caption: string) => Promise<void>;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
function formatFileSize(bytes: number): string {
|
|
if (bytes < 1024) return `${bytes} B`;
|
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
|
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
|
}
|
|
|
|
function getFileIcon(type: string) {
|
|
if (type.startsWith('video/')) return <Film className="w-16 h-16 text-blue-400" />;
|
|
if (type.startsWith('audio/')) return <Music className="w-16 h-16 text-purple-400" />;
|
|
if (type.includes('pdf') || type.includes('document') || type.includes('word'))
|
|
return <FileText className="w-16 h-16 text-red-400" />;
|
|
if (type.includes('zip') || type.includes('compressed') || type.includes('tar'))
|
|
return <Archive className="w-16 h-16 text-yellow-400" />;
|
|
return <File className="w-16 h-16 text-[#8696a0]" />;
|
|
}
|
|
|
|
function getFileLabel(type: string): string {
|
|
if (type.startsWith('image/')) return 'Imagem';
|
|
if (type.startsWith('video/')) return 'Vídeo';
|
|
if (type.startsWith('audio/')) return 'Áudio';
|
|
if (type.includes('pdf')) return 'PDF';
|
|
return 'Arquivo';
|
|
}
|
|
|
|
function ModalContent({ file, onConfirm, onCancel }: FilePreviewModalProps & { file: File }) {
|
|
const [caption, setCaption] = useState('');
|
|
const [sending, setSending] = useState(false);
|
|
const [objectUrl, setObjectUrl] = useState<string | null>(null);
|
|
const [zoomed, setZoomed] = useState(false);
|
|
const captionRef = useRef<HTMLInputElement>(null);
|
|
|
|
const isImage = file.type.startsWith('image/');
|
|
const isVideo = file.type.startsWith('video/');
|
|
|
|
useEffect(() => {
|
|
const url = URL.createObjectURL(file);
|
|
setObjectUrl(url);
|
|
setCaption('');
|
|
setSending(false);
|
|
setZoomed(false);
|
|
setTimeout(() => captionRef.current?.focus(), 250);
|
|
return () => URL.revokeObjectURL(url);
|
|
}, [file]);
|
|
|
|
useEffect(() => {
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') onCancel();
|
|
};
|
|
document.addEventListener('keydown', onKey);
|
|
return () => document.removeEventListener('keydown', onKey);
|
|
}, [onCancel]);
|
|
|
|
const handleSend = useCallback(async () => {
|
|
if (sending) return;
|
|
setSending(true);
|
|
try { await onConfirm(file, caption.trim()); }
|
|
finally { setSending(false); }
|
|
}, [file, caption, sending, onConfirm]);
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === 'Enter') { e.preventDefault(); handleSend(); }
|
|
};
|
|
|
|
return (
|
|
<motion.div
|
|
key="file-preview-overlay"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.18 }}
|
|
className="fixed inset-0 flex flex-col bg-[#0b141a]"
|
|
style={{ zIndex: 99999 }}
|
|
>
|
|
{/* ── Top bar ── */}
|
|
<div className="flex items-center gap-3 px-4 py-3 bg-[#202c33] shrink-0 shadow-md">
|
|
<button
|
|
onClick={onCancel}
|
|
className="p-2 rounded-full hover:bg-white/10 text-[#aebac1] transition-colors shrink-0"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-[#e9edef] text-sm font-medium truncate">{file.name}</p>
|
|
<p className="text-[#8696a0] text-xs">{getFileLabel(file.type)} · {formatFileSize(file.size)}</p>
|
|
</div>
|
|
|
|
{isImage && (
|
|
<button
|
|
onClick={() => setZoomed(z => !z)}
|
|
className="p-2 rounded-full hover:bg-white/10 text-[#aebac1] transition-colors shrink-0"
|
|
title={zoomed ? 'Zoom normal' : 'Ampliar'}
|
|
>
|
|
{zoomed ? <ZoomOut className="w-5 h-5" /> : <ZoomIn className="w-5 h-5" />}
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* ── Preview area ── */}
|
|
<div
|
|
className="flex-1 flex items-center justify-center min-h-0 overflow-auto p-4"
|
|
onClick={() => isImage && setZoomed(z => !z)}
|
|
style={{ cursor: isImage ? (zoomed ? 'zoom-out' : 'zoom-in') : 'default' }}
|
|
>
|
|
{isImage && objectUrl && (
|
|
<motion.img
|
|
src={objectUrl}
|
|
alt="preview"
|
|
initial={{ scale: 0.94, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ duration: 0.22 }}
|
|
style={zoomed
|
|
? { maxWidth: 'none', maxHeight: 'none', width: 'auto', height: 'auto', cursor: 'zoom-out' }
|
|
: { maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', cursor: 'zoom-in' }
|
|
}
|
|
className="rounded-lg shadow-2xl select-none"
|
|
draggable={false}
|
|
/>
|
|
)}
|
|
|
|
{isVideo && objectUrl && (
|
|
<motion.video
|
|
src={objectUrl}
|
|
controls
|
|
initial={{ scale: 0.94, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ duration: 0.22 }}
|
|
className="max-w-full max-h-full rounded-lg shadow-2xl"
|
|
style={{ maxHeight: 'calc(100vh - 160px)' }}
|
|
/>
|
|
)}
|
|
|
|
{!isImage && !isVideo && (
|
|
<motion.div
|
|
initial={{ scale: 0.92, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ duration: 0.22 }}
|
|
className="flex flex-col items-center gap-5 bg-[#202c33] rounded-2xl px-14 py-12 shadow-2xl max-w-sm w-full"
|
|
>
|
|
<div className="w-24 h-24 rounded-2xl bg-[#2a3942] flex items-center justify-center">
|
|
{getFileIcon(file.type)}
|
|
</div>
|
|
<div className="text-center space-y-1">
|
|
<p className="text-[#e9edef] text-sm font-medium break-all">{file.name}</p>
|
|
<p className="text-[#8696a0] text-xs">{formatFileSize(file.size)}</p>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
|
|
{/* ── Caption + Send bar ── */}
|
|
<div className="shrink-0 bg-[#202c33] px-4 py-3 flex items-center gap-3 shadow-[0_-1px_0_rgba(255,255,255,0.06)]">
|
|
<input
|
|
ref={captionRef}
|
|
type="text"
|
|
placeholder="Adicionar legenda…"
|
|
value={caption}
|
|
onChange={(e) => setCaption(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
disabled={sending}
|
|
maxLength={1024}
|
|
className="flex-1 bg-[#2a3942] text-[#e9edef] placeholder:text-[#8696a0] text-sm rounded-full px-5 py-2.5 outline-none border-none focus:ring-0 disabled:opacity-50 transition-opacity"
|
|
/>
|
|
<button
|
|
onClick={handleSend}
|
|
disabled={sending}
|
|
className="w-12 h-12 bg-[#00a884] hover:bg-[#00c49a] disabled:opacity-60 rounded-full flex items-center justify-center transition-all shadow-lg active:scale-95 shrink-0"
|
|
>
|
|
{sending
|
|
? <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
|
: <Send className="w-5 h-5 text-white translate-x-px" />
|
|
}
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
export default function FilePreviewModal({ file, onConfirm, onCancel }: FilePreviewModalProps) {
|
|
const [mounted, setMounted] = useState(false);
|
|
useEffect(() => { setMounted(true); }, []);
|
|
if (!mounted) return null;
|
|
|
|
return createPortal(
|
|
<AnimatePresence>
|
|
{file && (
|
|
<ModalContent
|
|
file={file}
|
|
onConfirm={onConfirm}
|
|
onCancel={onCancel}
|
|
/>
|
|
)}
|
|
</AnimatePresence>,
|
|
document.body
|
|
);
|
|
}
|