Adjust styling and add links

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

@@ -1,6 +1,7 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import format from 'format-duration';
+import isElectron from 'is-electron';
 import { useTranslation } from 'react-i18next';
 import {
   RiPauseLine,
@@ -70,24 +71,15 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
   } = 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 = useMemo(
+  const formattedTime = format(currentTime * 1000 || 0);
-    () => format((playerData.queue.current?.duration || 0) * 1000),
-    [playerData.queue]
-  );
-
-  const formattedTime = useMemo(
-    () => format(currentTime * 1000 || 0),
-    [currentTime]
-  );
 
   useEffect(() => {
     let interval: any;
 
     if (status === PlayerStatus.PLAYING && !isSeeking) {
-      if (settings.type === PlaybackType.WEB) {
+      if (!isElectron() || settings.type === PlaybackType.WEB) {
         interval = setInterval(() => {
           setCurrentTime(currentPlayerRef.getCurrentTime());
         }, 1000);

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

@@ -1,25 +1,28 @@
 import styled from '@emotion/styled';
 import { Group } from '@mantine/core';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion, AnimatePresence, LayoutGroup } from 'framer-motion';
 import { RiArrowUpSLine } from 'react-icons/ri';
+import { Link } from 'react-router-dom';
 import { Button, Text } from '@/renderer/components';
+import { AppRoute } from '@/renderer/router/routes';
 import { useAppStore, usePlayerStore } from '@/renderer/store';
-import { Font } from '@/renderer/styles';
+import { fadeIn, Font } from '@/renderer/styles';
 
 const LeftControlsContainer = styled.div`
   display: flex;
   width: 100%;
   height: 100%;
+  margin-left: 1rem;
 `;
 
 const ImageWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0.5rem;
+  padding: 1rem 1rem 1rem 0;
 `;
 
-const MetadataStack = styled.div`
+const MetadataStack = styled(motion.div)`
   display: flex;
   flex-direction: column;
   gap: 0.1rem;
@@ -28,9 +31,10 @@ const MetadataStack = styled.div`
   overflow: hidden;
 `;
 
-const Image = styled(motion.div)<{ url: string }>`
+const Image = styled(motion(Link))<{ url: string }>`
-  width: 70px;
+  ${fadeIn};
-  height: 70px;
+  width: 60px;
+  height: 60px;
   background-image: url(${(props) => props.url});
   background-repeat: no-repeat;
   background-size: cover;
@@ -54,14 +58,16 @@ export const LeftControls = () => {
 
   return (
     <LeftControlsContainer>
-      <ImageWrapper>
+      <LayoutGroup>
-        <AnimatePresence>
+        <AnimatePresence exitBeforeEnter={false} initial={false}>
           {!hideImage && (
+            <ImageWrapper>
               <Image
                 key="playerbar-image"
                 animate={{ opacity: 1, scale: 1, x: 0 }}
-              exit={{ opacity: 0, y: 50 }}
+                exit={{ opacity: 0, x: -50 }}
                 initial={{ opacity: 0, x: -50 }}
+                to={AppRoute.NOW_PLAYING}
                 transition={{ duration: 0.3, ease: 'easeInOut' }}
                 url={song?.imageUrl}
               >
@@ -70,7 +76,7 @@ export const LeftControls = () => {
                     compact
                     variant="subtle"
                     onClick={(e) => {
-                    e.stopPropagation();
+                      e.preventDefault();
                       setSidebar({ image: true });
                     }}
                   >
@@ -78,10 +84,10 @@ export const LeftControls = () => {
                   </Button>
                 </Group>
               </Image>
+            </ImageWrapper>
           )}
         </AnimatePresence>
-      </ImageWrapper>
+        <MetadataStack layout>
-      <MetadataStack>
           <Text
             font={Font.POPPINS}
             link={!!title}
@@ -115,6 +121,7 @@ export const LeftControls = () => {
             {album?.name || '—'}
           </Text>
         </MetadataStack>
+      </LayoutGroup>
     </LeftControlsContainer>
   );
 };

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

@@ -1,5 +1,6 @@
 import { useRef } from 'react';
 import styled from '@emotion/styled';
+import isElectron from 'is-electron';
 import { PlaybackType } from '@/renderer/types';
 import { AudioPlayer } from '../../../components';
 import { usePlayerStore } from '../../../store';
@@ -65,7 +66,7 @@ export const Playerbar = () => {
           <RightControls />
         </RightGridItem>
       </PlayerbarControlsGrid>
-      {settings.type === PlaybackType.WEB && (
+      {(!isElectron() || settings.type === PlaybackType.WEB) && (
         <AudioPlayer
           ref={playersRef}
           autoNext={autoNext}
@@ -77,7 +78,7 @@ export const Playerbar = () => {
           player2={player2}
           status={status}
           style={settings.style}
-          volume={volume}
+          volume={volume / 100}
         />
       )}
     </PlayerbarContainer>