diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index bd3cf39e..12e88968 100644 --- a/src/@types/global.d.ts +++ b/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; diff --git a/src/video-grid/useFullscreen.tsx b/src/video-grid/useFullscreen.tsx index e0c2e608..88968286 100644 --- a/src/video-grid/useFullscreen.tsx +++ b/src/video-grid/useFullscreen.tsx @@ -54,16 +54,23 @@ export function useFullscreen(ref: React.RefObject): { ); 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]);