update logic for working through the steps

Author: Greg Trihus

src/renderer/src/components/PassageDetail/PassageDetailItem.tsx

@@ -15,11 +15,10 @@ import {
   Stack,
   BoxProps,
 } from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete';
+import DeleteIcon from '@mui/icons-material/DeleteOutlined';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import PauseIcon from '@mui/icons-material/Pause';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import { FaEarListen } from 'react-icons/fa6';
 import { IoMdBarcode } from 'react-icons/io';
 import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import {
@@ -133,9 +132,14 @@ export function PassageDetailItem(props: IProps) {
   const isPhraseBackTranslation = slugs.includes(
     ArtifactTypeSlug.PhraseBackTranslation
   );
-  const [activity, setActivity] = useState<Activity>(() =>
+  const [activity, setActivityx] = useState<Activity>(() =>
     isPhraseBackTranslation ? Activity.Preview : Activity.Listen
   );
+  const activityRef = useRef<Activity>(activity);
+  const setActivity = (activity: Activity) => {
+    setActivityx(activity);
+    activityRef.current = activity;
+  };
   const [statusText, setStatusText] = useState('');
   const [canSave, setCanSave] = useState(false);
   const [defaultFilename, setDefaultFileName] = useState('');
@@ -226,7 +230,9 @@ export function PassageDetailItem(props: IProps) {
 
   const mediafileId = useMemo(() => {
     return playerMediafile?.id ?? '';
-  }, [playerMediafile]);
+    // this seemed to need to refresh when the passage and shared resource were updated
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [playerMediafile, passage, sharedResource]);
   useEffect(() => {
     if (segments) {
       const def = getOrgDefault(segments) as IRegionParams;
@@ -249,7 +255,7 @@ export function PassageDetailItem(props: IProps) {
       ArtifactTypeSlug.PhraseBackTranslation === recordType &&
       (segString || '{}') !== '{}'
     ) {
-      setTimeout(() => handleSave(), 100);
+      setTimeout(() => handleSave(), 500);
     }
     toolChanged(toolId, canSave);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -281,7 +287,7 @@ export function PassageDetailItem(props: IProps) {
   };
 
   useEffect(() => {
-    if (hasBtRecordings && activity === Activity.Preview) {
+    if (hasBtRecordings && activityRef.current === Activity.Preview) {
       setActivity(Activity.Listen);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -371,7 +377,7 @@ export function PassageDetailItem(props: IProps) {
   //from recorder
   const afterUploadCb = async (mediaId: string | undefined) => {
     afterUpload('', mediaId ? [mediaId] : undefined);
-    if (activity === Activity.Record) {
+    if (activityRef.current === Activity.Record) {
       setActivity(Activity.Next);
     }
   };
@@ -432,8 +438,10 @@ export function PassageDetailItem(props: IProps) {
     setConfirm('');
   };
 
+  const isRecording = () =>
+    recorderRecordingRef.current || recorderPlayingRef.current;
   const updateRecorderBusy = () => {
-    setRecording(recorderRecordingRef.current || recorderPlayingRef.current);
+    setRecording(isRecording());
   };
   const handleRecorderRecording = (recording: boolean) => {
     const wasRecording = recorderRecordingRef.current;
@@ -451,8 +459,8 @@ export function PassageDetailItem(props: IProps) {
   const handleSegmentFinished = () => {
     if (
       segments &&
-      activity !== Activity.Record &&
-      activity !== Activity.Preview
+      activityRef.current !== Activity.Record &&
+      activityRef.current !== Activity.Preview
     ) {
       setActivity(Activity.Record);
     }
@@ -523,7 +531,7 @@ export function PassageDetailItem(props: IProps) {
   const flushDiscussionLeft = discussOpen && !showSideBySide;
 
   useEffect(() => {
-    if (activity !== Activity.Preview) {
+    if (activityRef.current !== Activity.Preview) {
       previewStartedRef.current = false;
     }
   }, [activity]);
@@ -540,7 +548,7 @@ export function PassageDetailItem(props: IProps) {
 
   useEffect(() => {
     if (
-      activity === Activity.Preview &&
+      activityRef.current === Activity.Preview &&
       previewStartedRef.current &&
       !playing &&
       playerDuration > 0 &&
@@ -570,8 +578,8 @@ export function PassageDetailItem(props: IProps) {
               if (!playing) previewStartedRef.current = true;
               playerControlsRef.current?.togglePlay();
             }}
-            disabled={playerDuration === 0}
-            highlight={activity === Activity.Preview}
+            disabled={playerDuration === 0 || isRecording()}
+            highlight={activityRef.current === Activity.Preview}
             sx={{ py: '2px', px: '4px' }}
           >
             {playing ? <PauseIcon /> : <PlayArrowIcon />}
@@ -591,12 +599,12 @@ export function PassageDetailItem(props: IProps) {
               : undefined
           }
           forceRegionOnly={
-            activity === Activity.Preview ? false : Boolean(segments)
+            activityRef.current === Activity.Preview ? false : Boolean(segments)
           }
           highlightAutoSegment={
             isPhraseBackTranslation &&
             mobileView &&
-            activity === Activity.Segment
+            activityRef.current === Activity.Segment
           }
           onAutoSegment={() => {
             if (isPhraseBackTranslation && mobileView) {
@@ -616,6 +624,9 @@ export function PassageDetailItem(props: IProps) {
           onDuration={setPlayerDuration}
           onSegmentFinished={handleSegmentFinished}
           onInteraction={() => {
+            if (activityRef.current === Activity.Segment) {
+              setActivity(Activity.Listen);
+            }
             showSegmentsChangedMessage();
             userSegmentInteractionRef.current = true;
           }}
@@ -645,7 +656,7 @@ export function PassageDetailItem(props: IProps) {
               <IconButton
                 aria-label={isRecorderPlaying ? 'Pause' : 'Play'}
                 onClick={() => recorderControlsRef.current?.togglePlay()}
-                disabled={recorderDuration === 0}
+                disabled={recorderDuration === 0 || isRecording()}
                 sx={{ pl: 0 }}
               >
                 {isRecorderPlaying ? <PauseIcon /> : <PlayArrowIcon />}
@@ -704,6 +715,7 @@ export function PassageDetailItem(props: IProps) {
                 id="speaker"
                 label={t.speaker}
                 value={speaker}
+                disabled={isRecording() || playing}
                 onChange={handleChangeSpeaker}
                 sx={smallInputProps}
               />
@@ -714,6 +726,7 @@ export function PassageDetailItem(props: IProps) {
                   setActivity(Activity.Listen);
                   recorderControlsRef.current?.deleteRecording();
                 }}
+                disabled={isRecording() || playing}
               >
                 <DeleteIcon />
               </IconButton>
@@ -744,10 +757,10 @@ export function PassageDetailItem(props: IProps) {
                   setActivity(Activity.Listen);
                   playerControlsRef.current?.togglePlay();
                 }}
-                disabled={false}
-                highlight={activity === Activity.Listen}
+                disabled={isRecording()}
+                highlight={activityRef.current === Activity.Listen}
               >
-                <FaEarListen />
+                {playing ? <PauseIcon /> : <PlayArrowIcon />}
               </HighlightButton>
               <RecordButton
                 recording={recorderRecordingRef.current}
@@ -769,15 +782,17 @@ export function PassageDetailItem(props: IProps) {
                 showText={showTextRef.current}
                 hasRecording={Boolean(currentSegmentMediaId)}
                 isStopLogic={true}
-                active={activity === Activity.Record}
+                active={true}
               />
               <HighlightButton
                 ariaLabel="Next Segment"
                 onClick={() => {
                   handleNextSegmentClick();
                 }}
-                disabled={false}
-                highlight={activity === Activity.Next}
+                disabled={
+                  isRecording() || playing || Boolean(toolChanged(toolId))
+                }
+                highlight={activityRef.current === Activity.Next}
               >
                 <ArrowForwardIcon />
               </HighlightButton>