[slightly less scuffed bugfix]: Update table rating/favorite when updated anywhere … (#707)

* [scuffed bugfix]: Update table rating/favorite when updated anywhere else

Modify player store to have temporary state for favorite/rating update
Add effect handler for `virtual-table` to update rating/favorite for players

Note that this does not handle song grid view.
Using a similar handler for gird view did not work, as it appeared to result in inconsistent state.

Finally, this is probably not the optimal solution.
Performance appears fine for ~20k items, but no guarantees.

* restore should update song

* update song rating/favorite/played everywhere except playlist

* special rule for playlists

* use iterator instead

src/renderer/features/albums/components/album-detail-content.tsx

@@ -456,6 +456,7 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
                         key={`table-${tableConfig.rowHeight}`}
                         ref={tableRef}
                         autoHeight
+                        shouldUpdateSong
                         stickyHeader
                         suppressCellFocus
                         suppressLoadingOverlay

src/renderer/features/artists/components/album-artist-detail-content.tsx

@@ -560,6 +560,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                                     autoFitColumns
                                     autoHeight
                                     deselectOnClickOutside
+                                    shouldUpdateSong
                                     stickyHeader
                                     suppressCellFocus
                                     suppressHorizontalScroll
@@ -567,7 +568,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                                     suppressRowDrag
                                     columnDefs={topSongsColumnDefs}
                                     enableCellChangeFlash={false}
-                                    getRowId={(data) => data.data.uniqueId}
+                                    getRowId={(data) => data.data.id}
                                     rowData={topSongs}
                                     rowHeight={60}
                                     rowSelection="multiple"

src/renderer/features/artists/components/album-artist-detail-top-songs-list-content.tsx

@@ -64,8 +64,9 @@ export const AlbumArtistDetailTopSongsListContent = ({
                 <VirtualTable
                     key={`table-${tableProps.rowHeight}-${server?.id}`}
                     ref={tableRef}
+                    shouldUpdateSong
                     {...tableProps}
-                    getRowId={(data) => data.data.uniqueId}
+                    getRowId={(data) => data.data.id}
                     rowClassRules={rowClassRules}
                     rowData={data}
                     rowModelType="clientSide"

src/renderer/features/player/mutations/scrobble-mutation.ts

@@ -4,9 +4,11 @@ import { api } from '/@/renderer/api';
 import { ScrobbleResponse, ScrobbleArgs } from '/@/renderer/api/types';
 import { MutationOptions } from '/@/renderer/lib/react-query';
 import { getServerById, useIncrementQueuePlayCount } from '/@/renderer/store';
+import { usePlayEvent } from '/@/renderer/store/event.store';
 
 export const useSendScrobble = (options?: MutationOptions) => {
     const incrementPlayCount = useIncrementQueuePlayCount();
+    const sendPlayEvent = usePlayEvent();
 
     return useMutation<
         ScrobbleResponse,
@@ -23,6 +25,7 @@ export const useSendScrobble = (options?: MutationOptions) => {
             // Manually increment the play count for the song in the queue if scrobble was submitted
             if (variables.query.submission) {
                 incrementPlayCount([variables.query.id]);
+                sendPlayEvent([variables.query.id]);
             }
         },
         ...options,

src/renderer/features/playlists/components/playlist-detail-content.tsx

@@ -215,16 +215,14 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
                     autoFitColumns
                     autoHeight
                     deselectOnClickOutside
+                    shouldUpdateSong
                     stickyHeader
                     suppressCellFocus
                     suppressHorizontalScroll
                     suppressLoadingOverlay
                     suppressRowDrag
                     columnDefs={columnDefs}
-                    getRowId={(data) => {
-                        // It's possible that there are duplicate song ids in a playlist
-                        return `${data.data.id}-${data.data.pageIndex}`;
-                    }}
+                    getRowId={(data) => `${data.data.id}-${data.data.pageIndex}`}
                     rowClassRules={rowClassRules}
                     rowData={playlistSongData}
                     rowHeight={60}

src/renderer/features/playlists/components/playlist-detail-song-list-content.tsx

@@ -279,6 +279,7 @@ export const PlaylistDetailSongListContent = ({ tableRef }: PlaylistDetailConten
                     key={`table-${page.display}-${page.table.rowHeight}-${server?.id}`}
                     ref={tableRef}
                     alwaysShowHorizontalScroll
+                    shouldUpdateSong
                     autoFitColumns={page.table.autoFit}
                     columnDefs={columnDefs}
                     context={{

src/renderer/features/search/components/search-content.tsx

@@ -101,6 +101,7 @@ export const SearchContent = ({ tableRef }: SearchContentProps) => {
                 getRowId={(data) => data.data.id}
                 infiniteInitialRowCount={25}
                 rowClassRules={rowClassRules}
+                shouldUpdateSong={itemType === LibraryItem.SONG}
                 onRowDoubleClicked={handleRowDoubleClick}
             />
         </VirtualGridAutoSizerContainer>

src/renderer/features/shared/mutations/create-favorite-mutation.ts

@@ -12,6 +12,7 @@ import {
 import { MutationHookArgs } from '/@/renderer/lib/react-query';
 import { getServerById, useSetAlbumListItemDataById, useSetQueueFavorite } from '/@/renderer/store';
 import isElectron from 'is-electron';
+import { useFavoriteEvent } from '/@/renderer/store/event.store';
 
 const remote = isElectron() ? window.electron.remote : null;
 
@@ -20,6 +21,7 @@ export const useCreateFavorite = (args: MutationHookArgs) => {
     const queryClient = useQueryClient();
     const setAlbumListData = useSetAlbumListItemDataById();
     const setQueueFavorite = useSetQueueFavorite();
+    const setFavoriteEvent = useFavoriteEvent();
 
     return useMutation<
         FavoriteResponse,
@@ -47,6 +49,7 @@ export const useCreateFavorite = (args: MutationHookArgs) => {
             if (variables.query.type === LibraryItem.SONG) {
                 remote?.updateFavorite(true, serverId, variables.query.id);
                 setQueueFavorite(variables.query.id, true);
+                setFavoriteEvent(variables.query.id, true);
             }
 
             // We only need to set if we're already on the album detail page

src/renderer/features/shared/mutations/delete-favorite-mutation.ts

@@ -12,6 +12,7 @@ import {
 import { MutationHookArgs } from '/@/renderer/lib/react-query';
 import { getServerById, useSetAlbumListItemDataById, useSetQueueFavorite } from '/@/renderer/store';
 import isElectron from 'is-electron';
+import { useFavoriteEvent } from '/@/renderer/store/event.store';
 
 const remote = isElectron() ? window.electron.remote : null;
 
@@ -20,6 +21,7 @@ export const useDeleteFavorite = (args: MutationHookArgs) => {
     const queryClient = useQueryClient();
     const setAlbumListData = useSetAlbumListItemDataById();
     const setQueueFavorite = useSetQueueFavorite();
+    const setFavoriteEvent = useFavoriteEvent();
 
     return useMutation<
         FavoriteResponse,
@@ -47,6 +49,7 @@ export const useDeleteFavorite = (args: MutationHookArgs) => {
             if (variables.query.type === LibraryItem.SONG) {
                 remote?.updateFavorite(false, serverId, variables.query.id);
                 setQueueFavorite(variables.query.id, false);
+                setFavoriteEvent(variables.query.id, false);
             }
 
             // We only need to set if we're already on the album detail page

src/renderer/features/shared/mutations/set-rating-mutation.ts

@@ -15,6 +15,7 @@ import {
 import { MutationHookArgs } from '/@/renderer/lib/react-query';
 import { getServerById, useSetAlbumListItemDataById, useSetQueueRating } from '/@/renderer/store';
 import isElectron from 'is-electron';
+import { useRatingEvent } from '/@/renderer/store/event.store';
 
 const remote = isElectron() ? window.electron.remote : null;
 
@@ -23,6 +24,7 @@ export const useSetRating = (args: MutationHookArgs) => {
     const queryClient = useQueryClient();
     const setAlbumListData = useSetAlbumListItemDataById();
     const setQueueRating = useSetQueueRating();
+    const setRatingEvent = useRatingEvent();
 
     return useMutation<
         RatingResponse,
@@ -43,25 +45,36 @@ export const useSetRating = (args: MutationHookArgs) => {
                         break;
                     case LibraryItem.SONG:
                         setQueueRating([item.id], item.userRating);
+                        setRatingEvent([item.id], item.userRating);
                         break;
                 }
             }
         },
         onMutate: (variables) => {
+            const songIds: string[] = [];
             for (const item of variables.query.item) {
                 switch (item.itemType) {
                     case LibraryItem.ALBUM:
                         setAlbumListData(item.id, { userRating: variables.query.rating });
                         break;
                     case LibraryItem.SONG:
-                        setQueueRating([item.id], variables.query.rating);
+                        songIds.push(item.id);
+
                         break;
                 }
             }
 
+            if (songIds.length > 0) {
+                setQueueRating(songIds, variables.query.rating);
+                setRatingEvent(songIds, variables.query.rating);
+            }
+
             if (remote) {
-                const ids = variables.query.item.map((item) => item.id);
-                remote.updateRating(variables.query.rating, variables.query.item[0].serverId, ids);
+                remote.updateRating(
+                    variables.query.rating,
+                    variables.query.item[0].serverId,
+                    songIds,
+                );
             }
 
             return { previous: { items: variables.query.item } };

src/renderer/features/similar-songs/components/similar-songs-list.tsx

@@ -61,6 +61,7 @@ export const SimilarSongsList = ({ count, fullScreen, song }: SimilarSongsListPr
             <VirtualGridAutoSizerContainer>
                 <VirtualTable
                     ref={tableRef}
+                    shouldUpdateSong
                     autoFitColumns={tableConfig.autoFit}
                     columnDefs={columnDefs}
                     context={{
@@ -69,7 +70,7 @@ export const SimilarSongsList = ({ count, fullScreen, song }: SimilarSongsListPr
                         song,
                     }}
                     deselectOnClickOutside={fullScreen}
-                    getRowId={(data) => data.data.uniqueId}
+                    getRowId={(data) => data.data.id}
                     rowBuffer={50}
                     rowData={songQuery.data ?? []}
                     rowHeight={tableConfig.rowHeight || 40}

src/renderer/features/songs/components/song-list-grid-view.tsx

@@ -1,5 +1,5 @@
 import { QueryKey, useQueryClient } from '@tanstack/react-query';
-import { useCallback, useMemo } from 'react';
+import { MutableRefObject, useCallback, useEffect, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import AutoSizer, { Size } from 'react-virtualized-auto-sizer';
 import { ListOnScrollProps } from 'react-window';
@@ -16,6 +16,7 @@ import { SONG_CARD_ROWS } from '/@/renderer/components';
 import {
     VirtualGridAutoSizerContainer,
     VirtualInfiniteGrid,
+    VirtualInfiniteGridRef,
 } from '/@/renderer/components/virtual-grid';
 import { useListContext } from '/@/renderer/context/list-context';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
@@ -23,8 +24,14 @@ import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useListStoreActions, useListStoreByKey } from '/@/renderer/store';
 import { CardRow, ListDisplayType } from '/@/renderer/types';
 import { useHandleFavorite } from '/@/renderer/features/shared/hooks/use-handle-favorite';
+import { useEventStore } from '/@/renderer/store/event.store';
 
-export const SongListGridView = ({ gridRef, itemCount }: any) => {
+interface SongListGridViewProps {
+    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+    itemCount?: number;
+}
+
+export const SongListGridView = ({ gridRef, itemCount }: SongListGridViewProps) => {
     const queryClient = useQueryClient();
     const server = useCurrentServer();
     const handlePlayQueueAdd = usePlayQueueAdd();
@@ -38,6 +45,30 @@ export const SongListGridView = ({ gridRef, itemCount }: any) => {
 
     const handleFavorite = useHandleFavorite({ gridRef, server });
 
+    useEffect(() => {
+        const unSub = useEventStore.subscribe((state) => {
+            const event = state.event;
+            if (event && event.event === 'favorite') {
+                const idSet = new Set(state.ids);
+                const userFavorite = event.favorite;
+
+                gridRef.current?.updateItemData((data) => {
+                    if (idSet.has(data.id)) {
+                        return {
+                            ...data,
+                            userFavorite,
+                        };
+                    }
+                    return data;
+                });
+            }
+        });
+
+        return () => {
+            unSub();
+        };
+    }, [gridRef]);
+
     const cardRows = useMemo(() => {
         const rows: CardRow<Song>[] = [
             SONG_CARD_ROWS.name,

src/renderer/features/songs/components/song-list-table-view.tsx

@@ -56,6 +56,7 @@ export const SongListTableView = ({ tableRef, itemCount }: SongListTableViewProp
                 key={`table-${tableProps.rowHeight}-${server?.id}`}
                 ref={tableRef}
                 {...tableProps}
+                shouldUpdateSong
                 context={{
                     ...tableProps.context,
                     currentSong,