fix: airplay active state effects

IEduStu · Apr 20, 2024 · 474c004 · 474c004
1 parent 691fc7a
commit 474c004
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js
@@ -45,13 +45,18 @@ const ControlBar = ({
     onToggleOptionsMenu,
     onToggleStatisticsMenu,
     videoContainerElementRef,
+    setAirplayActive,
     ...props
 }) => {
     const { chromecast } = useServices();
     const supportsVideoVolume = useSupportsVideoVolume();
     const [chromecastServiceActive, setChromecastServiceActive] = React.useState(() => chromecast.active);
     const [airplayAvailable, setAirplayAvailable] = React.useState(false);
     const [buttonsMenuOpen, , , toogleButtonsMenu] = useBinaryState(false);
+
+    const setAirplayActiveRef = React.useRef();
+    setAirplayActiveRef.current = setAirplayActive;
+
     const getVideoElement = React.useCallback(() => {
         if (videoContainerElementRef && videoContainerElementRef.current) {
             if (videoContainerElementRef.current instanceof HTMLVideoElement)
@@ -78,15 +83,23 @@ const ControlBar = ({
             }
         }
 
+        function airplayActiveChanged() {
+            if (setAirplayActiveRef.current)
+                setAirplayActiveRef.current(!!videoTag.webkitCurrentPlaybackTargetIsWireless);
+        }
+
         if (window.WebKitPlaybackTargetAvailabilityEvent) {
             videoTag.addEventListener('webkitplaybacktargetavailabilitychanged', onAirplayAvailabilityChanged);
+            videoTag.addEventListener('webkitcurrentplaybacktargetiswirelesschanged', airplayActiveChanged);
 
             setAirplayAvailable(!!videoTag.webkitWirelessVideoPlaybackDisabled);
+            airplayActiveChanged();
         }
 
         return () => {
             if (window.WebKitPlaybackTargetAvailabilityEvent) {
                 videoTag.removeEventListener('webkitplaybacktargetavailabilitychanged', onAirplayAvailabilityChanged);
+                videoTag.removeEventListener('webkitcurrentplaybacktargetiswirelesschanged', airplayActiveChanged);
             }
         };
     }, [getVideoElement()]);
@@ -273,6 +286,7 @@ ControlBar.propTypes = {
     onToggleOptionsMenu: PropTypes.func,
     onToggleStatisticsMenu: PropTypes.func,
     videoContainerElementRef: PropTypes.object,
+    setAirplayActive: PropTypes.func,
 };
 
 module.exports = ControlBar;
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
@@ -48,6 +48,7 @@ const Player = ({ urlParams, queryParams }) => {
     const [casting, setCasting] = React.useState(() => {
         return chromecast.active && chromecast.transport.getCastState() === cast.framework.CastState.CONNECTED;
     });
+    const [airplayActive, setAirplayActive] = React.useState(false);
 
     const [immersed, setImmersed] = React.useState(true);
     const setImmersedDebounced = React.useCallback(debounce(setImmersed, 3000), []);
@@ -75,8 +76,8 @@ const Player = ({ urlParams, queryParams }) => {
     }, []);
 
     const overlayHidden = React.useMemo(() => {
-        return immersed && !casting && video.state.paused !== null && (!video.state.paused || isMobile) && !menusOpen && !nextVideoPopupOpen;
-    }, [immersed, casting, video.state.paused, menusOpen, nextVideoPopupOpen]);
+        return immersed && !casting && !airplayActive && video.state.paused !== null && (!video.state.paused || isMobile) && !menusOpen && !nextVideoPopupOpen;
+    }, [immersed, casting, airplayActive, video.state.paused, menusOpen, nextVideoPopupOpen]);
 
     const nextVideoPopupDismissed = React.useRef(false);
     const defaultSubtitlesSelected = React.useRef(false);
@@ -323,7 +324,7 @@ const Player = ({ urlParams, queryParams }) => {
                     player.libraryItem.state.timeOffset
                     :
                     0,
-                forceTranscoding: forceTranscoding || casting,
+                forceTranscoding: forceTranscoding || casting || airplayActive,
                 maxAudioChannels: settings.surroundSound ? 32 : 2,
                 streamingServerURL: streamingServer.baseUrl ?
                     casting ?
@@ -338,7 +339,7 @@ const Player = ({ urlParams, queryParams }) => {
                 shellTransport: shell.active ? shell.transport : null,
             });
         }
-    }, [streamingServer.baseUrl, player.selected, player.metaItem, forceTranscoding, casting]);
+    }, [streamingServer.baseUrl, player.selected, player.metaItem, forceTranscoding, casting, airplayActive]);
     React.useEffect(() => {
         if (video.state.stream !== null) {
             const tracks = player.subtitles.map((subtitles) => ({
@@ -709,6 +710,7 @@ const Player = ({ urlParams, queryParams }) => {
                 nextVideo={player.nextVideo}
                 stream={player.selected !== null ? player.selected.stream : null}
                 videoContainerElementRef={video.containerElement}
+                setAirplayActive={setAirplayActive}
                 statistics={statistics}
                 onPlayRequested={onPlayRequested}
                 onPauseRequested={onPauseRequested}