72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
import { useState } from "react";
|
|
|
|
type Timelapse = {
|
|
s3Key: string;
|
|
fileName: string | null;
|
|
mimeType: string | null;
|
|
sizeBytes: number | null;
|
|
};
|
|
|
|
export default function ArtworkTimelapseViewer({
|
|
timelapse,
|
|
artworkName,
|
|
trigger,
|
|
}: {
|
|
timelapse: Timelapse;
|
|
artworkName?: string | null;
|
|
trigger: React.ReactNode;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
// IMPORTANT:
|
|
// This assumes your existing `/api/image/[...key]` can stream arbitrary S3 keys.
|
|
// If your route expects a different format, adjust this in one place.
|
|
const src = `/api/image/${encodeURI(timelapse.s3Key)}`;
|
|
|
|
// Minimal empty captions track (satisfies jsx-a11y/media-has-caption)
|
|
const emptyVtt = "data:text/vtt;charset=utf-8,WEBVTT%0A%0A";
|
|
|
|
const title = artworkName ? `Timelapse — ${artworkName}` : "Timelapse";
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>{trigger}</DialogTrigger>
|
|
|
|
<DialogContent className="max-w-3xl">
|
|
<DialogHeader>
|
|
<DialogTitle>{title}</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
{/* Only render video when open (prevents unnecessary network / CPU). */}
|
|
{open ? (
|
|
<div className="space-y-2">
|
|
<video
|
|
className="w-full rounded-md border bg-black"
|
|
controls
|
|
preload="metadata"
|
|
playsInline
|
|
>
|
|
<source src={src} type={timelapse.mimeType ?? "video/mp4"} />
|
|
<track kind="captions" src={emptyVtt} srcLang="en" label="Captions" default />
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
|
|
<div className="text-xs text-muted-foreground">
|
|
{timelapse.fileName ? timelapse.fileName : timelapse.s3Key}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|