diff --git a/package.json b/package.json index 02a0590..2764431 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "classnames": "^2.3.1", "color-hash": "^2.0.1", "events": "^3.3.0", - "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#3334c01191bcd82b5243916284c9a08d08fd9795", + "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#45e56f8cc36c459ed43e405be4206e5e66b3ad98", "matrix-widget-api": "^1.0.0", "mermaid": "^8.13.8", "normalize.css": "^8.0.1", diff --git a/src/video-grid/useCallFeed.ts b/src/video-grid/useCallFeed.ts index 1781dbf..41b6c5c 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.disposed : 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 }; }