From ea2498a0dd273c9b522a1122724b182b7a2ccc7a Mon Sep 17 00:00:00 2001
From: callum <callum17@users.noreply.github.com>
Date: Sat, 24 Sep 2022 00:00:13 -0400
Subject: [PATCH] Backport pull request #3877 from jellyfin/release-10.8.z

Fix itemcontextmenu fails to update for items with no image metadata

Original-merge: 72d538e902fbcd7196ee1ee3eb1673a0a225fb2a

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

Backported-by: Joshua M. Boniface <joshua@boniface.me>
---
 src/components/nowPlayingBar/nowPlayingBar.js | 69 +++++++++----------
 1 file changed, 32 insertions(+), 37 deletions(-)

diff --git a/src/components/nowPlayingBar/nowPlayingBar.js b/src/components/nowPlayingBar/nowPlayingBar.js
index 427710016..ddf054472 100644
--- a/src/components/nowPlayingBar/nowPlayingBar.js
+++ b/src/components/nowPlayingBar/nowPlayingBar.js
@@ -24,6 +24,7 @@ import { appRouter } from '../appRouter';
 
     let currentTimeElement;
     let nowPlayingImageElement;
+    let nowPlayingImageUrl;
     let nowPlayingTextElement;
     let nowPlayingUserData;
     let muteButton;
@@ -488,7 +489,6 @@ import { appRouter } from '../appRouter';
         return null;
     }
 
-    let currentImgUrl;
     function updateNowPlayingInfo(state) {
         const nowPlayingItem = state.NowPlayingItem;
 
@@ -524,17 +524,14 @@ import { appRouter } from '../appRouter';
             height: imgHeight
         })) : null;
 
-        let isRefreshing = false;
-
-        if (url !== currentImgUrl) {
-            currentImgUrl = url;
-            isRefreshing = true;
-
+        if (url !== nowPlayingImageUrl) {
             if (url) {
-                imageLoader.lazyImage(nowPlayingImageElement, url);
+                nowPlayingImageUrl = url;
+                imageLoader.lazyImage(nowPlayingImageElement, nowPlayingImageUrl);
                 nowPlayingImageElement.style.display = null;
                 nowPlayingTextElement.style.marginLeft = null;
             } else {
+                nowPlayingImageUrl = null;
                 nowPlayingImageElement.style.backgroundImage = '';
                 nowPlayingImageElement.style.display = 'none';
                 nowPlayingTextElement.style.marginLeft = '1em';
@@ -542,36 +539,34 @@ import { appRouter } from '../appRouter';
         }
 
         if (nowPlayingItem.Id) {
-            if (isRefreshing) {
-                const apiClient = ServerConnections.getApiClient(nowPlayingItem.ServerId);
-                apiClient.getItem(apiClient.getCurrentUserId(), nowPlayingItem.Id).then(function (item) {
-                    const userData = item.UserData || {};
-                    const likes = userData.Likes == null ? '' : userData.Likes;
-                    if (!layoutManager.mobile) {
-                        let contextButton = nowPlayingBarElement.querySelector('.btnToggleContextMenu');
-                        // We remove the previous event listener by replacing the item in each update event
-                        const contextButtonClone = contextButton.cloneNode(true);
-                        contextButton.parentNode.replaceChild(contextButtonClone, contextButton);
-                        contextButton = nowPlayingBarElement.querySelector('.btnToggleContextMenu');
-                        const options = {
-                            play: false,
-                            queue: false,
-                            stopPlayback: true,
-                            clearQueue: true,
-                            positionTo: contextButton
-                        };
-                        apiClient.getCurrentUser().then(function (user) {
-                            contextButton.addEventListener('click', function () {
-                                itemContextMenu.show(Object.assign({
-                                    item: item,
-                                    user: user
-                                }, options));
-                            });
+            const apiClient = ServerConnections.getApiClient(nowPlayingItem.ServerId);
+            apiClient.getItem(apiClient.getCurrentUserId(), nowPlayingItem.Id).then(function (item) {
+                const userData = item.UserData || {};
+                const likes = userData.Likes == null ? '' : userData.Likes;
+                if (!layoutManager.mobile) {
+                    let contextButton = nowPlayingBarElement.querySelector('.btnToggleContextMenu');
+                    // We remove the previous event listener by replacing the item in each update event
+                    const contextButtonClone = contextButton.cloneNode(true);
+                    contextButton.parentNode.replaceChild(contextButtonClone, contextButton);
+                    contextButton = nowPlayingBarElement.querySelector('.btnToggleContextMenu');
+                    const options = {
+                        play: false,
+                        queue: false,
+                        stopPlayback: true,
+                        clearQueue: true,
+                        positionTo: contextButton
+                    };
+                    apiClient.getCurrentUser().then(function (user) {
+                        contextButton.addEventListener('click', function () {
+                            itemContextMenu.show(Object.assign({
+                                item: item,
+                                user: user
+                            }, options));
                         });
-                    }
-                    nowPlayingUserData.innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton mediaButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons favorite" aria-hidden="true"></span></button>';
-                });
-            }
+                    });
+                }
+                nowPlayingUserData.innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton mediaButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><span class="material-icons favorite" aria-hidden="true"></span></button>';
+            });
         } else {
             nowPlayingUserData.innerHTML = '';
         }