Use prefixed versions of other fullscreen APIs too

src/@types/global.d.ts

@@ -17,6 +17,12 @@ limitations under the License.
 import "matrix-js-sdk/src/@types/global";
 
 declare global {
+  interface Document {
+    // Safari only supports this prefixed, so tell the type system about it
+    webkitExitFullscreen: () => void;
+    webkitFullscreenElement: HTMLElement | null;
+  }
+
   interface Window {
     // TODO: https://gitlab.matrix.org/matrix-org/olm/-/issues/10
     OLM_OPTIONS: Record<string, string>;

src/video-grid/useFullscreen.tsx

@@ -54,16 +54,23 @@ export function useFullscreen(ref: React.RefObject<HTMLElement>): {
   );
 
   const onFullscreenChanged = useCallback(() => {
-    if (!document.fullscreenElement) {
+    if (!document.fullscreenElement && !document.webkitFullscreenElement) {
       setFullscreenParticipant(null);
     }
   }, [setFullscreenParticipant]);
 
   useEventTarget(ref.current, "fullscreenchange", onFullscreenChanged);
+  useEventTarget(ref.current, "webkitfullscreenchange", onFullscreenChanged);
 
   useEffect(() => {
     if (disposed) {
-      document.exitFullscreen();
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      } else {
+        logger.error("No available fullscreen API!");
+      }
       setFullscreenParticipant(null);
     }
   }, [disposed]);