[enhancements]: fix carousel, full screen metadata improvements (#524)

* fix carousel, full screen metadata improvements

* Add missing mapped keys on multiple artist

* Remove bg opacity on metadata section

* Improve visibility of currently playing song

---------

Co-authored-by: jeffvli <jeffvictorli@gmail.com>

src/renderer/components/grid-carousel/index.tsx

@@ -279,10 +279,10 @@ export const SwiperGridCarousel = ({
 
     return (
         <CarouselContainer
+            ref={containerRef}
             className="grid-carousel"
             spacing="md"
         >
-            <div ref={containerRef}>
             {title ? (
                 <Title
                     {...title}
@@ -318,7 +318,6 @@ export const SwiperGridCarousel = ({
                     );
                 })}
             </Swiper>
-            </div>
         </CarouselContainer>
     );
 };

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

@@ -1,7 +1,7 @@
 import { Flex, Stack, Group, Center } from '@mantine/core';
 import { useSetState } from '@mantine/hooks';
 import { AnimatePresence, HTMLMotionProps, motion, Variants } from 'framer-motion';
-import { useEffect, useRef, useLayoutEffect, useState, useCallback } from 'react';
+import { useEffect, useRef, useLayoutEffect, useState, useCallback, Fragment } from 'react';
 import { RiAlbumFill } from 'react-icons/ri';
 import { generatePath } from 'react-router';
 import { Link } from 'react-router-dom';
@@ -256,7 +256,6 @@ export const FullScreenPlayerImage = () => {
                     align="center"
                     order={1}
                     overflow="hidden"
-                    pb="0.5rem"
                     style={{
                         textShadow: 'var(--fullscreen-player-text-shadow)',
                     }}
@@ -282,17 +281,19 @@ export const FullScreenPlayerImage = () => {
                 >
                     {currentSong?.album}{' '}
                 </TextTitle>
-                {currentSong?.artists?.map((artist, index) => (
                 <TextTitle
-                        key={`fs-artist-${artist.id}`}
+                    key="fs-artists"
                     align="center"
                     order={3}
                     style={{
                         textShadow: 'var(--fullscreen-player-text-shadow)',
                     }}
                 >
+                    {currentSong?.artists?.map((artist, index) => (
+                        <Fragment key={`fs-artist-${artist.id}`}>
                             {index > 0 && (
                                 <Text
+                                    $secondary
                                     sx={{
                                         display: 'inline-block',
                                         padding: '0 0.5rem',
@@ -303,6 +304,7 @@ export const FullScreenPlayerImage = () => {
                             )}
                             <Text
                                 $link
+                                $secondary
                                 component={Link}
                                 style={{
                                     textShadow: 'var(--fullscreen-player-text-shadow)',
@@ -314,9 +316,13 @@ export const FullScreenPlayerImage = () => {
                             >
                                 {artist.name}
                             </Text>
-                    </TextTitle>
+                        </Fragment>
                     ))}
-                <Group position="center">
+                </TextTitle>
+                <Group
+                    mt="sm"
+                    position="center"
+                >
                     {currentSong?.container && (
                         <Badge size="lg">
                             {currentSong?.container} {currentSong?.bitRate}

src/renderer/themes/default.scss

@@ -103,7 +103,7 @@
     --background-noise: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4=');
     --current-song-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIxMDAgMTMwIDU3IDgwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHg9IjEwMCIgeT0iMTMwIiB3aWR0aD0iMTIiIGhlaWdodD0iMjAiIHN0eWxlPSJmaWxsOiByZ2IoMjE2LCAyMTYsIDIxNik7IHN0cm9rZTogcmdiKDAsIDAsIDApOyB0cmFuc2Zvcm0tb3JpZ2luOiAxMDZweCAxNDBweDsiLz4KICA8cmVjdCB4PSIxMTUiIHk9IjEzMCIgd2lkdGg9IjEyIiBoZWlnaHQ9IjYwIiBzdHlsZT0iZmlsbDogcmdiKDIxNiwgMjE2LCAyMTYpOyBzdHJva2U6IHJnYigwLCAwLCAwKTsgdHJhbnNmb3JtLW9yaWdpbjogMTIxcHggMTYwcHg7Ii8+CiAgPHJlY3QgeD0iMTMwIiB5PSIxMzAiIHdpZHRoPSIxMiIgaGVpZ2h0PSI4MCIgc3R5bGU9ImZpbGw6IHJnYigyMTYsIDIxNiwgMjE2KTsgc3Ryb2tlOiByZ2IoMCwgMCwgMCk7IHRyYW5zZm9ybS1vcmlnaW46IDEzNnB4IDE3MHB4OyIvPgogIDxyZWN0IHg9IjE0NSIgeT0iMTMwIiB3aWR0aD0iMTIiIGhlaWdodD0iNDUiIHN0eWxlPSJmaWxsOiByZ2IoMjE2LCAyMTYsIDIxNik7IHN0cm9rZTogcmdiKDAsIDAsIDApOyB0cmFuc2Zvcm0tb3JpZ2luOiAxNTFweCAxNTIuNXB4OyIvPgo8L3N2Zz4=');
     --current-song-image-animated: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIxMDAgMTMwIDU3IDgwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHg9IjEwMCIgeT0iMTMwIiB3aWR0aD0iMTIiIGhlaWdodD0iODAiIHN0eWxlPSJmaWxsOiByZ2IoMjE2LCAyMTYsIDIxNik7IHN0cm9rZTogcmdiKDAsIDAsIDApOyB0cmFuc2Zvcm0tb3JpZ2luOiAxMDZweCAxNzBweDsiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iaGVpZ2h0IiB2YWx1ZXM9IjgwOzE1OzgwIiBiZWdpbj0iMC4xcyIgZHVyPSIwLjk1cyIga2V5VGltZXM9IjA7IDAuNDczNjg7IDEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwLjQyIDAgMC41OCAxOyAwLjQyIDAgMC41OCAxIi8+CiAgPC9yZWN0PgogIDxyZWN0IHg9IjExNSIgeT0iMTMwIiB3aWR0aD0iMTIiIGhlaWdodD0iODAiIHN0eWxlPSJmaWxsOiByZ2IoMjE2LCAyMTYsIDIxNik7IHN0cm9rZTogcmdiKDAsIDAsIDApOyB0cmFuc2Zvcm0tb3JpZ2luOiAxMjFweCAxNzBweDsiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iaGVpZ2h0IiB2YWx1ZXM9IjI1OzgwOzI1IiBiZWdpbj0iMC4xcyIgZHVyPSIwLjk1cyIga2V5VGltZXM9IjA7IDAuNDQ0NDQ7IDEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwLjQ1IDAgMC41NSAxOyAwLjQ1IDAgMC41NSAxIi8+CiAgPC9yZWN0PgogIDxyZWN0IHg9IjEzMCIgeT0iMTMwIiB3aWR0aD0iMTIiIGhlaWdodD0iODAiIHN0eWxlPSJmaWxsOiByZ2IoMjE2LCAyMTYsIDIxNik7IHN0cm9rZTogcmdiKDAsIDAsIDApOyB0cmFuc2Zvcm0tb3JpZ2luOiAxMzZweCAxNzBweDsiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iaGVpZ2h0IiB2YWx1ZXM9IjgwOzEwOzgwIiBiZWdpbj0iMC4xcyIgZHVyPSIwLjg1cyIga2V5VGltZXM9IjA7IDAuNDIxMDU7IDEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwLjY1IDAgMC4zNSAxOyAwLjY1IDAgMC4zNSAxIi8+CiAgPC9yZWN0PgogIDxyZWN0IHg9IjE0NSIgeT0iMTMwIiB3aWR0aD0iMTIiIGhlaWdodD0iODAiIHN0eWxlPSJmaWxsOiByZ2IoMjE2LCAyMTYsIDIxNik7IHN0cm9rZTogcmdiKDAsIDAsIDApOyB0cmFuc2Zvcm0tb3JpZ2luOiAxNTFweCAxNzBweDsiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iaGVpZ2h0IiB2YWx1ZXM9IjMwOzgwOzMwIiBiZWdpbj0iMC4xcyIgZHVyPSIxLjA1cyIga2V5VGltZXM9IjA7IDAuMzE1Nzk7IDEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwLjQyIDAgMC41OCAxOyAwLjQyIDAgMC41OCAxIi8+CiAgPC9yZWN0Pgo8L3N2Zz4=');
-    --bg-header-overlay: linear-gradient(transparent 0%, rgba(0, 0, 0, 50%) 100%),
+    --bg-header-overlay: linear-gradient(transparent 0%, rgba(0, 0, 0, 75%) 100%),
         var(--background-noise);
     --bg-subheader-overlay: linear-gradient(180deg, rgba(0, 0, 0, 5%) 0%, var(--main-bg) 100%),
         var(--background-noise);
@@ -116,7 +116,7 @@
     --table-fg: rgb(179, 179, 179);
     --table-row-hover-bg: rgba(100, 100, 100, 20%);
     --table-row-selected-bg: rgba(100, 100, 100, 40%);
-    --fullscreen-player-text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+    --fullscreen-player-text-shadow: black 0px 0px 10px;
 
     .ag-theme-alpine-dark {
         --ag-font-family: var(--content-font-family);
@@ -188,9 +188,11 @@
 
     .current-song {
         background: var(--table-row-hover-bg);
+        box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.3);
 
         .current-song-child {
             color: var(--primary-color) !important;
+            font-weight: 800;
         }
     }
 

src/renderer/themes/light.scss

@@ -121,4 +121,14 @@ body[data-theme='defaultLight'] {
     .ag-root ::-webkit-scrollbar-thumb {
         background: var(--scrollbar-thumb-bg);
     }
+
+    .current-song {
+        background: var(--table-row-hover-bg);
+        box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, 0.3);
+
+        .current-song-child {
+            color: var(--primary-color) !important;
+            font-weight: 800;
+        }
+    }
 }