Backport pull request #5898 from jellyfin-web/release-10.9.z

Fix autoCast race condition

Original-merge: 7f575d724e

Merged-by: thornbill <thornbill@users.noreply.github.com>

Backported-by: thornbill <thornbill@users.noreply.github.com>

src/apps/experimental/components/AppToolbar/menus/RemotePlayActiveMenu.tsx

@@ -12,7 +12,7 @@ import { playbackManager } from 'components/playback/playbackmanager';
 import React, { FC, useCallback, useState } from 'react';
 import { Link } from 'react-router-dom';
 
-import { enable, isEnabled, supported } from 'scripts/autocast';
+import { enable, isEnabled } from 'scripts/autocast';
 import globalize from 'scripts/globalize';
 
 interface RemotePlayActiveMenuProps extends MenuProps {
@@ -43,11 +43,10 @@ const RemotePlayActiveMenu: FC<RemotePlayActiveMenuProps> = ({
     }, [ isDisplayMirrorEnabled, setIsDisplayMirrorEnabled ]);
 
     const [ isAutoCastEnabled, setIsAutoCastEnabled ] = useState(isEnabled());
-    const isAutoCastSupported = supported();
     const toggleAutoCast = useCallback(() => {
         enable(!isAutoCastEnabled);
         setIsAutoCastEnabled(!isAutoCastEnabled);
-    }, [ isAutoCastEnabled, setIsAutoCastEnabled ]);
+    }, [ isAutoCastEnabled ]);
 
     const remotePlayerName = playerInfo?.deviceName || playerInfo?.name;
 
@@ -117,7 +116,6 @@ const RemotePlayActiveMenu: FC<RemotePlayActiveMenuProps> = ({
                 </MenuItem>
             )}
 
-            {isAutoCastSupported && (
             <MenuItem onClick={toggleAutoCast}>
                 {isAutoCastEnabled && (
                     <ListItemIcon>
@@ -128,9 +126,8 @@ const RemotePlayActiveMenu: FC<RemotePlayActiveMenuProps> = ({
                     {globalize.translate('EnableAutoCast')}
                 </ListItemText>
             </MenuItem>
-            )}
 
-            {(isDisplayMirrorSupported || isAutoCastSupported) && <Divider />}
+            <Divider />
 
             <MenuItem
                 component={Link}

src/components/playback/playerSelectionMenu.js

@@ -6,7 +6,7 @@ import { pluginManager } from '../pluginManager';
 import { appRouter } from '../router/appRouter';
 import globalize from '../../scripts/globalize';
 import { appHost } from '../apphost';
-import { enable, isEnabled, supported } from '../../scripts/autocast';
+import { enable, isEnabled } from '../../scripts/autocast';
 import '../../elements/emby-checkbox/emby-checkbox';
 import '../../elements/emby-button/emby-button';
 import dialog from '../dialog/dialog';
@@ -200,13 +200,11 @@ function showActivePlayerMenuInternal(playerInfo) {
 
     html += '</div>';
 
-    if (supported()) {
     html += '<div><label class="checkboxContainer">';
     const checkedHtmlAC = isEnabled() ? ' checked' : '';
     html += '<input type="checkbox" is="emby-checkbox" class="chkAutoCast"' + checkedHtmlAC + '/>';
     html += '<span>' + globalize.translate('EnableAutoCast') + '</span>';
     html += '</label></div>';
-    }
 
     html += '<div style="margin-top:1em;display:flex;justify-content: flex-end;">';
 

src/index.jsx

@@ -24,6 +24,7 @@ import packageManager from './components/packageManager';
 import './components/playback/displayMirrorManager.ts';
 import { appRouter } from './components/router/appRouter';
 import './elements/emby-button/emby-button';
+import { initialize as initializeAutoCast } from 'scripts/autocast';
 import './scripts/autoThemes';
 import './components/themeMediaPlayer';
 import { pageClassOn, serverAddress } from './utils/dashboard';
@@ -79,6 +80,8 @@ build: ${__JF_BUILD_VERSION__}`);
     }).then(() => {
         console.debug('initAfterDependencies promises resolved');
 
+        initializeAutoCast(ServerConnections.currentApiClient());
+
         loadCoreDictionary().then(function () {
             onGlobalizeInit();
         });

src/scripts/autocast.js

@@ -1,14 +1,7 @@
 import { playbackManager } from '../components/playback/playbackmanager';
-import ServerConnections from '../components/ServerConnections';
 import Events from '../utils/events.ts';
 
-export function supported() {
-    return typeof(Storage) !== 'undefined';
-}
-
 export function enable(enabled) {
-    if (!supported()) return;
-
     if (enabled) {
         const currentPlayerInfo = playbackManager.getPlayerInfo();
 
@@ -21,8 +14,6 @@ export function enable(enabled) {
 }
 
 export function isEnabled() {
-    if (!supported()) return false;
-
     const playerId = localStorage.getItem('autocastPlayerId');
     const currentPlayerInfo = playbackManager.getPlayerInfo();
 
@@ -42,12 +33,10 @@ function onOpen() {
     });
 }
 
-try {
+export function initialize(apiClient) {
-    const apiClient = ServerConnections.currentApiClient();
+    if (apiClient) {
-
-    if (apiClient && supported()) {
         Events.on(apiClient, 'websocketopen', onOpen);
+    } else {
+        console.warn('[autoCast] cannot initialize missing apiClient');
     }
-} catch (ex) {
-    console.warn('Could not get current apiClient', ex);
 }