From 072e20b5851d929d5ea9f6a66ddcf9279e4ebe66 Mon Sep 17 00:00:00 2001
From: callum <callum17@users.noreply.github.com>
Date: Sat, 27 Aug 2022 13:50:58 +0100
Subject: [PATCH] Fixed: itemContextMenu opened from bottom media control bar
 applying operations to the wrong item when items have no image metadata. Can
 manifest as the wrong song being added to a playlist, deleted, or receiving
 user supplied metadata, etc.

---
 src/components/nowPlayingBar/nowPlayingBar.js | 82 +++++++++----------
 1 file changed, 37 insertions(+), 45 deletions(-)

diff --git a/src/components/nowPlayingBar/nowPlayingBar.js b/src/components/nowPlayingBar/nowPlayingBar.js
index 4277100168..0b1363add5 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,54 +524,46 @@ import { appRouter } from '../appRouter';
             height: imgHeight
         })) : null;
 
-        let isRefreshing = false;
-
-        if (url !== currentImgUrl) {
-            currentImgUrl = url;
-            isRefreshing = true;
-
-            if (url) {
-                imageLoader.lazyImage(nowPlayingImageElement, url);
-                nowPlayingImageElement.style.display = null;
-                nowPlayingTextElement.style.marginLeft = null;
-            } else {
-                nowPlayingImageElement.style.backgroundImage = '';
-                nowPlayingImageElement.style.display = 'none';
-                nowPlayingTextElement.style.marginLeft = '1em';
-            }
+        if (url && url !== nowPlayingImageUrl) {
+            nowPlayingImageUrl = url;
+            imageLoader.lazyImage(nowPlayingImageElement, url);
+            nowPlayingImageElement.style.display = null;
+            nowPlayingTextElement.style.marginLeft = null;
+        } else {
+            nowPlayingImageElement.style.backgroundImage = '';
+            nowPlayingImageElement.style.display = 'none';
+            nowPlayingTextElement.style.marginLeft = '1em';
         }
 
         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 = '';
         }