Refactor layout to grid

src/renderer/features/player/components/full-screen-player-image.tsx

@@ -12,21 +12,12 @@ import { useFastAverageColor } from '/@/renderer/hooks';
 import { AppRoute } from '/@/renderer/router/routes';
 import { PlayerData, usePlayerData, usePlayerStore } from '/@/renderer/store';
 
-const PlayerContainer = styled(Flex)`
-  flex: 0.5;
-  gap: '1rem';
-
-  @media screen and (min-width: 1080px) {
-    max-width: 60%;
-  }
-`;
-
 const Image = styled(motion.img)`
   position: absolute;
   width: 100%;
-  max-width: 100%;
+  height: 100%;
-  max-height: 100%;
   object-fit: cover;
+  object-position: 50% 50%;
   border-radius: 5px;
   box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 40%);
 `;
@@ -34,13 +25,34 @@ const Image = styled(motion.img)`
 const ImageContainer = styled(motion.div)`
   position: relative;
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   max-width: 100%;
   aspect-ratio: 1/1;
   height: 65%;
   margin-bottom: 1rem;
 `;
 
+const MetadataContainer = styled(Stack)`
+  h1 {
+    font-size: 3.5vh;
+  }
+`;
+
+const PlayerContainer = styled(Flex)`
+  @media screen and (max-height: 640px) {
+    .full-screen-player-image-metadata {
+      display: none;
+      height: 100%;
+      margin-bottom: 0;
+    }
+
+    ${ImageContainer} {
+      height: 100%;
+      margin-bottom: 0;
+    }
+  }
+`;
+
 const imageVariants: Variants = {
   closed: {
     opacity: 0,
@@ -66,9 +78,9 @@ const imageVariants: Variants = {
 
 const scaleImageUrl = (url?: string | null) => {
   return url
-    ?.replace(/&size=\d+/, '&size=800')
+    ?.replace(/&size=\d+/, '&size=500')
-    .replace(/\?width=\d+/, '?width=800')
+    .replace(/\?width=\d+/, '?width=500')
-    .replace(/&height=\d+/, '&height=800');
+    .replace(/&height=\d+/, '&height=500');
 };
 
 const ImageWithPlaceholder = ({ ...props }: HTMLMotionProps<'img'>) => {
@@ -177,10 +189,10 @@ export const FullScreenPlayerImage = () => {
           )}
         </AnimatePresence>
       </ImageContainer>
-      <Stack
+      <MetadataContainer
         className="full-screen-player-image-metadata"
-        spacing="sm"
+        maw="100%"
-        sx={{ maxWidth: '100%' }}
+        spacing="xs"
       >
         <TextTitle
           align="center"
@@ -193,6 +205,7 @@ export const FullScreenPlayerImage = () => {
         </TextTitle>
         <TextTitle
           $link
+          $secondary
           align="center"
           component={Link}
           order={2}
@@ -208,6 +221,7 @@ export const FullScreenPlayerImage = () => {
         {currentSong?.artists?.map((artist, index) => (
           <TextTitle
             key={`fs-artist-${artist.id}`}
+            $secondary
             align="center"
             order={4}
           >
@@ -223,6 +237,7 @@ export const FullScreenPlayerImage = () => {
             )}
             <Text
               $link
+              $secondary
               component={Link}
               to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
                 albumArtistId: artist.id,
@@ -241,7 +256,7 @@ export const FullScreenPlayerImage = () => {
           )}
           {currentSong?.releaseYear && <Badge size="lg">{currentSong?.releaseYear}</Badge>}
         </Group>
-      </Stack>
+      </MetadataContainer>
     </PlayerContainer>
   );
 };

src/renderer/features/player/components/full-screen-player-queue.tsx

@@ -68,11 +68,7 @@ export const FullScreenPlayerQueue = () => {
   ];
 
   return (
-    <Stack
+    <Stack className="full-screen-player-queue-container">
-      className="full-screen-player-queue-container"
-      maw="100%"
-      sx={{ flex: 0.5 }}
-    >
       <Group
         grow
         align="center"

src/renderer/features/player/components/full-screen-player.tsx

@@ -26,29 +26,18 @@ const Container = styled(motion.div)`
 `;
 
 const ResponsiveContainer = styled.div`
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-template-rows: minmax(0, 1fr);
-  gap: 2rem;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 2rem 2rem;
   width: 100%;
   max-width: 2560px;
-  margin-top: 70px;
+  margin-top: 5rem;
 
-  .full-screen-player-image {
+  @media screen and (max-width: 768px) {
-    max-height: calc(35vh - 90px);
-  }
-
-  @media screen and (min-width: 1080px) {
     flex-direction: row;
-
+    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
-    .full-screen-player-image {
+    grid-template-columns: minmax(0, 1fr);
-      max-height: calc(70vh - 90px);
-    }
-  }
-
-  @media screen and (max-height: 800px) and (min-width: 1080px) {
-    .full-screen-player-image {
-      max-height: calc(50vh - 90px);
-    }
   }
 `;
 
@@ -156,7 +145,7 @@ const containerVariants: Variants = {
       top: 0,
       transition: {
         background: {
-          duration: 1,
+          duration: 0.5,
           ease: 'easeInOut',
         },
         delay: 0.1,