Merge pull request #541 from vector-im/SimonBrandner/fix/full-screen

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",

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();

src/video-grid/useFullscreen.tsx

@@ -15,17 +15,19 @@ 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<HTMLElement>): {
   toggleFullscreen: (participant: Participant) => void;
   fullscreenParticipant: Participant | null;
 } {
   const [fullscreenParticipant, setFullscreenParticipant] =
     useState<Participant | null>(null);
+  const { disposed } = useCallFeed(fullscreenParticipant?.callFeed);
 
   const toggleFullscreen = useCallback(
     (participant: Participant) => {
@@ -52,5 +54,12 @@ export function useFullscreen(ref: React.RefObject<HTMLElement>): {
 
   useEventTarget(ref.current, "fullscreenchange", onFullscreenChanged);
 
+  useEffect(() => {
+    if (disposed) {
+      document.exitFullscreen();
+      setFullscreenParticipant(null);
+    }
+  }, [disposed]);
+
   return { toggleFullscreen, fullscreenParticipant };
 }