From 3592d0942c5d35b686f3294a66d61d2dec0dc934 Mon Sep 17 00:00:00 2001 From: "Timothy Z." Date: Wed, 6 May 2026 22:03:09 +0300 Subject: [PATCH] correctly recognize fullscreen video on safari --- src/common/Fullscreen/FullscreenProvider.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/common/Fullscreen/FullscreenProvider.tsx b/src/common/Fullscreen/FullscreenProvider.tsx index 8507b5524..9bc4c26b8 100644 --- a/src/common/Fullscreen/FullscreenProvider.tsx +++ b/src/common/Fullscreen/FullscreenProvider.tsx @@ -76,6 +76,8 @@ const FullscreenProvider = ({ children }: Props) => { onShortcut('fullscreen', toggleFullscreenFromShortcut, [toggleFullscreenFromShortcut]); useEffect(() => { + const videoElement = videoElementRef.current; + const onWindowVisibilityChanged = (state: WindowVisibility) => { setFullscreen(state.isFullscreen === true); }; @@ -84,6 +86,10 @@ const FullscreenProvider = ({ children }: Props) => { setFullscreen(document.fullscreenElement === document.documentElement); }; + const onWebkitFullscreenChange = () => { + setFullscreen((videoElement as any)?.webkitDisplayingFullscreen === true); + }; + const onKeyDown = (event: KeyboardEvent) => { if (event.code === 'Escape' && escExitFullscreen) { exitFullscreen(); @@ -97,15 +103,17 @@ const FullscreenProvider = ({ children }: Props) => { shell.on('win-visibility-changed', onWindowVisibilityChanged); document.addEventListener('keydown', onKeyDown); document.addEventListener('fullscreenchange', onFullscreenChange); + videoElement?.addEventListener('webkitbeginfullscreen', onWebkitFullscreenChange); + videoElement?.addEventListener('webkitendfullscreen', onWebkitFullscreenChange); return () => { shell.off('win-visibility-changed', onWindowVisibilityChanged); document.removeEventListener('keydown', onKeyDown); document.removeEventListener('fullscreenchange', onFullscreenChange); + videoElement?.removeEventListener('webkitbeginfullscreen', onWebkitFullscreenChange); + videoElement?.removeEventListener('webkitendfullscreen', onWebkitFullscreenChange); }; - }, [shell, toggleFullscreen, exitFullscreen, escExitFullscreen]); - - const supported = shell.active || document.fullscreenEnabled === true; + }, [shell, toggleFullscreen, exitFullscreen, escExitFullscreen, hasVideoElement]); const value = useMemo( () => [fullscreen, requestFullscreen, exitFullscreen, toggleFullscreen, supported, setVideoElement],