diff --git a/src/renderer/features/player/components/left-controls.tsx b/src/renderer/features/player/components/left-controls.tsx index 487ebcec8..ffcdf56c7 100644 --- a/src/renderer/features/player/components/left-controls.tsx +++ b/src/renderer/features/player/components/left-controls.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; -import { Box, Group } from '@mantine/core'; +import { Center, Group } from '@mantine/core'; import { motion, AnimatePresence, LayoutGroup } from 'framer-motion'; -import { RiArrowUpSLine } from 'react-icons/ri'; +import { RiArrowUpSLine, RiDiscLine } from 'react-icons/ri'; import { generatePath, Link } from 'react-router-dom'; import { Button, Text } from '@/renderer/components'; import { AppRoute } from '@/renderer/router/routes'; @@ -54,7 +54,7 @@ const PlayerbarImage = styled.img` background-size: cover; `; -const LineItem = styled(Box)<{ secondary?: boolean }>` +const LineItem = styled.div<{ secondary?: boolean }>` display: inline-block; width: 95%; max-width: 30vw; @@ -90,7 +90,18 @@ export const LeftControls = () => { to={AppRoute.NOW_PLAYING} transition={{ duration: 0.3, ease: 'easeInOut' }} > - + {song?.imageUrl ? ( + + ) : ( + <> +
+ +
+ + )} + ` const SidebarImage = styled.img` width: 100%; height: 100%; - background-repeat: no-repeat; - background-position: 50%; - background-size: cover; + object-fit: contain; `; export const Sidebar = () => { const navigate = useNavigate(); const sidebar = useAppStore((state) => state.sidebar); const setSidebar = useAppStore((state) => state.setSidebar); - const backgroundImage = usePlayerStore( - (state) => state.current?.song?.imageUrl - ); + const imageUrl = usePlayerStore((state) => state.current?.song?.imageUrl); const showImage = sidebar.image; @@ -72,11 +69,12 @@ export const Sidebar = () => { } placeholder="Search" rightSectionWidth={90} - onClick={() => openSpotlight()} + // onClick={() => openSpotlight()} /> @@ -188,7 +186,13 @@ export const Sidebar = () => { to={AppRoute.NOW_PLAYING} transition={{ duration: 0.3, ease: 'easeInOut' }} > - + {imageUrl ? ( + + ) : ( +
+ +
+ )}