move queue favorite event listener to an app global scope

src/renderer/features/now-playing/components/play-queue.tsx

@@ -11,17 +11,12 @@ import {
 } from '/@/renderer/components/item-list/item-table-list/item-table-list';
 import { ItemTableListColumn } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { ItemListHandle } from '/@/renderer/components/item-list/types';
-import { eventEmitter } from '/@/renderer/events/event-emitter';
-import { UserFavoriteEventPayload, UserRatingEventPayload } from '/@/renderer/events/events';
 import { useIsPlayerFetching, usePlayer } from '/@/renderer/features/player/context/player-context';
 import { searchLibraryItems } from '/@/renderer/features/shared/utils';
 import { useDragDrop } from '/@/renderer/hooks/use-drag-drop';
 import {
     subscribeCurrentTrack,
     subscribePlayerQueue,
-    updateQueueFavorites,
-    updateQueueRatings,
-    useCurrentServerId,
     useListSettings,
     usePlayerActions,
     usePlayerQueueType,
@@ -49,7 +44,6 @@ export const PlayQueue = forwardRef<ItemListHandle, QueueProps>(({ listKey, sear
     const mergedRef = useMergedRef(ref, tableRef);
     const { getQueue } = usePlayerActions();
     const queueType = usePlayerQueueType();
-    const serverId = useCurrentServerId();
 
     const [debouncedSearchTerm] = useDebouncedValue(searchTerm, 200);
 
@@ -111,33 +105,6 @@ export const PlayQueue = forwardRef<ItemListHandle, QueueProps>(({ listKey, sear
         };
     }, [getQueue, queueType, tableRef]);
 
-    // Listen to favorite and rating events to update queue songs
-    useEffect(() => {
-        const handleFavorite = (payload: UserFavoriteEventPayload) => {
-            if (payload.itemType !== LibraryItem.SONG || payload.serverId !== serverId) {
-                return;
-            }
-
-            updateQueueFavorites(payload.id, payload.favorite);
-        };
-
-        const handleRating = (payload: UserRatingEventPayload) => {
-            if (payload.itemType !== LibraryItem.SONG || payload.serverId !== serverId) {
-                return;
-            }
-
-            updateQueueRatings(payload.id, payload.rating);
-        };
-
-        eventEmitter.on('USER_FAVORITE', handleFavorite);
-        eventEmitter.on('USER_RATING', handleRating);
-
-        return () => {
-            eventEmitter.off('USER_FAVORITE', handleFavorite);
-            eventEmitter.off('USER_RATING', handleRating);
-        };
-    }, [serverId]);
-
     const filteredData: QueueSong[] = useMemo(() => {
         if (debouncedSearchTerm) {
             const searched = searchLibraryItems(data, debouncedSearchTerm, LibraryItem.SONG);

src/renderer/features/player/components/audio-players.tsx

@@ -1,10 +1,48 @@
+import { useEffect } from 'react';
+
+import { eventEmitter } from '/@/renderer/events/event-emitter';
+import { UserFavoriteEventPayload, UserRatingEventPayload } from '/@/renderer/events/events';
 import { MpvPlayer } from '/@/renderer/features/player/audio-player/mpv-player';
 import { WebPlayer } from '/@/renderer/features/player/audio-player/web-player';
-import { usePlaybackType } from '/@/renderer/store';
+import {
+    updateQueueFavorites,
+    updateQueueRatings,
+    useCurrentServerId,
+    usePlaybackType,
+} from '/@/renderer/store';
+import { LibraryItem } from '/@/shared/types/domain-types';
 import { PlayerType } from '/@/shared/types/types';
 
 export const AudioPlayers = () => {
     const playbackType = usePlaybackType();
+    const serverId = useCurrentServerId();
+
+    // Listen to favorite and rating events to update queue songs
+    useEffect(() => {
+        const handleFavorite = (payload: UserFavoriteEventPayload) => {
+            if (payload.itemType !== LibraryItem.SONG || payload.serverId !== serverId) {
+                return;
+            }
+
+            updateQueueFavorites(payload.id, payload.favorite);
+        };
+
+        const handleRating = (payload: UserRatingEventPayload) => {
+            if (payload.itemType !== LibraryItem.SONG || payload.serverId !== serverId) {
+                return;
+            }
+
+            updateQueueRatings(payload.id, payload.rating);
+        };
+
+        eventEmitter.on('USER_FAVORITE', handleFavorite);
+        eventEmitter.on('USER_RATING', handleRating);
+
+        return () => {
+            eventEmitter.off('USER_FAVORITE', handleFavorite);
+            eventEmitter.off('USER_RATING', handleRating);
+        };
+    }, [serverId]);
 
     return (
         <>