Merge pull request #200 from sillsdev/TT-7044

TT-7044 don't ignore zoom inside more menu, fix zoom width reset when…

Author: sarahentzel

src/renderer/src/components/WSAudioPlayer.tsx

@@ -1328,11 +1328,16 @@ function WSAudioPlayer(props: IProps) {
             flexDirection: 'column',
             whiteSpace: 'nowrap',
             width: '100%',
+            minWidth: 0,
+            overflowX: 'auto',
           }}
           style={style}
         >
           <>
-            <Grid container sx={toolbarProp}>
+            <Grid
+              container
+              sx={{ ...toolbarProp, minWidth: 0, flexWrap: 'nowrap' }}
+            >
               <Grid sx={{ ml: 1 }}>
                 <LightTooltip id="wsAudioPlayTip" title={playTooltipTitle}>
                   <span>
@@ -1485,8 +1490,16 @@ function WSAudioPlayer(props: IProps) {
                       >
                         {allowZoom && (
                           <MenuItem
-                            onClick={handleMoreMenuClose}
-                            sx={{ pointerEvents: 'none' }}
+                            onClick={(e) => {//don't close menu if zoom in or out button is clicked
+                              const target = e.target as HTMLElement;
+                              if (
+                                target.closest?.(
+                                  '[id="wsZoomIn"], [id="wsZoomOut"]'
+                                )
+                              )
+                                return;
+                              handleMoreMenuClose();
+                            }}
                           >
                             <WSAudioPlayerZoom
                               ready={ready && !recording && !waitingForAI}

src/renderer/src/components/WSAudioPlayerZoom.tsx

@@ -31,6 +31,7 @@ function WSAudioPlayerZoom(props: IProps) {
 
   const t: IWsAudioPlayerZoomStrings = useSelector(audioPlayerZoomSelector);
   const readyRef = useRef(ready);
+  const prevFillPxRef = useRef<number | undefined>(undefined);
 
   const ZOOMIN_KEY = 'CTRL+1';
   const ZOOMOUT_KEY = 'CTRL+3';
@@ -51,8 +52,16 @@ function WSAudioPlayerZoom(props: IProps) {
     if (tellParent) onZoom(value);
   };
   useEffect(() => {
-    setZoom(fillPx);
     setZoomMin(fillPx);
+    // Only sync zoom to fillPx when fillPx actually changes (e.g. resize), not on mount.
+    // On mount, curPx effect sets zoom; avoid overwriting with fillPx so menu reopen keeps zoom.
+    if (
+      prevFillPxRef.current !== undefined &&
+      prevFillPxRef.current !== fillPx
+    ) {
+      setZoom(fillPx);
+    }
+    prevFillPxRef.current = fillPx;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fillPx]);
 
@@ -79,12 +88,10 @@ function WSAudioPlayerZoom(props: IProps) {
     ];
     keys.forEach((k) => subscribe(k.key, k.cb));
     return () => {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
       keys.forEach((k) => unsubscribe(k.key));
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-
   return (
     <GrowingDiv>
       <ToolbarGrid container>