Добавлен компонент Lightbox для просмотра изображений в мессенджере. Реализована логика обработки кликов по изображениям для открытия их в Lightbox. Обновлен интерфейс отображения вложений с улучшенной поддержкой изображений и добавлены подсказки для пользователей. Оптимизирован код для лучшей читаемости.
This commit is contained in:
Bivekich
@ -8,6 +8,7 @@ import { Card } from '@/components/ui/card'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { ImageLightbox } from '@/components/ui/image-lightbox'
|
||||
import {
|
||||
FileText,
|
||||
Image,
|
||||
@ -51,6 +52,7 @@ interface MessengerAttachmentsProps {
|
||||
export function MessengerAttachments({ counterparty }: MessengerAttachmentsProps) {
|
||||
const { user } = useAuth()
|
||||
const [activeTab, setActiveTab] = useState('all')
|
||||
const [lightboxImage, setLightboxImage] = useState<{ url: string; fileName: string; fileSize?: number } | null>(null)
|
||||
|
||||
// Загружаем все сообщения для получения вложений
|
||||
const { data: messagesData, loading } = useQuery(GET_MESSAGES, {
|
||||
@ -117,6 +119,14 @@ export function MessengerAttachments({ counterparty }: MessengerAttachmentsProps
|
||||
document.body.removeChild(link)
|
||||
}
|
||||
|
||||
const handleImageClick = (imageUrl: string, fileName?: string, fileSize?: number) => {
|
||||
setLightboxImage({
|
||||
url: imageUrl,
|
||||
fileName: fileName || 'Изображение',
|
||||
fileSize
|
||||
})
|
||||
}
|
||||
|
||||
const renderFileIcon = (fileType?: string) => {
|
||||
if (!fileType) return <FileText className="h-4 w-4" />
|
||||
|
||||
@ -166,18 +176,34 @@ export function MessengerAttachments({ counterparty }: MessengerAttachmentsProps
|
||||
|
||||
{/* Содержимое вложения */}
|
||||
<div className="flex items-center justify-between bg-white/5 rounded-lg p-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="flex items-center justify-center w-10 h-10 bg-white/10 rounded-lg">
|
||||
{message.type === 'IMAGE' ? (
|
||||
<Image className="h-5 w-5 text-blue-400" />
|
||||
) : message.type === 'VOICE' ? (
|
||||
<div className="flex items-center space-x-3 flex-1 min-w-0">
|
||||
{/* Превью изображения или иконка */}
|
||||
{message.type === 'IMAGE' && message.fileUrl ? (
|
||||
<div
|
||||
className="relative w-12 h-12 rounded-lg overflow-hidden cursor-pointer hover:opacity-80 transition-opacity"
|
||||
onClick={() => handleImageClick(message.fileUrl!, message.fileName, message.fileSize)}
|
||||
>
|
||||
<img
|
||||
src={message.fileUrl}
|
||||
alt={message.fileName || 'Изображение'}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
|
||||
<Image className="h-4 w-4 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center w-10 h-10 bg-white/10 rounded-lg flex-shrink-0">
|
||||
{message.type === 'VOICE' ? (
|
||||
<Music className="h-5 w-5 text-green-400" />
|
||||
) : (
|
||||
renderFileIcon(message.fileType)
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white text-sm font-medium">
|
||||
)}
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-white text-sm font-medium truncate">
|
||||
{message.fileName ||
|
||||
(message.type === 'VOICE' ? 'Голосовое сообщение' :
|
||||
message.type === 'IMAGE' ? 'Изображение' : 'Файл')}
|
||||
@ -189,13 +215,17 @@ export function MessengerAttachments({ counterparty }: MessengerAttachmentsProps
|
||||
{message.voiceDuration && (
|
||||
<span>{Math.floor(message.voiceDuration / 60)}:{(message.voiceDuration % 60).toString().padStart(2, '0')}</span>
|
||||
)}
|
||||
{message.type === 'IMAGE' && (
|
||||
<span className="text-blue-300">• Нажмите для просмотра</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => handleDownload(message.fileUrl!, message.fileName || 'file')}
|
||||
className="flex items-center justify-center w-8 h-8 bg-white/10 hover:bg-white/20 rounded-lg transition-colors"
|
||||
className="flex items-center justify-center w-8 h-8 bg-white/10 hover:bg-white/20 rounded-lg transition-colors flex-shrink-0 ml-2"
|
||||
title="Скачать файл"
|
||||
>
|
||||
<Download className="h-4 w-4 text-white/70" />
|
||||
</button>
|
||||
@ -273,8 +303,37 @@ export function MessengerAttachments({ counterparty }: MessengerAttachmentsProps
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
{/* Сетка изображений для быстрого просмотра */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 mb-6">
|
||||
{imageMessages.map((msg) => (
|
||||
<div
|
||||
key={`grid-${msg.id}`}
|
||||
className="relative aspect-square rounded-lg overflow-hidden cursor-pointer hover:opacity-80 transition-opacity group"
|
||||
onClick={() => handleImageClick(msg.fileUrl!, msg.fileName, msg.fileSize)}
|
||||
>
|
||||
<img
|
||||
src={msg.fileUrl!}
|
||||
alt={msg.fileName || 'Изображение'}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
|
||||
<Image className="h-6 w-6 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
<div className="absolute bottom-2 left-2 right-2">
|
||||
<div className="text-white text-xs truncate bg-black/50 px-2 py-1 rounded">
|
||||
{formatDate(msg.createdAt)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Детальный список карточек */}
|
||||
<div className="border-t border-white/10 pt-4">
|
||||
<h4 className="text-white/80 text-sm font-medium mb-3">Детальная информация</h4>
|
||||
{imageMessages.map(renderAttachmentCard)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
@ -310,6 +369,17 @@ export function MessengerAttachments({ counterparty }: MessengerAttachmentsProps
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
{/* Lightbox для просмотра изображений */}
|
||||
{lightboxImage && (
|
||||
<ImageLightbox
|
||||
imageUrl={lightboxImage.url}
|
||||
fileName={lightboxImage.fileName}
|
||||
fileSize={lightboxImage.fileSize}
|
||||
isOpen={true}
|
||||
onClose={() => setLightboxImage(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user