upload & view attachments to particles

js/src/features/particles/media-particle-view.tsx

@@ -1,16 +1,20 @@
 import { useEffect, useRef, useState } from "react";
 import type { Particle } from "@/api/types";
+import type { ParticlePath } from "@/lib/particle-path";
 import { useDownloadUrl } from "@/hooks/use-download-url";
 import { useTranscriptPlayback } from "@/hooks/use-transcript-playback";
 import { TranscriptOverlay } from "@/features/particles/transcript-overlay";
 import { Skeleton } from "@/components/ui/skeleton";
 import { AudioLevelBars } from "@/components/audio/audio-level-bars";
 import { useAudioSource } from "@/components/audio/use-audio-source";
+import { useParticleAttachments } from "@/hooks/use-particle-attachments";
+import { ParticleAttachments } from "@/features/particles/particle-attachments";
 
 type MediaParticle = Extract<Particle, { type: "media" }>;
 
 interface MediaParticleViewProps {
   particle: MediaParticle;
+  streamPath: ParticlePath;
   paused: boolean;
   onEnded: () => void;
   onProgress?: (ratio: number) => void;
@@ -18,11 +22,13 @@ interface MediaParticleViewProps {
 
 export function MediaParticleView({
   particle,
+  streamPath,
   paused,
   onEnded,
   onProgress,
 }: MediaParticleViewProps) {
   const { data: url, error } = useDownloadUrl(particle.properties.object_id);
+  const { attachments } = useParticleAttachments(streamPath, particle.id);
 
   const videoRef = useRef<HTMLVideoElement>(null);
   const audioRef = useRef<HTMLAudioElement>(null);
@@ -70,6 +76,12 @@ export function MediaParticleView({
     if (duration > 0) onProgress?.(time / duration);
   };
 
+  const attachmentOverlay = attachments.length > 0 && (
+    <div className="absolute inset-x-0 bottom-16 z-10 px-4">
+      <ParticleAttachments attachments={attachments} />
+    </div>
+  );
+
   if (isAudio) {
     return (
       <div className="relative flex h-full w-full items-center justify-center bg-black/90">
@@ -99,6 +111,8 @@ export function MediaParticleView({
             centered
           />
         )}
+
+        {attachmentOverlay}
       </div>
     );
   }
@@ -122,6 +136,8 @@ export function MediaParticleView({
           activeWordIndex={activeWordIndex}
         />
       )}
+
+      {attachmentOverlay}
     </div>
   );
 }