fix: Pause voice when moved back (#606)

Is better not to handle this in Message Component
because this is a layout edge case. Customer can decide the 
layout, so they should be able to dictate the UX 

Fixes: https://sendbird.atlassian.net/browse/UIKIT-4031

Author: Sravan S

src/hooks/VoicePlayer/index.tsx

@@ -37,6 +37,8 @@ export interface VoicePlayerContext {
   voicePlayerStore: VoicePlayerInitialState;
 }
 
+export const ALL = 'ALL';
+
 const noop = () => { /* noop */ };
 const VoicePlayerStoreDefaultValue = {
   currentGroupKey: '',
@@ -70,11 +72,15 @@ export const VoicePlayerProvider = ({
     }
   };
 
-  const pause = (groupKey: string) => {
+  const pause = (groupKey: string|null) => {
     if (currentGroupKey === groupKey && currentPlayer !== null) {
       logger.info('VoicePlayer: Pause playing(by group key).');
       currentPlayer?.pause();
     }
+    if (groupKey === ALL) {
+      logger.info('VoicePlayer: Pause playing(all).');
+      currentPlayer?.pause();
+    }
   };
 
   const play = ({

src/modules/App/MobileLayout.tsx

@@ -14,6 +14,7 @@ import MessageSearch from '../MessageSearch';
 import Thread from '../Thread';
 import useSendbirdStateContext from '../../hooks/useSendbirdStateContext';
 import uuidv4 from '../../utils/uuid';
+import { ALL, useVoicePlayerContext } from '../../hooks/VoicePlayer';
 
 enum PANELS {
   CHANNEL_LIST = 'CHANNEL_LIST',
@@ -49,6 +50,8 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (
   const sdk = store?.stores?.sdkStore?.sdk as SendbirdGroupChat;
   const userId = store?.config?.userId;
 
+  const { pause } = useVoicePlayerContext();
+
   const goToMessage = (message?: BaseMessage | null, timeoutCb?: (msgId: number | null) => void) => {
     setStartingPoint?.(message?.createdAt || null);
     setTimeout(() => {
@@ -118,6 +121,7 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (
               }}
               onBackClick={() => {
                 setPanel(PANELS.CHANNEL_LIST);
+                pause(ALL);
               }}
               isReactionEnabled={isReactionEnabled}
               showSearchIcon={showSearchIcon}
@@ -185,6 +189,7 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (
               message={threadTargetMessage}
               onHeaderActionClick={() => {
                 setPanel(PANELS.CHANNEL);
+                pause(ALL);
               }}
               onMoveToParentMessage={({ message, channel }) => {
                 setCurrentChannel(channel);

src/ui/VoiceMessageItemBody/index.tsx

@@ -29,6 +29,9 @@ export const VoiceMessageItemBody = ({
   const [usingReaction, setUsingReaction] = useState(false);
   const {
     play,
+    // do not pause on unmount, because on desktop layout
+    // the component can be paused when it is played from
+    // channel and same message is unmounted from the thread
     pause,
     playbackTime = 0,
     duration,