Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-05-24 08:32:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: correctly use new action to refresh

Browse source
This commit is contained in:
Timothy Z. 2026-05-20 16:00:30 +03:00
parent ba930eda20
commit c136b5043d
4 changed files with 64 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/routes/Player/CastDevicesMenu/CastDevicesMenu.tsx
View file

@ -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>
);

7
src/routes/Player/CastDevicesMenu/styles.less
View file

@ -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;
}
}

27
src/routes/Player/ControlBar/ControlBar.js
View file

@ -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,

22
src/routes/Player/Player.js
View file

@ -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>