[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,46 +279,45 @@ export const SwiperGridCarousel = ({
 
     return (
         <CarouselContainer
+            ref={containerRef}
             className="grid-carousel"
             spacing="md"
         >
-            <div ref={containerRef}>
+            {title ? (
-                {title ? (
+                <Title
-                    <Title
+                    {...title}
-                        {...title}
+                    handleNext={handleNext}
-                        handleNext={handleNext}
+                    handlePrev={handlePrev}
-                        handlePrev={handlePrev}
+                    pagination={pagination}
-                        pagination={pagination}
+                />
-                    />
+            ) : null}
-                ) : null}
+            <Swiper
-                <Swiper
+                ref={swiperRef}
-                    ref={swiperRef}
+                resizeObserver
-                    resizeObserver
+                modules={[Virtual]}
-                    modules={[Virtual]}
+                slidesPerView={slideCount}
-                    slidesPerView={slideCount}
+                spaceBetween={20}
-                    spaceBetween={20}
+                style={{ height: '100%', width: '100%' }}
-                    style={{ height: '100%', width: '100%' }}
+                onBeforeInit={(swiper) => {
-                    onBeforeInit={(swiper) => {
+                    swiperRef.current = swiper;
-                        swiperRef.current = swiper;
+                }}
-                    }}
+                onReachBeginning={handleOnReachBeginning}
-                    onReachBeginning={handleOnReachBeginning}
+                onReachEnd={handleOnReachEnd}
-                    onReachEnd={handleOnReachEnd}
+                onSlideChange={handleOnSlideChange}
-                    onSlideChange={handleOnSlideChange}
+                onZoomChange={handleOnZoomChange}
-                    onZoomChange={handleOnZoomChange}
+                {...swiperProps}
-                    {...swiperProps}
+            >
-                >
+                {slides.map((slideContent, index) => {
-                    {slides.map((slideContent, index) => {
+                    return (
-                        return (
+                        <SwiperSlide
-                            <SwiperSlide
+                            key={`${uniqueId}-${slideContent?.props?.data?.id}-${index}`}
-                                key={`${uniqueId}-${slideContent?.props?.data?.id}-${index}`}
+                            virtualIndex={index}
-                                virtualIndex={index}
+                        >
-                            >
+                            {slideContent}
-                                {slideContent}
+                        </SwiperSlide>
-                            </SwiperSlide>
+                    );
-                        );
+                })}
-                    })}
+            </Swiper>
-                </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,41 +281,48 @@ export const FullScreenPlayerImage = () => {
                 >
                     {currentSong?.album}{' '}
                 </TextTitle>
-                {currentSong?.artists?.map((artist, index) => (
+                <TextTitle
-                    <TextTitle
+                    key="fs-artists"
-                        key={`fs-artist-${artist.id}`}
+                    align="center"
-                        align="center"
+                    order={3}
-                        order={3}
+                    style={{
-                        style={{
+                        textShadow: 'var(--fullscreen-player-text-shadow)',
-                            textShadow: 'var(--fullscreen-player-text-shadow)',
+                    }}
-                        }}
+                >
-                    >
+                    {currentSong?.artists?.map((artist, index) => (
-                        {index > 0 && (
+                        <Fragment key={`fs-artist-${artist.id}`}>
+                            {index > 0 && (
+                                <Text
+                                    $secondary
+                                    sx={{
+                                        display: 'inline-block',
+                                        padding: '0 0.5rem',
+                                    }}
+                                >
+                                    •
+                                </Text>
+                            )}
                             <Text
-                                sx={{
+                                $link
-                                    display: 'inline-block',
+                                $secondary
-                                    padding: '0 0.5rem',
+                                component={Link}
+                                style={{
+                                    textShadow: 'var(--fullscreen-player-text-shadow)',
                                 }}
+                                to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
+                                    albumArtistId: artist.id,
+                                })}
+                                weight={600}
                             >
-                                •
+                                {artist.name}
                             </Text>
-                        )}
+                        </Fragment>
-                        <Text
+                    ))}
-                            $link
+                </TextTitle>
-                            component={Link}
+                <Group
-                            style={{
+                    mt="sm"
-                                textShadow: 'var(--fullscreen-player-text-shadow)',
+                    position="center"
-                            }}
+                >
-                            to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
-                                albumArtistId: artist.id,
-                            })}
-                            weight={600}
-                        >
-                            {artist.name}
-                        </Text>
-                    </TextTitle>
-                ))}
-                <Group 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;
+        }
+    }
 }