From 440522d46388b3af083356236dfa9fb22dce4f43 Mon Sep 17 00:00:00 2001
From: Sravan S <sravan-s@protonmail.com>
Date: Tue, 6 Jun 2023 11:04:40 +0900
Subject: [PATCH] fix: Pause voice when moved back

---
 src/hooks/VoicePlayer/index.tsx       | 8 +++++++-
 src/modules/App/MobileLayout.tsx      | 5 +++++
 src/ui/VoiceMessageItemBody/index.tsx | 3 +++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/hooks/VoicePlayer/index.tsx b/src/hooks/VoicePlayer/index.tsx
index e7518a39d..e2219ca20 100644
--- a/src/hooks/VoicePlayer/index.tsx
+++ b/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 = ({
diff --git a/src/modules/App/MobileLayout.tsx b/src/modules/App/MobileLayout.tsx
index 97390e351..6655453c2 100644
--- a/src/modules/App/MobileLayout.tsx
+++ b/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);
diff --git a/src/ui/VoiceMessageItemBody/index.tsx b/src/ui/VoiceMessageItemBody/index.tsx
index 3d2df0af7..85c09bb97 100644
--- a/src/ui/VoiceMessageItemBody/index.tsx
+++ b/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,