react-native-chatbot-ai 0.1.22 → 0.1.23

package/src/components/chat/item/MessageActionsBar.tsx

@@ -159,8 +159,8 @@ const MessageActionsBar = ({
                 ]}
               >
                 <KImage.VectorIcons
-                  name="like-thumbup-b"
-                  size={16}
+                  name="thumb-like-o"
+                  size={20}
                   color={
                     isLikeActive ? KColors.primary.normal : KColors.gray.light
                   }
@@ -215,8 +215,8 @@ const MessageActionsBar = ({
                 ]}
               >
                 <KImage.VectorIcons
-                  name="like-thumbdown-b"
-                  size={16}
+                  name="thumb-dislike-o"
+                  size={20}
                   color={
                     isDislikeActive
                       ? KColors.primary.normal
@@ -253,7 +253,7 @@ const MessageActionsBar = ({
         {/* Audio Button */}
         <ActionButton
           icon={audioButtonProps.icon}
-          iconSize={16}
+          iconSize={20}
           iconColor={audioButtonProps.iconColor}
           isActive={audioButtonProps.isActive}
           isLoading={isAudioLoading}
@@ -264,7 +264,7 @@ const MessageActionsBar = ({
         {/* Copy Button */}
         <ActionButton
           icon="copy-o"
-          iconSize={16}
+          iconSize={20}
           isLoading={isCopying}
           onPress={handleCopy}
           testID="copy-button"
@@ -272,8 +272,8 @@ const MessageActionsBar = ({
 
         {/* Share Button */}
         <ActionButton
-          icon="share-o"
-          iconSize={16}
+          icon="text-share-o"
+          iconSize={20}
           isLoading={isSharing}
           onPress={shareMessage}
           testID="share-button"

package/src/hooks/messageActions/useAudioPlayer.ts

@@ -1,11 +1,12 @@
 /**
  * useAudioPlayer Hook - react-native-track-player version
  */
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import TrackPlayer, {
   Event,
   Capability,
   State,
+  AppKilledPlaybackBehavior,
 } from 'react-native-track-player';
 
 import ReactNativeBlobUtil from 'react-native-blob-util';
@@ -33,14 +34,25 @@ interface UseAudioPlayerReturn {
 // Register playback service BEFORE setupPlayer
 TrackPlayer.registerPlaybackService(() => PlaybackService);
 
+export const DefaultAudioServiceBehaviour =
+  AppKilledPlaybackBehavior.StopPlaybackAndRemoveNotification;
+
 // --- INIT PLAYER ONE TIME ---
 let playerInitialized = false;
 const setupPlayer = async () => {
   if (playerInitialized) return;
 
   try {
-    await TrackPlayer.setupPlayer();
+    try {
+      await TrackPlayer.setupPlayer({
+        autoHandleInterruptions: true,
+      });
+    } catch (setupError) {
+      console.warn('Setup with options failed, trying without options...');
+      await TrackPlayer.setupPlayer();
+    }
 
+    // Update options
     await TrackPlayer.updateOptions({
       capabilities: [Capability.Play, Capability.Pause, Capability.Stop],
       compactCapabilities: [Capability.Play, Capability.Pause],
@@ -49,10 +61,21 @@ const setupPlayer = async () => {
         Capability.Pause,
         Capability.Stop,
       ],
+      android: {
+        appKilledPlaybackBehavior: DefaultAudioServiceBehaviour,
+      },
+      progressUpdateEventInterval: 2,
     });
+
     playerInitialized = true;
   } catch (e) {
     console.error('Error initializing TrackPlayer:', e);
+
+    // Log more details for debugging
+    if (e instanceof Error) {
+      console.error('Error message:', e.message);
+    }
+    throw e; // Re-throw to indicate setup failed
   }
 };
 
@@ -76,6 +99,10 @@ export const useAudioPlayer = ({
     stopPlayback: storeStopPlayback,
   } = useAudioPlayerStore();
 
+  // Track if we're in the middle of a user action
+  // This prevents event listener from overriding state immediately after user click
+  const isUserActionInProgressRef = useRef(false);
+
   const isThisMessagePlaying = currentMessageId === messageId && isPlaying;
   const isThisMessageLoading = currentMessageId === messageId && isLoading;
   const isThisMessagePaused =
@@ -142,6 +169,8 @@ export const useAudioPlayer = ({
   const playAudio = useCallback(
     async (audioPath: string) => {
       try {
+        isUserActionInProgressRef.current = true;
+
         await setupPlayer();
         await TrackPlayer.reset();
 
@@ -151,11 +180,24 @@ export const useAudioPlayer = ({
           title: `Message Audio`,
           artist: 'Assistant',
         };
-
-        await TrackPlayer.add([track]);
-        await TrackPlayer.play();
+        try {
+          await TrackPlayer.add([track]);
+        } catch (err) {
+          console.log('Failed to add track:', err);
+        }
+        try {
+          await TrackPlayer.play();
+        } catch (err) {
+          console.log('Failed to play track:', err);
+        }
         setIsPlaying(true);
+
+        // Release lock after a short delay
+        setTimeout(() => {
+          isUserActionInProgressRef.current = false;
+        }, 300);
       } catch (err) {
+        isUserActionInProgressRef.current = false;
         console.error('Failed to play audio:', err);
         throw new Error('Không thể phát âm thanh');
       }
@@ -166,9 +208,17 @@ export const useAudioPlayer = ({
   // === PAUSE ===
   const pauseAudio = useCallback(async () => {
     try {
+      isUserActionInProgressRef.current = true;
+
       await TrackPlayer.pause();
       setIsPlaying(false);
+
+      // Release lock after a short delay
+      setTimeout(() => {
+        isUserActionInProgressRef.current = false;
+      }, 300);
     } catch (e) {
+      isUserActionInProgressRef.current = false;
       console.warn('Pause failed:', e);
     }
   }, [setIsPlaying]);
@@ -184,6 +234,24 @@ export const useAudioPlayer = ({
     }
   }, [storeStopPlayback]);
 
+  // === RESUME (for paused audio) ===
+  const resumeAudio = useCallback(async () => {
+    try {
+      isUserActionInProgressRef.current = true;
+
+      await TrackPlayer.play();
+      setIsPlaying(true);
+
+      // Release lock after a short delay
+      setTimeout(() => {
+        isUserActionInProgressRef.current = false;
+      }, 300);
+    } catch (e) {
+      isUserActionInProgressRef.current = false;
+      console.warn('Resume failed:', e);
+    }
+  }, [setIsPlaying]);
+
   // === TOGGLE ===
   const togglePlayback = useCallback(async () => {
     try {
@@ -203,8 +271,7 @@ export const useAudioPlayer = ({
 
       // Case 2: Click on the SAME message that was paused → Resume it
       if (currentMessageId === messageId && !isPlaying) {
-        await TrackPlayer.play();
-        setIsPlaying(true);
+        await resumeAudio();
         logGA(GAEvents.chatDetailVoiceBtnTap, {
           conversation_id: sessionId,
           message_id: messageId,
@@ -260,12 +327,15 @@ export const useAudioPlayer = ({
     fetchAudio,
     playAudio,
     pauseAudio,
+    resumeAudio,
     stopPlayback,
     logGA,
   ]);
 
   // === PLAYER EVENTS ===
   useEffect(() => {
+    let stateUpdateTimeout: NodeJS.Timeout | null = null;
+
     // Listen for queue end
     const queueEndSubscription = TrackPlayer.addEventListener(
       Event.PlaybackQueueEnded,
@@ -281,26 +351,50 @@ export const useAudioPlayer = ({
     const stateSubscription = TrackPlayer.addEventListener(
       Event.PlaybackState,
       async () => {
-        const state = await TrackPlayer.getState();
+        // Skip if we're in the middle of a user action
+        if (isUserActionInProgressRef.current) {
+          return;
+        }
 
-        // Only update if this is the current message
-        if (currentMessageId === messageId) {
-          if (state === State.Playing) {
-            setIsPlaying(true);
-          } else if (state === State.Paused || state === State.Ready) {
-            setIsPlaying(false);
-          } else if (state === State.Stopped) {
-            storeStopPlayback();
-          }
+        // Clear previous timeout
+        if (stateUpdateTimeout) {
+          clearTimeout(stateUpdateTimeout);
         }
+
+        // Add small delay to let the state stabilize
+        stateUpdateTimeout = setTimeout(async () => {
+          // Double check if user action finished during timeout
+          if (isUserActionInProgressRef.current) {
+            return;
+          }
+          const state = await TrackPlayer.getState();
+
+          // Only update if this is the current message
+          if (currentMessageId === messageId) {
+            // Prevent overriding state if it's already correct
+            if (state === State.Playing && !isPlaying) {
+              setIsPlaying(true);
+            } else if (
+              (state === State.Paused || state === State.Ready) &&
+              isPlaying
+            ) {
+              setIsPlaying(false);
+            } else if (state === State.Stopped) {
+              storeStopPlayback();
+            }
+          }
+        }, 150); // 150ms delay to let state stabilize
       }
     );
 
     return () => {
+      if (stateUpdateTimeout) {
+        clearTimeout(stateUpdateTimeout);
+      }
       queueEndSubscription?.remove?.();
       stateSubscription?.remove?.();
     };
-  }, [currentMessageId, messageId, storeStopPlayback, setIsPlaying]);
+  }, [currentMessageId, messageId, storeStopPlayback, setIsPlaying, isPlaying]);
 
   // === CLEANUP CACHE WHEN SESSION CHANGES ===
   const cleanupAudioCache = useCallback(async () => {