From ba930eda20bf78e9a5c81968e945c27f278d0676 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 20 May 2026 14:11:16 +0300
Subject: [PATCH 1/2] feat: support casting with server

---
 .../CastDevicesMenu/CastDevicesMenu.tsx       | 45 +++++++++++++++++++
 src/routes/Player/CastDevicesMenu/index.ts    |  5 +++
 src/routes/Player/CastDevicesMenu/styles.less |  6 +++
 src/routes/Player/ControlBar/ControlBar.js    | 23 ++++++++--
 src/routes/Player/Player.js                   | 42 ++++++++++++++++-
 5 files changed, 116 insertions(+), 5 deletions(-)
 create mode 100644 src/routes/Player/CastDevicesMenu/CastDevicesMenu.tsx
 create mode 100644 src/routes/Player/CastDevicesMenu/index.ts
 create mode 100644 src/routes/Player/CastDevicesMenu/styles.less

diff --git a/src/routes/Player/CastDevicesMenu/CastDevicesMenu.tsx b/src/routes/Player/CastDevicesMenu/CastDevicesMenu.tsx
new file mode 100644
index 000000000..567361201
--- /dev/null
+++ b/src/routes/Player/CastDevicesMenu/CastDevicesMenu.tsx
@@ -0,0 +1,45 @@
+// Copyright (C) 2017-2026 Smart code 203358507
+
+import React, { forwardRef, memo, MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+import Option from '../OptionsMenu/Option';
+import styles from './styles.less';
+
+type CastDevice = {
+    id: string,
+    name: string,
+};
+
+type Props = {
+    className: string,
+    devices: CastDevice[],
+    onDeviceSelected: (deviceId: string) => void,
+};
+
+const CastDevicesMenu = memo(forwardRef<HTMLDivElement, Props>(({ className, devices, onDeviceSelected }, ref) => {
+    const { t } = useTranslation();
+
+    const onMouseDown = (event: MouseEvent) => {
+        // @ts-expect-error: Property 'castDevicesMenuClosePrevented' does not exist on type 'MouseEvent'.
+        event.nativeEvent.castDevicesMenuClosePrevented = true;
+    };
+
+    return (
+        <div ref={ref} className={classNames(className, styles['cast-devices-menu-container'])} onMouseDown={onMouseDown}>
+            {
+                devices.map(({ id, name }) => (
+                    <Option
+                        key={id}
+                        icon={'cast'}
+                        label={t('PLAYER_PLAY_IN', { device: name })}
+                        deviceId={id}
+                        onClick={onDeviceSelected}
+                    />
+                ))
+            }
+        </div>
+    );
+}));
+
+export default CastDevicesMenu;
diff --git a/src/routes/Player/CastDevicesMenu/index.ts b/src/routes/Player/CastDevicesMenu/index.ts
new file mode 100644
index 000000000..76ea8ae60
--- /dev/null
+++ b/src/routes/Player/CastDevicesMenu/index.ts
@@ -0,0 +1,5 @@
+// Copyright (C) 2017-2026 Smart code 203358507
+
+import CastDevicesMenu from './CastDevicesMenu';
+
+export default CastDevicesMenu;
diff --git a/src/routes/Player/CastDevicesMenu/styles.less b/src/routes/Player/CastDevicesMenu/styles.less
new file mode 100644
index 000000000..5832af248
--- /dev/null
+++ b/src/routes/Player/CastDevicesMenu/styles.less
@@ -0,0 +1,6 @@
+// Copyright (C) 2017-2026 Smart code 203358507
+
+.cast-devices-menu-container {
+    width: 16rem;
+    padding: 1rem;
+}
diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js
index c9ba5cd7e..1aefdba71 100644
--- a/src/routes/Player/ControlBar/ControlBar.js
+++ b/src/routes/Player/ControlBar/ControlBar.js
@@ -39,6 +39,8 @@ const ControlBar = React.forwardRef(({
     onToggleSpeedMenu,
     onToggleSideDrawer,
     onToggleOptionsMenu,
+    shellCastAvailable,
+    onToggleCastDevicesMenu,
     videoScale,
     videoScaleLabel,
     onVideoScaleChanged,
@@ -68,6 +70,9 @@ const ControlBar = React.forwardRef(({
     const onStatisticsButtonMouseDown = React.useCallback((event) => {
         event.nativeEvent.statisticsMenuClosePrevented = true;
     }, []);
+    const onCastDevicesButtonMouseDown = React.useCallback((event) => {
+        event.nativeEvent.castDevicesMenuClosePrevented = true;
+    }, []);
     const onPlayPauseButtonClick = React.useCallback(() => {
         if (paused) {
             if (typeof onPlayRequested === 'function') {
@@ -95,9 +100,19 @@ const ControlBar = React.forwardRef(({
             }
         }
     }, [muted, onMuteRequested, onUnmuteRequested]);
+    const castButtonDisabled = platform.shell.active ? !shellCastAvailable : !chromecastServiceActive;
     const onChromecastButtonClick = React.useCallback(() => {
-        chromecast.transport.requestSession();
-    }, []);
+        if (castButtonDisabled) {
+            return;
+        }
+        if (platform.shell.active) {
+            if (typeof onToggleCastDevicesMenu === 'function') {
+                onToggleCastDevicesMenu();
+            }
+        } else {
+            chromecast.transport.requestSession();
+        }
+    }, [castButtonDisabled, platform.shell.active, onToggleCastDevicesMenu]);
     React.useEffect(() => {
         const onStateChanged = () => {
             setChromecastServiceActive(chromecast.active);
@@ -162,7 +177,7 @@ const ControlBar = React.forwardRef(({
                     <Button className={classnames(styles['control-bar-button'], { 'disabled': playbackSpeed === null })} tabIndex={-1} onMouseDown={onSpeedButtonMouseDown} onClick={onToggleSpeedMenu}>
                         <Icon className={styles['icon']} name={'speed'} />
                     </Button>
-                    <Button className={classnames(styles['control-bar-button'], { 'disabled': !chromecastServiceActive })} tabIndex={-1} onClick={onChromecastButtonClick}>
+                    <Button className={classnames(styles['control-bar-button'], { 'disabled': castButtonDisabled })} tabIndex={-1} onMouseDown={onCastDevicesButtonMouseDown} onClick={onChromecastButtonClick}>
                         <Icon className={styles['icon']} name={'cast'} />
                     </Button>
                     <Button className={classnames(styles['control-bar-button'], { 'disabled': !Array.isArray(subtitlesTracks) || subtitlesTracks.length === 0 })} tabIndex={-1} onMouseDown={onSubtitlesButtonMouseDown} onClick={onToggleSubtitlesMenu}>
@@ -221,6 +236,8 @@ ControlBar.propTypes = {
     onToggleSpeedMenu: PropTypes.func,
     onToggleSideDrawer: PropTypes.func,
     onToggleOptionsMenu: PropTypes.func,
+    shellCastAvailable: PropTypes.bool,
+    onToggleCastDevicesMenu: PropTypes.func,
     onToggleStatisticsMenu: PropTypes.func,
     onMouseOver: PropTypes.func,
     onMouseMove: PropTypes.func,
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 67baeceb2..6f79e2e26 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -19,6 +19,7 @@ const ControlBar = require('./ControlBar');
 const NextVideoPopup = require('./NextVideoPopup');
 const StatisticsMenu = require('./StatisticsMenu');
 const OptionsMenu = require('./OptionsMenu');
+const { default: CastDevicesMenu } = require('./CastDevicesMenu');
 const SubtitlesMenu = require('./SubtitlesMenu');
 const { default: AudioMenu } = require('./AudioMenu');
 const SpeedMenu = require('./SpeedMenu');
@@ -82,12 +83,13 @@ const Player = ({ urlParams, queryParams }) => {
     const [audioMenuOpen, , closeAudioMenu, toggleAudioMenu] = useBinaryState(false);
     const [speedMenuOpen, , closeSpeedMenu, toggleSpeedMenu] = useBinaryState(false);
     const [statisticsMenuOpen, , closeStatisticsMenu, toggleStatisticsMenu] = useBinaryState(false);
+    const [castDevicesMenuOpen, , closeCastDevicesMenu, toggleCastDevicesMenu] = useBinaryState(false);
     const [nextVideoPopupOpen, openNextVideoPopup, closeNextVideoPopup] = useBinaryState(false);
     const [sideDrawerOpen, , closeSideDrawer, toggleSideDrawer] = useBinaryState(false);
 
     const menusOpen = React.useMemo(() => {
-        return optionsMenuOpen || subtitlesMenuOpen || audioMenuOpen || speedMenuOpen || statisticsMenuOpen || sideDrawerOpen || nextVideoPopupOpen;
-    }, [optionsMenuOpen, subtitlesMenuOpen, audioMenuOpen, speedMenuOpen, statisticsMenuOpen, sideDrawerOpen, nextVideoPopupOpen]);
+        return optionsMenuOpen || subtitlesMenuOpen || audioMenuOpen || speedMenuOpen || statisticsMenuOpen || castDevicesMenuOpen || sideDrawerOpen || nextVideoPopupOpen;
+    }, [optionsMenuOpen, subtitlesMenuOpen, audioMenuOpen, speedMenuOpen, statisticsMenuOpen, castDevicesMenuOpen, sideDrawerOpen, nextVideoPopupOpen]);
 
     const closeMenus = React.useCallback(() => {
         closeOptionsMenu();
@@ -95,9 +97,33 @@ const Player = ({ urlParams, queryParams }) => {
         closeAudioMenu();
         closeSpeedMenu();
         closeStatisticsMenu();
+        closeCastDevicesMenu();
         closeSideDrawer();
     }, []);
 
+    const castDevices = React.useMemo(() => {
+        return playbackDevices.filter(({ type }) => type === 'chromecast' || type === 'tv');
+    }, [playbackDevices]);
+    const castStreamingUrl = React.useMemo(() => {
+        return player.selected?.stream?.deepLinks?.externalPlayer?.streaming || null;
+    }, [player.selected]);
+    const shellCastAvailable = platform.shell.active && castStreamingUrl !== null && castDevices.length > 0;
+    const onCastDeviceSelected = React.useCallback((deviceId) => {
+        if (castStreamingUrl) {
+            core.transport.dispatch({
+                action: 'StreamingServer',
+                args: {
+                    action: 'PlayOnDevice',
+                    args: {
+                        device: deviceId,
+                        source: castStreamingUrl,
+                    }
+                }
+            });
+            closeCastDevicesMenu();
+        }
+    }, [castStreamingUrl]);
+
     const {
         streamSubtitles,
         allSubtitleTracks,
@@ -294,6 +320,9 @@ const Player = ({ urlParams, queryParams }) => {
         if (!event.nativeEvent.statisticsMenuClosePrevented) {
             closeStatisticsMenu();
         }
+        if (!event.nativeEvent.castDevicesMenuClosePrevented) {
+            closeCastDevicesMenu();
+        }
 
         closeSideDrawer();
     }, []);
@@ -878,6 +907,8 @@ const Player = ({ urlParams, queryParams }) => {
                 onVolumeChangeRequested={onVolumeChangeRequested}
                 onSeekRequested={onSeekRequested}
                 onToggleOptionsMenu={toggleOptionsMenu}
+                shellCastAvailable={shellCastAvailable}
+                onToggleCastDevicesMenu={toggleCastDevicesMenu}
                 onToggleSubtitlesMenu={toggleSubtitlesMenu}
                 onToggleAudioMenu={toggleAudioMenu}
                 onToggleSpeedMenu={toggleSpeedMenu}
@@ -913,6 +944,13 @@ const Player = ({ urlParams, queryParams }) => {
                     {...statistics}
                 />
             </Transition>
+            <Transition when={castDevicesMenuOpen} name={'fade'}>
+                <CastDevicesMenu
+                    className={classnames(styles['layer'], styles['menu-layer'])}
+                    devices={castDevices}
+                    onDeviceSelected={onCastDeviceSelected}
+                />
+            </Transition>
             <Transition when={sideDrawerOpen} name={'slide-left'}>
                 <SideDrawer
                     className={classnames(styles['layer'], styles['side-drawer-layer'])}

From c136b5043debabfe56810d4c00c21ed8bca1923d Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 20 May 2026 16:00:30 +0300
Subject: [PATCH 2/2] refactor: correctly use new action to refresh

---
 .../CastDevicesMenu/CastDevicesMenu.tsx       | 31 +++++++++++++------
 src/routes/Player/CastDevicesMenu/styles.less |  7 +++++
 src/routes/Player/ControlBar/ControlBar.js    | 27 +++++++++-------
 src/routes/Player/Player.js                   | 22 +++++++++++--
 4 files changed, 64 insertions(+), 23 deletions(-)

diff --git a/src/routes/Player/CastDevicesMenu/CastDevicesMenu.tsx b/src/routes/Player/CastDevicesMenu/CastDevicesMenu.tsx
index 567361201..92cf7dd58 100644
--- a/src/routes/Player/CastDevicesMenu/CastDevicesMenu.tsx
+++ b/src/routes/Player/CastDevicesMenu/CastDevicesMenu.tsx
@@ -14,10 +14,11 @@ type CastDevice = {
 type Props = {
     className: string,
     devices: CastDevice[],
+    loading: boolean,
     onDeviceSelected: (deviceId: string) => void,
 };
 
-const CastDevicesMenu = memo(forwardRef<HTMLDivElement, Props>(({ className, devices, onDeviceSelected }, ref) => {
+const CastDevicesMenu = memo(forwardRef<HTMLDivElement, Props>(({ className, devices, loading, onDeviceSelected }, ref) => {
     const { t } = useTranslation();
 
     const onMouseDown = (event: MouseEvent) => {
@@ -28,15 +29,25 @@ const CastDevicesMenu = memo(forwardRef<HTMLDivElement, Props>(({ className, dev
     return (
         <div ref={ref} className={classNames(className, styles['cast-devices-menu-container'])} onMouseDown={onMouseDown}>
             {
-                devices.map(({ id, name }) => (
-                    <Option
-                        key={id}
-                        icon={'cast'}
-                        label={t('PLAYER_PLAY_IN', { device: name })}
-                        deviceId={id}
-                        onClick={onDeviceSelected}
-                    />
-                ))
+                devices.length > 0 ?
+                    devices.map(({ id, name }) => (
+                        <Option
+                            key={id}
+                            icon={'cast'}
+                            label={t('PLAYER_PLAY_IN', { device: name })}
+                            deviceId={id}
+                            onClick={onDeviceSelected}
+                        />
+                    ))
+                    :
+                    <div className={styles['message']}>
+                        {
+                            loading ?
+                                t('STREAM_LOADING')
+                                :
+                                t('PLAYER_NO_CAST_DEVICES_FOUND', { defaultValue: 'No cast devices found' })
+                        }
+                    </div>
             }
         </div>
     );
diff --git a/src/routes/Player/CastDevicesMenu/styles.less b/src/routes/Player/CastDevicesMenu/styles.less
index 5832af248..4b4d861c6 100644
--- a/src/routes/Player/CastDevicesMenu/styles.less
+++ b/src/routes/Player/CastDevicesMenu/styles.less
@@ -3,4 +3,11 @@
 .cast-devices-menu-container {
     width: 16rem;
     padding: 1rem;
+
+    .message {
+        padding: 1rem;
+        color: var(--primary-foreground-color);
+        opacity: 0.7;
+        text-align: center;
+    }
 }
diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js
index 1aefdba71..6eac8ca18 100644
--- a/src/routes/Player/ControlBar/ControlBar.js
+++ b/src/routes/Player/ControlBar/ControlBar.js
@@ -39,7 +39,8 @@ const ControlBar = React.forwardRef(({
     onToggleSpeedMenu,
     onToggleSideDrawer,
     onToggleOptionsMenu,
-    shellCastAvailable,
+    shellCastSupported,
+    onRefreshCastDevices,
     onToggleCastDevicesMenu,
     videoScale,
     videoScaleLabel,
@@ -100,19 +101,22 @@ const ControlBar = React.forwardRef(({
             }
         }
     }, [muted, onMuteRequested, onUnmuteRequested]);
-    const castButtonDisabled = platform.shell.active ? !shellCastAvailable : !chromecastServiceActive;
+    const castButtonDisabled = platform.shell.active ? !shellCastSupported : !chromecastServiceActive;
     const onChromecastButtonClick = React.useCallback(() => {
+        if (platform.shell.active) {
+            if (typeof onRefreshCastDevices === 'function') {
+                onRefreshCastDevices();
+            }
+            if (shellCastSupported && typeof onToggleCastDevicesMenu === 'function') {
+                onToggleCastDevicesMenu();
+            }
+            return;
+        }
         if (castButtonDisabled) {
             return;
         }
-        if (platform.shell.active) {
-            if (typeof onToggleCastDevicesMenu === 'function') {
-                onToggleCastDevicesMenu();
-            }
-        } else {
-            chromecast.transport.requestSession();
-        }
-    }, [castButtonDisabled, platform.shell.active, onToggleCastDevicesMenu]);
+        chromecast.transport.requestSession();
+    }, [castButtonDisabled, platform.shell.active, shellCastSupported, onRefreshCastDevices, onToggleCastDevicesMenu]);
     React.useEffect(() => {
         const onStateChanged = () => {
             setChromecastServiceActive(chromecast.active);
@@ -236,7 +240,8 @@ ControlBar.propTypes = {
     onToggleSpeedMenu: PropTypes.func,
     onToggleSideDrawer: PropTypes.func,
     onToggleOptionsMenu: PropTypes.func,
-    shellCastAvailable: PropTypes.bool,
+    shellCastSupported: PropTypes.bool,
+    onRefreshCastDevices: PropTypes.func,
     onToggleCastDevicesMenu: PropTypes.func,
     onToggleStatisticsMenu: PropTypes.func,
     onMouseOver: PropTypes.func,
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 6f79e2e26..b07fc695c 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -104,10 +104,21 @@ const Player = ({ urlParams, queryParams }) => {
     const castDevices = React.useMemo(() => {
         return playbackDevices.filter(({ type }) => type === 'chromecast' || type === 'tv');
     }, [playbackDevices]);
+    const castDevicesLoading = platform.shell.active && streamingServer.playbackDevices !== null && streamingServer.playbackDevices.type === 'Loading';
     const castStreamingUrl = React.useMemo(() => {
         return player.selected?.stream?.deepLinks?.externalPlayer?.streaming || null;
     }, [player.selected]);
-    const shellCastAvailable = platform.shell.active && castStreamingUrl !== null && castDevices.length > 0;
+    const shellCastSupported = platform.shell.active && castStreamingUrl !== null;
+    const refreshCastDevices = React.useCallback(() => {
+        if (platform.shell.active) {
+            core.transport.dispatch({
+                action: 'StreamingServer',
+                args: {
+                    action: 'RefreshPlaybackDevices',
+                }
+            });
+        }
+    }, [platform.shell.active]);
     const onCastDeviceSelected = React.useCallback((deviceId) => {
         if (castStreamingUrl) {
             core.transport.dispatch({
@@ -123,6 +134,11 @@ const Player = ({ urlParams, queryParams }) => {
             closeCastDevicesMenu();
         }
     }, [castStreamingUrl]);
+    React.useEffect(() => {
+        if (castDevicesMenuOpen) {
+            refreshCastDevices();
+        }
+    }, [castDevicesMenuOpen, refreshCastDevices]);
 
     const {
         streamSubtitles,
@@ -907,7 +923,8 @@ const Player = ({ urlParams, queryParams }) => {
                 onVolumeChangeRequested={onVolumeChangeRequested}
                 onSeekRequested={onSeekRequested}
                 onToggleOptionsMenu={toggleOptionsMenu}
-                shellCastAvailable={shellCastAvailable}
+                shellCastSupported={shellCastSupported}
+                onRefreshCastDevices={refreshCastDevices}
                 onToggleCastDevicesMenu={toggleCastDevicesMenu}
                 onToggleSubtitlesMenu={toggleSubtitlesMenu}
                 onToggleAudioMenu={toggleAudioMenu}
@@ -948,6 +965,7 @@ const Player = ({ urlParams, queryParams }) => {
                 <CastDevicesMenu
                     className={classnames(styles['layer'], styles['menu-layer'])}
                     devices={castDevices}
+                    loading={castDevicesLoading}
                     onDeviceSelected={onCastDeviceSelected}
                 />
             </Transition>