fix: seeking in voice recording regression

Author: isekovanic

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx

@@ -5,6 +5,7 @@ import dayjs from 'dayjs';
 
 import { useMessageInputContext } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { useStableCallback } from '../../../../hooks';
 import { useAudioPlayer } from '../../../../hooks/useAudioPlayer';
 import { useStateStore } from '../../../../hooks/useStateStore';
 
@@ -100,6 +101,16 @@ export const AudioRecordingPreview = () => {
     [duration, position],
   );
 
+  const dragStart = useStableCallback(() => {
+    audioPlayer.pause();
+  });
+
+  const dragEnd = useStableCallback(async (currentProgress: number) => {
+    const positionInSeconds = (currentProgress * duration) / ONE_SECOND_IN_MILLISECONDS;
+    await audioPlayer.seek(positionInSeconds);
+    audioPlayer.play();
+  });
+
   return (
     <View style={[styles.container, container]}>
       <View style={[styles.infoContainer, infoContainer]}>
@@ -123,7 +134,13 @@ export const AudioRecordingPreview = () => {
       </View>
       <View style={[styles.progressBar, progressBar]}>
         {/* Since the progress is in range 0-1 we convert it in terms of 100% */}
-        <WaveProgressBar progress={progress} waveformData={waveformData} />
+        <WaveProgressBar
+          isPlaying={isPlaying}
+          progress={progress}
+          waveformData={waveformData}
+          onStartDrag={dragStart}
+          onEndDrag={dragEnd}
+        />
       </View>
     </View>
   );

package/src/components/ProgressControl/WaveProgressBar.tsx

@@ -107,7 +107,7 @@ export const WaveProgressBar = React.memo(
             }
           })
           .onUpdate((event) => {
-            const newProgress = Math.max(0, Math.min(event.x / fullWidth, 1));
+            const newProgress = Math.max(0, Math.min((state.value + event.x) / fullWidth, 1));
             state.value = newProgress;
             waveFormNumberFromProgress(newProgress);
           })

package/src/state-store/audio-player.ts

@@ -310,9 +310,10 @@ export class AudioPlayer {
 
   async seek(positionInSeconds: number) {
     if (this.previewVoiceRecording) {
-      this.position = positionInSeconds;
+      const positionInMillis = positionInSeconds * 1000;
+      this.position = positionInMillis;
       if (NativeHandlers.Audio?.seekToPlayer) {
-        NativeHandlers.Audio.seekToPlayer(positionInSeconds * 1000);
+        await NativeHandlers.Audio.seekToPlayer(positionInMillis);
       }
       return;
     }