88 lines
2.4 KiB
TypeScript
88 lines
2.4 KiB
TypeScript
"use client";
|
||
|
||
import MediaPreviewModal from "@/components/shared/MediaPreviewModal";
|
||
import { Modal } from "@/components/ui";
|
||
import type { RequestAttachmentPreview } from "@/hooks/useRequestsPage";
|
||
import { getMediaKind } from "@/lib/media";
|
||
import { useAuthenticatedFileUrl } from "@/hooks/useAuthenticatedFileUrl";
|
||
import { FileSignature } from "lucide-react";
|
||
|
||
type RequestAttachmentPreviewModalProps = {
|
||
onClose: () => void;
|
||
preview: RequestAttachmentPreview | null;
|
||
};
|
||
|
||
export function RequestAttachmentPreviewModal({
|
||
onClose,
|
||
preview,
|
||
}: RequestAttachmentPreviewModalProps) {
|
||
const { url: previewUrl, error } = useAuthenticatedFileUrl(
|
||
preview?.url || "",
|
||
);
|
||
if (!preview) return null;
|
||
|
||
if (!previewUrl) {
|
||
return (
|
||
<Modal isOpen onClose={onClose} title={preview.name} size="lg">
|
||
<p
|
||
role={error ? "alert" : "status"}
|
||
className="app-text-muted py-8 text-center"
|
||
>
|
||
{error || "Загрузка вложения…"}
|
||
</p>
|
||
</Modal>
|
||
);
|
||
}
|
||
const mediaKind = getMediaKind({ fileName: preview.name || preview.url });
|
||
|
||
if (mediaKind === "image" || mediaKind === "video") {
|
||
return (
|
||
<MediaPreviewModal
|
||
preview={{
|
||
type: mediaKind,
|
||
src: previewUrl,
|
||
name: preview.name,
|
||
downloadUrl: previewUrl,
|
||
}}
|
||
onClose={onClose}
|
||
/>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Modal
|
||
isOpen
|
||
onClose={onClose}
|
||
title={preview.name}
|
||
size="lg"
|
||
footer={
|
||
<a
|
||
href={previewUrl}
|
||
download={preview.name}
|
||
className="app-action-secondary rounded-lg px-3 py-1.5 text-xs font-medium"
|
||
>
|
||
Скачать
|
||
</a>
|
||
}
|
||
>
|
||
<div className="flex-1 overflow-auto">
|
||
{mediaKind === "audio" ? (
|
||
<audio src={previewUrl} controls className="mx-auto mt-8" />
|
||
) : (
|
||
<div className="flex flex-col items-center gap-3 py-12 text-center">
|
||
<FileSignature size={40} className="app-text-muted" />
|
||
<p className="app-text-muted text-sm">{preview.name}</p>
|
||
<a
|
||
href={previewUrl}
|
||
download={preview.name}
|
||
className="app-action-primary rounded-lg px-4 py-2 text-sm font-medium"
|
||
>
|
||
Скачать файл
|
||
</a>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</Modal>
|
||
);
|
||
}
|