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,67 +58,70 @@ export const LeftControls = () => {
 
   return (
     <LeftControlsContainer>
-      <ImageWrapper>
+      <LayoutGroup>
-        <AnimatePresence>
+        <AnimatePresence exitBeforeEnter={false} initial={false}>
           {!hideImage && (
-            <Image
+            <ImageWrapper>
-              key="playerbar-image"
+              <Image
-              animate={{ opacity: 1, scale: 1, x: 0 }}
+                key="playerbar-image"
-              exit={{ opacity: 0, y: 50 }}
+                animate={{ opacity: 1, scale: 1, x: 0 }}
-              initial={{ opacity: 0, x: -50 }}
+                exit={{ opacity: 0, x: -50 }}
-              transition={{ duration: 0.3, ease: 'easeInOut' }}
+                initial={{ opacity: 0, x: -50 }}
-              url={song?.imageUrl}
+                to={AppRoute.NOW_PLAYING}
-            >
+                transition={{ duration: 0.3, ease: 'easeInOut' }}
-              <Group position="right">
+                url={song?.imageUrl}
-                <Button
+              >
-                  compact
+                <Group position="right">
-                  variant="subtle"
+                  <Button
-                  onClick={(e) => {
+                    compact
-                    e.stopPropagation();
+                    variant="subtle"
-                    setSidebar({ image: true });
+                    onClick={(e) => {
-                  }}
+                      e.preventDefault();
-                >
+                      setSidebar({ image: true });
-                  <RiArrowUpSLine color="white" size={20} />
+                    }}
-                </Button>
+                  >
-              </Group>
+                    <RiArrowUpSLine color="white" size={20} />
-            </Image>
+                  </Button>
+                </Group>
+              </Image>
+            </ImageWrapper>
           )}
         </AnimatePresence>
-      </ImageWrapper>
+        <MetadataStack layout>
-      <MetadataStack>
+          <Text
-        <Text
+            font={Font.POPPINS}
-          font={Font.POPPINS}
+            link={!!title}
-          link={!!title}
+            overflow="hidden"
-          overflow="hidden"
+            size="sm"
-          size="sm"
+            to="/nowplaying"
-          to="/nowplaying"
+            weight={500}
-          weight={500}
+          >
-        >
+            {title || '—'}
-          {title || '—'}
+          </Text>
-        </Text>
+          <Text
-        <Text
+            secondary
-          secondary
+            font={Font.POPPINS}
-          font={Font.POPPINS}
+            link={!!artists}
-          link={!!artists}
+            overflow="hidden"
-          overflow="hidden"
+            size="sm"
-          size="sm"
+            to="/nowplaying"
-          to="/nowplaying"
+            weight={500}
-          weight={500}
+          >
-        >
+            {artists || '—'}
-          {artists || '—'}
+          </Text>
-        </Text>
+          <Text
-        <Text
+            secondary
-          secondary
+            font={Font.POPPINS}
-          font={Font.POPPINS}
+            link={!!album}
-          link={!!album}
+            overflow="hidden"
-          overflow="hidden"
+            size="sm"
-          size="sm"
+            to="/nowplaying"
-          to="/nowplaying"
+            weight={500}
-          weight={500}
+          >
-        >
+            {album?.name || '—'}
-          {album?.name || '—'}
+          </Text>
-        </Text>
+        </MetadataStack>
-      </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>