ruicesar/instrucoes_gerais
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(inbox): FilePreviewModal via createPortal — full-screen real + zoom + melhorias visuais

Browse Source
This commit is contained in:
VPS 4 Deploy Agent
2026-05-11 08:07:34 +02:00
parent 8b3b368b56
commit 17537249fd
1 changed files with 148 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
clube67/newwhats.local/frontend/components/FilePreviewModal.tsx
+92 -59
View File
@@ -1,8 +1,9 @@
'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 } from 'lucide-react';
import { X, Send, FileText, Film, Music, Archive, File, ZoomIn, ZoomOut } from 'lucide-react';
interface FilePreviewModalProps {
file: File | null;
@@ -17,13 +18,13 @@ function formatFileSize(bytes: number): string {
}
function getFileIcon(type: string) {
if (type.startsWith('video/')) return <Film className="w-12 h-12 text-blue-400" />;
if (type.startsWith('audio/')) return <Music className="w-12 h-12 text-purple-400" />;
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-12 h-12 text-red-400" />;
return <FileText className="w-16 h-16 text-red-400" />;
if (type.includes('zip') || type.includes('compressed') || type.includes('tar'))
return <Archive className="w-12 h-12 text-yellow-400" />;
return <File className="w-12 h-12 text-[#8696a0]" />;
return <Archive className="w-16 h-16 text-yellow-400" />;
return <File className="w-16 h-16 text-[#8696a0]" />;
}
function getFileLabel(type: string): string {
@@ -34,85 +35,99 @@ function getFileLabel(type: string): string {
return 'Arquivo';
}
export default function FilePreviewModal({ file, onConfirm, onCancel }: FilePreviewModalProps) {
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/');
const isImage = file.type.startsWith('image/');
const isVideo = file.type.startsWith('video/');
// Create / revoke object URL
useEffect(() => {
if (!file) { setObjectUrl(null); return; }
const url = URL.createObjectURL(file);
setObjectUrl(url);
setCaption('');
setSending(false);
setTimeout(() => captionRef.current?.focus(), 200);
setZoomed(false);
setTimeout(() => captionRef.current?.focus(), 250);
return () => URL.revokeObjectURL(url);
}, [file]);
// ESC cancels
useEffect(() => {
const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onCancel(); };
const onKey = (e: KeyboardEvent) => {
if (e.key === 'Escape') onCancel();
};
document.addEventListener('keydown', onKey);
return () => document.removeEventListener('keydown', onKey);
}, [onCancel]);
const handleSend = useCallback(async () => {
if (!file || sending) return;
if (sending) return;
setSending(true);
try {
await onConfirm(file, caption.trim());
} finally {
setSending(false);
}
try { await onConfirm(file, caption.trim()); }
finally { setSending(false); }
}, [file, caption, sending, onConfirm]);
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
handleSend();
}
if (e.key === 'Enter') { e.preventDefault(); handleSend(); }
};
return (
<AnimatePresence>
{file && (
<motion.div
key="file-preview-overlay"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
className="fixed inset-0 z-[9998] flex flex-col bg-[#111b21]"
transition={{ duration: 0.18 }}
className="fixed inset-0 flex flex-col bg-[#0b141a]"
style={{ zIndex: 99999 }}
>
{/* ── Top bar ── */}
<div className="flex items-center justify-between px-5 py-3 bg-[#202c33] shrink-0">
<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"
className="p-2 rounded-full hover:bg-white/10 text-[#aebac1] transition-colors shrink-0"
>
<X className="w-5 h-5" />
</button>
<span className="text-[#e9edef] text-sm font-medium">
{file ? getFileLabel(file.type) : ''}
</span>
<div className="w-9" /> {/* spacer */}
<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 p-4 min-h-0 overflow-hidden">
<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.92, opacity: 0 }}
initial={{ scale: 0.94, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ duration: 0.25 }}
className="max-w-full max-h-full object-contain rounded-xl shadow-2xl"
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}
/>
)}
@@ -120,33 +135,34 @@ export default function FilePreviewModal({ file, onConfirm, onCancel }: FilePrev
<motion.video
src={objectUrl}
controls
initial={{ scale: 0.92, opacity: 0 }}
initial={{ scale: 0.94, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ duration: 0.25 }}
className="max-w-full max-h-full rounded-xl shadow-2xl"
transition={{ duration: 0.22 }}
className="max-w-full max-h-full rounded-lg shadow-2xl"
style={{ maxHeight: 'calc(100vh - 160px)' }}
/>
)}
{!isImage && !isVideo && file && (
{!isImage && !isVideo && (
<motion.div
initial={{ scale: 0.92, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
transition={{ duration: 0.25 }}
className="flex flex-col items-center gap-4 bg-[#202c33] rounded-2xl px-12 py-10 shadow-2xl"
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 className="text-center">
<p className="text-[#e9edef] text-sm font-medium max-w-[280px] break-all text-center">
{file.name}
</p>
<p className="text-[#8696a0] text-xs mt-1">{formatFileSize(file.size)}</p>
</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">
<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"
@@ -155,22 +171,39 @@ export default function FilePreviewModal({ file, onConfirm, onCancel }: FilePrev
onChange={(e) => setCaption(e.target.value)}
onKeyDown={handleKeyDown}
disabled={sending}
className="flex-1 bg-[#2a3942] text-[#e9edef] placeholder:text-[#8696a0] text-sm rounded-full px-4 py-2.5 outline-none border-none focus:ring-0 disabled:opacity-50"
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-11 h-11 bg-[#00a884] hover:bg-[#02c89f] disabled:opacity-50 rounded-full flex items-center justify-center transition-colors shadow-md active:scale-95"
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-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
) : (
<Send className="w-5 h-5 text-white" />
)}
{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>
)}
</AnimatePresence>
);
}
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
);
}