Merge pull request #5437 from thornbill/fix-item-state

src/components/playback/displayMirrorManager.ts

@@ -1,38 +1,40 @@
-import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
+import ServerConnections from 'components/ServerConnections';
+import { getItemQuery } from 'hooks/useItem';
+import { toApi } from 'utils/jellyfin-apiclient/compat';
+import { queryClient } from 'utils/query/queryClient';
 
 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()) {
+async function mirrorIfEnabled(serverId: string, itemId: string) {
+    if (playbackManager.enableDisplayMirroring()) {
         const playerInfo = playbackManager.getPlayerInfo();
 
         if (playerInfo && !playerInfo.isLocalPlayer && playerInfo.supportedCommands.indexOf('DisplayContent') !== -1) {
-            mirrorItem(info, playbackManager.getCurrentPlayer());
+            const apiClient = ServerConnections.getApiClient(serverId);
+            const api = toApi(apiClient);
+            const userId = apiClient.getCurrentUserId();
+
+            try {
+                const item = await queryClient.fetchQuery(getItemQuery(
+                    api,
+                    userId,
+                    itemId));
+
+                playbackManager.displayContent({
+                    ItemName: item.Name,
+                    ItemId: item.Id,
+                    ItemType: item.Type
+                }, playbackManager.getCurrentPlayer());
+            } catch (err) {
+                console.error('[DisplayMirrorManager] failed to mirror item', err);
+            }
         }
     }
 }
 
 document.addEventListener('viewshow', e => {
-    const state = e.detail.state || {};
-    const { item } = state;
-
-    if (item?.ServerId) {
-        mirrorIfEnabled({ item });
+    const { serverId, id } = e.detail?.params || {};
+    if (serverId && id) {
+        void mirrorIfEnabled(serverId, id);
     }
 });

src/components/router/appRouter.js

@@ -1,3 +1,4 @@
+import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
 import { Action, createHashHistory } from 'history';
 
 import { appHost } from '../apphost';
@@ -9,8 +10,11 @@ import loading from '../loading/loading';
 import viewManager from '../viewManager/viewManager';
 import ServerConnections from '../ServerConnections';
 import alert from '../alert';
-import { ConnectionState } from '../../utils/jellyfin-apiclient/ConnectionState.ts';
-import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
+
+import { queryClient } from 'utils/query/queryClient';
+import { getItemQuery } from 'hooks/useItem';
+import { toApi } from 'utils/jellyfin-apiclient/compat';
+import { ConnectionState } from 'utils/jellyfin-apiclient/ConnectionState.ts';
 
 export const history = createHashHistory();
 
@@ -183,18 +187,26 @@ class AppRouter {
 
     showItem(item, serverId, options) {
         // TODO: Refactor this so it only gets items, not strings.
-        if (typeof (item) === 'string') {
+        if (typeof item === 'string') {
             const apiClient = serverId ? ServerConnections.getApiClient(serverId) : ServerConnections.currentApiClient();
-            apiClient.getItem(apiClient.getCurrentUserId(), item).then((itemObject) => {
-                this.showItem(itemObject, options);
-            });
+            const api = toApi(apiClient);
+            const userId = apiClient.getCurrentUserId();
+
+            queryClient
+                .fetchQuery(getItemQuery(api, userId, item))
+                .then(itemObject => {
+                    this.showItem(itemObject, options);
+                })
+                .catch(err => {
+                    console.error('[AppRouter] Failed to fetch item', err);
+                });
         } else {
             if (arguments.length === 2) {
                 options = arguments[1];
             }
 
             const url = this.getRouteUrl(item, options);
-            this.show(url, { item });
+            this.show(url);
         }
     }
 

src/components/themeMediaPlayer.js

@@ -1,6 +1,14 @@
+import { MediaType } from '@jellyfin/sdk/lib/generated-client/models/media-type';
+import { getLibraryApi } from '@jellyfin/sdk/lib/utils/api/library-api';
+
+import { getItemQuery } from 'hooks/useItem';
+import { currentSettings as userSettings } from 'scripts/settings/userSettings';
+import { ItemKind } from 'types/base/models/item-kind';
+import Events from 'utils/events.ts';
+import { toApi } from 'utils/jellyfin-apiclient/compat';
+import { queryClient } from 'utils/query/queryClient';
+
 import { playbackManager } from './playback/playbackmanager';
-import * as userSettings from '../scripts/settings/userSettings';
-import Events from '../utils/events.ts';
 import ServerConnections from './ServerConnections';
 
 let currentOwnerId;
@@ -50,44 +58,61 @@ function stopIfPlaying() {
 }
 
 function enabled(mediaType) {
-    if (mediaType === 'Video') {
+    if (mediaType === MediaType.Video) {
         return userSettings.enableThemeVideos();
     }
 
     return userSettings.enableThemeSongs();
 }
 
-const excludeTypes = ['CollectionFolder', 'UserView', 'Program', 'SeriesTimer', 'Person', 'TvChannel', 'Channel'];
+const excludeTypes = [
+    ItemKind.CollectionFolder,
+    ItemKind.UserView,
+    ItemKind.Person,
+    ItemKind.Program,
+    ItemKind.TvChannel,
+    ItemKind.Channel,
+    ItemKind.SeriesTimer
+];
 
-function loadThemeMedia(item) {
-    if (item.CollectionType) {
-        stopIfPlaying();
-        return;
-    }
+async function loadThemeMedia(serverId, itemId) {
+    const apiClient = ServerConnections.getApiClient(serverId);
+    const api = toApi(apiClient);
+    const userId = apiClient.getCurrentUserId();
 
-    if (excludeTypes.indexOf(item.Type) !== -1) {
-        stopIfPlaying();
-        return;
-    }
+    try {
+        const item = await queryClient.fetchQuery(getItemQuery(
+            api,
+            userId,
+            itemId));
 
-    const apiClient = ServerConnections.getApiClient(item.ServerId);
-    apiClient.getThemeMedia(apiClient.getCurrentUserId(), item.Id, true).then(function (themeMediaResult) {
-        const result = userSettings.enableThemeVideos() && themeMediaResult.ThemeVideosResult.Items.length ? themeMediaResult.ThemeVideosResult : themeMediaResult.ThemeSongsResult;
-
-        const ownerId = result.OwnerId;
-
-        if (ownerId !== currentOwnerId) {
-            playThemeMedia(result.Items, ownerId);
+        if (item.CollectionType) {
+            stopIfPlaying();
+            return;
         }
-    });
+
+        if (excludeTypes.includes(item.Type)) {
+            stopIfPlaying();
+            return;
+        }
+
+        const { data: themeMedia } = await getLibraryApi(api)
+            .getThemeMedia({ userId, itemId: item.Id, inheritFromParent: true });
+
+        const result = userSettings.enableThemeVideos() && themeMedia.ThemeVideosResult?.Items?.length ? themeMedia.ThemeVideosResult : themeMedia.ThemeSongsResult;
+
+        if (result.OwnerId !== currentOwnerId) {
+            playThemeMedia(result.Items, result.OwnerId);
+        }
+    } catch (err) {
+        console.error('[ThemeMediaPlayer] failed to load theme media', err);
+    }
 }
 
-document.addEventListener('viewshow', function (e) {
-    const state = e.detail.state || {};
-    const item = state.item;
-
-    if (item?.ServerId) {
-        loadThemeMedia(item);
+document.addEventListener('viewshow', e => {
+    const { serverId, id } = e.detail?.params || {};
+    if (serverId && id) {
+        void loadThemeMedia(serverId, id);
         return;
     }
 
@@ -100,7 +125,7 @@ document.addEventListener('viewshow', function (e) {
     }
 }, true);
 
-Events.on(playbackManager, 'playbackstart', function (e, player) {
+Events.on(playbackManager, 'playbackstart', (_e, player) => {
     const item = playbackManager.currentItem(player);
     // User played something manually
     if (currentThemeIds.indexOf(item.Id) == -1) {