Merge branch 'main' into fix/clnp-6892

Author: sf-tyler-jeong

src/hooks/VoicePlayer/index.tsx

@@ -36,6 +36,7 @@ export interface VoicePlayerContext {
   play: (props: VoicePlayerPlayProps) => void;
   pause: (groupKey?: string) => void;
   stop: (text?: string) => void;
+  reset: (groupKey: string) => void;
   voicePlayerStore: VoicePlayerInitialState;
 }
 
@@ -52,6 +53,7 @@ const Context = createContext<VoicePlayerContext>({
   play: noop,
   pause: noop,
   stop: noop,
+  reset: noop,
   voicePlayerStore: VoicePlayerStoreDefaultValue,
 });
 
@@ -75,6 +77,16 @@ export const VoicePlayerProvider = ({
     }
   };
 
+  const reset = (groupKey: string) => {
+    if (groupKey === currentGroupKey && currentPlayer) {
+      currentPlayer.pause();
+    }
+    voicePlayerDispatcher({
+      type: RESET_AUDIO_UNIT,
+      payload: { groupKey },
+    });
+  };
+
   const pause = (groupKey?: string) => {
     if (currentPlayer) {
       if (groupKey === currentGroupKey) {
@@ -210,6 +222,7 @@ export const VoicePlayerProvider = ({
       play,
       pause,
       stop,
+      reset,
       voicePlayerStore,
     }}>
       {/**

src/hooks/VoicePlayer/useVoicePlayer.tsx

@@ -1,9 +1,9 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useVoicePlayerContext } from '.';
 import { VOICE_PLAYER_AUDIO_ID, VOICE_MESSAGE_MIME_TYPE } from '../../utils/consts';
 import { useVoiceRecorderContext } from '../VoiceRecorder';
 
-import { AudioUnitDefaultValue, VoicePlayerStatusType } from './dux/initialState';
+import { AudioUnitDefaultValue, VOICE_PLAYER_STATUS, VoicePlayerStatusType } from './dux/initialState';
 import { generateGroupKey } from './utils';
 
 export interface UseVoicePlayerProps {
@@ -35,10 +35,13 @@ export const useVoicePlayer = ({
     play,
     pause,
     stop,
+    reset,
     voicePlayerStore,
   } = useVoicePlayerContext();
   const { isRecordable } = useVoiceRecorderContext();
   const currentAudioUnit = voicePlayerStore?.audioStorage?.[groupKey] || AudioUnitDefaultValue();
+  const currentAudioUnitRef = useRef(currentAudioUnit);
+  currentAudioUnitRef.current = currentAudioUnit;
 
   const playVoicePlayer = () => {
     if (!isRecordable) {
@@ -62,9 +65,13 @@ export const useVoicePlayer = ({
   useEffect(() => {
     return () => {
       if (audioFile || audioFileUrl) {
-        // Can't get the current AudioPlayer through the React hooks(useReducer or useState) in this scope
+        // Pause via DOM because reset() captured in this closure has stale currentPlayer
         const voiceAudioPlayerElement = document.getElementById(VOICE_PLAYER_AUDIO_ID);
         (voiceAudioPlayerElement as HTMLAudioElement)?.pause?.();
+        const status = currentAudioUnitRef.current?.playingStatus;
+        if (status && status !== VOICE_PLAYER_STATUS.IDLE) {
+          reset?.(groupKey);
+        }
       }
     };
   }, []);

src/hooks/__tests__/useTypingLifecycle.spec.tsx

@@ -0,0 +1,177 @@
+import { renderHook, act } from '@testing-library/react';
+import { useTypingLifecycle } from '../useTypingLifecycle';
+
+const makeChannel = (url = 'channel-a') => ({
+  url,
+  startTyping: jest.fn(),
+  endTyping: jest.fn(),
+});
+
+describe('useTypingLifecycle', () => {
+  it('startTyping calls channel.startTyping', () => {
+    const channel = makeChannel();
+    const { result } = renderHook(() => useTypingLifecycle(channel));
+
+    act(() => result.current.startTyping());
+
+    expect(channel.startTyping).toHaveBeenCalledTimes(1);
+    expect(channel.endTyping).not.toHaveBeenCalled();
+  });
+
+  it('stopTyping calls channel.endTyping', () => {
+    const channel = makeChannel();
+    const { result } = renderHook(() => useTypingLifecycle(channel));
+
+    act(() => result.current.startTyping());
+    act(() => result.current.stopTyping());
+
+    expect(channel.endTyping).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls endTyping on unmount when typing was active', () => {
+    const channel = makeChannel();
+    const { result, unmount } = renderHook(() => useTypingLifecycle(channel));
+
+    act(() => result.current.startTyping());
+    unmount();
+
+    expect(channel.endTyping).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call endTyping on unmount when typing was never active', () => {
+    const channel = makeChannel();
+    const { unmount } = renderHook(() => useTypingLifecycle(channel));
+
+    unmount();
+
+    expect(channel.endTyping).not.toHaveBeenCalled();
+  });
+
+  it('does not duplicate endTyping when stopTyping called before unmount', () => {
+    const channel = makeChannel();
+    const { result, unmount } = renderHook(() => useTypingLifecycle(channel));
+
+    act(() => result.current.startTyping());
+    act(() => result.current.stopTyping());
+    unmount();
+
+    expect(channel.endTyping).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls endTyping on previous channel when channel changes', () => {
+    const channelA = makeChannel('a');
+    const channelB = makeChannel('b');
+
+    const { result, rerender } = renderHook(
+      ({ channel }) => useTypingLifecycle(channel),
+      { initialProps: { channel: channelA } },
+    );
+
+    act(() => result.current.startTyping());
+    expect(channelA.startTyping).toHaveBeenCalledTimes(1);
+
+    rerender({ channel: channelB });
+
+    expect(channelA.endTyping).toHaveBeenCalledTimes(1);
+    expect(channelB.endTyping).not.toHaveBeenCalled();
+  });
+
+  it('calls endTyping when active toggles to false', () => {
+    const channel = makeChannel();
+
+    const { result, rerender } = renderHook(
+      ({ active }) => useTypingLifecycle(channel, active),
+      { initialProps: { active: true } },
+    );
+
+    act(() => result.current.startTyping());
+    rerender({ active: false });
+
+    expect(channel.endTyping).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call endTyping when active toggles to false without typing', () => {
+    const channel = makeChannel();
+
+    const { rerender } = renderHook(
+      ({ active }) => useTypingLifecycle(channel, active),
+      { initialProps: { active: true } },
+    );
+
+    rerender({ active: false });
+
+    expect(channel.endTyping).not.toHaveBeenCalled();
+  });
+
+  it('handles null channel gracefully', () => {
+    const { result, unmount } = renderHook(() => useTypingLifecycle(null));
+
+    expect(() => {
+      act(() => result.current.startTyping());
+      act(() => result.current.stopTyping());
+      unmount();
+    }).not.toThrow();
+  });
+
+  describe('same-URL channel re-instantiation', () => {
+    it('cleans up on the latest instance when typing starts after re-instantiation', () => {
+      const original = makeChannel('a');
+      const refreshed = makeChannel('a');
+
+      const { result, rerender, unmount } = renderHook(
+        ({ channel }) => useTypingLifecycle(channel),
+        { initialProps: { channel: original } },
+      );
+
+      rerender({ channel: refreshed });
+      act(() => result.current.startTyping());
+
+      expect(refreshed.startTyping).toHaveBeenCalledTimes(1);
+      expect(original.startTyping).not.toHaveBeenCalled();
+
+      unmount();
+
+      expect(refreshed.endTyping).toHaveBeenCalledTimes(1);
+      expect(original.endTyping).not.toHaveBeenCalled();
+    });
+
+    it('cleans up on the original instance if typing started before re-instantiation', () => {
+      const original = makeChannel('a');
+      const refreshed = makeChannel('a');
+
+      const { result, rerender, unmount } = renderHook(
+        ({ channel }) => useTypingLifecycle(channel),
+        { initialProps: { channel: original } },
+      );
+
+      act(() => result.current.startTyping());
+      rerender({ channel: refreshed });
+      unmount();
+
+      expect(original.endTyping).toHaveBeenCalledTimes(1);
+      expect(refreshed.endTyping).not.toHaveBeenCalled();
+    });
+
+    it('uses the latest instance for endTyping when typing is restarted after re-instantiation', () => {
+      const original = makeChannel('a');
+      const refreshed = makeChannel('a');
+
+      const { result, rerender, unmount } = renderHook(
+        ({ channel }) => useTypingLifecycle(channel),
+        { initialProps: { channel: original } },
+      );
+
+      act(() => result.current.startTyping());
+      rerender({ channel: refreshed });
+      act(() => result.current.startTyping());
+      unmount();
+
+      expect(original.startTyping).toHaveBeenCalledTimes(1);
+      expect(refreshed.startTyping).toHaveBeenCalledTimes(1);
+      // endTyping should hit only the refreshed instance (the most recent
+      // startTyping target), not the original.
+      expect(original.endTyping).not.toHaveBeenCalled();
+      expect(refreshed.endTyping).toHaveBeenCalledTimes(1);
+    });
+  });
+});

src/hooks/useTypingLifecycle.ts

@@ -0,0 +1,53 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+type TypingChannel = {
+  url?: string;
+  startTyping?: () => void;
+  endTyping?: () => void;
+} | null | undefined;
+
+/**
+ * Tracks typing lifecycle on a Sendbird channel and ensures `endTyping` is
+ * sent when the channel changes, the `active` flag toggles to false, or the
+ * component unmounts. Returns memoized `startTyping`/`stopTyping` helpers
+ * that the caller wires to input events.
+ *
+ * @param channel - the channel currently being typed in
+ * @param active  - when set to false, the cleanup runs and clears typing
+ *                  state. Useful for edit-mode wrappers that pass `showEdit`
+ *                  so closing the edit panel emits `endTyping`.
+ */
+export function useTypingLifecycle(
+  channel: TypingChannel,
+  active: boolean = true,
+): { startTyping: () => void; stopTyping: () => void } {
+  // Holds the channel that startTyping was last invoked on. Storing the
+  // actual reference (rather than a boolean flag) ensures endTyping is sent
+  // on the same channel instance that received startTyping, even if the
+  // channel object is re-instantiated under the same URL.
+  const typingChannelRef = useRef<TypingChannel>(null);
+
+  const startTyping = useCallback(() => {
+    channel?.startTyping?.();
+    typingChannelRef.current = channel ?? null;
+  }, [channel]);
+
+  const stopTyping = useCallback(() => {
+    typingChannelRef.current?.endTyping?.();
+    typingChannelRef.current = null;
+  }, []);
+
+  // Run cleanup on channel URL change, active toggle, or unmount.
+  // Reads typingChannelRef so endTyping is sent on the channel where
+  // startTyping was actually invoked.
+  useEffect(() => {
+    return () => {
+      if (typingChannelRef.current) {
+        typingChannelRef.current.endTyping?.();
+        typingChannelRef.current = null;
+      }
+    };
+  }, [channel?.url, active]);
+
+  return { startTyping, stopTyping };
+}

src/lib/Sendbird/__tests__/SendbirdProvider.spec.tsx

@@ -55,11 +55,71 @@ describe('SendbirdProvider', () => {
     expect(mockActions.connect).toHaveBeenCalledWith(
       expect.objectContaining({
         appId: 'mockAppId',
+        isNewApp: true,
         userId: 'mockUserId',
       }),
     );
   });
 
+  it('should preserve the legacy isNewApp behavior across app and user changes', () => {
+    const { rerender } = render(
+      <SendbirdContextProvider appId="mockAppId" userId="mockUserId">
+        <div data-testid="child">Child Component</div>
+      </SendbirdContextProvider>,
+    );
+
+    expect(mockActions.connect).toHaveBeenNthCalledWith(1, expect.objectContaining({
+      appId: 'mockAppId',
+      isNewApp: true,
+      userId: 'mockUserId',
+    }));
+
+    rerender(
+      <SendbirdContextProvider appId="mockAppId" userId="nextUserId">
+        <div data-testid="child">Child Component</div>
+      </SendbirdContextProvider>,
+    );
+
+    expect(mockActions.connect).toHaveBeenNthCalledWith(2, expect.objectContaining({
+      appId: 'mockAppId',
+      isNewApp: false,
+      userId: 'nextUserId',
+    }));
+
+    rerender(
+      <SendbirdContextProvider appId="nextAppId" userId="nextUserId">
+        <div data-testid="child">Child Component</div>
+      </SendbirdContextProvider>,
+    );
+
+    expect(mockActions.connect).toHaveBeenNthCalledWith(3, expect.objectContaining({
+      appId: 'nextAppId',
+      isNewApp: true,
+      userId: 'nextUserId',
+    }));
+  });
+
+  it('should reconnect on StrictMode remount with the same appId and userId', () => {
+    render(
+      <React.StrictMode>
+        <SendbirdContextProvider appId="mockAppId" userId="mockUserId">
+          <div data-testid="child">Child Component</div>
+        </SendbirdContextProvider>
+      </React.StrictMode>,
+    );
+
+    expect(mockActions.connect).toHaveBeenCalledTimes(2);
+    expect(mockActions.connect).toHaveBeenNthCalledWith(1, expect.objectContaining({
+      appId: 'mockAppId',
+      isNewApp: true,
+      userId: 'mockUserId',
+    }));
+    expect(mockActions.connect).toHaveBeenNthCalledWith(2, expect.objectContaining({
+      appId: 'mockAppId',
+      userId: 'mockUserId',
+    }));
+  });
+
   it('should call disconnect on unmount', () => {
     const { unmount } = render(
       <SendbirdContextProvider appId="mockAppId" userId="mockUserId">