Adjust playerbar

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

@@ -4,7 +4,8 @@ import isElectron from 'is-electron';
 import { IoIosPause } from 'react-icons/io';
 import {
   RiPlayFill,
-  RiRepeat2Fill,
+  RiRepeat2Line,
+  RiRepeatOneLine,
   RiRewindFill,
   RiShuffleFill,
   RiSkipBackFill,
@@ -16,7 +17,12 @@ import { Text } from '@/renderer/components';
 import { usePlayerStore } from '@/renderer/store';
 import { useSettingsStore } from '@/renderer/store/settings.store';
 import { Font } from '@/renderer/styles';
-import { PlaybackType, PlayerStatus } from '@/renderer/types';
+import {
+  PlaybackType,
+  PlayerRepeat,
+  PlayerShuffle,
+  PlayerStatus,
+} from '@/renderer/types';
 import { useCenterControls } from '../hooks/use-center-controls';
 import { PlayerButton } from './player-button';
 import { Slider } from './slider';
@@ -58,13 +64,15 @@ const SliderWrapper = styled.div`
 
 export const CenterControls = ({ playersRef }: CenterControlsProps) => {
   const [isSeeking, setIsSeeking] = useState(false);
-  const playerData = usePlayerStore((state) => state.getPlayerData());
+  const songDuration = usePlayerStore((state) => state.current.song?.duration);
   const skip = useSettingsStore((state) => state.player.skipButtons);
   const playerType = useSettingsStore((state) => state.player.type);
-  const player1 = playersRef?.current?.player1?.player;
+  const player1 = playersRef?.current?.player1;
-  const player2 = playersRef?.current?.player2?.player;
+  const player2 = playersRef?.current?.player2;
   const { status, player } = usePlayerStore((state) => state.current);
   const setCurrentTime = usePlayerStore((state) => state.setCurrentTime);
+  const repeat = usePlayerStore((state) => state.repeat);
+  const shuffle = usePlayerStore((state) => state.shuffle);
 
   const {
     handleNextTrack,
@@ -73,11 +81,13 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
     handleSeekSlider,
     handleSkipBackward,
     handleSkipForward,
+    handleToggleRepeat,
+    handleToggleShuffle,
   } = useCenterControls({ playersRef });
 
   const currentTime = usePlayerStore((state) => state.current.time);
   const currentPlayerRef = player === 1 ? player1 : player2;
-  const duration = format((playerData.queue.current?.duration || 0) * 1000);
+  const duration = format((songDuration || 0) * 1000);
   const formattedTime = format(currentTime * 1000 || 0);
 
   useEffect(() => {
@@ -101,10 +111,19 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
       <ControlsContainer>
         <ButtonsContainer>
           <PlayerButton
+            $isActive={shuffle !== PlayerShuffle.NONE}
             icon={<RiShuffleFill size={15} />}
-            tooltip={{ label: `Shuffle`, openDelay: 500 }}
+            tooltip={{
-            variant="secondary"
+              label:
-            onClick={handlePrevTrack}
+                shuffle === PlayerShuffle.NONE
+                  ? 'Shuffle disabled'
+                  : shuffle === PlayerShuffle.TRACK
+                  ? 'Shuffle tracks'
+                  : 'Shuffle albums',
+              openDelay: 500,
+            }}
+            variant="tertiary"
+            onClick={handleToggleShuffle}
           />
           <PlayerButton
             icon={<RiSkipBackFill size={15} />}
@@ -156,10 +175,26 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
             onClick={handleNextTrack}
           />
           <PlayerButton
-            icon={<RiRepeat2Fill size={15} />}
+            $isActive={repeat !== PlayerRepeat.NONE}
-            tooltip={{ label: 'Repeat', openDelay: 500 }}
+            icon={
-            variant="secondary"
+              repeat === PlayerRepeat.ONE ? (
-            onClick={handleNextTrack}
+                <RiRepeatOneLine size={15} />
+              ) : (
+                <RiRepeat2Line size={15} />
+              )
+            }
+            tooltip={{
+              label: `${
+                repeat === PlayerRepeat.NONE
+                  ? 'Repeat disabled'
+                  : repeat === PlayerRepeat.ALL
+                  ? 'Repeat all'
+                  : 'Repeat one'
+              }`,
+              openDelay: 500,
+            }}
+            variant="tertiary"
+            onClick={handleToggleRepeat}
           />
         </ButtonsContainer>
       </ControlsContainer>
@@ -172,7 +207,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
         <SliderWrapper>
           <Slider
             height="100%"
-            max={playerData.queue.current?.duration}
+            max={songDuration}
             min={0}
             tooltipType="time"
             value={currentTime}

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

@@ -61,7 +61,7 @@ const PlayerbarImage = styled.img`
 const LineItem = styled.div<{ $secondary?: boolean }>`
   display: inline-block;
   width: 95%;
-  max-width: 30vw;
+  max-width: 20vw;
   overflow: hidden;
   color: ${(props) => props.$secondary && 'var(--main-fg-secondary)'};
   white-space: nowrap;
@@ -142,7 +142,6 @@ export const LeftControls = () => {
               component={Link}
               overflow="hidden"
               size="sm"
-              sx={{ '&:hover': { textDecoration: 'underline' } }}
               to={AppRoute.NOW_PLAYING}
               weight={500}
             >

src/renderer/features/player/components/player-button.tsx

@@ -12,9 +12,10 @@ import { Tooltip } from '@/renderer/components';
 type MantineButtonProps = UnstyledButtonProps &
   ComponentPropsWithoutRef<'button'>;
 interface PlayerButtonProps extends MantineButtonProps {
+  $isActive?: boolean;
   icon: ReactNode;
   tooltip?: Omit<TooltipProps, 'children'>;
-  variant: 'main' | 'secondary';
+  variant: 'main' | 'secondary' | 'tertiary';
 }
 
 const WrapperMainVariant = css`
@@ -63,12 +64,20 @@ const ButtonSecondaryVariant = css`
     stroke: var(--playerbar-btn-bg);
   }
 
-  &:hover {
+  &:focus-visible {
     svg {
       fill: var(--playerbar-btn-bg-hover);
       stroke: var(--playerbar-btn-bg-hover);
     }
   }
+`;
+
+const ButtonTertiaryVariant = css`
+  padding: 0.5rem;
+
+  svg {
+    display: flex;
+  }
 
   &:focus-visible {
     svg {
@@ -101,8 +110,22 @@ const StyledPlayerButton = styled(UnstyledButton)<StyledPlayerButtonProps>`
     opacity: 0.5;
   }
 
+  svg {
+    fill: ${({ $isActive }) => $isActive && 'var(--primary-color)'};
+  }
+
+  &:hover {
+    svg {
+      fill: ${({ $isActive }) => !$isActive && 'var(--playerbar-btn-bg-hover)'};
+    }
+  }
+
   ${({ variant }) =>
-    variant === 'main' ? ButtonMainVariant : ButtonSecondaryVariant}
+    variant === 'main'
+      ? ButtonMainVariant
+      : variant === 'secondary'
+      ? ButtonSecondaryVariant
+      : ButtonTertiaryVariant};
 `;
 
 export const PlayerButton = ({
@@ -116,8 +139,8 @@ export const PlayerButton = ({
       <Tooltip {...tooltip}>
         <MotionWrapper
           variant={variant}
-          whileHover={{ scale: 1.05 }}
+          whileHover={{ scale: 1.1 }}
-          whileTap={{ scale: 0.95 }}
+          whileTap={{ scale: 1 }}
         >
           <StyledPlayerButton variant={variant} {...rest}>
             {icon}
@@ -137,5 +160,6 @@ export const PlayerButton = ({
 };
 
 PlayerButton.defaultProps = {
+  $isActive: false,
   tooltip: undefined,
 };