From a45e7f24e4107801cdb8bc193717038e163c6e1b Mon Sep 17 00:00:00 2001 From: Kendall Garner <17521368+kgarner7@users.noreply.github.com> Date: Tue, 5 Mar 2024 02:53:00 +0000 Subject: [PATCH] [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 --- .../components/grid-carousel/index.tsx | 73 +++++++++---------- .../components/full-screen-player-image.tsx | 72 +++++++++--------- src/renderer/themes/default.scss | 6 +- src/renderer/themes/light.scss | 10 +++ 4 files changed, 89 insertions(+), 72 deletions(-) diff --git a/src/renderer/components/grid-carousel/index.tsx b/src/renderer/components/grid-carousel/index.tsx index 8ae02e66..78f5bd17 100644 --- a/src/renderer/components/grid-carousel/index.tsx +++ b/src/renderer/components/grid-carousel/index.tsx @@ -279,46 +279,45 @@ export const SwiperGridCarousel = ({ return ( -
- {title ? ( - - ) : 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 index d3c51564..20ae0975 100644 --- 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} diff --git a/src/renderer/themes/default.scss b/src/renderer/themes/default.scss index f4af588f..6e830b88 100644 --- 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; } } diff --git a/src/renderer/themes/light.scss b/src/renderer/themes/light.scss index 0d769098..3e0e6a0a 100644 --- 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; + } + } }