Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-05-11 20:40:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

correctly recognize fullscreen video on safari

Browse source
This commit is contained in:
Timothy Z. 2026-05-06 22:03:09 +03:00
parent 313df06166
commit 3592d0942c
1 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/common/Fullscreen/FullscreenProvider.tsx
View file

@ -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<FullscreenContextValue>(
() => [fullscreen, requestFullscreen, exitFullscreen, toggleFullscreen, supported, setVideoElement],