stream-chat-react-native-core 8.10.1 → 8.11.0-beta.3

package/src/components/Channel/Channel.tsx

@@ -52,6 +52,10 @@ import {
   AttachmentPickerProvider,
   MessageContextValue,
 } from '../../contexts';
+import {
+  AudioPlayerContextProps,
+  AudioPlayerProvider,
+} from '../../contexts/audioPlayerContext/AudioPlayerContext';
 import { ChannelContextValue, ChannelProvider } from '../../contexts/channelContext/ChannelContext';
 import type { UseChannelStateValue } from '../../contexts/channelsStateContext/useChannelState';
 import { useChannelState } from '../../contexts/channelsStateContext/useChannelState';
@@ -500,6 +504,11 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
      */
     newMessageStateUpdateThrottleInterval?: number;
     overrideOwnCapabilities?: Partial<OwnCapabilitiesContextValue>;
+    /**
+     * If true, multiple audio players will be allowed to play simultaneously
+     * @default true
+     */
+    allowConcurrentAudioPlayback?: boolean;
     stateUpdateThrottleInterval?: number;
     /**
      * Tells if channel is rendering a thread list
@@ -533,6 +542,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     additionalKeyboardAvoidingViewProps,
     additionalPressableProps,
     additionalTextInputProps,
+    allowConcurrentAudioPlayback = false,
     allowThreadMessagesInChannel = true,
     asyncMessagesLockDistance = 50,
     asyncMessagesMinimumPressDuration = 500,
@@ -2009,6 +2019,11 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     typing: channelState.typing ?? {},
   });
 
+  const audioPlayerContext = useMemo<AudioPlayerContextProps>(
+    () => ({ allowConcurrentAudioPlayback }),
+    [allowConcurrentAudioPlayback],
+  );
+
   const messageComposerContext = useMemo(
     () => ({ channel, thread, threadInstance }),
     [channel, thread, threadInstance],
@@ -2047,10 +2062,12 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
                   <AttachmentPickerProvider value={attachmentPickerContext}>
                     <MessageComposerProvider value={messageComposerContext}>
                       <MessageInputProvider value={inputMessageInputContext}>
-                        <View style={{ height: '100%' }}>{children}</View>
-                        {!disableAttachmentPicker && (
-                          <AttachmentPicker ref={bottomSheetRef} {...attachmentPickerProps} />
-                        )}
+                        <AudioPlayerProvider value={audioPlayerContext}>
+                          <View style={{ height: '100%' }}>{children}</View>
+                          {!disableAttachmentPicker && (
+                            <AttachmentPicker ref={bottomSheetRef} {...attachmentPickerProps} />
+                          )}
+                        </AudioPlayerProvider>
                       </MessageInputProvider>
                     </MessageComposerProvider>
                   </AttachmentPickerProvider>

package/src/components/Message/hooks/useMessageActionHandlers.ts

@@ -7,6 +7,7 @@ import type { MessageContextValue } from '../../../contexts/messageContext/Messa
 import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
 
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useTranslatedMessage } from '../../../hooks/useTranslatedMessage';
 import { NativeHandlers } from '../../../native';
 
 export const useMessageActionHandlers = ({
@@ -29,6 +30,7 @@ export const useMessageActionHandlers = ({
   Pick<MessageComposerAPIContextValue, 'setEditingState' | 'setQuotedMessage'>) => {
   const { t } = useTranslationContext();
   const handleResendMessage = () => retrySendMessage(message);
+  const translatedMessage = useTranslatedMessage(message);
 
   const handleQuotedReplyMessage = () => {
     setQuotedMessage(message);
@@ -42,7 +44,7 @@ export const useMessageActionHandlers = ({
     if (!message.text) {
       return;
     }
-    NativeHandlers.setClipboardString(message.text);
+    NativeHandlers.setClipboardString(translatedMessage?.text ?? message.text);
   };
 
   const handleDeleteMessage = () => {

package/src/components/MessageInput/MessageInput.tsx

@@ -453,6 +453,12 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                 paused={paused}
                 position={position}
                 progress={progress}
+                recordingDuration={recordingDuration}
+                uri={
+                  typeof recording !== 'string'
+                    ? (recording?.getURI() as string)
+                    : (recording as string)
+                }
                 waveformData={waveformData}
               />
             ) : micLocked ? (

package/src/components/MessageInput/components/AttachmentPreview/AudioAttachmentUploadPreview.tsx

@@ -10,6 +10,7 @@ import { DismissAttachmentUpload } from './DismissAttachmentUpload';
 
 import { AudioAttachment } from '../../../../components/Attachment/AudioAttachment';
 import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
+import { useMessageComposer } from '../../../../contexts/messageInputContext/hooks/useMessageComposer';
 import { AudioConfig, UploadAttachmentPreviewProps } from '../../../../types/types';
 import { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../../../utils/utils';
 
@@ -17,9 +18,26 @@ export type AudioAttachmentUploadPreviewProps<CustomLocalMetadata = Record<strin
   UploadAttachmentPreviewProps<
     LocalAudioAttachment<CustomLocalMetadata> | LocalVoiceRecordingAttachment<CustomLocalMetadata>
   > & {
+    /**
+     * The audio attachment config
+     *
+     * @deprecated This is deprecated and will be removed in the future.
+     */
     audioAttachmentConfig: AudioConfig;
+    /**
+     * Callback to be called when the audio is loaded
+     * @deprecated This is deprecated and will be removed in the future.
+     */
     onLoad: (index: string, duration: number) => void;
+    /**
+     * Callback to be called when the audio is played or paused
+     * @deprecated This is deprecated and will be removed in the future.
+     */
     onPlayPause: (index: string, pausedStatus?: boolean) => void;
+    /**
+     * Callback to be called when the audio progresses
+     * @deprecated This is deprecated and will be removed in the future.
+     */
     onProgress: (index: string, progress: number) => void;
   };
 
@@ -37,15 +55,23 @@ export const AudioAttachmentUploadPreview = ({
     attachment.localMetadata.uploadState,
     enableOfflineSupport,
   );
+  const messageComposer = useMessageComposer();
+  const isDraft = messageComposer.draftId;
+  const isEditing = messageComposer.editedMessage;
+  const assetUrl =
+    (isDraft || isEditing
+      ? attachment.asset_url
+      : (attachment.localMetadata.file as FileReference).uri) ??
+    (attachment.localMetadata.file as FileReference).uri;
 
   const finalAttachment = useMemo(
     () => ({
       ...attachment,
-      asset_url: attachment.asset_url ?? (attachment.localMetadata.file as FileReference).uri,
+      asset_url: assetUrl,
       id: attachment.localMetadata.id,
       ...audioAttachmentConfig,
     }),
-    [attachment, audioAttachmentConfig],
+    [attachment, assetUrl, audioAttachmentConfig],
   );
 
   const onRetryHandler = useCallback(() => {
@@ -65,6 +91,7 @@ export const AudioAttachmentUploadPreview = ({
       >
         <AudioAttachment
           hideProgressBar={true}
+          isPreview={true}
           item={finalAttachment}
           onLoad={onLoad}
           onPlayPause={onPlayPause}

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

@@ -1,41 +1,91 @@
-import React from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import dayjs from 'dayjs';
 
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { useAudioPlayerControl } from '../../../../hooks/useAudioPlayerControl';
+import { useStateStore } from '../../../../hooks/useStateStore';
 import { Pause, Play } from '../../../../icons';
 
+import { NativeHandlers } from '../../../../native';
+import { AudioPlayerState } from '../../../../state-store/audio-player';
 import { WaveProgressBar } from '../../../ProgressControl/WaveProgressBar';
 
+const ONE_SECOND_IN_MILLISECONDS = 1000;
+const ONE_HOUR_IN_MILLISECONDS = 3600 * 1000;
+
 export type AudioRecordingPreviewProps = {
+  recordingDuration: number;
+  uri: string;
+  /**
+   * The waveform data to be presented to show the audio levels.
+   */
+  waveformData: number[];
   /**
    * Boolean used to show the paused state of the player.
+   *
+   * @deprecated This is deprecated and will be removed in the future in favour of the global audio manager.
+   * FIXME: Remove this in the next major version.
    */
   paused: boolean;
   /**
    * Number used to show the current position of the audio being played.
+   *
+   * @deprecated This is deprecated and will be removed in the future in favour of the global audio manager.
+   * FIXME: Remove this in the next major version.
    */
   position: number;
   /**
    * Number used to show the percentage of progress of the audio being played. It should be in 0-1 range.
+   *
+   * @deprecated This is deprecated and will be removed in the future in favour of the global audio manager.
+   * FIXME: Remove this in the next major version.
    */
   progress: number;
-  /**
-   * The waveform data to be presented to show the audio levels.
-   */
-  waveformData: number[];
   /**
    * Function to play or pause the audio player.
+   *
+   * @deprecated This is deprecated and will be removed in the future in favour of the global audio manager.
+   * FIXME: Remove this in the next major version.
    */
   onVoicePlayerPlayPause?: () => Promise<void>;
 };
 
+const audioPlayerSelector = (state: AudioPlayerState) => ({
+  duration: state.duration,
+  isPlaying: state.isPlaying,
+  position: state.position,
+  progress: state.progress,
+});
+
 /**
  * Component displayed when the audio is recorded and can be previewed.
  */
 export const AudioRecordingPreview = (props: AudioRecordingPreviewProps) => {
-  const { onVoicePlayerPlayPause, paused, position, progress, waveformData } = props;
+  const { recordingDuration, uri, waveformData } = props;
+
+  const audioPlayer = useAudioPlayerControl({
+    duration: recordingDuration / ONE_SECOND_IN_MILLISECONDS,
+    mimeType: 'audio/aac',
+    // This is a temporary flag to manage audio player for voice recording in preview as the one in message list uses react-native-video.
+    previewVoiceRecording: !(NativeHandlers.SDK === 'stream-chat-expo'),
+    type: 'voiceRecording',
+    uri,
+  });
+
+  const { duration, isPlaying, position, progress } = useStateStore(
+    audioPlayer.state,
+    audioPlayerSelector,
+  );
+
+  // When a audio attachment in preview is removed, we need to remove the player from the pool
+  useEffect(
+    () => () => {
+      audioPlayer.onRemove();
+    },
+    [audioPlayer],
+  );
 
   const {
     theme: {
@@ -53,11 +103,25 @@ export const AudioRecordingPreview = (props: AudioRecordingPreviewProps) => {
     },
   } = useTheme();
 
+  const handlePlayPause = () => {
+    audioPlayer.toggle();
+  };
+
+  const progressDuration = useMemo(
+    () =>
+      position
+        ? position / ONE_HOUR_IN_MILLISECONDS >= 1
+          ? dayjs.duration(position, 'milliseconds').format('HH:mm:ss')
+          : dayjs.duration(position, 'milliseconds').format('mm:ss')
+        : dayjs.duration(duration, 'milliseconds').format('mm:ss'),
+    [duration, position],
+  );
+
   return (
     <View style={[styles.container, container]}>
       <View style={[styles.infoContainer, infoContainer]}>
-        <Pressable onPress={onVoicePlayerPlayPause}>
-          {paused ? (
+        <Pressable onPress={handlePlayPause}>
+          {!isPlaying ? (
             <Play fill={accent_blue} height={32} width={32} {...playIcon} />
           ) : (
             <Pause fill={accent_blue} height={32} width={32} {...pauseIcon} />
@@ -65,7 +129,7 @@ export const AudioRecordingPreview = (props: AudioRecordingPreviewProps) => {
         </Pressable>
         {/* `durationMillis` is for Expo apps, `currentPosition` is for Native CLI apps. */}
         <Text style={[styles.currentTime, { color: grey_dark }, currentTime]}>
-          {dayjs.duration(position).format('mm:ss')}
+          {progressDuration}
         </Text>
       </View>
       <View style={[styles.progressBar, progressBar]}>

package/src/components/MessageInput/hooks/useAudioController.tsx

@@ -4,6 +4,7 @@ import { Alert, Platform } from 'react-native';
 
 import { LocalVoiceRecordingAttachment } from 'stream-chat';
 
+import { useActiveAudioPlayer } from '../../../contexts/audioPlayerContext/AudioPlayerContext';
 import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/useMessageComposer';
 
 import { useMessageInputContext } from '../../../contexts/messageInputContext/MessageInputContext';
@@ -24,12 +25,29 @@ export type RecordingStatusStates = 'idle' | 'recording' | 'stopped';
 
 /**
  * The hook that controls all the async audio core features including start/stop or recording, player, upload/delete of the recorded audio.
+ *
+ * FIXME: Change the name to `useAudioRecorder` in the next major version as the hook will only be used for audio recording.
  */
 export const useAudioController = () => {
   const [micLocked, setMicLocked] = useState(false);
   const [permissionsGranted, setPermissionsGranted] = useState(true);
+  /**
+   * @deprecated This is deprecated and will be removed in the future in favour of the global audio manager.
+   * Check: https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx on how to use the global audio manager.
+   * FIXME: Remove this in the next major version.
+   */
   const [paused, setPaused] = useState<boolean>(true);
+  /**
+   * @deprecated This is deprecated and will be removed in the future in favour of the global audio manager.
+   * Check: https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx on how to use the global audio manager.
+   * FIXME: Remove this in the next major version.
+   */
   const [position, setPosition] = useState<number>(0);
+  /**
+   * @deprecated This is deprecated and will be removed in the future in favour of the global audio manager.
+   * Check: https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx on how to use the global audio manager.
+   * FIXME: Remove this in the next major version.
+   */
   const [progress, setProgress] = useState<number>(0);
   const [waveformData, setWaveformData] = useState<number[]>([]);
   const [isScheduledForSubmit, setIsScheduleForSubmit] = useState(false);
@@ -37,10 +55,18 @@ export const useAudioController = () => {
   const [recordingDuration, setRecordingDuration] = useState<number>(0);
   const [recordingStatus, setRecordingStatus] = useState<RecordingStatusStates>('idle');
   const { attachmentManager } = useMessageComposer();
+  const activeAudioPlayer = useActiveAudioPlayer();
 
   const { sendMessage } = useMessageInputContext();
 
-  // For playback support in Expo CLI apps
+  /**
+   * Reference to the sound object for playback support in Expo CLI apps
+   *
+   * @deprecated This is deprecated and will be removed in the future in favour of the global audio manager.
+   * Check: https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx on how to use the global audio manager.
+   *
+   * FIXME: Remove this in the next major version.
+   */
   const soundRef = useRef<SoundReturnType | null>(null);
 
   // This effect stop the player from playing and stops audio recording on
@@ -60,6 +86,12 @@ export const useAudioController = () => {
     }
   }, [isScheduledForSubmit, sendMessage]);
 
+  /**
+   * Function to update the progress of the voice recording.
+   *
+   * @deprecated This is deprecated and will be removed in the future in favour of the global audio manager.
+   * FIXME: Remove this in the next major version.
+   */
   const onVoicePlayerProgressHandler = (currentPosition: number, playbackDuration: number) => {
     const currentProgress = currentPosition / playbackDuration;
     if (currentProgress === 1) {
@@ -70,6 +102,14 @@ export const useAudioController = () => {
     }
   };
 
+  /**
+   * Function to update the playback status of the voice recording.
+   *
+   * @deprecated This is deprecated and will be removed in the future in favour of the global audio manager.
+   * Check: https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx on how to use the global audio manager.
+   *
+   * FIXME: Remove this in the next major version.
+   */
   const onVoicePlayerPlaybackStatusUpdate = (status: PlaybackStatus) => {
     if (status.shouldPlay === undefined || status.shouldPlay === true) {
       setPosition(status?.currentPosition || status?.positionMillis);
@@ -90,6 +130,14 @@ export const useAudioController = () => {
     }
   };
 
+  /**
+   * Function to play or pause voice recording.
+   *
+   * @deprecated This is deprecated and will be removed in the future in favour of the global audio manager.
+   * Check: https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx on how to use the global audio manager.
+   *
+   * FIXME: Remove this in the next major version.
+   */
   const onVoicePlayerPlayPause = async () => {
     if (paused) {
       if (progress === 0) {
@@ -119,6 +167,11 @@ export const useAudioController = () => {
 
   /**
    * Function to start playing voice recording to preview it after recording.
+   *
+   * @deprecated This is deprecated and will be removed in the future in favour of the global audio manager.
+   * Check: https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx on how to use the global audio manager.
+   *
+   * FIXME: Remove this in the next major version.
    */
   const startVoicePlayer = async () => {
     if (!recording) {
@@ -150,6 +203,11 @@ export const useAudioController = () => {
 
   /**
    * Function to stop playing voice recording.
+   *
+   * @deprecated This is deprecated and will be removed in the future in favour of the global audio manager.
+   * Check: https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx on how to use the global audio manager.
+   *
+   * FIXME: Remove this in the next major version.
    */
   const stopVoicePlayer = async () => {
     // For Native CLI
@@ -200,6 +258,9 @@ export const useAudioController = () => {
       }
       setRecording(recording);
       setRecordingStatus('recording');
+      if (activeAudioPlayer?.isPlaying) {
+        await activeAudioPlayer?.pause();
+      }
       await stopVoicePlayer();
     } else {
       setPermissionsGranted(false);

package/src/components/MessageInput/hooks/useAudioPreviewManager.tsx

@@ -8,6 +8,8 @@ import { AudioConfig } from '../../../types/types';
  * Manages the state of audio attachments for preview and playback.
  * @param files The audio files to manage.
  * @returns An object containing the state and handlers for audio attachments.
+ *
+ * @deprecated This is deprecated and will be removed in the future.
  */
 export const useAudioPreviewManager = (files: LocalAttachment[]) => {
   const [audioAttachmentsStateMap, setAudioAttachmentsStateMap] = useState<
@@ -34,8 +36,15 @@ export const useAudioPreviewManager = (files: LocalAttachment[]) => {
     });
   }, [files]);
 
-  // Handler triggered when an audio is loaded in the message input. The initial state is defined for the audio here
-  // and the duration is set.
+  /**
+   * Handler triggered when an audio is loaded in the message input. The initial state is defined for the audio here
+   * and the duration is set.
+   * @param index - The index of the audio
+   * @param duration - The duration of the audio
+   *
+   * @deprecated This is deprecated and will be removed in the future.
+   * FIXME: Remove this in the next major version.
+   */
   const onLoad = useCallback((index: string, duration: number) => {
     setAudioAttachmentsStateMap((prevState) => ({
       ...prevState,
@@ -46,8 +55,15 @@ export const useAudioPreviewManager = (files: LocalAttachment[]) => {
     }));
   }, []);
 
-  // The handler which is triggered when the audio progresses/ the thumb is dragged in the progress control. The
-  // progressed duration is set here.
+  /**
+   * Handler which is triggered when the audio progresses/ the thumb is dragged in the progress control. The
+   * progressed duration is set here.
+   * @param index - The index of the audio
+   * @param progress - The progress of the audio
+   *
+   * @deprecated This is deprecated and will be removed in the future.
+   * FIXME: Remove this in the next major version.
+   */
   const onProgress = useCallback((index: string, progress: number) => {
     setAudioAttachmentsStateMap((prevState) => ({
       ...prevState,
@@ -58,7 +74,14 @@ export const useAudioPreviewManager = (files: LocalAttachment[]) => {
     }));
   }, []);
 
-  // The handler which controls or sets the paused/played state of the audio.
+  /**
+   * Handler which controls or sets the paused/played state of the audio.
+   * @param index - The index of the audio
+   * @param pausedStatus - The paused status of the audio
+   *
+   * @deprecated This is deprecated and will be removed in the future.
+   * FIXME: Remove this in the next major version.
+   */
   const onPlayPause = useCallback((index: string, pausedStatus?: boolean) => {
     if (pausedStatus === false) {
       // In this case, all others except the index are set to paused.

package/src/components/ProgressControl/ProgressControl.tsx

@@ -1,12 +1,18 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { runOnJS, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import Animated, {
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
 export type ProgressControlProps = {
   /**
+   * @deprecated unused prop.
    * The duration of the audio in seconds
    */
   duration: number;
@@ -33,6 +39,7 @@ export type ProgressControlProps = {
   onPlayPause?: (status?: boolean) => void;
   /**
    * The function to be called when the user is dragging the progress bar
+   * @deprecated This is not used anymore and is handled locally
    */
   onProgressDrag?: (progress: number) => void;
   /**
@@ -67,17 +74,9 @@ const ProgressControlThumb = () => {
 
 export const ProgressControl = (props: ProgressControlProps) => {
   const [widthInNumbers, setWidthInNumbers] = useState(0);
-  const {
-    filledColor: filledColorFromProp,
-    onEndDrag,
-    onPlayPause,
-    onProgressDrag,
-    onStartDrag,
-    progress,
-    testID,
-  } = props;
+  const { filledColor: filledColorFromProp, onEndDrag, onStartDrag, progress, testID } = props;
 
-  const progressValue = useSharedValue(progress);
+  const state = useSharedValue(progress);
   const {
     theme: {
       colors: { grey_dark },
@@ -85,51 +84,50 @@ export const ProgressControl = (props: ProgressControlProps) => {
     },
   } = useTheme();
 
-  const pan = Gesture.Pan()
-    .maxPointers(1)
-    .onStart((event) => {
-      const currentProgress = (progressValue.value + event.x) / widthInNumbers;
-      progressValue.value = Math.max(0, Math.min(currentProgress, 1));
-      if (onStartDrag) {
-        runOnJS(onStartDrag)(progressValue.value);
-      }
-      if (onPlayPause) {
-        runOnJS(onPlayPause)(true);
-      }
-    })
-    .onUpdate((event) => {
-      const currentProgress = (progressValue.value + event.x) / widthInNumbers;
-      progressValue.value = Math.max(0, Math.min(currentProgress, 1));
-      if (onProgressDrag) {
-        runOnJS(onProgressDrag)(progressValue.value);
-      }
-    })
-    .onEnd((event) => {
-      const currentProgress = (progressValue.value + event.x) / widthInNumbers;
-      progressValue.value = Math.max(0, Math.min(currentProgress, 1));
-      if (onEndDrag) {
-        runOnJS(onEndDrag)(progressValue.value);
-      }
-      if (onPlayPause) {
-        runOnJS(onPlayPause)(false);
-      }
-    })
-    .withTestId(testID);
+  useAnimatedReaction(
+    () => progress,
+    (newProgress) => {
+      state.value = newProgress;
+    },
+    [progress],
+  );
+
+  const pan = useMemo(
+    () =>
+      Gesture.Pan()
+        .maxPointers(1)
+        .onStart(() => {
+          if (onStartDrag) {
+            runOnJS(onStartDrag)(state.value);
+          }
+        })
+        .onUpdate((event) => {
+          const newProgress = Math.max(0, Math.min(event.x / widthInNumbers, 1));
+          state.value = newProgress;
+        })
+        .onEnd(() => {
+          if (onEndDrag) {
+            runOnJS(onEndDrag)(state.value);
+          }
+        })
+        .withTestId(testID),
+    [onEndDrag, onStartDrag, state, testID, widthInNumbers],
+  );
 
   const filledColor = filledColorFromProp || filledColorFromTheme;
 
   const thumbStyles = useAnimatedStyle(
     () => ({
-      transform: [{ translateX: progress * widthInNumbers - THUMB_WIDTH / 2 }],
+      transform: [{ translateX: state.value * widthInNumbers - THUMB_WIDTH / 2 }],
     }),
-    [progress],
+    [widthInNumbers],
   );
 
   const animatedFilledStyles = useAnimatedStyle(
     () => ({
-      width: progress * widthInNumbers,
+      width: state.value * widthInNumbers,
     }),
-    [progress],
+    [widthInNumbers],
   );
 
   return (
@@ -151,7 +149,7 @@ export const ProgressControl = (props: ProgressControlProps) => {
           ]}
         />
         <Animated.View style={[thumbStyles, thumb]}>
-          {onEndDrag || onProgressDrag ? <ProgressControlThumb /> : null}
+          {onEndDrag ? <ProgressControlThumb /> : null}
         </Animated.View>
       </View>
     </GestureDetector>