update star functionality

- star term -> favorites
- star/unstar to playerbar
- star/unstar api

src/api/api.ts

@@ -249,3 +249,27 @@ export const getScanStatus = async () => {
 
   return scanStatus;
 };
+
+export const star = async (id: string, type: string) => {
+  const { data } = await api.get(`/star`, {
+    params: {
+      id: type === 'song' ? id : undefined,
+      albumId: type === 'album' ? id : undefined,
+      artistId: type === 'artist' ? id : undefined,
+    },
+  });
+
+  return data;
+};
+
+export const unstar = async (id: string, type: string) => {
+  const { data } = await api.get(`/unstar`, {
+    params: {
+      id: type === 'song' ? id : undefined,
+      albumId: type === 'album' ? id : undefined,
+      artistId: type === 'artist' ? id : undefined,
+    },
+  });
+
+  return data;
+};

src/components/layout/Sidebar.tsx

@@ -39,15 +39,15 @@ const Sidebar = ({
             </Nav.Item>
             <Nav.Item
               eventKey="starred"
-              icon={<Icon icon="star" />}
+              icon={<Icon icon="heart" />}
               onSelect={handleSidebarSelect}
               disabled={disableSidebar}
             >
-              Starred
+              Favorites
             </Nav.Item>
             <Nav.Item
               eventKey="playlists"
-              icon={<Icon icon="bookmark" />}
+              icon={<Icon icon="list-ul" />}
               onSelect={handleSidebarSelect}
               disabled={disableSidebar}
             >
@@ -55,7 +55,7 @@ const Sidebar = ({
             </Nav.Item>
             <Nav.Item
               eventKey="library"
-              icon={<Icon icon="book2" />}
+              icon={<Icon icon="folder-open" />}
               onSelect={handleSidebarSelect}
               disabled={disableSidebar}
             >

src/components/player/PlayerBar.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
+import { useQueryClient } from 'react-query';
 import settings from 'electron-settings';
 import { FlexboxGrid, Icon, Grid, Row, Col } from 'rsuite';
 import { useHistory } from 'react-router-dom';
@@ -19,11 +20,13 @@ import {
   setStatus,
   fixPlayer2Index,
   toggleRepeat,
-  toggleShuffle,
+  toggleDisplayQueue,
+  setStar,
 } from '../../redux/playQueueSlice';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import Player from './Player';
 import CustomTooltip from '../shared/CustomTooltip';
+import { star, unstar } from '../../api/api';
 
 const keyCodes = {
   SPACEBAR: 32,
@@ -32,6 +35,7 @@ const keyCodes = {
 };
 
 const PlayerBar = () => {
+  const queryClient = useQueryClient();
   const playQueue = useAppSelector((state) => state.playQueue);
   const dispatch = useAppDispatch();
   const [seek, setSeek] = useState(0);
@@ -202,10 +206,27 @@ const PlayerBar = () => {
     dispatch(toggleRepeat());
   };
 
-  const handleShuffle = () => {
-    dispatch(toggleShuffle());
+  const handleDisplayQueue = () => {
+    dispatch(toggleDisplayQueue());
   };
 
+  const handleFavorite = async () => {
+    if (!playQueue.entry[playQueue.currentIndex].starred) {
+      star(playQueue.entry[playQueue.currentIndex].id, 'song');
+      dispatch(setStar('star'));
+      await queryClient.refetchQueries(['starred'], {
+        active: true,
+        exact: true,
+      });
+    } else {
+      unstar(playQueue.entry[playQueue.currentIndex].id, 'song');
+      dispatch(setStar('unstar'));
+      await queryClient.refetchQueries(['starred'], {
+        active: true,
+        exact: true,
+      });
+    }
+  };
   return (
     <Player ref={playersRef}>
       <PlayerContainer>
@@ -436,14 +457,14 @@ const PlayerBar = () => {
                 >
                   {playQueue.entry.length >= 1 && (
                     <>
-                      {/* Star Button */}
-                      <CustomTooltip text="Star" delay={1000}>
+                      {/* Favorite Button */}
+                      <CustomTooltip text="Favorite">
                         <PlayerControlIcon
                           tabIndex={0}
                           icon={
                             playQueue.entry[playQueue.currentIndex].starred
-                              ? 'star'
-                              : 'star-o'
+                              ? 'heart'
+                              : 'heart-o'
                           }
                           size="lg"
                           fixedWidth
@@ -453,46 +474,48 @@ const PlayerBar = () => {
                               ? '#1179ac'
                               : undefined,
                           }}
+                          onClick={handleFavorite}
                         />
                       </CustomTooltip>
 
-                      {/* Shuffle Button */}
-                      <CustomTooltip text="Shuffle" delay={1000}>
+                      {/* Repeat Button */}
+                      <CustomTooltip text="Repeat">
                         <PlayerControlIcon
                           tabIndex={0}
-                          icon="random"
+                          icon="repeat"
                           size="lg"
                           fixedWidth
-                          onClick={handleShuffle}
+                          onClick={handleRepeat}
                           onKeyDown={(e: any) => {
                             if (e.keyCode === keyCodes.SPACEBAR) {
-                              handleShuffle();
+                              handleRepeat();
                             }
                           }}
                           style={{
-                            color: playQueue.shuffle ? '#1179ac' : undefined,
+                            color:
+                              playQueue.repeat === 'all'
+                                ? '#1179ac'
+                                : undefined,
                           }}
                         />
                       </CustomTooltip>
-
-                      {/* Repeat Button */}
-                      <CustomTooltip text="Repeat" delay={1000}>
+                      {/* Display Queue Button */}
+                      <CustomTooltip text="Queue">
                         <PlayerControlIcon
                           tabIndex={0}
-                          icon="repeat"
+                          icon="tasks"
                           size="lg"
                           fixedWidth
-                          onClick={handleRepeat}
+                          onClick={handleDisplayQueue}
                           onKeyDown={(e: any) => {
                             if (e.keyCode === keyCodes.SPACEBAR) {
-                              handleRepeat();
+                              handleDisplayQueue();
                             }
                           }}
                           style={{
-                            color:
-                              playQueue.repeat === 'all'
-                                ? '#1179ac'
-                                : undefined,
+                            color: playQueue.displayQueue
+                              ? '#1179ac'
+                              : undefined,
                           }}
                         />
                       </CustomTooltip>

src/components/starred/StarredView.tsx

@@ -133,7 +133,7 @@ const StarredView = () => {
     <GenericPage
       header={
         <GenericPageHeader
-          title="Starred"
+          title="Favorites"
           subtitle={
             <Nav activeKey={currentPage} onSelect={(e) => setCurrentPage(e)}>
               <Nav.Item eventKey="Tracks">Tracks</Nav.Item>

src/redux/playQueueSlice.ts

@@ -50,6 +50,7 @@ export interface PlayQueue {
   isLoading: boolean;
   repeat: string;
   shuffle: boolean;
+  displayQueue: boolean;
   entry: Entry[];
 }
 
@@ -74,6 +75,7 @@ const initialState: PlayQueue = {
   isLoading: false,
   repeat: 'none',
   shuffle: false,
+  displayQueue: false,
   entry: [],
 };
 
@@ -114,6 +116,14 @@ const playQueueSlice = createSlice({
       state.autoIncremented = action.payload;
     },
 
+    setStar: (state, action: PayloadAction<string>) => {
+      if (action.payload === 'unstar') {
+        state.entry[state.currentIndex].starred = undefined;
+      } else {
+        state.entry[state.currentIndex].starred = String(Date.now());
+      }
+    },
+
     toggleRepeat: (state) => {
       if (state.repeat === 'none') {
         state.repeat = 'all';
@@ -130,6 +140,10 @@ const playQueueSlice = createSlice({
       state.shuffle = !state.shuffle;
     },
 
+    toggleDisplayQueue: (state) => {
+      state.displayQueue = !state.displayQueue;
+    },
+
     setVolume: (state, action: PayloadAction<number>) => {
       state.volume = action.payload;
     },
@@ -413,6 +427,8 @@ export const {
   setAutoIncremented,
   toggleRepeat,
   toggleShuffle,
+  toggleDisplayQueue,
   resetPlayer,
+  setStar,
 } = playQueueSlice.actions;
 export default playQueueSlice.reducer;