feat: improved layout and captions

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

@@ -30,7 +30,7 @@ export function MediaParticleView({
   const [currentTime, setCurrentTime] = useState(0);
 
   const transcript = particle.properties.transcript;
-  const { activeParagraph, activeWordIndex } = useTranscriptPlayback(
+  const { activeSentence, activeWordIndex } = useTranscriptPlayback(
     transcript,
     currentTime,
   );
@@ -70,14 +70,6 @@ export function MediaParticleView({
     if (duration > 0) onProgress?.(time / duration);
   };
 
-  const captionOverlay = transcript ? (
-    <TranscriptOverlay
-      transcript={transcript}
-      activeParagraph={activeParagraph}
-      activeWordIndex={activeWordIndex}
-    />
-  ) : null;
-
   if (isAudio) {
     return (
       <div className="relative flex h-full w-full items-center justify-center bg-black/90">
@@ -94,12 +86,19 @@ export function MediaParticleView({
         />
 
         {audioSource && (
-          <div className="z-10 absolute bottom-15">
+          <div className="z-10 absolute bottom-5">
             <AudioLevelBars sourceNode={audioSource.sourceNode} />
           </div>
         )}
 
-        {captionOverlay}
+        {transcript && (
+          <TranscriptOverlay
+            transcript={transcript}
+            activeSentence={activeSentence}
+            activeWordIndex={activeWordIndex}
+            centered
+          />
+        )}
       </div>
     );
   }
@@ -116,7 +115,13 @@ export function MediaParticleView({
         className="h-full w-full object-cover"
       />
 
-      {captionOverlay}
+      {transcript && (
+        <TranscriptOverlay
+          transcript={transcript}
+          activeSentence={activeSentence}
+          activeWordIndex={activeWordIndex}
+        />
+      )}
     </div>
   );
 }