Add volume wheel scroll & new slider component

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

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import format from 'format-duration';
+import formatDuration from 'format-duration';
 import isElectron from 'is-electron';
 import { IoIosPause } from 'react-icons/io';
 import {
@@ -16,7 +16,6 @@ import styled from 'styled-components';
 import { Text } from '/@/renderer/components';
 import { useCenterControls } from '../hooks/use-center-controls';
 import { PlayerButton } from './player-button';
-import { Slider } from './slider';
 import {
   useCurrentSong,
   useCurrentStatus,
@@ -28,6 +27,7 @@ import {
 } from '/@/renderer/store';
 import { usePlayerType, useSettingsStore } from '/@/renderer/store/settings.store';
 import { PlayerStatus, PlaybackType, PlayerShuffle, PlayerRepeat } from '/@/renderer/types';
+import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
 
 interface CenterControlsProps {
   playersRef: any;
@@ -61,6 +61,7 @@ const SliderValueWrapper = styled.div<{ position: 'left' | 'right' }>`
 const SliderWrapper = styled.div`
   display: flex;
   flex: 6;
+  align-items: center;
   height: 100%;
 `;
 
@@ -91,8 +92,8 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
 
   const currentTime = useCurrentTime();
   const currentPlayerRef = player === 1 ? player1 : player2;
-  const duration = format((songDuration || 0) * 1000);
-  const formattedTime = format(currentTime * 1000 || 0);
+  const duration = formatDuration((songDuration || 0) * 1000);
+  const formattedTime = formatDuration(currentTime * 1000 || 0);
 
   useEffect(() => {
     let interval: any;
@@ -210,13 +211,14 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
           </Text>
         </SliderValueWrapper>
         <SliderWrapper>
-          <Slider
-            height="100%"
+          <PlayerbarSlider
+            label={(value) => formatDuration(value * 1000)}
             max={songDuration}
             min={0}
-            tooltipType="time"
+            size={6}
             value={currentTime}
-            onAfterChange={(e) => {
+            w="100%"
+            onChange={(e) => {
               handleSeekSlider(e);
               setIsSeeking(false);
             }}

src/renderer/features/player/components/playerbar-slider.tsx

@@ -0,0 +1,40 @@
+import { rem, Slider, SliderProps } from '@mantine/core';
+
+export const PlayerbarSlider = ({ ...props }: SliderProps) => {
+  return (
+    <Slider
+      styles={{
+        bar: {
+          backgroundColor: 'var(--playerbar-slider-track-progress-bg)',
+          transition: 'background-color 0.2s ease',
+        },
+        label: {
+          backgroundColor: 'var(--tooltip-bg)',
+          color: 'var(--tooltip-fg)',
+          fontSize: '1.1rem',
+          fontWeight: 600,
+          padding: '0 1rem',
+        },
+        root: {
+          '&:hover': {
+            '& .mantine-Slider-bar': {
+              backgroundColor: 'var(--primary-color)',
+            },
+            '& .mantine-Slider-thumb': {
+              opacity: 1,
+            },
+          },
+        },
+        thumb: {
+          backgroundColor: 'var(--slider-thumb-bg)',
+          borderColor: 'var(--primary-color)',
+          borderWidth: rem(1),
+          height: '1rem',
+          opacity: 0,
+          width: '1rem',
+        },
+      }}
+      {...props}
+    />
+  );
+};

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

@@ -7,7 +7,6 @@ import {
   RiHeartLine,
   RiHeartFill,
 } from 'react-icons/ri';
-import styled from 'styled-components';
 import {
   useAppStoreActions,
   useCurrentServer,
@@ -19,34 +18,10 @@ import {
 } 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;
-  flex-direction: row;
-  justify-content: flex-end;
-  width: 100%;
-  height: 100%;
-`;
-
-const VolumeSliderWrapper = styled.div`
-  display: flex;
-  gap: 0.3rem;
-  align-items: center;
-  width: 90px;
-`;
-
-const MetadataStack = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-  align-items: flex-end;
-  justify-content: center;
-  overflow: visible;
-`;
+import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
 
 export const RightControls = () => {
   const volume = useVolume();
@@ -55,7 +30,7 @@ export const RightControls = () => {
   const currentSong = useCurrentSong();
   const { setSidebar } = useAppStoreActions();
   const { rightExpanded: isQueueExpanded } = useSidebarStore();
-  const { handleVolumeSlider, handleVolumeSliderState, handleMute } = useRightControls();
+  const { handleVolumeSlider, handleVolumeWheel, handleMute } = useRightControls();
 
   const addToFavoritesMutation = useCreateFavorite();
   const removeFromFavoritesMutation = useDeleteFavorite();
@@ -115,77 +90,82 @@ export const RightControls = () => {
       align="flex-end"
       direction="column"
       h="100%"
-      p="1rem"
+      px="1rem"
+      py="0.5rem"
     >
-      {showRating && (
-        <Group>
+      <Group h="calc(100% / 3)">
+        {showRating && (
           <Rating
             readOnly
             size="sm"
             value={currentSong?.userRating ?? 0}
           />
-        </Group>
-      )}
-      <RightControlsContainer>
-        <Group spacing="xs">
+        )}
+      </Group>
+      <Group
+        noWrap
+        align="center"
+        spacing="xs"
+      >
+        <PlayerButton
+          icon={
+            currentSong?.userFavorite ? (
+              <RiHeartFill
+                color="var(--primary-color)"
+                size="1.1rem"
+              />
+            ) : (
+              <RiHeartLine size="1.1rem" />
+            )
+          }
+          sx={{
+            svg: {
+              fill: !currentSong?.userFavorite ? undefined : 'var(--primary-color) !important',
+            },
+          }}
+          tooltip={{
+            label: currentSong?.userFavorite ? 'Unfavorite' : 'Favorite',
+            openDelay: 500,
+          }}
+          variant="secondary"
+          onClick={handleToggleFavorite}
+        />
+        <PlayerButton
+          icon={<HiOutlineQueueList size="1.1rem" />}
+          tooltip={{ label: 'View queue', openDelay: 500 }}
+          variant="secondary"
+          onClick={() => setSidebar({ rightExpanded: !isQueueExpanded })}
+        />
+        <Group
+          noWrap
+          spacing="xs"
+        >
           <PlayerButton
             icon={
-              currentSong?.userFavorite ? (
-                <RiHeartFill
-                  color="var(--primary-color)"
-                  size="1.3rem"
-                />
+              muted ? (
+                <RiVolumeMuteFill size="1.2rem" />
+              ) : volume > 50 ? (
+                <RiVolumeUpFill size="1.2rem" />
               ) : (
-                <RiHeartLine size="1.3rem" />
+                <RiVolumeDownFill size="1.2rem" />
               )
             }
-            sx={{
-              svg: {
-                fill: !currentSong?.userFavorite ? undefined : 'var(--primary-color) !important',
-              },
-            }}
-            tooltip={{
-              label: currentSong?.userFavorite ? 'Unfavorite' : 'Favorite',
-              openDelay: 500,
-            }}
+            tooltip={{ label: muted ? 'Muted' : volume, openDelay: 500 }}
             variant="secondary"
-            onClick={handleToggleFavorite}
+            onClick={handleMute}
           />
-          <PlayerButton
-            icon={<HiOutlineQueueList size="1.3rem" />}
-            tooltip={{ label: 'View queue', openDelay: 500 }}
-            variant="secondary"
-            onClick={() => setSidebar({ rightExpanded: !isQueueExpanded })}
+          <PlayerbarSlider
+            max={100}
+            min={0}
+            size={6}
+            value={volume}
+            w="60px"
+            onChange={handleVolumeSlider}
+            onWheel={handleVolumeWheel}
           />
         </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>
+      </Group>
+      <Group h="calc(100% / 3)" />
     </Flex>
   );
 };