[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>
2024-03-05 02:53:00 +00:00 · 2024-03-05 02:53:00 +00:00 · a45e7f24e4
commit a45e7f24e4
parent 742cef3d81
4 changed files with 89 additions and 72 deletions
--- a/src/renderer/components/grid-carousel/index.tsx
+++ b/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}
-                        handleNext={handleNext}
-                        handlePrev={handlePrev}
-                        pagination={pagination}
-                    />
-                ) : null}
-                <Swiper
-                    ref={swiperRef}
-                    resizeObserver
-                    modules={[Virtual]}
-                    slidesPerView={slideCount}
-                    spaceBetween={20}
-                    style={{ height: '100%', width: '100%' }}
-                    onBeforeInit={(swiper) => {
-                        swiperRef.current = swiper;
-                    }}
-                    onReachBeginning={handleOnReachBeginning}
-                    onReachEnd={handleOnReachEnd}
-                    onSlideChange={handleOnSlideChange}
-                    onZoomChange={handleOnZoomChange}
-                    {...swiperProps}
-                >
-                    {slides.map((slideContent, index) => {
-                        return (
-                            <SwiperSlide
-                                key={`${uniqueId}-${slideContent?.props?.data?.id}-${index}`}
-                                virtualIndex={index}
-                            >
-                                {slideContent}
-                            </SwiperSlide>
-                        );
-                    })}
-                </Swiper>
-            </div>
+            {title ? (
+                <Title
+                    {...title}
+                    handleNext={handleNext}
+                    handlePrev={handlePrev}
+                    pagination={pagination}
+                />
+            ) : null}
+            <Swiper
+                ref={swiperRef}
+                resizeObserver
+                modules={[Virtual]}
+                slidesPerView={slideCount}
+                spaceBetween={20}
+                style={{ height: '100%', width: '100%' }}
+                onBeforeInit={(swiper) => {
+                    swiperRef.current = swiper;
+                }}
+                onReachBeginning={handleOnReachBeginning}
+                onReachEnd={handleOnReachEnd}
+                onSlideChange={handleOnSlideChange}
+                onZoomChange={handleOnZoomChange}
+                {...swiperProps}
+            >
+                {slides.map((slideContent, index) => {
+                    return (
+                        <SwiperSlide
+                            key={`${uniqueId}-${slideContent?.props?.data?.id}-${index}`}
+                            virtualIndex={index}
+                        >
+                            {slideContent}
+                        </SwiperSlide>
+                    );
+                })}
+            </Swiper>
        </CarouselContainer>
    );
 };
--- a/src/renderer/features/player/components/full-screen-player-image.tsx
+++ b/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
-                        key={`fs-artist-${artist.id}`}
-                        align="center"
-                        order={3}
-                        style={{
-                            textShadow: 'var(--fullscreen-player-text-shadow)',
-                        }}
-                    >
-                        {index > 0 && (
+                <TextTitle
+                    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',
+                                    }}
+                                >
+                                    •
+                                </Text>
+                            )}
                            <Text
-                                sx={{
-                                    display: 'inline-block',
-                                    padding: '0 0.5rem',
+                                $link
+                                $secondary
+                                component={Link}
+                                style={{
+                                    textShadow: 'var(--fullscreen-player-text-shadow)',
                                }}
+                                to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
+                                    albumArtistId: artist.id,
+                                })}
+                                weight={600}
                            >
-                                •
+                                {artist.name}
                            </Text>
-                        )}
-                        <Text
-                            $link
-                            component={Link}
-                            style={{
-                                textShadow: 'var(--fullscreen-player-text-shadow)',
-                            }}
-                            to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
-                                albumArtistId: artist.id,
-                            })}
-                            weight={600}
-                        >
-                            {artist.name}
-                        </Text>
-                    </TextTitle>
-                ))}
-                <Group position="center">
+                        </Fragment>
+                    ))}
+                </TextTitle>
+                <Group
+                    mt="sm"
+                    position="center"
+                >
                    {currentSong?.container && (
                        <Badge size="lg">
                            {currentSong?.container} {currentSong?.bitRate}
--- a/src/renderer/themes/default.scss
+++ b/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;
        }
    }

--- a/src/renderer/themes/light.scss
+++ b/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;
+        }
+    }
 }