From d0207708913b251d9c315b14bd985de63880dfa1 Mon Sep 17 00:00:00 2001
From: "D. Ror" <imnasnainaec@gmail.com>
Date: Wed, 15 Nov 2023 15:04:56 -0500
Subject: [PATCH] [NewEntry] After clicking audio (record/play/pause), focus on
 gloss field (#2787)

---
 .../DataEntry/DataEntryTable/NewEntry/index.tsx           | 1 +
 src/components/Pronunciations/AudioPlayer.tsx             | 4 ++++
 src/components/Pronunciations/AudioRecorder.tsx           | 4 ++++
 src/components/Pronunciations/PronunciationsFrontend.tsx  | 8 +++++++-
 4 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx b/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx
index 6cb85e8588..d1d6dde042 100644
--- 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
index 421b05bd5a..b68d8a7b0b 100644
--- 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
index 7f1627acf3..eff2e2edb6 100644
--- 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
index 8fa40abb92..1e2cd8542f 100644
--- 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}
     </>