display IPA when read through

enjoy/src/renderer/components/medias/media-caption.tsx

@@ -457,18 +457,18 @@ export const MediaCaption = () => {
   );
 };
 
-const Caption = (props: {
+export const Caption = (props: {
   caption: TimelineEntry;
-  selectedIndices: number[];
+  selectedIndices?: number[];
   currentSegmentIndex: number;
-  activeIndex: number;
-  displayIpa: boolean;
-  displayNotes: boolean;
-  onClick: (index: number) => void;
+  activeIndex?: number;
+  displayIpa?: boolean;
+  displayNotes?: boolean;
+  onClick?: (index: number) => void;
 }) => {
   const {
     caption,
-    selectedIndices,
+    selectedIndices = [],
     currentSegmentIndex,
     activeIndex,
     displayIpa,
@@ -504,16 +504,16 @@ const Caption = (props: {
           id={`word-${currentSegmentIndex}-${index}`}
         >
           <div
-            className={`font-serif text-lg xl:text-xl 2xl:text-2xl cursor-pointer p-1 pb-2 rounded hover:bg-red-500/10 ${
-              index === activeIndex ? "text-red-500" : ""
-            } ${
+            className={`font-serif text-lg xl:text-xl 2xl:text-2xl cursor-pointer p-1 pb-2 rounded ${
+              onClick && "hover:bg-red-500/10"
+            } ${index === activeIndex ? "text-red-500" : ""} ${
               selectedIndices.includes(index) ? "bg-red-500/10 selected" : ""
             } ${
               notedquoteIndices.includes(index)
                 ? "border-b border-red-500 border-dashed"
                 : ""
             }`}
-            onClick={() => onClick(index)}
+            onClick={() => onClick && onClick(index)}
           >
             {word}
           </div>

enjoy/src/renderer/components/medias/media-transcription-read-button.tsx

@@ -48,7 +48,7 @@ import {
   DefaultAudioLayout,
   defaultLayoutIcons,
 } from "@vidstack/react/player/layouts/default";
-import { RecordingDetail } from "@renderer/components";
+import { Caption, RecordingDetail } from "@renderer/components";
 
 const TEN_MINUTES = 60 * 10;
 let interval: NodeJS.Timeout;
@@ -112,16 +112,22 @@ export const MediaTranscriptionReadButton = () => {
           <ScrollArea className="flex-1 px-6 pt-4">
             <div className="select-text mx-auto w-full max-w-prose">
               <h3 className="font-bold text-xl my-4">{media.name}</h3>
-              {transcription.result.timeline.map(
-                (sentence: TimelineEntry, index: number) => (
-                  <div key={index} className="flex flex-start space-x-2 mb-4">
-                    <span className="text-sm text-muted-foreground min-w-max leading-8">
-                      #{index + 1}
-                    </span>
-                    <div className="text-lg leading-8">{sentence.text}</div>
-                  </div>
-                )
-              )}
+              {open &&
+                transcription.result.timeline.map(
+                  (sentence: TimelineEntry, index: number) => (
+                    <div key={index} className="flex flex-start space-x-2 mb-4">
+                      <span className="text-sm text-muted-foreground min-w-max leading-8">
+                        #{index + 1}
+                      </span>
+                      <Caption
+                        caption={sentence}
+                        currentSegmentIndex={index}
+                        displayIpa={true}
+                        displayNotes={false}
+                      />
+                    </div>
+                  )
+                )}
             </div>
             <div className="mt-12">
               {recordings.map((recording) => (