fix carousel, full screen metadata improvements

jeffvli · Feb 29, 2024 · bdb3cbc · bdb3cbc
1 parent 94b649f
commit bdb3cbc
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 69 deletions.
diff --git 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>
     );
 };

diff --git a/src/renderer/features/player/components/full-screen-player-image.tsx b/src/renderer/features/player/components/full-screen-player-image.tsx
@@ -46,6 +46,7 @@ interface TransparentMetadataContainer {
 const MetadataContainer = styled(Stack)<TransparentMetadataContainer>`
     padding: 1rem;
     border-radius: 5px;
+    background: rgb(var(--main-bg-transparent), ${({ opacity }) => opacity}%);
 
     h1 {
         font-size: 3.5vh;
@@ -257,7 +258,6 @@ export const FullScreenPlayerImage = () => {
                     align="center"
                     order={1}
                     overflow="hidden"
-                    pb="0.5rem"
                     style={{
                         textShadow: 'var(--fullscreen-player-text-shadow)',
                     }}
@@ -283,41 +283,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) => (
+                        <>
+                            {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">
+                        </>
+                    ))}
+                </TextTitle>
+                <Group
+                    mt="sm"
+                    position="center"
+                >
                     {currentSong?.container && (
                         <Badge size="lg">
                             {currentSong?.container} {currentSong?.bitRate}