Add transparency/opacity for queue sidebar (#231)

* add opacity

* add background for song metadata

* Add padding and border radius to opacity elements

* Remove font-weight transition on active lyrics (#233)

---------

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

src/renderer/features/lyrics/lyric-line.tsx

@@ -11,13 +11,13 @@ interface LyricLineProps extends ComponentPropsWithoutRef<'div'> {
 
 const StyledText = styled(TextTitle)<TitleProps & { $alignment: string; $fontSize: number }>`
     color: var(--main-fg);
-    font-weight: 400;
+    font-weight: 600;
     text-align: ${(props) => props.$alignment};
     font-size: ${(props) => props.$fontSize}px;
     opacity: 0.5;
+    padding: 0 1rem;
 
     &.active {
-        font-weight: 800;
         opacity: 1;
     }
 

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

@@ -37,7 +37,15 @@ const ImageContainer = styled(motion.div)`
     margin-bottom: 1rem;
 `;
 
-const MetadataContainer = styled(Stack)`
+interface TransparentMetadataContainer {
+    opacity: number;
+}
+
+const MetadataContainer = styled(Stack)<TransparentMetadataContainer>`
+    background: rgba(var(--main-bg-transparent), ${({ opacity }) => opacity}%);
+    padding: 1rem;
+    border-radius: 5px;
+
     h1 {
         font-size: 3.5vh;
     }
@@ -120,7 +128,7 @@ const ImageWithPlaceholder = ({
 
 export const FullScreenPlayerImage = () => {
     const { queue } = usePlayerData();
-    const useImageAspectRatio = useFullScreenPlayerStore((state) => state.useImageAspectRatio);
+    const { opacity, useImageAspectRatio } = useFullScreenPlayerStore();
     const currentSong = queue.current;
     const { color: background } = useFastAverageColor({
         algorithm: 'dominant',
@@ -208,6 +216,7 @@ export const FullScreenPlayerImage = () => {
             <MetadataContainer
                 className="full-screen-player-image-metadata"
                 maw="100%"
+                opacity={opacity}
                 spacing="xs"
             >
                 <TextTitle

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

@@ -41,14 +41,21 @@ const HeaderItemWrapper = styled.div`
     z-index: 2;
 `;
 
-const GridContainer = styled.div`
+interface TransparendGridContainerProps {
+    opacity: number;
+}
+
+const GridContainer = styled.div<TransparendGridContainerProps>`
+    padding: 1rem;
+    background: rgba(var(--main-bg-transparent), ${({ opacity }) => opacity}%);
     display: grid;
     grid-template-rows: auto minmax(0, 1fr);
     grid-template-columns: 1fr;
+    border-radius: 5px;
 `;
 
 export const FullScreenPlayerQueue = () => {
-    const { activeTab } = useFullScreenPlayerStore();
+    const { activeTab, opacity } = useFullScreenPlayerStore();
     const { setStore } = useFullScreenPlayerStoreActions();
 
     const headerItems = [
@@ -73,7 +80,10 @@ export const FullScreenPlayerQueue = () => {
     ];
 
     return (
-        <GridContainer className="full-screen-player-queue-container">
+        <GridContainer
+            className="full-screen-player-queue-container"
+            opacity={opacity}
+        >
             <Group
                 grow
                 align="center"

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

@@ -70,7 +70,8 @@ const BackgroundImageOverlay = styled.div`
 `;
 
 const Controls = () => {
-    const { dynamicBackground, expanded, useImageAspectRatio } = useFullScreenPlayerStore();
+    const { dynamicBackground, expanded, opacity, useImageAspectRatio } =
+        useFullScreenPlayerStore();
     const { setStore } = useFullScreenPlayerStoreActions();
     const { setSettings } = useSettingsStoreActions();
     const lyricConfig = useLyricsSettings();
@@ -134,6 +135,21 @@ const Controls = () => {
                             />
                         </Option.Control>
                     </Option>
+                    {dynamicBackground && (
+                        <Option>
+                            <Option.Label>Opacity</Option.Label>
+                            <Option.Control>
+                                <Slider
+                                    defaultValue={opacity}
+                                    label={(e) => `${e} %`}
+                                    max={100}
+                                    min={1}
+                                    w="100%"
+                                    onChangeEnd={(e) => setStore({ opacity: Number(e) })}
+                                />
+                            </Option.Control>
+                        </Option>
+                    )}
                     <Option>
                         <Option.Label>Use image aspect ratio</Option.Label>
                         <Option.Control>

src/renderer/store/full-screen-player.store.ts

@@ -7,6 +7,7 @@ interface FullScreenPlayerState {
     activeTab: string | 'queue' | 'related' | 'lyrics';
     dynamicBackground?: boolean;
     expanded: boolean;
+    opacity: number;
     useImageAspectRatio: boolean;
 }
 
@@ -28,6 +29,7 @@ export const useFullScreenPlayerStore = create<FullScreenPlayerSlice>()(
                 activeTab: 'queue',
                 dynamicBackground: true,
                 expanded: false,
+                opacity: 60,
                 useImageAspectRatio: false,
             })),
             { name: 'store_full_screen_player' },

src/renderer/themes/default.scss

@@ -8,6 +8,7 @@
     --danger-color: rgb(204, 50, 50);
     --generic-border-color: rgba(50, 50, 50, 30%);
     --main-bg: rgb(18, 18, 18);
+    --main-bg-transparent: 18, 18, 18;
     --main-fg: rgb(225, 225, 225);
     --main-fg-secondary: rgb(150, 150, 150);
     --window-bar-bg: rgb(16, 16, 16);

src/renderer/themes/light.scss

@@ -1,6 +1,7 @@
 body[data-theme='defaultLight'] {
     --icon-color: #fff;
     --main-bg: rgb(255, 255, 255);
+    --main-bg-transparent: 255, 255, 255;
     --main-fg: rgb(25, 25, 25);
     --main-fg-secondary: rgb(80, 80, 80);
     --titlebar-fg: rgb(25, 25, 25);