From 671170a9da33337f95abb2da0fd5361585f406d8 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 4 May 2026 21:53:44 +0300
Subject: [PATCH 1/4] feat: fullscreen support on safari

---
 src/common/Fullscreen/FullscreenContext.ts    |   2 +
 src/common/Fullscreen/FullscreenProvider.tsx  |  37 +-
 .../HorizontalNavBar/HorizontalNavBar.js      |   6 +-
 .../NavMenu/NavMenuContent.js                 |   6 +-
 src/routes/Player/Player.js                   | 346 +++++++++---------
 src/routes/Player/useMediaSession.ts          |  10 +
 src/routes/Player/useVideo.js                 |   6 +
 7 files changed, 223 insertions(+), 190 deletions(-)

diff --git a/src/common/Fullscreen/FullscreenContext.ts b/src/common/Fullscreen/FullscreenContext.ts
index 1c9599ffb..a9f6e799f 100644
--- a/src/common/Fullscreen/FullscreenContext.ts
+++ b/src/common/Fullscreen/FullscreenContext.ts
@@ -7,6 +7,8 @@ export type FullscreenContextValue = readonly [
     requestFullscreen: () => Promise<void> | void,
     exitFullscreen: () => void,
     toggleFullscreen: () => void,
+    supported: boolean,
+    setVideoElement: (el: HTMLVideoElement | null) => void,
 ];
 
 const FullscreenContext = createContext<FullscreenContextValue | null>(null);
diff --git a/src/common/Fullscreen/FullscreenProvider.tsx b/src/common/Fullscreen/FullscreenProvider.tsx
index 2300602c5..60814e109 100644
--- a/src/common/Fullscreen/FullscreenProvider.tsx
+++ b/src/common/Fullscreen/FullscreenProvider.tsx
@@ -1,6 +1,6 @@
 // Copyright (C) 2017-2026 Smart code 203358507
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { withCoreSuspender } from '../CoreSuspender';
 import onShortcut from '../Shortcuts/onShortcut';
 import useSettings from '../useSettings';
@@ -21,35 +21,46 @@ const isTextInputFocused = () => {
             activeElement.isContentEditable);
 };
 
+const hasWebkitFullscreen = typeof HTMLVideoElement !== 'undefined' &&
+    typeof HTMLVideoElement.prototype.webkitEnterFullscreen === 'function';
+
 const FullscreenProvider = ({ children }: Props) => {
     const shell = useShell();
     const [settings] = useSettings();
     const escExitFullscreen = settings.escExitFullscreen;
 
+    const videoElementRef = useRef<HTMLVideoElement | null>(null);
+    const [hasVideoElement, setHasVideoElement] = useState(false);
+
     const [fullscreen, setFullscreen] = useState<boolean>(() => {
         if (typeof document === 'undefined') return false;
         return document.fullscreenElement === document.documentElement;
     });
 
+    const setVideoElement = useCallback((el: HTMLVideoElement | null) => {
+        videoElementRef.current = el;
+        setHasVideoElement(el !== null);
+    }, []);
+
+    const supported = shell.active || document.fullscreenEnabled === true || (hasVideoElement && hasWebkitFullscreen);
+
     const requestFullscreen = useCallback(async () => {
         if (shell.active) {
             shell.send('win-set-visibility', { fullscreen: true });
-        } else {
-            try {
-                await document.documentElement.requestFullscreen();
-            } catch (err) {
-                console.error('Error enabling fullscreen', err);
-            }
+        } else if (document.fullscreenEnabled) {
+            await document.documentElement.requestFullscreen();
+        } else if (videoElementRef.current && hasWebkitFullscreen) {
+            (videoElementRef.current as any).webkitEnterFullscreen();
         }
     }, [shell]);
 
     const exitFullscreen = useCallback(() => {
         if (shell.active) {
             shell.send('win-set-visibility', { fullscreen: false });
-        } else {
-            if (document.fullscreenElement === document.documentElement) {
-                document.exitFullscreen();
-            }
+        } else if (document.fullscreenElement === document.documentElement) {
+            document.exitFullscreen();
+        } else if (videoElementRef.current && (videoElementRef.current as any).webkitDisplayingFullscreen) {
+            (videoElementRef.current as any).webkitExitFullscreen();
         }
     }, [shell]);
 
@@ -95,8 +106,8 @@ const FullscreenProvider = ({ children }: Props) => {
     }, [shell, toggleFullscreen, exitFullscreen, escExitFullscreen]);
 
     const value = useMemo<FullscreenContextValue>(
-        () => [fullscreen, requestFullscreen, exitFullscreen, toggleFullscreen],
-        [fullscreen, requestFullscreen, exitFullscreen, toggleFullscreen]
+        () => [fullscreen, requestFullscreen, exitFullscreen, toggleFullscreen, supported, setVideoElement],
+        [fullscreen, requestFullscreen, exitFullscreen, toggleFullscreen, supported, setVideoElement]
     );
 
     return (
diff --git a/src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js b/src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js
index b1644c2b3..c9679ecf8 100644
--- a/src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js
+++ b/src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js
@@ -6,7 +6,6 @@ const classnames = require('classnames');
 const { default: Icon } = require('@stremio/stremio-icons/react');
 const { Button, Image } = require('stremio/components');
 const { useFullscreen } = require('stremio/common/Fullscreen');
-const usePWA = require('stremio/common/usePWA');
 const { useHorizontalNavGamepadNavigation } = require('stremio/services/GamepadNavigation');
 const SearchBar = require('./SearchBar');
 const NavMenu = require('./NavMenu');
@@ -17,8 +16,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
     const backButtonOnClick = React.useCallback(() => {
         window.history.back();
     }, []);
-    const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
-    const [isIOSPWA] = usePWA();
+    const [fullscreen, requestFullscreen, exitFullscreen, , supported] = useFullscreen();
     const renderNavMenuLabel = React.useCallback(({ ref, className, onClick, children, }) => (
         <Button ref={ref} className={classnames(className, styles['button-container'], styles['menu-button-container'])} tabIndex={-1} onClick={onClick}>
             <Icon className={styles['icon']} name={'person-outline'} />
@@ -64,7 +62,7 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
                         null
                 }
                 {
-                    !isIOSPWA && fullscreenButton ?
+                    supported && fullscreenButton ?
                         <Button className={styles['button-container']} title={fullscreen ? t('EXIT_FULLSCREEN') : t('ENTER_FULLSCREEN')} tabIndex={-1} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
                             <Icon className={styles['icon']} name={fullscreen ? 'minimize' : 'maximize'} />
                         </Button>
diff --git a/src/components/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js b/src/components/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
index 6615e5b76..e35696584 100644
--- a/src/components/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
+++ b/src/components/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
@@ -23,8 +23,8 @@ const NavMenuContent = ({ onClick }) => {
     const streamingServer = useStreamingServer();
     const { handlePlayUrl } = usePlayUrl();
     const toast = useToast();
-    const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
-    const [isIOSPWA, isAndroidPWA] = usePWA();
+    const [fullscreen, requestFullscreen, exitFullscreen, , supported] = useFullscreen();
+    const [, isAndroidPWA] = usePWA();
     const streamingServerWarningDismissed = React.useMemo(() => {
         return streamingServer.settings !== null && streamingServer.settings.type === 'Ready' || (
             !isNaN(profile.settings.streamingServerWarningDismissed.getTime()) &&
@@ -79,7 +79,7 @@ const NavMenuContent = ({ onClick }) => {
                 </div>
             </div>
             {
-                !isIOSPWA && !isAndroidPWA ?
+                supported && !isAndroidPWA ?
                     <div className={styles['nav-menu-section']}>
                         <Button className={styles['nav-menu-option-container']} title={fullscreen ? t('EXIT_FULLSCREEN') : t('ENTER_FULLSCREEN')} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
                             <Icon className={styles['icon']} name={fullscreen ? 'minimize' : 'maximize'} />
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 7a3bd0f12..2f68a584d 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -68,7 +68,13 @@ const Player = ({ urlParams, queryParams }) => {
 
     const [immersed, setImmersed] = React.useState(true);
     const setImmersedDebounced = React.useCallback(debounce(setImmersed, 3000), []);
-    const [, , , toggleFullscreen] = useFullscreen();
+    const [fullscreen, , , toggleFullscreen, , setVideoElement] = useFullscreen();
+
+    React.useEffect(() => {
+        const el = video.containerRef.current?.querySelector('video');
+        setVideoElement(el || null);
+        return () => setVideoElement(null);
+    }, [video.state.manifest]);
 
     const [optionsMenuOpen, , closeOptionsMenu, toggleOptionsMenu] = useBinaryState(false);
     const [subtitlesMenuOpen, , closeSubtitlesMenu, toggleSubtitlesMenu] = useBinaryState(false);
@@ -534,7 +540,7 @@ const Player = ({ urlParams, queryParams }) => {
         }
     }, [settings.pauseOnMinimize, shell.windowClosed, shell.windowHidden]);
 
-    useMediaSession(video.state, player, onPlayRequested, onPauseRequested, onNextVideoRequested);
+    useMediaSession(video.state, player, fullscreen, onPlayRequested, onPauseRequested, onNextVideoRequested);
 
     React.useEffect(() => {
         const onMediaKey = (action) => {
@@ -780,181 +786,181 @@ const Player = ({ urlParams, queryParams }) => {
             onMouseMove={onContainerMouseMove}
             onMouseOver={onContainerMouseMove}
             onMouseLeave={onContainerMouseLeave}>
-            <Video
-                ref={video.containerRef}
-                className={styles['layer']}
-                onClick={onVideoClick}
-                onDoubleClick={onVideoDoubleClick}
-            />
-            {
-                !video.state.loaded ?
-                    <div className={classnames(styles['layer'], styles['background-layer'])}>
-                        <img className={styles['image']} src={player?.metaItem?.content?.background} />
-                    </div>
-                    :
-                    null
-            }
-            {
-                (video.state.buffering || !video.state.loaded) && !error ?
-                    <BufferingLoader
-                        ref={bufferingRef}
-                        className={classnames(styles['layer'], styles['buffering-layer'])}
-                        logo={player?.metaItem?.content?.logo}
-                    />
-                    :
-                    null
-            }
-            {
-                error !== null ?
-                    <Error
-                        ref={errorRef}
-                        className={classnames(styles['layer'], styles['error-layer'])}
-                        stream={video.state.stream}
-                        {...error}
-                    />
-                    :
-                    null
-            }
-            {
-                menusOpen ?
-                    <div className={styles['layer']} />
-                    :
-                    null
-            }
-            {
-                video.state.volume !== null && overlayHidden ?
-                    <VolumeChangeIndicator
-                        muted={video.state.muted}
-                        volume={video.state.volume}
-                    />
-                    :
-                    null
-            }
-            <ContextMenu on={[video.containerRef, bufferingRef, errorRef]} autoClose>
-                <OptionsMenu
-                    className={classnames(styles['layer'], styles['menu-layer'])}
-                    stream={player?.selected?.stream}
-                    playbackDevices={playbackDevices}
-                    extraSubtitlesTracks={extraSubtitleTracks}
-                    selectedExtraSubtitlesTrackId={selectedExtraSubtitleTrackId}
+                <Video
+                    ref={video.containerRef}
+                    className={styles['layer']}
+                    onClick={onVideoClick}
+                    onDoubleClick={onVideoDoubleClick}
                 />
-            </ContextMenu>
-            <HorizontalNavBar
-                className={classnames(styles['layer'], styles['nav-bar-layer'])}
-                title={player.title !== null ? player.title : ''}
-                backButton={true}
-                fullscreenButton={true}
-                hdrInfo={video.state.hdrInfo}
-                onMouseMove={onBarMouseMove}
-                onMouseOver={onBarMouseMove}
-            />
-            {
-                player.metaItem?.type === 'Ready' ?
-                    <SideDrawerButton
-                        className={classnames(styles['layer'], styles['side-drawer-button-layer'])}
-                        onClick={toggleSideDrawer}
-                    />
-                    :
-                    null
-            }
-            <ControlBar
-                ref={controlBarRef}
-                className={classnames(styles['layer'], styles['control-bar-layer'])}
-                paused={video.state.paused}
-                time={video.state.time}
-                duration={video.state.duration}
-                buffered={video.state.buffered}
-                volume={video.state.volume}
-                muted={video.state.muted}
-                playbackSpeed={video.state.playbackSpeed}
-                subtitlesTracks={allSubtitleTracks}
-                audioTracks={video.state.audioTracks}
-                metaItem={player.metaItem}
-                nextVideo={player.nextVideo}
-                stream={player.selected !== null ? player.selected.stream : null}
-                statistics={statistics}
-                onPlayRequested={onPlayRequested}
-                onPauseRequested={onPauseRequested}
-                onNextVideoRequested={onNextVideoRequested}
-                onMuteRequested={onMuteRequested}
-                onUnmuteRequested={onUnmuteRequested}
-                onVolumeChangeRequested={onVolumeChangeRequested}
-                onSeekRequested={onSeekRequested}
-                onToggleOptionsMenu={toggleOptionsMenu}
-                onToggleSubtitlesMenu={toggleSubtitlesMenu}
-                onToggleAudioMenu={toggleAudioMenu}
-                onToggleSpeedMenu={toggleSpeedMenu}
-                videoScale={video.state.videoScale}
-                videoScaleLabel={VIDEO_SCALE_LABELS[video.state.videoScale || 'contain']}
-                onVideoScaleChanged={onVideoScaleChanged}
-                onToggleStatisticsMenu={toggleStatisticsMenu}
-                onToggleSideDrawer={toggleSideDrawer}
-                onMouseMove={onBarMouseMove}
-                onMouseOver={onBarMouseMove}
-                onTouchEnd={onContainerMouseLeave}
-            />
-            <Indicator
-                className={classnames(styles['layer'], styles['indicator-layer'])}
-                videoState={video.state}
-                disabled={subtitlesMenuOpen}
-            />
-            {
-                nextVideoPopupOpen ?
-                    <NextVideoPopup
+                {
+                    !video.state.loaded ?
+                        <div className={classnames(styles['layer'], styles['background-layer'])}>
+                            <img className={styles['image']} src={player?.metaItem?.content?.background} />
+                        </div>
+                        :
+                        null
+                }
+                {
+                    (video.state.buffering || !video.state.loaded) && !error ?
+                        <BufferingLoader
+                            ref={bufferingRef}
+                            className={classnames(styles['layer'], styles['buffering-layer'])}
+                            logo={player?.metaItem?.content?.logo}
+                        />
+                        :
+                        null
+                }
+                {
+                    error !== null ?
+                        <Error
+                            ref={errorRef}
+                            className={classnames(styles['layer'], styles['error-layer'])}
+                            stream={video.state.stream}
+                            {...error}
+                        />
+                        :
+                        null
+                }
+                {
+                    menusOpen ?
+                        <div className={styles['layer']} />
+                        :
+                        null
+                }
+                {
+                    video.state.volume !== null && overlayHidden ?
+                        <VolumeChangeIndicator
+                            muted={video.state.muted}
+                            volume={video.state.volume}
+                        />
+                        :
+                        null
+                }
+                <ContextMenu on={[video.containerRef, bufferingRef, errorRef]} autoClose>
+                    <OptionsMenu
                         className={classnames(styles['layer'], styles['menu-layer'])}
-                        metaItem={player.metaItem !== null && player.metaItem.type === 'Ready' ? player.metaItem.content : null}
-                        nextVideo={player.nextVideo}
-                        onDismiss={onDismissNextVideoPopup}
-                        onNextVideoRequested={onNextVideoRequested}
+                        stream={player?.selected?.stream}
+                        playbackDevices={playbackDevices}
+                        extraSubtitlesTracks={extraSubtitleTracks}
+                        selectedExtraSubtitlesTrackId={selectedExtraSubtitleTrackId}
                     />
-                    :
-                    null
-            }
-            <Transition when={statisticsMenuOpen} name={'fade'}>
-                <StatisticsMenu
-                    className={classnames(styles['layer'], styles['menu-layer'])}
-                    {...statistics}
+                </ContextMenu>
+                <HorizontalNavBar
+                    className={classnames(styles['layer'], styles['nav-bar-layer'])}
+                    title={player.title !== null ? player.title : ''}
+                    backButton={true}
+                    fullscreenButton={true}
+                    hdrInfo={video.state.hdrInfo}
+                    onMouseMove={onBarMouseMove}
+                    onMouseOver={onBarMouseMove}
                 />
-            </Transition>
-            <Transition when={sideDrawerOpen} name={'slide-left'}>
-                <SideDrawer
-                    className={classnames(styles['layer'], styles['side-drawer-layer'])}
-                    metaItem={player.metaItem?.content}
-                    seriesInfo={player.seriesInfo}
-                    closeSideDrawer={closeSideDrawer}
-                    selected={player.selected?.streamRequest?.path.id}
-                />
-            </Transition>
-            <Transition when={subtitlesMenuOpen} name={'fade'}>
-                <SubtitlesMenu
-                    className={classnames(styles['layer'], styles['menu-layer'])}
-                    {...subtitlesMenuProps}
-                />
-            </Transition>
-            <Transition when={audioMenuOpen} name={'fade'}>
-                <AudioMenu
-                    className={classnames(styles['layer'], styles['menu-layer'])}
-                    audioTracks={video.state.audioTracks}
-                    selectedAudioTrackId={video.state.selectedAudioTrackId}
-                    onAudioTrackSelected={onAudioTrackSelected}
-                />
-            </Transition>
-            <Transition when={speedMenuOpen} name={'fade'}>
-                <SpeedMenu
-                    className={classnames(styles['layer'], styles['menu-layer'])}
+                {
+                    player.metaItem?.type === 'Ready' ?
+                        <SideDrawerButton
+                            className={classnames(styles['layer'], styles['side-drawer-button-layer'])}
+                            onClick={toggleSideDrawer}
+                        />
+                        :
+                        null
+                }
+                <ControlBar
+                    ref={controlBarRef}
+                    className={classnames(styles['layer'], styles['control-bar-layer'])}
+                    paused={video.state.paused}
+                    time={video.state.time}
+                    duration={video.state.duration}
+                    buffered={video.state.buffered}
+                    volume={video.state.volume}
+                    muted={video.state.muted}
                     playbackSpeed={video.state.playbackSpeed}
-                    onPlaybackSpeedChanged={onPlaybackSpeedChanged}
+                    subtitlesTracks={allSubtitleTracks}
+                    audioTracks={video.state.audioTracks}
+                    metaItem={player.metaItem}
+                    nextVideo={player.nextVideo}
+                    stream={player.selected !== null ? player.selected.stream : null}
+                    statistics={statistics}
+                    onPlayRequested={onPlayRequested}
+                    onPauseRequested={onPauseRequested}
+                    onNextVideoRequested={onNextVideoRequested}
+                    onMuteRequested={onMuteRequested}
+                    onUnmuteRequested={onUnmuteRequested}
+                    onVolumeChangeRequested={onVolumeChangeRequested}
+                    onSeekRequested={onSeekRequested}
+                    onToggleOptionsMenu={toggleOptionsMenu}
+                    onToggleSubtitlesMenu={toggleSubtitlesMenu}
+                    onToggleAudioMenu={toggleAudioMenu}
+                    onToggleSpeedMenu={toggleSpeedMenu}
+                    videoScale={video.state.videoScale}
+                    videoScaleLabel={VIDEO_SCALE_LABELS[video.state.videoScale || 'contain']}
+                    onVideoScaleChanged={onVideoScaleChanged}
+                    onToggleStatisticsMenu={toggleStatisticsMenu}
+                    onToggleSideDrawer={toggleSideDrawer}
+                    onMouseMove={onBarMouseMove}
+                    onMouseOver={onBarMouseMove}
+                    onTouchEnd={onContainerMouseLeave}
                 />
-            </Transition>
-            <Transition when={optionsMenuOpen} name={'fade'}>
-                <OptionsMenu
-                    className={classnames(styles['layer'], styles['menu-layer'])}
-                    stream={player.selected?.stream}
-                    playbackDevices={playbackDevices}
-                    extraSubtitlesTracks={extraSubtitleTracks}
-                    selectedExtraSubtitlesTrackId={selectedExtraSubtitleTrackId}
+                <Indicator
+                    className={classnames(styles['layer'], styles['indicator-layer'])}
+                    videoState={video.state}
+                    disabled={subtitlesMenuOpen}
                 />
-            </Transition>
+                {
+                    nextVideoPopupOpen ?
+                        <NextVideoPopup
+                            className={classnames(styles['layer'], styles['menu-layer'])}
+                            metaItem={player.metaItem !== null && player.metaItem.type === 'Ready' ? player.metaItem.content : null}
+                            nextVideo={player.nextVideo}
+                            onDismiss={onDismissNextVideoPopup}
+                            onNextVideoRequested={onNextVideoRequested}
+                        />
+                        :
+                        null
+                }
+                <Transition when={statisticsMenuOpen} name={'fade'}>
+                    <StatisticsMenu
+                        className={classnames(styles['layer'], styles['menu-layer'])}
+                        {...statistics}
+                    />
+                </Transition>
+                <Transition when={sideDrawerOpen} name={'slide-left'}>
+                    <SideDrawer
+                        className={classnames(styles['layer'], styles['side-drawer-layer'])}
+                        metaItem={player.metaItem?.content}
+                        seriesInfo={player.seriesInfo}
+                        closeSideDrawer={closeSideDrawer}
+                        selected={player.selected?.streamRequest?.path.id}
+                    />
+                </Transition>
+                <Transition when={subtitlesMenuOpen} name={'fade'}>
+                    <SubtitlesMenu
+                        className={classnames(styles['layer'], styles['menu-layer'])}
+                        {...subtitlesMenuProps}
+                    />
+                </Transition>
+                <Transition when={audioMenuOpen} name={'fade'}>
+                    <AudioMenu
+                        className={classnames(styles['layer'], styles['menu-layer'])}
+                        audioTracks={video.state.audioTracks}
+                        selectedAudioTrackId={video.state.selectedAudioTrackId}
+                        onAudioTrackSelected={onAudioTrackSelected}
+                    />
+                </Transition>
+                <Transition when={speedMenuOpen} name={'fade'}>
+                    <SpeedMenu
+                        className={classnames(styles['layer'], styles['menu-layer'])}
+                        playbackSpeed={video.state.playbackSpeed}
+                        onPlaybackSpeedChanged={onPlaybackSpeedChanged}
+                    />
+                </Transition>
+                <Transition when={optionsMenuOpen} name={'fade'}>
+                    <OptionsMenu
+                        className={classnames(styles['layer'], styles['menu-layer'])}
+                        stream={player.selected?.stream}
+                        playbackDevices={playbackDevices}
+                        extraSubtitlesTracks={extraSubtitleTracks}
+                        selectedExtraSubtitlesTrackId={selectedExtraSubtitleTrackId}
+                    />
+                </Transition>
         </div>
     );
 };
diff --git a/src/routes/Player/useMediaSession.ts b/src/routes/Player/useMediaSession.ts
index 4a7d4e99c..7af09bd3e 100644
--- a/src/routes/Player/useMediaSession.ts
+++ b/src/routes/Player/useMediaSession.ts
@@ -5,12 +5,22 @@ import { MediaStatus } from 'stremio/common/useShell';
 const useMediaSession = (
     videoState: VideoState,
     player: Player,
+    fullscreen: boolean,
     onPlayRequested: () => void,
     onPauseRequested: () => void,
     onNextVideoRequested: () => void,
 ) => {
     const shell = useShell();
 
+    useEffect(() => {
+        if (!('audioSession' in navigator)) return;
+        const audioSession = (navigator as any).audioSession;
+        audioSession.type = fullscreen ? 'ambient' : 'playback';
+        return () => {
+            audioSession.type = 'playback';
+        };
+    }, [fullscreen]);
+
     // Playback state
     useEffect(() => {
         if (navigator.mediaSession) {
diff --git a/src/routes/Player/useVideo.js b/src/routes/Player/useVideo.js
index 241a5af00..570888ff1 100644
--- a/src/routes/Player/useVideo.js
+++ b/src/routes/Player/useVideo.js
@@ -40,6 +40,7 @@ const useVideo = () => {
         extraSubtitlesTextColor: null,
         extraSubtitlesBackgroundColor: null,
         extraSubtitlesOutlineColor: null,
+        fullscreen: null,
     });
 
     const dispatch = (action, options) => {
@@ -147,6 +148,10 @@ const useVideo = () => {
         setProp('videoScale', scale);
     };
 
+    const setFullscreen = (state) => {
+        setProp('fullscreen', state);
+    };
+
     const setSubtitlesTextColor = (color) => {
         setProp('subtitlesTextColor', color);
         setProp('extraSubtitlesTextColor', color);
@@ -244,6 +249,7 @@ const useVideo = () => {
         setSubtitlesOutlineColor,
         setExtraSubtitlesTrack,
         setVideoScale,
+        setFullscreen,
     };
 };
 

From e9d54104d131d78461eb9df1d4395aa33d36a064 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Mon, 4 May 2026 21:55:51 +0300
Subject: [PATCH 2/4] fix player file indentation

---
 src/routes/Player/Player.js | 340 ++++++++++++++++++------------------
 1 file changed, 170 insertions(+), 170 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 2f68a584d..7f9638e18 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -786,181 +786,181 @@ const Player = ({ urlParams, queryParams }) => {
             onMouseMove={onContainerMouseMove}
             onMouseOver={onContainerMouseMove}
             onMouseLeave={onContainerMouseLeave}>
-                <Video
-                    ref={video.containerRef}
-                    className={styles['layer']}
-                    onClick={onVideoClick}
-                    onDoubleClick={onVideoDoubleClick}
-                />
-                {
-                    !video.state.loaded ?
-                        <div className={classnames(styles['layer'], styles['background-layer'])}>
-                            <img className={styles['image']} src={player?.metaItem?.content?.background} />
-                        </div>
-                        :
-                        null
-                }
-                {
-                    (video.state.buffering || !video.state.loaded) && !error ?
-                        <BufferingLoader
-                            ref={bufferingRef}
-                            className={classnames(styles['layer'], styles['buffering-layer'])}
-                            logo={player?.metaItem?.content?.logo}
-                        />
-                        :
-                        null
-                }
-                {
-                    error !== null ?
-                        <Error
-                            ref={errorRef}
-                            className={classnames(styles['layer'], styles['error-layer'])}
-                            stream={video.state.stream}
-                            {...error}
-                        />
-                        :
-                        null
-                }
-                {
-                    menusOpen ?
-                        <div className={styles['layer']} />
-                        :
-                        null
-                }
-                {
-                    video.state.volume !== null && overlayHidden ?
-                        <VolumeChangeIndicator
-                            muted={video.state.muted}
-                            volume={video.state.volume}
-                        />
-                        :
-                        null
-                }
-                <ContextMenu on={[video.containerRef, bufferingRef, errorRef]} autoClose>
-                    <OptionsMenu
-                        className={classnames(styles['layer'], styles['menu-layer'])}
-                        stream={player?.selected?.stream}
-                        playbackDevices={playbackDevices}
-                        extraSubtitlesTracks={extraSubtitleTracks}
-                        selectedExtraSubtitlesTrackId={selectedExtraSubtitleTrackId}
+            <Video
+                ref={video.containerRef}
+                className={styles['layer']}
+                onClick={onVideoClick}
+                onDoubleClick={onVideoDoubleClick}
+            />
+            {
+                !video.state.loaded ?
+                    <div className={classnames(styles['layer'], styles['background-layer'])}>
+                        <img className={styles['image']} src={player?.metaItem?.content?.background} />
+                    </div>
+                    :
+                    null
+            }
+            {
+                (video.state.buffering || !video.state.loaded) && !error ?
+                    <BufferingLoader
+                        ref={bufferingRef}
+                        className={classnames(styles['layer'], styles['buffering-layer'])}
+                        logo={player?.metaItem?.content?.logo}
                     />
-                </ContextMenu>
-                <HorizontalNavBar
-                    className={classnames(styles['layer'], styles['nav-bar-layer'])}
-                    title={player.title !== null ? player.title : ''}
-                    backButton={true}
-                    fullscreenButton={true}
-                    hdrInfo={video.state.hdrInfo}
-                    onMouseMove={onBarMouseMove}
-                    onMouseOver={onBarMouseMove}
+                    :
+                    null
+            }
+            {
+                error !== null ?
+                    <Error
+                        ref={errorRef}
+                        className={classnames(styles['layer'], styles['error-layer'])}
+                        stream={video.state.stream}
+                        {...error}
+                    />
+                    :
+                    null
+            }
+            {
+                menusOpen ?
+                    <div className={styles['layer']} />
+                    :
+                    null
+            }
+            {
+                video.state.volume !== null && overlayHidden ?
+                    <VolumeChangeIndicator
+                        muted={video.state.muted}
+                        volume={video.state.volume}
+                    />
+                    :
+                    null
+            }
+            <ContextMenu on={[video.containerRef, bufferingRef, errorRef]} autoClose>
+                <OptionsMenu
+                    className={classnames(styles['layer'], styles['menu-layer'])}
+                    stream={player?.selected?.stream}
+                    playbackDevices={playbackDevices}
+                    extraSubtitlesTracks={extraSubtitleTracks}
+                    selectedExtraSubtitlesTrackId={selectedExtraSubtitleTrackId}
                 />
-                {
-                    player.metaItem?.type === 'Ready' ?
-                        <SideDrawerButton
-                            className={classnames(styles['layer'], styles['side-drawer-button-layer'])}
-                            onClick={toggleSideDrawer}
-                        />
-                        :
-                        null
-                }
-                <ControlBar
-                    ref={controlBarRef}
-                    className={classnames(styles['layer'], styles['control-bar-layer'])}
-                    paused={video.state.paused}
-                    time={video.state.time}
-                    duration={video.state.duration}
-                    buffered={video.state.buffered}
-                    volume={video.state.volume}
-                    muted={video.state.muted}
-                    playbackSpeed={video.state.playbackSpeed}
-                    subtitlesTracks={allSubtitleTracks}
+            </ContextMenu>
+            <HorizontalNavBar
+                className={classnames(styles['layer'], styles['nav-bar-layer'])}
+                title={player.title !== null ? player.title : ''}
+                backButton={true}
+                fullscreenButton={true}
+                hdrInfo={video.state.hdrInfo}
+                onMouseMove={onBarMouseMove}
+                onMouseOver={onBarMouseMove}
+            />
+            {
+                player.metaItem?.type === 'Ready' ?
+                    <SideDrawerButton
+                        className={classnames(styles['layer'], styles['side-drawer-button-layer'])}
+                        onClick={toggleSideDrawer}
+                    />
+                    :
+                    null
+            }
+            <ControlBar
+                ref={controlBarRef}
+                className={classnames(styles['layer'], styles['control-bar-layer'])}
+                paused={video.state.paused}
+                time={video.state.time}
+                duration={video.state.duration}
+                buffered={video.state.buffered}
+                volume={video.state.volume}
+                muted={video.state.muted}
+                playbackSpeed={video.state.playbackSpeed}
+                subtitlesTracks={allSubtitleTracks}
+                audioTracks={video.state.audioTracks}
+                metaItem={player.metaItem}
+                nextVideo={player.nextVideo}
+                stream={player.selected !== null ? player.selected.stream : null}
+                statistics={statistics}
+                onPlayRequested={onPlayRequested}
+                onPauseRequested={onPauseRequested}
+                onNextVideoRequested={onNextVideoRequested}
+                onMuteRequested={onMuteRequested}
+                onUnmuteRequested={onUnmuteRequested}
+                onVolumeChangeRequested={onVolumeChangeRequested}
+                onSeekRequested={onSeekRequested}
+                onToggleOptionsMenu={toggleOptionsMenu}
+                onToggleSubtitlesMenu={toggleSubtitlesMenu}
+                onToggleAudioMenu={toggleAudioMenu}
+                onToggleSpeedMenu={toggleSpeedMenu}
+                videoScale={video.state.videoScale}
+                videoScaleLabel={VIDEO_SCALE_LABELS[video.state.videoScale || 'contain']}
+                onVideoScaleChanged={onVideoScaleChanged}
+                onToggleStatisticsMenu={toggleStatisticsMenu}
+                onToggleSideDrawer={toggleSideDrawer}
+                onMouseMove={onBarMouseMove}
+                onMouseOver={onBarMouseMove}
+                onTouchEnd={onContainerMouseLeave}
+            />
+            <Indicator
+                className={classnames(styles['layer'], styles['indicator-layer'])}
+                videoState={video.state}
+                disabled={subtitlesMenuOpen}
+            />
+            {
+                nextVideoPopupOpen ?
+                    <NextVideoPopup
+                        className={classnames(styles['layer'], styles['menu-layer'])}
+                        metaItem={player.metaItem !== null && player.metaItem.type === 'Ready' ? player.metaItem.content : null}
+                        nextVideo={player.nextVideo}
+                        onDismiss={onDismissNextVideoPopup}
+                        onNextVideoRequested={onNextVideoRequested}
+                    />
+                    :
+                    null
+            }
+            <Transition when={statisticsMenuOpen} name={'fade'}>
+                <StatisticsMenu
+                    className={classnames(styles['layer'], styles['menu-layer'])}
+                    {...statistics}
+                />
+            </Transition>
+            <Transition when={sideDrawerOpen} name={'slide-left'}>
+                <SideDrawer
+                    className={classnames(styles['layer'], styles['side-drawer-layer'])}
+                    metaItem={player.metaItem?.content}
+                    seriesInfo={player.seriesInfo}
+                    closeSideDrawer={closeSideDrawer}
+                    selected={player.selected?.streamRequest?.path.id}
+                />
+            </Transition>
+            <Transition when={subtitlesMenuOpen} name={'fade'}>
+                <SubtitlesMenu
+                    className={classnames(styles['layer'], styles['menu-layer'])}
+                    {...subtitlesMenuProps}
+                />
+            </Transition>
+            <Transition when={audioMenuOpen} name={'fade'}>
+                <AudioMenu
+                    className={classnames(styles['layer'], styles['menu-layer'])}
                     audioTracks={video.state.audioTracks}
-                    metaItem={player.metaItem}
-                    nextVideo={player.nextVideo}
-                    stream={player.selected !== null ? player.selected.stream : null}
-                    statistics={statistics}
-                    onPlayRequested={onPlayRequested}
-                    onPauseRequested={onPauseRequested}
-                    onNextVideoRequested={onNextVideoRequested}
-                    onMuteRequested={onMuteRequested}
-                    onUnmuteRequested={onUnmuteRequested}
-                    onVolumeChangeRequested={onVolumeChangeRequested}
-                    onSeekRequested={onSeekRequested}
-                    onToggleOptionsMenu={toggleOptionsMenu}
-                    onToggleSubtitlesMenu={toggleSubtitlesMenu}
-                    onToggleAudioMenu={toggleAudioMenu}
-                    onToggleSpeedMenu={toggleSpeedMenu}
-                    videoScale={video.state.videoScale}
-                    videoScaleLabel={VIDEO_SCALE_LABELS[video.state.videoScale || 'contain']}
-                    onVideoScaleChanged={onVideoScaleChanged}
-                    onToggleStatisticsMenu={toggleStatisticsMenu}
-                    onToggleSideDrawer={toggleSideDrawer}
-                    onMouseMove={onBarMouseMove}
-                    onMouseOver={onBarMouseMove}
-                    onTouchEnd={onContainerMouseLeave}
+                    selectedAudioTrackId={video.state.selectedAudioTrackId}
+                    onAudioTrackSelected={onAudioTrackSelected}
                 />
-                <Indicator
-                    className={classnames(styles['layer'], styles['indicator-layer'])}
-                    videoState={video.state}
-                    disabled={subtitlesMenuOpen}
+            </Transition>
+            <Transition when={speedMenuOpen} name={'fade'}>
+                <SpeedMenu
+                    className={classnames(styles['layer'], styles['menu-layer'])}
+                    playbackSpeed={video.state.playbackSpeed}
+                    onPlaybackSpeedChanged={onPlaybackSpeedChanged}
                 />
-                {
-                    nextVideoPopupOpen ?
-                        <NextVideoPopup
-                            className={classnames(styles['layer'], styles['menu-layer'])}
-                            metaItem={player.metaItem !== null && player.metaItem.type === 'Ready' ? player.metaItem.content : null}
-                            nextVideo={player.nextVideo}
-                            onDismiss={onDismissNextVideoPopup}
-                            onNextVideoRequested={onNextVideoRequested}
-                        />
-                        :
-                        null
-                }
-                <Transition when={statisticsMenuOpen} name={'fade'}>
-                    <StatisticsMenu
-                        className={classnames(styles['layer'], styles['menu-layer'])}
-                        {...statistics}
-                    />
-                </Transition>
-                <Transition when={sideDrawerOpen} name={'slide-left'}>
-                    <SideDrawer
-                        className={classnames(styles['layer'], styles['side-drawer-layer'])}
-                        metaItem={player.metaItem?.content}
-                        seriesInfo={player.seriesInfo}
-                        closeSideDrawer={closeSideDrawer}
-                        selected={player.selected?.streamRequest?.path.id}
-                    />
-                </Transition>
-                <Transition when={subtitlesMenuOpen} name={'fade'}>
-                    <SubtitlesMenu
-                        className={classnames(styles['layer'], styles['menu-layer'])}
-                        {...subtitlesMenuProps}
-                    />
-                </Transition>
-                <Transition when={audioMenuOpen} name={'fade'}>
-                    <AudioMenu
-                        className={classnames(styles['layer'], styles['menu-layer'])}
-                        audioTracks={video.state.audioTracks}
-                        selectedAudioTrackId={video.state.selectedAudioTrackId}
-                        onAudioTrackSelected={onAudioTrackSelected}
-                    />
-                </Transition>
-                <Transition when={speedMenuOpen} name={'fade'}>
-                    <SpeedMenu
-                        className={classnames(styles['layer'], styles['menu-layer'])}
-                        playbackSpeed={video.state.playbackSpeed}
-                        onPlaybackSpeedChanged={onPlaybackSpeedChanged}
-                    />
-                </Transition>
-                <Transition when={optionsMenuOpen} name={'fade'}>
-                    <OptionsMenu
-                        className={classnames(styles['layer'], styles['menu-layer'])}
-                        stream={player.selected?.stream}
-                        playbackDevices={playbackDevices}
-                        extraSubtitlesTracks={extraSubtitleTracks}
-                        selectedExtraSubtitlesTrackId={selectedExtraSubtitleTrackId}
-                    />
-                </Transition>
+            </Transition>
+            <Transition when={optionsMenuOpen} name={'fade'}>
+                <OptionsMenu
+                    className={classnames(styles['layer'], styles['menu-layer'])}
+                    stream={player.selected?.stream}
+                    playbackDevices={playbackDevices}
+                    extraSubtitlesTracks={extraSubtitleTracks}
+                    selectedExtraSubtitlesTrackId={selectedExtraSubtitleTrackId}
+                />
+            </Transition>
         </div>
     );
 };

From 3592d0942c5d35b686f3294a66d61d2dec0dc934 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 6 May 2026 22:03:09 +0300
Subject: [PATCH 3/4] 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<FullscreenContextValue>(
         () => [fullscreen, requestFullscreen, exitFullscreen, toggleFullscreen, supported, setVideoElement],

From 196195c861c9df4664939325d758242c7ba2e8b9 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Sat, 9 May 2026 22:38:08 +0300
Subject: [PATCH 4/4] bump: stremio-video to v0.0.79

---
 package.json   |  2 +-
 pnpm-lock.yaml | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index dd73785af..924787d30 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
         "@stremio/stremio-colors": "5.2.0",
         "@stremio/stremio-core-web": "0.56.4",
         "@stremio/stremio-icons": "5.10.0",
-        "@stremio/stremio-video": "0.0.78",
+        "@stremio/stremio-video": "0.0.79",
         "a-color-picker": "1.2.1",
         "bowser": "2.14.1",
         "buffer": "6.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 28201c156..8f391ae50 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: 5.10.0
         version: 5.10.0
       '@stremio/stremio-video':
-        specifier: 0.0.78
-        version: 0.0.78
+        specifier: 0.0.79
+        version: 0.0.79
       a-color-picker:
         specifier: 1.2.1
         version: 1.2.1
@@ -1400,8 +1400,8 @@ packages:
   '@stremio/stremio-icons@5.10.0':
     resolution: {integrity: sha512-Zw/vGC3D2yeQfk8xv/tfMJTDvbCPOI91tBg4XpR2+EgbZSX8Xvm7Vz457PIhFPhTAwdOPHp0VX0M3gzjbt0zOg==}
 
-  '@stremio/stremio-video@0.0.78':
-    resolution: {integrity: sha512-Kz6uj20vpyDZoFy/kEbim4l+TxyRKl9STjGqPT3cIBdpG2e+GhJuaBVkF1liL7vZvSQA8EPzLbBqwxhP92Ikvg==}
+  '@stremio/stremio-video@0.0.79':
+    resolution: {integrity: sha512-RfxmeG+rQdoflfqBybRB9vSqb3cjc3Fd5T9uNNUbwC287apQsNyjYOlvk7sfRlQ1Za/UdFsyoqR5vGBSBDzlhQ==}
 
   '@stylistic/eslint-plugin-jsx@4.4.1':
     resolution: {integrity: sha512-83SInq4u7z71vWwGG+6ViOtlOmZ6tSrDkMPhrvdBBTGMLA0gs22WSdhQ4vZP3oJ5Xg4ythvqeUiFSedvVxzhyA==}
@@ -6453,7 +6453,7 @@ snapshots:
 
   '@stremio/stremio-icons@5.10.0': {}
 
-  '@stremio/stremio-video@0.0.78':
+  '@stremio/stremio-video@0.0.79':
     dependencies:
       buffer: 6.0.3
       color: 4.2.3