From f4047593db461767fa2954b47323d4819954c8cc Mon Sep 17 00:00:00 2001 From: yash-rajpal Date: Tue, 28 Jul 2026 20:50:23 +0530 Subject: [PATCH 1/3] stop audio player on logout --- .../MediaPlayerProvider/MediaPlayerProvider.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/apps/meteor/client/providers/MediaPlayerProvider/MediaPlayerProvider.tsx b/apps/meteor/client/providers/MediaPlayerProvider/MediaPlayerProvider.tsx index ac0c843dc94e8..a8d0221d09084 100644 --- a/apps/meteor/client/providers/MediaPlayerProvider/MediaPlayerProvider.tsx +++ b/apps/meteor/client/providers/MediaPlayerProvider/MediaPlayerProvider.tsx @@ -1,6 +1,7 @@ import { useMergedRefs, useStableCallback } from '@rocket.chat/fuselage-hooks'; +import { useUserId } from '@rocket.chat/ui-contexts'; import type { ReactNode } from 'react'; -import { useCallback, useMemo, useRef, useState } from 'react'; +import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import type { MediaPlayerContextValue, PersistentAudioTrack } from './MediaPlayerContext'; import { MediaPlayerContext } from './MediaPlayerContext'; @@ -27,6 +28,7 @@ const MediaPlayerProvider = ({ children }: MediaPlayerProviderProps) => { const [currentTime, setCurrentTime] = useState(0); const [duration, setDuration] = useState(0); const [playbackRate, setPlaybackRate] = useState(1); + const userId = useUserId(); const trackRef = useRef(null); trackRef.current = track; @@ -100,6 +102,13 @@ const MediaPlayerProvider = ({ children }: MediaPlayerProviderProps) => { setDuration(0); }); + useEffect(() => { + if (userId || !playing) { + return; + } + close(); + }, [userId, playing, close]); + const isActive = useCallback((id: string) => trackRef.current?.id === id, []); const value = useMemo( From 50fdd372ee12d3ecdadd0eed733d1c9f36d6ec94 Mon Sep 17 00:00:00 2001 From: yash-rajpal Date: Tue, 28 Jul 2026 23:31:00 +0530 Subject: [PATCH 2/3] use useOnLogout hook --- .../MediaPlayerProvider/MediaPlayerProvider.tsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/apps/meteor/client/providers/MediaPlayerProvider/MediaPlayerProvider.tsx b/apps/meteor/client/providers/MediaPlayerProvider/MediaPlayerProvider.tsx index a8d0221d09084..042f43d251413 100644 --- a/apps/meteor/client/providers/MediaPlayerProvider/MediaPlayerProvider.tsx +++ b/apps/meteor/client/providers/MediaPlayerProvider/MediaPlayerProvider.tsx @@ -1,5 +1,5 @@ import { useMergedRefs, useStableCallback } from '@rocket.chat/fuselage-hooks'; -import { useUserId } from '@rocket.chat/ui-contexts'; +import { useOnLogout } from '@rocket.chat/ui-contexts'; import type { ReactNode } from 'react'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; @@ -28,7 +28,7 @@ const MediaPlayerProvider = ({ children }: MediaPlayerProviderProps) => { const [currentTime, setCurrentTime] = useState(0); const [duration, setDuration] = useState(0); const [playbackRate, setPlaybackRate] = useState(1); - const userId = useUserId(); + const onLogout = useOnLogout(); const trackRef = useRef(null); trackRef.current = track; @@ -102,12 +102,7 @@ const MediaPlayerProvider = ({ children }: MediaPlayerProviderProps) => { setDuration(0); }); - useEffect(() => { - if (userId || !playing) { - return; - } - close(); - }, [userId, playing, close]); + useEffect(() => onLogout(close), [onLogout, close]); const isActive = useCallback((id: string) => trackRef.current?.id === id, []); From 19a23747375c60b8d5a8ac7460cf925f7d982ad8 Mon Sep 17 00:00:00 2001 From: yash-rajpal Date: Thu, 30 Jul 2026 21:41:55 +0530 Subject: [PATCH 3/3] fix review: unmount media player provider on logout --- .../providers/MediaPlayerProvider/MediaPlayerProvider.tsx | 6 +----- apps/meteor/client/providers/MeteorProvider.tsx | 5 +---- apps/meteor/client/views/root/MainLayout/LoggedInArea.tsx | 3 ++- 3 files changed, 4 insertions(+), 10 deletions(-) diff --git a/apps/meteor/client/providers/MediaPlayerProvider/MediaPlayerProvider.tsx b/apps/meteor/client/providers/MediaPlayerProvider/MediaPlayerProvider.tsx index 042f43d251413..ac0c843dc94e8 100644 --- a/apps/meteor/client/providers/MediaPlayerProvider/MediaPlayerProvider.tsx +++ b/apps/meteor/client/providers/MediaPlayerProvider/MediaPlayerProvider.tsx @@ -1,7 +1,6 @@ import { useMergedRefs, useStableCallback } from '@rocket.chat/fuselage-hooks'; -import { useOnLogout } from '@rocket.chat/ui-contexts'; import type { ReactNode } from 'react'; -import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import { useCallback, useMemo, useRef, useState } from 'react'; import type { MediaPlayerContextValue, PersistentAudioTrack } from './MediaPlayerContext'; import { MediaPlayerContext } from './MediaPlayerContext'; @@ -28,7 +27,6 @@ const MediaPlayerProvider = ({ children }: MediaPlayerProviderProps) => { const [currentTime, setCurrentTime] = useState(0); const [duration, setDuration] = useState(0); const [playbackRate, setPlaybackRate] = useState(1); - const onLogout = useOnLogout(); const trackRef = useRef(null); trackRef.current = track; @@ -102,8 +100,6 @@ const MediaPlayerProvider = ({ children }: MediaPlayerProviderProps) => { setDuration(0); }); - useEffect(() => onLogout(close), [onLogout, close]); - const isActive = useCallback((id: string) => trackRef.current?.id === id, []); const value = useMemo( diff --git a/apps/meteor/client/providers/MeteorProvider.tsx b/apps/meteor/client/providers/MeteorProvider.tsx index 5c12beb89f09d..4bf5bbc42c943 100644 --- a/apps/meteor/client/providers/MeteorProvider.tsx +++ b/apps/meteor/client/providers/MeteorProvider.tsx @@ -10,7 +10,6 @@ import { DeviceProvider } from './DeviceProvider/DeviceProvider'; import EmojiPickerProvider from './EmojiPickerProvider'; import LayoutProvider from './LayoutProvider'; import MediaCallProvider from './MediaCallProvider'; -import MediaPlayerProvider from './MediaPlayerProvider'; import OmnichannelProvider from './OmnichannelProvider'; import RouterProvider from './RouterProvider'; import ServerProvider from './ServerProvider'; @@ -49,9 +48,7 @@ const MeteorProvider = ({ children }: MeteorProviderProps) => ( - - {children} - + {children} diff --git a/apps/meteor/client/views/root/MainLayout/LoggedInArea.tsx b/apps/meteor/client/views/root/MainLayout/LoggedInArea.tsx index 82da979546b8e..df08b936db026 100644 --- a/apps/meteor/client/views/root/MainLayout/LoggedInArea.tsx +++ b/apps/meteor/client/views/root/MainLayout/LoggedInArea.tsx @@ -1,6 +1,7 @@ import { useUser } from '@rocket.chat/ui-contexts'; import type { ReactNode } from 'react'; +import MediaPlayerProvider from '../../../providers/MediaPlayerProvider'; import { useCustomEmoji } from '../hooks/loggedIn/useCustomEmoji'; import { useE2EEncryption } from '../hooks/loggedIn/useE2EEncryption'; import { useFingerprintChange } from '../hooks/loggedIn/useFingerprintChange'; @@ -43,7 +44,7 @@ const LoggedInArea = ({ children }: LoggedInAreaProps) => { useLogoutCleanup(); useE2EEncryption(); - return children; + return {children}; }; export default LoggedInArea;