Add support for transparent bg

Co-authored-by: Lars Haferkamp
gilbarbara · Jan 30, 2024 · 09b2ce9 · 09b2ce9
1 parent 48d6c95
commit 09b2ce9
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -291,7 +291,9 @@ interface SpotifyPlayOptions {
 
 ## Styling
 
-You can customize the UI with a `styles` prop. Check all the available options [here](src/types/common.ts#L159).
+You can customize the UI with a `styles` prop.  
+If you want a transparent player, you can use `bgColor: 'transparent'`.  
+Check all the available options [here](src/types/common.ts#L188).
 
 ```tsx
 <SpotifyWebPlayer

diff --git a/src/components/Info.tsx b/src/components/Info.tsx
@@ -1,7 +1,7 @@
 import { memo, ReactNode, useEffect, useRef, useState } from 'react';
 import { fade } from 'colorizr';
 
-import { getSpotifyLink, getSpotifyLinkTitle } from '~/modules/getters';
+import { getBgColor, getSpotifyLink, getSpotifyLinkTitle } from '~/modules/getters';
 import { usePrevious } from '~/modules/hooks';
 import { checkTracksStatus, removeTracks, saveTracks } from '~/modules/spotify';
 import { CssLikeObject, px, styled } from '~/modules/styled';
@@ -182,13 +182,15 @@ const Content = styled('div')(
     },
   },
   ({ style }: StyledProps) => {
+    const maskImageColor = getBgColor(style.bgColor, style.trackNameColor);
+
     return {
       '[data-type="title-artist-wrapper"]': {
         color: style.trackNameColor,
         maxWidth: `calc(100% - ${px(style.showSaveIcon ? iconSize : 0)})`,
 
         div: {
-          '-webkit-mask-image': `linear-gradient(90deg,transparent 0, ${style.bgColor} 6px, ${style.bgColor} calc(100% - 12px),transparent)`,
+          '-webkit-mask-image': `linear-gradient(90deg,transparent 0, ${maskImageColor} 6px, ${maskImageColor} calc(100% - 12px),transparent)`,
         },
       },
       p: {

diff --git a/src/constants.ts b/src/constants.ts
@@ -15,6 +15,8 @@ export const STATUS = {
   UNSUPPORTED: 'UNSUPPORTED',
 } as const;
 
+export const TRANSPARENT_COLOR = 'rgba(0, 0, 0, 0)';
+
 export const TYPE = {
   DEVICE: 'device_update',
   FAVORITE: 'favorite_update',

diff --git a/src/modules/getters.ts b/src/modules/getters.ts
@@ -1,5 +1,14 @@
+import { TRANSPARENT_COLOR } from '~/constants';
 import { Locale, StylesOptions, StylesProps } from '~/types';
 
+export function getBgColor(bgColor: string, fallbackColor?: string): string {
+  if (fallbackColor) {
+    return bgColor === TRANSPARENT_COLOR ? fallbackColor : bgColor;
+  }
+
+  return bgColor === 'transparent' ? TRANSPARENT_COLOR : bgColor;
+}
+
 export function getLocale(locale?: Partial<Locale>): Locale {
   return {
     currentDevice: 'Current device',
@@ -18,7 +27,7 @@ export function getLocale(locale?: Partial<Locale>): Locale {
 }
 
 export function getMergedStyles(styles?: StylesProps): StylesOptions {
-  return {
+  const mergedStyles = {
     activeColor: '#1cb954',
     altColor: '#ccc',
     bgColor: '#fff',
@@ -37,6 +46,10 @@ export function getMergedStyles(styles?: StylesProps): StylesOptions {
     trackNameColor: '#333',
     ...styles,
   };
+
+  mergedStyles.bgColor = getBgColor(mergedStyles.bgColor);
+
+  return mergedStyles;
 }
 
 export function getSpotifyLink(uri: string): string {

diff --git a/test/modules/__snapshots__/getters.spec.ts.snap b/test/modules/__snapshots__/getters.spec.ts.snap
@@ -20,7 +20,7 @@ exports[`getMergedStyles should return a merged styles 1`] = `
 {
   "activeColor": "#1cb954",
   "altColor": "#ccc",
-  "bgColor": "#fff",
+  "bgColor": "rgba(0, 0, 0, 0)",
   "color": "#333",
   "errorColor": "#ff0026",
   "height": 100,

diff --git a/test/modules/getters.spec.ts b/test/modules/getters.spec.ts
@@ -1,11 +1,24 @@
 import {
+  getBgColor,
   getLocale,
   getMergedStyles,
   getSpotifyLink,
   getSpotifyLinkTitle,
   getSpotifyURIType,
 } from '~/modules/getters';
 
+import { TRANSPARENT_COLOR } from '~/constants';
+
+describe('getBgColor', () => {
+  it('should return the background color', () => {
+    expect(getBgColor('#f04')).toBe('#f04');
+  });
+
+  it('should return the transparent color', () => {
+    expect(getBgColor('transparent')).toBe(TRANSPARENT_COLOR);
+  });
+});
+
 describe('getLocale', () => {
   it('should return a merged locale', () => {
     expect(getLocale({ currentDevice: 'Selected device ' })).toMatchSnapshot();
@@ -14,7 +27,7 @@ describe('getLocale', () => {
 
 describe('getMergedStyles', () => {
   it('should return a merged styles', () => {
-    expect(getMergedStyles({ height: 100 })).toMatchSnapshot();
+    expect(getMergedStyles({ bgColor: 'transparent', height: 100 })).toMatchSnapshot();
   });
 });