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 = ( 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 = ( }} onBackClick={() => { setPanel(PANELS.CHANNEL_LIST); + pause(ALL); }} isReactionEnabled={isReactionEnabled} showSearchIcon={showSearchIcon} @@ -185,6 +189,7 @@ export const MobileLayout: React.FC = ( 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,