Add favorite hotkey options (#326)

* Add favorite hotkey options

* Update wording

---------

Co-authored-by: Jeff <42182408+jeffvli@users.noreply.github.com>

src/renderer/features/player/components/right-controls.tsx

@@ -16,13 +16,14 @@ import {
     useCurrentSong,
     useHotkeySettings,
     useMuted,
+    usePreviousSong,
     useSidebarStore,
     useSpeed,
     useVolume,
 } from '/@/renderer/store';
 import { useRightControls } from '../hooks/use-right-controls';
 import { PlayerButton } from './player-button';
-import { LibraryItem, ServerType, Song } from '/@/renderer/api/types';
+import { LibraryItem, QueueSong, ServerType, Song } from '/@/renderer/api/types';
 import { useCreateFavorite, useDeleteFavorite, useSetRating } from '/@/renderer/features/shared';
 import { DropdownMenu, Rating } from '/@/renderer/components';
 import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
@@ -38,6 +39,7 @@ export const RightControls = () => {
     const muted = useMuted();
     const server = useCurrentServer();
     const currentSong = useCurrentSong();
+    const previousSong = usePreviousSong();
     const { setSideBar } = useAppStoreActions();
     const { rightExpanded: isQueueExpanded } = useSidebarStore();
     const { bindings } = useHotkeySettings();
@@ -56,15 +58,15 @@ export const RightControls = () => {
     const addToFavoritesMutation = useCreateFavorite({});
     const removeFromFavoritesMutation = useDeleteFavorite({});
 
-    const handleAddToFavorites = () => {
+    const handleAddToFavorites = (song: QueueSong | undefined) => {
-        if (!currentSong) return;
+        if (!song?.id) return;
 
         addToFavoritesMutation.mutate({
             query: {
-                id: [currentSong.id],
+                id: [song.id],
                 type: LibraryItem.SONG,
             },
-            serverId: currentSong?.serverId,
+            serverId: song?.serverId,
         });
     };
 
@@ -92,25 +94,25 @@ export const RightControls = () => {
         });
     };
 
-    const handleRemoveFromFavorites = () => {
+    const handleRemoveFromFavorites = (song: QueueSong | undefined) => {
-        if (!currentSong) return;
+        if (!song?.id) return;
 
         removeFromFavoritesMutation.mutate({
             query: {
-                id: [currentSong.id],
+                id: [song.id],
                 type: LibraryItem.SONG,
             },
-            serverId: currentSong?.serverId,
+            serverId: song?.serverId,
         });
     };
 
-    const handleToggleFavorite = () => {
+    const handleToggleFavorite = (song: QueueSong | undefined) => {
-        if (!currentSong) return;
+        if (!song?.id) return;
 
-        if (currentSong.userFavorite) {
+        if (song.userFavorite) {
-            handleRemoveFromFavorites();
+            handleRemoveFromFavorites(song);
         } else {
-            handleAddToFavorites();
+            handleAddToFavorites(song);
         }
     };
 
@@ -126,6 +128,30 @@ export const RightControls = () => {
         [bindings.volumeUp.isGlobal ? '' : bindings.volumeUp.hotkey, handleVolumeUp],
         [bindings.volumeMute.isGlobal ? '' : bindings.volumeMute.hotkey, handleMute],
         [bindings.toggleQueue.isGlobal ? '' : bindings.toggleQueue.hotkey, handleToggleQueue],
+        [
+            bindings.favoriteCurrentAdd.isGlobal ? '' : bindings.favoriteCurrentAdd.hotkey,
+            () => handleAddToFavorites(currentSong),
+        ],
+        [
+            bindings.favoriteCurrentRemove.isGlobal ? '' : bindings.favoriteCurrentRemove.hotkey,
+            () => handleRemoveFromFavorites(currentSong),
+        ],
+        [
+            bindings.favoriteCurrentToggle.isGlobal ? '' : bindings.favoriteCurrentToggle.hotkey,
+            () => handleToggleFavorite(currentSong),
+        ],
+        [
+            bindings.favoritePreviousAdd.isGlobal ? '' : bindings.favoritePreviousAdd.hotkey,
+            () => handleAddToFavorites(previousSong),
+        ],
+        [
+            bindings.favoritePreviousRemove.isGlobal ? '' : bindings.favoritePreviousRemove.hotkey,
+            () => handleRemoveFromFavorites(previousSong),
+        ],
+        [
+            bindings.favoritePreviousToggle.isGlobal ? '' : bindings.favoritePreviousToggle.hotkey,
+            () => handleToggleFavorite(previousSong),
+        ],
         [bindings.rate0.isGlobal ? '' : bindings.rate0.hotkey, () => handleClearRating(null, 0)],
         [bindings.rate1.isGlobal ? '' : bindings.rate1.hotkey, () => handleUpdateRating(1)],
         [bindings.rate2.isGlobal ? '' : bindings.rate2.hotkey, () => handleUpdateRating(2)],
@@ -240,7 +266,7 @@ export const RightControls = () => {
                         openDelay: 500,
                     }}
                     variant="secondary"
-                    onClick={handleToggleFavorite}
+                    onClick={() => handleToggleFavorite(currentSong)}
                 />
                 {!isMinWidth ? (
                     <PlayerButton

src/renderer/features/settings/components/hotkeys/hotkey-manager-settings.tsx

@@ -13,6 +13,12 @@ const ipc = isElectron() ? window.electron.ipc : null;
 const BINDINGS_MAP: Record<BindingActions, string> = {
     browserBack: 'Browser back',
     browserForward: 'Browser forward',
+    favoriteCurrentAdd: 'Favorite current song',
+    favoriteCurrentRemove: 'Unfavorite current song',
+    favoriteCurrentToggle: 'Toggle current song favorite',
+    favoritePreviousAdd: 'Favorite previous song',
+    favoritePreviousRemove: 'Unfavorite previous song',
+    favoritePreviousToggle: 'Toggle previous song favorite',
     globalSearch: 'Global search',
     localSearch: 'In-page search',
     next: 'Next track',

src/renderer/store/player.store.ts

@@ -827,6 +827,15 @@ export const usePlayerStore = create<PlayerSlice>()(
                                 });
                             }
 
+                            const previousSongId = get().queue.previousNode?.id;
+                            if (previousSongId && ids.includes(previousSongId)) {
+                                set((state) => {
+                                    if (state.queue.previousNode) {
+                                        state.queue.previousNode.userFavorite = favorite;
+                                    }
+                                });
+                            }
+
                             return foundUniqueIds;
                         },
                         setMuted: (muted: boolean) => {

src/renderer/store/settings.store.ts

@@ -84,6 +84,12 @@ type MpvSettings = {
 export enum BindingActions {
     BROWSER_BACK = 'browserBack',
     BROWSER_FORWARD = 'browserForward',
+    FAVORITE_CURRENT_ADD = 'favoriteCurrentAdd',
+    FAVORITE_CURRENT_REMOVE = 'favoriteCurrentRemove',
+    FAVORITE_CURRENT_TOGGLE = 'favoriteCurrentToggle',
+    FAVORITE_PREVIOUS_ADD = 'favoritePreviousAdd',
+    FAVORITE_PREVIOUS_REMOVE = 'favoritePreviousRemove',
+    FAVORITE_PREVIOUS_TOGGLE = 'favoritePreviousToggle',
     GLOBAL_SEARCH = 'globalSearch',
     LOCAL_SEARCH = 'localSearch',
     MUTE = 'volumeMute',
@@ -262,6 +268,12 @@ const initialState: SettingsState = {
         bindings: {
             browserBack: { allowGlobal: false, hotkey: '', isGlobal: false },
             browserForward: { allowGlobal: false, hotkey: '', isGlobal: false },
+            favoriteCurrentAdd: { allowGlobal: true, hotkey: '', isGlobal: false },
+            favoriteCurrentRemove: { allowGlobal: true, hotkey: '', isGlobal: false },
+            favoriteCurrentToggle: { allowGlobal: true, hotkey: '', isGlobal: false },
+            favoritePreviousAdd: { allowGlobal: true, hotkey: '', isGlobal: false },
+            favoritePreviousRemove: { allowGlobal: true, hotkey: '', isGlobal: false },
+            favoritePreviousToggle: { allowGlobal: true, hotkey: '', isGlobal: false },
             globalSearch: { allowGlobal: false, hotkey: 'mod+k', isGlobal: false },
             localSearch: { allowGlobal: false, hotkey: 'mod+f', isGlobal: false },
             next: { allowGlobal: true, hotkey: '', isGlobal: false },