final adjustments

www/app/[domain]/transcripts/[transcriptId]/correct/page.tsx

@@ -64,6 +64,7 @@ export default function TranscriptCorrect(details: TranscriptCorrect) {
         <TopicHeader
           stateCurrentTopic={stateCurrentTopic}
           transcriptId={transcriptId}
+          topicWithWordsLoading={topicWithWords.loading}
         />
         <TopicWords
           stateSelectedText={stateSelectedText}

www/app/[domain]/transcripts/[transcriptId]/correct/topicHeader.tsx

@@ -10,11 +10,13 @@ type TopicHeader = {
     Dispatch<SetStateAction<GetTranscriptTopic | undefined>>,
   ];
   transcriptId: string;
+  topicWithWordsLoading: boolean;
 };
 
 export default function TopicHeader({
   stateCurrentTopic,
   transcriptId,
+  topicWithWordsLoading,
 }: TopicHeader) {
   const [currentTopic, setCurrentTopic] = stateCurrentTopic;
   const topics = useTopics(transcriptId);
@@ -32,10 +34,14 @@ export default function TopicHeader({
   const total = topics.topics?.length;
   const canGoNext = total && typeof number == "number" && number + 1 < total;
 
-  const onPrev = () =>
+  const onPrev = () => {
+    if (topicWithWordsLoading) return;
     canGoPrevious && setCurrentTopic(topics.topics?.at(number - 1));
-  const onNext = () =>
+  };
+  const onNext = () => {
+    if (topicWithWordsLoading) return;
     canGoNext && setCurrentTopic(topics.topics?.at(number + 1));
+  };
 
   const keyHandler = (e) => {
     if (e.key == "ArrowLeft") {

www/app/[domain]/transcripts/[transcriptId]/correct/topicPlayer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import useMp3 from "../../useMp3";
 import { formatTime } from "../../../../lib/time";
 import SoundWaveCss from "./soundWaveCss";
@@ -10,15 +10,18 @@ const TopicPlayer = ({ transcriptId, selectedTime, topicTime }) => {
   const [endSelectionCallback, setEndSelectionCallback] =
     useState<() => void>();
   const [showTime, setShowTime] = useState("");
+  const playButton = useRef<HTMLButtonElement>(null);
 
   const keyHandler = (e) => {
     if (e.key == " ") {
-      if (isPlaying) {
+      if (e.target.id != "playButton") {
-        mp3.media?.pause();
+        if (isPlaying) {
-        setIsPlaying(false);
+          mp3.media?.pause();
-      } else {
+          setIsPlaying(false);
-        mp3.media?.play();
+        } else {
-        setIsPlaying(true);
+          mp3.media?.play();
+          setIsPlaying(true);
+        }
       }
     } else if (selectedTime && e.key == ",") {
       playSelection();
@@ -66,6 +69,7 @@ const TopicPlayer = ({ transcriptId, selectedTime, topicTime }) => {
         },
     );
     if (mp3.media && topicTime) {
+      playButton.current?.focus();
       mp3.media?.pause();
       // there's no callback on pause but apparently changing the time while palying doesn't work... so here is a timeout
       setTimeout(() => {
@@ -166,7 +170,12 @@ const TopicPlayer = ({ transcriptId, selectedTime, topicTime }) => {
           </button>
         )}
         {!isPlaying ? (
-          <button className="p-2 bg-blue-200 w-full" onClick={playCurrent}>
+          <button
+            ref={playButton}
+            id="playButton"
+            className="p-2 bg-blue-200 w-full"
+            onClick={playCurrent}
+          >
             <span className="text-xs">[SPACE]</span> Play
           </button>
         ) : (

www/app/[domain]/transcripts/[transcriptId]/correct/topicWords.tsx

@@ -151,7 +151,7 @@ const topicWords = ({
   const getSpeakerName = (speakerNumber: number) => {
     if (!participants.response) return;
     return (
-      (participants.response as Participant[]).find(
+      participants.response.find(
         (participant) => participant.speaker == speakerNumber,
       )?.name || `Speaker ${speakerNumber}`
     );

www/app/[domain]/transcripts/[transcriptId]/page.tsx

@@ -92,6 +92,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
           topics={topics.topics || []}
           useActiveTopic={useActiveTopic}
           autoscroll={false}
+          transcriptId={transcriptId}
         />
 
         <div className="w-full h-full grid grid-rows-layout-one grid-cols-1 gap-2 lg:gap-4">

www/app/[domain]/transcripts/topicList.tsx

@@ -8,6 +8,7 @@ import { formatTime } from "../../lib/time";
 import ScrollToBottom from "./scrollToBottom";
 import { Topic } from "./webSocketTypes";
 import { generateHighContrastColor } from "../../lib/utils";
+import useParticipants from "./useParticipants";
 
 type TopicListProps = {
   topics: Topic[];
@@ -16,15 +17,18 @@ type TopicListProps = {
     React.Dispatch<React.SetStateAction<Topic | null>>,
   ];
   autoscroll: boolean;
+  transcriptId: string;
 };
 
 export function TopicList({
   topics,
   useActiveTopic,
   autoscroll,
+  transcriptId,
 }: TopicListProps) {
   const [activeTopic, setActiveTopic] = useActiveTopic;
   const [autoscrollEnabled, setAutoscrollEnabled] = useState<boolean>(true);
+  const participants = useParticipants(transcriptId);
 
   useEffect(() => {
     if (autoscroll && autoscrollEnabled) scrollToBottom();
@@ -61,6 +65,15 @@ export function TopicList({
     }
   }, [activeTopic, autoscroll]);
 
+  const getSpeakerName = (speakerNumber: number) => {
+    if (!participants.response) return;
+    return (
+      participants.response.find(
+        (participant) => participant.speaker == speakerNumber,
+      )?.name || `Speaker ${speakerNumber}`
+    );
+  };
+
   return (
     <section className="relative w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl p-1 sm:p-2 md:px-4 flex flex-col justify-center align-center">
       {topics.length > 0 ? (
@@ -125,7 +138,7 @@ export function TopicList({
                               }}
                             >
                               {" "}
-                              (Speaker {segment.speaker}):
+                              {getSpeakerName(segment.speaker)}:
                             </span>{" "}
                             <span>{segment.text}</span>
                           </p>