Add useFullscreen()

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/video-grid/useFullscreen.tsx

@@ -0,0 +1,56 @@
+/*
+Copyright 2022 New Vector Ltd
+
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { useCallback, useState } from "react";
+
+import { Participant } from "../room/InCallView";
+import { useEventTarget } from "../useEvents";
+
+export function useFullscreen(ref: React.RefObject<HTMLElement>): {
+  toggleFullscreen: (participant: Participant) => void;
+  fullscreenParticipant: Participant | null;
+} {
+  const [fullscreenParticipant, setFullscreenParticipant] =
+    useState<Participant | null>(null);
+
+  const toggleFullscreen = useCallback(
+    (participant: Participant) => {
+      if (fullscreenParticipant) {
+        document.exitFullscreen();
+        setFullscreenParticipant(null);
+      } else {
+        try {
+          ref.current.requestFullscreen();
+          setFullscreenParticipant(participant);
+        } catch (error) {
+          console.warn("Failed to fullscreen:", error);
+        }
+      }
+    },
+    [fullscreenParticipant, setFullscreenParticipant, ref]
+  );
+
+  const onFullscreenChanged = useCallback(() => {
+    if (!document.fullscreenElement) {
+      setFullscreenParticipant(null);
+    }
+  }, [setFullscreenParticipant]);
+
+  useEventTarget(ref.current, "fullscreenchange", onFullscreenChanged);
+
+  return { toggleFullscreen, fullscreenParticipant };
+}