[NewEntry] After clicking audio (record/play/pause), focus on gloss f…

…ield (#2787)
sillsdev · Nov 15, 2023 · d020770 · d020770
1 parent 8947af6
commit d020770
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 1 deletion.
diff --git a/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx b/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx
@@ -294,6 +294,7 @@ export default function NewEntry(props: NewEntryProps): ReactElement {
           pronunciationFiles={newAudioUrls}
           deleteAudio={delNewAudioUrl}
           uploadAudio={addNewAudioUrl}
+          onClick={() => focus(FocusTarget.Gloss)}
         />
       </Grid>
       <Grid item xs={1} style={gridItemStyle(1)}>

diff --git a/src/components/Pronunciations/AudioPlayer.tsx b/src/components/Pronunciations/AudioPlayer.tsx
@@ -25,6 +25,7 @@ interface PlayerProps {
   deleteAudio: (fileName: string) => void;
   fileName: string;
   isPlaying?: boolean;
+  onClick?: () => void;
   pronunciationUrl: string;
 }
 
@@ -73,6 +74,9 @@ export default function AudioPlayer(props: PlayerProps): ReactElement {
   }
 
   function deleteOrTogglePlay(event?: any): void {
+    if (props.onClick) {
+      props.onClick();
+    }
     if (event?.shiftKey) {
       setDeleteConf(true);
     } else {

diff --git a/src/components/Pronunciations/AudioRecorder.tsx b/src/components/Pronunciations/AudioRecorder.tsx
@@ -10,6 +10,7 @@ import { getFileNameForWord } from "components/Pronunciations/utilities";
 interface RecorderProps {
   wordId: string;
   uploadAudio: (audioFile: File) => void;
+  onClick?: () => void;
 }
 
 export default function AudioRecorder(props: RecorderProps): ReactElement {
@@ -21,6 +22,9 @@ export default function AudioRecorder(props: RecorderProps): ReactElement {
   }
 
   async function stopRecording(): Promise<void> {
+    if (props.onClick) {
+      props.onClick();
+    }
     const blob = await recorder.stopRecording();
     if (!blob) {
       toast.error(t("pronunciations.noMicAccess"));

diff --git a/src/components/Pronunciations/PronunciationsFrontend.tsx b/src/components/Pronunciations/PronunciationsFrontend.tsx
@@ -8,6 +8,7 @@ interface PronunciationFrontendProps {
   elemBetweenRecordAndPlay?: ReactElement;
   deleteAudio: (fileName: string) => void;
   uploadAudio: (audioFile: File) => void;
+  onClick?: () => void;
 }
 
 /** Audio recording/playing component for audio being recorded and held in the frontend. */
@@ -21,13 +22,18 @@ export default function PronunciationsFrontend(
         key={fileName}
         pronunciationUrl={fileName}
         deleteAudio={props.deleteAudio}
+        onClick={props.onClick}
       />
     )
   );
 
   return (
     <>
-      <AudioRecorder wordId={""} uploadAudio={props.uploadAudio} />
+      <AudioRecorder
+        wordId={""}
+        uploadAudio={props.uploadAudio}
+        onClick={props.onClick}
+      />
       {props.elemBetweenRecordAndPlay}
       {audioButtons}
     </>