Add additional controls to playerbar

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

@@ -1,11 +1,28 @@
-import { Group } from '@mantine/core';
+import { Flex, Group } from '@mantine/core';
 import { HiOutlineQueueList } from 'react-icons/hi2';
-import { RiVolumeUpFill, RiVolumeDownFill, RiVolumeMuteFill } from 'react-icons/ri';
+import {
+  RiVolumeUpFill,
+  RiVolumeDownFill,
+  RiVolumeMuteFill,
+  RiHeartLine,
+  RiHeartFill,
+} from 'react-icons/ri';
 import styled from 'styled-components';
-import { useAppStoreActions, useMuted, useSidebarStore, useVolume } from '/@/renderer/store';
+import {
+  useAppStoreActions,
+  useCurrentServer,
+  useCurrentSong,
+  useMuted,
+  useSetQueueFavorite,
+  useSidebarStore,
+  useVolume,
+} from '/@/renderer/store';
 import { useRightControls } from '../hooks/use-right-controls';
 import { PlayerButton } from './player-button';
 import { Slider } from './slider';
+import { LibraryItem, ServerType } from '/@/renderer/api/types';
+import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
+import { Rating } from '/@/renderer/components';
 
 const RightControlsContainer = styled.div`
   display: flex;
@@ -13,7 +30,6 @@ const RightControlsContainer = styled.div`
   justify-content: flex-end;
   width: 100%;
   height: 100%;
-  padding-right: 1rem;
 `;
 
 const VolumeSliderWrapper = styled.div`
@@ -35,47 +51,141 @@ const MetadataStack = styled.div`
 export const RightControls = () => {
   const volume = useVolume();
   const muted = useMuted();
+  const server = useCurrentServer();
+  const currentSong = useCurrentSong();
   const { setSidebar } = useAppStoreActions();
   const { rightExpanded: isQueueExpanded } = useSidebarStore();
   const { handleVolumeSlider, handleVolumeSliderState, handleMute } = useRightControls();
 
+  const addToFavoritesMutation = useCreateFavorite();
+  const removeFromFavoritesMutation = useDeleteFavorite();
+  const setFavorite = useSetQueueFavorite();
+
+  const handleAddToFavorites = () => {
+    if (!currentSong) return;
+
+    addToFavoritesMutation.mutate(
+      {
+        query: {
+          id: [currentSong.id],
+          type: LibraryItem.SONG,
+        },
+      },
+      {
+        onSuccess: () => {
+          setFavorite([currentSong.id], true);
+        },
+      },
+    );
+  };
+
+  const handleRemoveFromFavorites = () => {
+    if (!currentSong) return;
+
+    removeFromFavoritesMutation.mutate(
+      {
+        query: {
+          id: [currentSong.id],
+          type: LibraryItem.SONG,
+        },
+      },
+      {
+        onSuccess: () => {
+          setFavorite([currentSong.id], false);
+        },
+      },
+    );
+  };
+
+  const handleToggleFavorite = () => {
+    if (!currentSong) return;
+
+    if (currentSong.userFavorite) {
+      handleRemoveFromFavorites();
+    } else {
+      handleAddToFavorites();
+    }
+  };
+
+  const isSongDefined = Boolean(currentSong?.id);
+  const showRating = isSongDefined && server?.type === ServerType.NAVIDROME;
+
   return (
-    <RightControlsContainer>
-      <Group>
-        <PlayerButton
-          icon={<HiOutlineQueueList />}
-          tooltip={{ label: 'View queue', openDelay: 500 }}
-          variant="secondary"
-          onClick={() => setSidebar({ rightExpanded: !isQueueExpanded })}
-        />
-      </Group>
-      <MetadataStack>
-        <VolumeSliderWrapper>
+    <Flex
+      align="flex-end"
+      direction="column"
+      h="100%"
+      p="1rem"
+    >
+      {showRating && (
+        <Group>
+          <Rating
+            readOnly
+            size="sm"
+            value={currentSong?.userRating ?? 0}
+          />
+        </Group>
+      )}
+      <RightControlsContainer>
+        <Group spacing="xs">
           <PlayerButton
             icon={
-              muted ? (
-                <RiVolumeMuteFill size={15} />
-              ) : volume > 50 ? (
-                <RiVolumeUpFill size={15} />
+              currentSong?.userFavorite ? (
+                <RiHeartFill
+                  color="var(--primary-color)"
+                  size="1.3rem"
+                />
               ) : (
-                <RiVolumeDownFill size={15} />
+                <RiHeartLine size="1.3rem" />
               )
             }
-            tooltip={{ label: muted ? 'Muted' : volume, openDelay: 500 }}
+            sx={{
+              svg: {
+                fill: !currentSong?.userFavorite ? undefined : 'var(--primary-color) !important',
+              },
+            }}
+            tooltip={{
+              label: currentSong?.userFavorite ? 'Unfavorite' : 'Favorite',
+              openDelay: 500,
+            }}
             variant="secondary"
-            onClick={handleMute}
+            onClick={handleToggleFavorite}
           />
-          <Slider
-            hasTooltip
-            height="60%"
-            max={100}
-            min={0}
-            value={volume}
-            onAfterChange={handleVolumeSliderState}
-            onChange={handleVolumeSlider}
+          <PlayerButton
+            icon={<HiOutlineQueueList size="1.3rem" />}
+            tooltip={{ label: 'View queue', openDelay: 500 }}
+            variant="secondary"
+            onClick={() => setSidebar({ rightExpanded: !isQueueExpanded })}
           />
-        </VolumeSliderWrapper>
-      </MetadataStack>
-    </RightControlsContainer>
+        </Group>
+        <MetadataStack>
+          <VolumeSliderWrapper>
+            <PlayerButton
+              icon={
+                muted ? (
+                  <RiVolumeMuteFill size="1.2rem" />
+                ) : volume > 50 ? (
+                  <RiVolumeUpFill size="1.2rem" />
+                ) : (
+                  <RiVolumeDownFill size="1.2rem" />
+                )
+              }
+              tooltip={{ label: muted ? 'Muted' : volume, openDelay: 500 }}
+              variant="secondary"
+              onClick={handleMute}
+            />
+            <Slider
+              hasTooltip
+              height="60%"
+              max={100}
+              min={0}
+              value={volume}
+              onAfterChange={handleVolumeSliderState}
+              onChange={handleVolumeSlider}
+            />
+          </VolumeSliderWrapper>
+        </MetadataStack>
+      </RightControlsContainer>
+    </Flex>
   );
 };