fix ui: no audio sync closing on reset; improve delta calc (#2119)

* fix ui: no audio sync closing on reset; improve delta calc

* fix ui: move zoom button to xray

frontend/app/components/Session/Player/ReplayPlayer/AudioPlayer.tsx

@@ -24,7 +24,11 @@ function DropdownAudioPlayer({ url }: { url: string }) {
         audioRef.current?.play();
       }
       audioRef.current.muted = !audioRef.current.muted;
-      setIsMuted(!isMuted);
+      if (isMuted) {
+        onVolumeChange(35)
+      } else {
+        onVolumeChange(0)
+      }
     }
   };
 
@@ -38,27 +42,36 @@ function DropdownAudioPlayer({ url }: { url: string }) {
 
   const onSync = () => {
     setDelta(deltaInputValue)
+    handleSeek(time + deltaInputValue * 1000)
   }
+
   const onCancel = () => {
     setDeltaInputValue(0)
     setIsVisible(false)
   }
+
   const onReset = () => {
     setDelta(0)
     setDeltaInputValue(0)
-    setIsVisible(false)
+    handleSeek(time)
   }
 
   const onVolumeChange = (value: number) => {
     if (audioRef.current) {
       audioRef.current.volume = value / 100;
     }
+    if (value === 0) {
+      setIsMuted(true);
+    }
+    if (value > 0) {
+      setIsMuted(false);
+    }
     setVolume(value);
   };
 
   const handleSeek = (timeMs: number) => {
     if (audioRef.current) {
-      audioRef.current.currentTime = (timeMs + delta) / 1000;
+      audioRef.current.currentTime = (timeMs + delta * 1000) / 1000;
     }
   };
 
@@ -69,7 +82,8 @@ function DropdownAudioPlayer({ url }: { url: string }) {
   };
 
   React.useEffect(() => {
-    if (Math.abs(lastPlayerTime.current - time) >= 250) {
+    const deltaMs = delta * 1000;
+    if (Math.abs(lastPlayerTime.current - time - deltaMs) >= 250) {
       handleSeek(time);
     }
     if (audioRef.current) {
@@ -80,7 +94,7 @@ function DropdownAudioPlayer({ url }: { url: string }) {
         audioRef.current.muted = isMuted;
       }
     }
-    lastPlayerTime.current = time + delta;
+    lastPlayerTime.current = time + deltaMs;
   }, [time, delta]);
 
   React.useEffect(() => {
@@ -94,7 +108,8 @@ function DropdownAudioPlayer({ url }: { url: string }) {
       audioRef.current?.pause();
     }
     const volume = audioRef.current?.volume ?? 0
-    setVolume(volume * 100);
+    const shouldBeMuted = audioRef.current?.muted ?? isMuted
+    setVolume(shouldBeMuted ? 0 : volume * 100);
   }, [playing]);
 
   return (
@@ -171,6 +186,7 @@ function DropdownAudioPlayer({ url }: { url: string }) {
         <audio
           ref={audioRef}
           controls
+          muted={isMuted}
           className="w-full"
           style={{ height: 32 }}
         >

frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx

@@ -18,6 +18,7 @@ import OverviewPanelContainer from './components/OverviewPanelContainer';
 import TimelinePointer from './components/TimelinePointer';
 import TimelineScale from './components/TimelineScale';
 import VerticalPointerLine from './components/VerticalPointerLine';
+import TimelineZoomButton from 'Components/Session_/Player/Controls/components/TimelineZoomButton';
 
 function MobileOverviewPanelCont({
   issuesList,
@@ -238,7 +239,8 @@ function PanelComponent({
               </>
             ) : null}
           </div>
-          <div className="flex items-center h-20 mr-4">
+          <div className="flex items-center h-20 mr-4 gap-2">
+            <TimelineZoomButton />
             <FeatureSelection list={selectedFeatures} updateList={setSelectedFeatures} />
           </div>
         </BottomBlock.Header>

frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx

@@ -3,7 +3,6 @@ import { Icon } from 'UI';
 import { Button } from 'antd';
 import PlayingTime from './PlayingTime';
 import { JumpBack, IntervalSelector, JumpForward, SpeedOptions } from './ControlsComponents';
-import TimelineZoomButton from 'Components/Session_/Player/Controls/components/TimelineZoomButton';
 
 interface Props {
   skip: boolean;
@@ -82,7 +81,6 @@ function PlayerControls(props: Props) {
       </div>
 
       <div className="flex items-center gap-2 ml-2">
-        <TimelineZoomButton />
         <SpeedOptions
           toggleSpeed={toggleSpeed}
           disabled={disabled}