Add timelapse to single image

src/components/artworks/ArtworkTimelapseViewer.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import * as React 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] = React.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>
+  );
+}