Fix fullscreen on Safari (#814)

* Fix fullscreen on Safari

Safari only supports it via the webkit prefix

Fixes https://github.com/vector-im/element-call/issues/539

* NOT THAT LOGGER, VSCODE

src/@types/global.d.ts

@@ -27,4 +27,9 @@ declare global {
   interface MediaElement extends HTMLVideoElement {
     setSinkId: (id: string) => void;
   }
+
+  interface HTMLElement {
+    // Safari only supports this prefixed, so tell the type system about it
+    webkitRequestFullscreen: () => void;
+  }
 }

src/video-grid/useFullscreen.tsx

@@ -15,6 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { logger } from "matrix-js-sdk/src/logger";
 import { useCallback, useEffect, useState } from "react";
 
 import { useEventTarget } from "../useEvents";
@@ -36,7 +37,13 @@ export function useFullscreen(ref: React.RefObject<HTMLElement>): {
         setFullscreenParticipant(null);
       } else {
         try {
-          ref.current.requestFullscreen();
+          if (ref.current.requestFullscreen) {
+            ref.current.requestFullscreen();
+          } else if (ref.current.webkitRequestFullscreen) {
+            ref.current.webkitRequestFullscreen();
+          } else {
+            logger.error("No available fullscreen API!");
+          }
           setFullscreenParticipant(tileDes);
         } catch (error) {
           console.warn("Failed to fullscreen:", error);