[slightly less scuffed bugfix]: Update table rating/favorite when upd…

…ated 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
jeffvli · Sep 3, 2024 · 56c229a · 56c229a
1 parent 9d44f0f
commit 56c229a
Show file tree

Hide file tree

Showing 18 changed files with 223 additions and 143 deletions.
diff --git a/src/remote/store/index.ts b/src/remote/store/index.ts
@@ -175,7 +175,6 @@ export const useRemoteStore = create<SettingsSlice>()(
                                     }
                                     case 'song': {
                                         set((state) => {
-                                            console.log(data);
                                             state.info.song = data;
                                         });
                                         break;

diff --git a/src/renderer/components/virtual-table/hooks/use-rating.ts b/src/renderer/components/virtual-table/hooks/use-rating.ts
diff --git a/src/renderer/components/virtual-table/index.tsx b/src/renderer/components/virtual-table/index.tsx
@@ -42,6 +42,7 @@ import { NoteCell } from '/@/renderer/components/virtual-table/cells/note-cell';
 import { RowIndexCell } from '/@/renderer/components/virtual-table/cells/row-index-cell';
 import i18n from '/@/i18n/i18n';
 import { formatDateAbsolute, formatDateRelative, formatSizeString } from '/@/renderer/utils/format';
+import { useTableChange } from '/@/renderer/hooks/use-song-change';
 
 export * from './table-config-dropdown';
 export * from './table-pagination';
@@ -475,6 +476,7 @@ export interface VirtualTableProps extends AgGridReactProps {
         pagination: TablePaginationType;
         setPagination: any;
     };
+    shouldUpdateSong?: boolean;
     stickyHeader?: boolean;
     transparentHeader?: boolean;
 }
@@ -492,6 +494,7 @@ export const VirtualTable = forwardRef(
             onGridReady,
             onGridSizeChanged,
             paginationProps,
+            shouldUpdateSong,
             ...rest
         }: VirtualTableProps,
         ref: Ref<AgGridReactType | null>,
@@ -506,6 +509,8 @@ export const VirtualTable = forwardRef(
             }
         });
 
+        useTableChange(tableRef, shouldUpdateSong === true);
+
         const defaultColumnDefs: ColDef = useMemo(() => {
             return {
                 lockPinned: true,

diff --git a/src/renderer/features/albums/components/album-detail-content.tsx b/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

diff --git a/src/renderer/features/artists/components/album-artist-detail-content.tsx b/src/renderer/features/artists/components/album-artist-detail-content.tsx
@@ -560,14 +560,15 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                                     autoFitColumns
                                     autoHeight
                                     deselectOnClickOutside
+                                    shouldUpdateSong
                                     stickyHeader
                                     suppressCellFocus
                                     suppressHorizontalScroll
                                     suppressLoadingOverlay
                                     suppressRowDrag
                                     columnDefs={topSongsColumnDefs}
                                     enableCellChangeFlash={false}
-                                    getRowId={(data) => data.data.uniqueId}
+                                    getRowId={(data) => data.data.id}
                                     rowData={topSongs}
                                     rowHeight={60}
                                     rowSelection="multiple"

diff --git a/src/renderer/features/artists/components/album-artist-detail-top-songs-list-content.tsx b/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"

diff --git a/src/renderer/features/player/mutations/scrobble-mutation.ts b/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,

diff --git a/src/renderer/features/playlists/components/playlist-detail-content.tsx b/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}

diff --git a/src/renderer/features/playlists/components/playlist-detail-song-list-content.tsx b/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={{

diff --git a/src/renderer/features/search/components/search-content.tsx b/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>

diff --git a/src/renderer/features/shared/mutations/create-favorite-mutation.ts b/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

diff --git a/src/renderer/features/shared/mutations/delete-favorite-mutation.ts b/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

diff --git a/src/renderer/features/shared/mutations/set-rating-mutation.ts b/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 } };

diff --git a/src/renderer/features/similar-songs/components/similar-songs-list.tsx b/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}