diff --git a/src/video-grid/useCallFeed.ts b/src/video-grid/useCallFeed.ts index 1781dbf..9dadff4 100644 --- a/src/video-grid/useCallFeed.ts +++ b/src/video-grid/useCallFeed.ts @@ -26,6 +26,7 @@ interface CallFeedState { videoMuted: boolean; audioMuted: boolean; localVolume: number; + disposed: boolean; stream: MediaStream; purpose: SDPStreamMetadataPurpose; } @@ -37,6 +38,7 @@ function getCallFeedState(callFeed: CallFeed): CallFeedState { videoMuted: callFeed ? callFeed.isVideoMuted() : true, audioMuted: callFeed ? callFeed.isAudioMuted() : true, localVolume: callFeed ? callFeed.getLocalVolume() : 0, + disposed: callFeed ? callFeed.idDisposed() : undefined, stream: callFeed ? callFeed.stream : undefined, purpose: callFeed ? callFeed.purpose : undefined, }; @@ -69,6 +71,7 @@ export function useCallFeed(callFeed: CallFeed): CallFeedState { callFeed.on(CallFeedEvent.MuteStateChanged, onMuteStateChanged); callFeed.on(CallFeedEvent.LocalVolumeChanged, onLocalVolumeChanged); callFeed.on(CallFeedEvent.NewStream, onUpdateCallFeed); + callFeed.on(CallFeedEvent.Disposed, onUpdateCallFeed); } onUpdateCallFeed(); diff --git a/src/video-grid/useFullscreen.tsx b/src/video-grid/useFullscreen.tsx index 2d354a4..232814c 100644 --- a/src/video-grid/useFullscreen.tsx +++ b/src/video-grid/useFullscreen.tsx @@ -15,10 +15,11 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { useCallback, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { Participant } from "../room/InCallView"; import { useEventTarget } from "../useEvents"; +import { useCallFeed } from "./useCallFeed"; export function useFullscreen(ref: React.RefObject): { toggleFullscreen: (participant: Participant) => void; @@ -26,6 +27,7 @@ export function useFullscreen(ref: React.RefObject): { } { const [fullscreenParticipant, setFullscreenParticipant] = useState(null); + const { disposed } = useCallFeed(fullscreenParticipant?.callFeed); const toggleFullscreen = useCallback( (participant: Participant) => { @@ -52,5 +54,12 @@ export function useFullscreen(ref: React.RefObject): { useEventTarget(ref.current, "fullscreenchange", onFullscreenChanged); + useEffect(() => { + if (disposed) { + document.exitFullscreen(); + setFullscreenParticipant(null); + } + }, [disposed]); + return { toggleFullscreen, fullscreenParticipant }; }