Extract display mirror handling from component

src/components/playback/displayMirrorManager.ts

@@ -0,0 +1,38 @@
+import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
+
+import { playbackManager } from './playbackmanager';
+
+interface PlaybackInfo {
+    item: BaseItemDto;
+    context?: string;
+}
+
+function mirrorItem(info: PlaybackInfo, player?: unknown) {
+    const { item } = info;
+
+    playbackManager.displayContent({
+        ItemName: item.Name,
+        ItemId: item.Id,
+        ItemType: item.Type,
+        Context: info.context
+    }, player);
+}
+
+function mirrorIfEnabled(info: PlaybackInfo) {
+    if (info && playbackManager.enableDisplayMirroring()) {
+        const playerInfo = playbackManager.getPlayerInfo();
+
+        if (playerInfo && !playerInfo.isLocalPlayer && playerInfo.supportedCommands.indexOf('DisplayContent') !== -1) {
+            mirrorItem(info, playbackManager.getCurrentPlayer());
+        }
+    }
+}
+
+document.addEventListener('viewshow', e => {
+    const state = e.detail.state || {};
+    const { item } = state;
+
+    if (item?.ServerId) {
+        mirrorIfEnabled({ item });
+    }
+});

src/components/playback/playerSelectionMenu.js

@@ -1,4 +1,3 @@
-import appSettings from '../../scripts/settings/appSettings';
 import Events from '../../utils/events.ts';
 import browser from '../../scripts/browser';
 import loading from '../loading/loading';
@@ -13,32 +12,6 @@ import '../../elements/emby-button/emby-button';
 import dialog from '../dialog/dialog';
 import dialogHelper from '../dialogHelper/dialogHelper';
 
-function mirrorItem(info, player) {
-    const item = info.item;
-
-    playbackManager.displayContent({
-
-        ItemName: item.Name,
-        ItemId: item.Id,
-        ItemType: item.Type,
-        Context: info.context
-    }, player);
-}
-
-function mirrorIfEnabled(info) {
-    if (info && playbackManager.enableDisplayMirroring()) {
-        const getPlayerInfo = playbackManager.getPlayerInfo();
-
-        if (getPlayerInfo && !getPlayerInfo.isLocalPlayer && getPlayerInfo.supportedCommands.indexOf('DisplayContent') !== -1) {
-            mirrorItem(info, playbackManager.getCurrentPlayer());
-        }
-    }
-}
-
-function emptyCallback() {
-    // avoid console logs about uncaught promises
-}
-
 function getTargetSecondaryText(target) {
     if (target.user) {
         return target.user.Name;
@@ -140,10 +113,14 @@ export function show(button) {
                 })[0];
 
                 playbackManager.trySetActivePlayer(target.playerName, target);
-
+            }).catch(() => {
-                mirrorIfEnabled();
+                // action sheet closed
-            }, emptyCallback);
+            });
+        }).catch(err => {
+            console.error('[playerSelectionMenu] failed to import action sheet', err);
         });
+    }).catch(err => {
+        console.error('[playerSelectionMenu] failed to get playback targets', err);
     });
 }
 
@@ -180,6 +157,8 @@ function disconnectFromPlayer(currentDeviceName) {
                 default:
                     break;
             }
+        }).catch(() => {
+            // dialog closed
         });
     } else {
         playbackManager.setDefaultPlayerActive();
@@ -272,11 +251,13 @@ function showActivePlayerMenuInternal(playerInfo) {
 
     dialogHelper.open(dlg).then(function () {
         if (destination === 'nowplaying') {
-            appRouter.showNowPlaying();
+            return appRouter.showNowPlaying();
         } else if (destination === 'disconnectFromPlayer') {
             disconnectFromPlayer(currentDeviceName);
         }
-    }, emptyCallback);
+    }).catch(() => {
+        // dialog closed
+    });
 }
 
 function onMirrorChange() {
@@ -287,23 +268,6 @@ function onAutoCastChange() {
     enable(this.checked);
 }
 
-document.addEventListener('viewshow', function (e) {
-    const state = e.detail.state || {};
-    const item = state.item;
-
-    if (item && item.ServerId) {
-        mirrorIfEnabled({
-            item: item
-        });
-    }
-});
-
-Events.on(appSettings, 'change', function (e, name) {
-    if (name === 'displaymirror') {
-        mirrorIfEnabled();
-    }
-});
-
 Events.on(playbackManager, 'pairing', function () {
     loading.show();
 });

src/global.d.ts

@@ -6,4 +6,8 @@ export declare global {
         Events: Events;
         NativeShell: any;
     }
+
+    interface DocumentEventMap {
+        'viewshow': CustomEvent;
+    }
 }

src/index.jsx

@@ -20,6 +20,7 @@ import { appHost } from './components/apphost';
 import { getPlugins } from './scripts/settings/webSettings';
 import { pluginManager } from './components/pluginManager';
 import packageManager from './components/packageManager';
+import './components/playback/displayMirrorManager.ts';
 import { appRouter, history } from './components/router/appRouter';
 import './elements/emby-button/emby-button';
 import './scripts/autoThemes';