Add timelapse to single image

src/app/(normal)/artworks/single/[id]/page.tsx

@@ -1,7 +1,10 @@
 import ArtworkMetaCard from "@/components/artworks/ArtworkMetaCard";
+import ArtworkTimelapseViewer from "@/components/artworks/ArtworkTimelapseViewer";
 import { ContextBackButton } from "@/components/artworks/ContextBackButton";
+import { Button } from "@/components/ui/button";
 import { prisma } from "@/lib/prisma";
 import { cn } from "@/lib/utils";
+import { PlayCircle } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -19,7 +22,8 @@ export default async function SingleArtworkPage({ params }: { params: { id: stri
       categories: true,
       colors: { include: { color: true } },
       tags: true,
-      variants: true
+      variants: true,
+      timelapse: true,
     }
   })
 
@@ -62,6 +66,20 @@ export default async function SingleArtworkPage({ params }: { params: { id: stri
             </Link>
           </div>
         </div>
+        {artwork.timelapse?.enabled ? (
+          <div className="flex justify-center">
+            <ArtworkTimelapseViewer
+              timelapse={artwork.timelapse}
+              artworkName={artwork.name}
+              trigger={
+                <Button size="lg" className="gap-2">
+                  <PlayCircle className="h-5 w-5" />
+                  Watch timelapse
+                </Button>
+              }
+            />
+          </div>
+        ) : null}
         <div
           className="rounded-lg"
           style={{

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>
+  );
+}