Updated to v3.0.0-alpha.20240402

- Added improvements to dynamic themes. - Updated workflows to run on Node 20. - Fixed some localization issues. - Removed themes generated from artist image when in ArtistInfoPage. - Removed artist backgrounds from displaying in FullScreenPlayer background. - Improved lyrics page errors. - Reduced the size of the sidebar text.
Sandakan · Apr 2, 2024 · 9f28c05 · 9f28c05
1 parent 1630aed
commit 9f28c05
Show file tree

Hide file tree

Showing 31 changed files with 313 additions and 192 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -30,7 +30,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           check-latest: true
 
       - name: Install Dependencies

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -22,7 +22,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           check-latest: true
 
       # ESLint and Prettier must be in `package.json`

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -13,7 +13,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           check-latest: true
 
       - name: Install dependencies

diff --git a/__tests__/isLatestVersion.test.ts b/__tests__/isLatestVersion.test.ts
@@ -1,4 +1,4 @@
-import isLatestVersion from '../src/renderer/utils/isLatestVersion';
+import isLatestVersion from '../src/renderer/src/utils/isLatestVersion';
 
 describe('App versions check', () => {
   test('Basic version checks', () => {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nora",
-  "version": "2.5.0-stable",
+  "version": "3.0.0-stable",
   "description": "An Electron application with React and TypeScript",
   "keywords": [
     "music",

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
@@ -808,11 +808,12 @@ export default function App() {
   const setDynamicThemesFromSongPalette = React.useCallback((palette?: NodeVibrantPalette) => {
     const manageBrightness = (
       values: [number, number, number],
-      defaultValue = 0.9
+      min = 0.9
+      // max = 1
     ): [number, number, number] => {
       const [h, s, l] = values;
 
-      const updatedL = l >= defaultValue ? l : defaultValue;
+      const updatedL = l >= min ? l : min;
       return [h, s, updatedL];
     };
 
@@ -833,6 +834,18 @@ export default function App() {
         root.style.removeProperty('--dark-background-color-3');
         root.style.removeProperty('--text-color-highlight');
         root.style.removeProperty('--dark-text-color-highlight');
+        root.style.removeProperty('--seekbar-background-color');
+        root.style.removeProperty('--dark-seekbar-background-color');
+        root.style.removeProperty('--scrollbar-thumb-background-color');
+        root.style.removeProperty('--dark-scrollbar-thumb-background-color');
+        root.style.removeProperty('--seekbar-track-background-color');
+        root.style.removeProperty('--dark-seekbar-track-background-color');
+        root.style.removeProperty('--text-color-highlight-2');
+        root.style.removeProperty('--dark-text-color-highlight-2');
+        root.style.removeProperty('--slider-opacity');
+        root.style.removeProperty('--dark-slider-opacity');
+        root.style.removeProperty('--context-menu-list-hover');
+        root.style.removeProperty('--dark-context-menu-list-hover');
       }
     };
 
@@ -848,20 +861,57 @@ export default function App() {
           palette?.Muted
         ) {
           const highLightVibrant = generateColor(manageBrightness(palette.LightVibrant.hsl));
+          const mediumLightVibrant = generateColor(
+            manageBrightness(palette.LightVibrant.hsl, 0.75)
+          );
           const lightVibrant = generateColor(palette.LightVibrant.hsl);
           const darkVibrant = generateColor(palette.DarkVibrant.hsl);
           const lightMuted = generateColor(palette.LightMuted.hsl);
           const darkMuted = generateColor(palette.DarkMuted.hsl);
           const vibrant = generateColor(palette.Vibrant.hsl);
+          const highVibrant = generateColor(manageBrightness(palette.Vibrant.hsl, 0.7));
           const muted = generateColor(palette.Muted.hsl);
 
           root.style.setProperty('--side-bar-background', highLightVibrant, 'important');
           root.style.setProperty('--background-color-2', highLightVibrant, 'important');
+
+          root.style.setProperty('--context-menu-list-hover', highLightVibrant, 'important');
+          root.style.setProperty('--dark-context-menu-list-hover', highLightVibrant, 'important');
+
           // root.style.setProperty('--dark-background-color-2', lightVibrant, 'important');
-          root.style.setProperty('--background-color-3', vibrant, 'important');
+
+          root.style.setProperty('--background-color-3', highVibrant, 'important');
           root.style.setProperty('--dark-background-color-3', lightVibrant, 'important');
+
           root.style.setProperty('--text-color-highlight', darkVibrant, 'important');
           root.style.setProperty('--dark-text-color-highlight', lightVibrant, 'important');
+
+          root.style.setProperty('--seekbar-background-color', darkVibrant, 'important');
+          root.style.setProperty('--dark-seekbar-background-color', lightVibrant, 'important');
+
+          root.style.setProperty(
+            '--scrollbar-thumb-background-color',
+            mediumLightVibrant,
+            'important'
+          );
+          root.style.setProperty(
+            '--dark-scrollbar-thumb-background-color',
+            mediumLightVibrant,
+            'important'
+          );
+
+          root.style.setProperty('--seekbar-track-background-color', darkVibrant, 'important');
+          root.style.setProperty(
+            '--dark-seekbar-track-background-color',
+            lightVibrant,
+            'important'
+          );
+
+          root.style.setProperty('--slider-opacity', '0.25', 'important');
+          root.style.setProperty('--dark-slider-opacity', '0.35', 'important');
+
+          root.style.setProperty('--text-color-highlight-2', darkVibrant, 'important');
+          root.style.setProperty('--dark-text-color-highlight-2', lightVibrant, 'important');
         }
       } else resetStyles();
     }

diff --git a/src/renderer/src/assets/locales/en/en.json b/src/renderer/src/assets/locales/en/en.json
@@ -559,6 +559,7 @@
     "noLyrics": "Lyrics not found.",
     "noLyricsDescription": "We couldn't find any lyrics for this song. You can add your own in the Tag Editor.",
     "noSyncedLyrics": "No synced lyrics found.",
+    "noSyncedLyricsDescription": "We couldn't find any synced lyrics for this song.",
     "noOnlineLyrics": "No online lyrics found.",
     "noOfflineLyrics": "No offline lyrics found.",
     "noSavedLyrics": "No saved lyrics found.",

diff --git a/src/renderer/src/assets/styles/styles.css b/src/renderer/src/assets/styles/styles.css
@@ -73,6 +73,7 @@
   --seekbar-background-color: 0 0% 20%; /* hsl(0 0% 20%) */
   --seekbar-track-background-color: 0 0% 80%; /* hsl(0 0% 80%) */
   --foreground-color-1: 247 74% 65%; /* hsl(247 74% 65%) */
+  --scrollbar-thumb-background-color: 212 48% 94%; /* hsl(212, 48%, 94%) */
   --transition-duration-0_2s: 0.2s;
   --transition-duration-0_25s: 0.25s;
   --transition-duration-0_3s: 0.3s;
@@ -91,6 +92,8 @@
   --dark-context-menu-background: 228 7% 14%; /* hsla(228 7% 14% / 90%) */
   --dark-context-menu-list-hover: 224 8% 28%; /* hsl(224 8% 28%) */
   --dark-seekbar-background-color: 240 1% 83%; /* hsl(240 1% 83%) */
+  --dark-seekbar-track-background-color: var(--seekbar-track-background-color);
+  --dark-scrollbar-thumb-background-color: 212 48% 94%; /* hsl(212, 48%, 94%) */
   --dark-slider-opacity: 0.25;
 }
 
@@ -115,25 +118,27 @@ html {
   box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
   border-radius: 10px;
-  background-color: var(--background-color-1);
+  background-color: hsl(var(--background-color-1));
 }
 
 ::-webkit-scrollbar {
   width: 10px;
   height: 8px;
-  background-color: var(--background-color-1);
+  background-color: hsl(var(--background-color-1));
+  transition: 'background';
 }
 
 ::-webkit-scrollbar-thumb {
   border-radius: 10px;
   box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  background-color: hsl(212, 48%, 94%);
+  background-color: hsl(var(--scrollbar-thumb-background-color));
+  transition: 'background';
   cursor: col-resize;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: var(--background-color-3);
+  background-color: hsl(var(--background-color-3));
 }
 
 /* ? MATERIAL SYMBOLS STYLES */
@@ -210,6 +215,7 @@ body * {
   --context-menu-background: var(--dark-context-menu-background);
   --context-menu-list-hover: var(--dark-context-menu-list-hover);
   --seekbar-background-color: var(--dark-seekbar-background-color);
+  --scrollbar-thumb-background-color: var(--dark-scrollbar-thumb-background-color);
   --slider-opacity: var(--dark-slider-opacity);
 }
 

diff --git a/src/renderer/src/components/AlbumsPage/AlbumsPage.tsx b/src/renderer/src/components/AlbumsPage/AlbumsPage.tsx
@@ -135,7 +135,7 @@ const AlbumsPage = () => {
         {albumsData.length > 0 && (
           <div className="title-container mb-8 mt-1 flex items-center pr-4 text-3xl font-medium text-font-color-highlight dark:text-dark-font-color-highlight">
             <div className="container flex">
-              {t('common.album_one')}{' '}
+              {t('common.album_other')}{' '}
               <div className="other-stats-container ml-12 flex items-center text-xs text-font-color-black dark:text-font-color-white">
                 {isMultipleSelectionEnabled ? (
                   <div className="text-sm text-font-color-highlight dark:text-dark-font-color-highlight">

diff --git a/src/renderer/src/components/ArtistInfoPage/ArtistInfoPage.tsx b/src/renderer/src/components/ArtistInfoPage/ArtistInfoPage.tsx
@@ -27,7 +27,7 @@ const ArtistInfoPage = () => {
   const {
     currentlyActivePage,
     // queue,
-    isDarkMode,
+    // isDarkMode,
     bodyBackgroundImage,
     localStorageData,
     multipleSelectionsData,
@@ -370,19 +370,19 @@ const ArtistInfoPage = () => {
     ]
   );
 
-  const fontColor = React.useMemo(() => {
-    if (
-      artistData?.artistPalette &&
-      artistData.artistPalette?.LightMuted &&
-      artistData.artistPalette?.LightVibrant
-    ) {
-      const { LightVibrant, LightMuted } = artistData.artistPalette;
-      const [h, s, l] = isDarkMode ? LightVibrant.hsl : LightMuted.hsl;
+  // const fontColor = React.useMemo(() => {
+  //   if (
+  //     artistData?.artistPalette &&
+  //     artistData.artistPalette?.LightMuted &&
+  //     artistData.artistPalette?.LightVibrant
+  //   ) {
+  //     const { LightVibrant, LightMuted } = artistData.artistPalette;
+  //     const [h, s, l] = isDarkMode ? LightVibrant.hsl : LightMuted.hsl;
 
-      return `hsl(${h * 360} ${s * 100} ${l * 100})`;
-    }
-    return undefined;
-  }, [artistData?.artistPalette, isDarkMode]);
+  //     return `hsl(${h * 360} ${s * 100} ${l * 100})`;
+  //   }
+  //   return undefined;
+  // }, [artistData?.artistPalette, isDarkMode]);
 
   return (
     <MainContainer
@@ -466,13 +466,13 @@ const ArtistInfoPage = () => {
         >
           <div
             className="artist-name mb-2 text-5xl text-font-color-highlight dark:text-dark-font-color-highlight"
-            style={
-              fontColor
-                ? {
-                    color: fontColor
-                  }
-                : undefined
-            }
+            // style={
+            //   fontColor
+            //     ? {
+            //         color: fontColor
+            //       }
+            //     : undefined
+            // }
           >
             {artistData?.name || t('common.unknownArtist')}
           </div>
@@ -508,7 +508,7 @@ const ArtistInfoPage = () => {
           <>
             <TitleContainer
               title={t('artistInfoPage.appearsInAlbums')}
-              titleClassName="!text-2xl text-font-color-black !font-normal dark:text-font-color-white"
+              titleClassName="!text-2xl text-font-color-black dark:text-font-color-white"
               className={`title-container ${
                 bodyBackgroundImage
                   ? 'text-font-color-white'
@@ -578,7 +578,7 @@ const ArtistInfoPage = () => {
           <>
             <TitleContainer
               title={t('artistInfoPage.appearsInSongs')}
-              titleClassName="!text-2xl text-font-color-black !font-normal dark:text-font-color-white"
+              titleClassName="!text-2xl text-font-color-black dark:text-font-color-white"
               className={`title-container ${
                 bodyBackgroundImage
                   ? 'text-font-color-white'
@@ -593,7 +593,7 @@ const ArtistInfoPage = () => {
                       })
                     : `${t('common.songWithCount', { count: songs.length })} ${
                         songs.length > 5 && !isAllSongsVisible
-                          ? t('common.shownWithCount', { count: 5 })
+                          ? `(${t('common.shownWithCount', { count: 5 })})`
                           : ''
                       }`}
                 </p>

diff --git a/src/renderer/src/components/ArtistInfoPage/SimilarArtistsContainer.tsx b/src/renderer/src/components/ArtistInfoPage/SimilarArtistsContainer.tsx
@@ -62,7 +62,7 @@ const SimilarArtistsContainer = (props: Props) => {
         <>
           <TitleContainer
             title={t('artistInfoPage.similarArtistsInLibrary')}
-            titleClassName="!text-2xl text-font-color-black !font-normal dark:text-font-color-white"
+            titleClassName="!text-2xl text-font-color-black dark:text-font-color-white"
             className={`title-container ${
               bodyBackgroundImage
                 ? 'text-font-color-white'

diff --git a/src/renderer/src/components/ArtistPage/Artist.tsx b/src/renderer/src/components/ArtistPage/Artist.tsx
@@ -313,7 +313,7 @@ export const Artist = (props: ArtistProp) => {
       <div className="artist-img-container relative flex h-3/4 items-center justify-center">
         {isAFavorite && (
           <span
-            className={`material-icons-round absolute -bottom-1 left-2 z-10 flex rounded-full bg-background-color-1 p-2 text-2xl !text-font-color-crimson shadow-lg dark:bg-dark-background-color-2 ${
+            className={`material-icons-round absolute -bottom-1 left-2 z-10 flex rounded-full bg-background-color-1 p-2 text-2xl !text-font-color-highlight dark:!text-dark-font-color-highlight shadow-lg dark:bg-dark-background-color-2 ${
               isAMultipleSelection && '!bg-background-color-3 dark:!bg-dark-background-color-3'
             }`}
           >

diff --git a/src/renderer/src/components/ContextMenu/ContextMenuItem.tsx b/src/renderer/src/components/ContextMenu/ContextMenuItem.tsx
@@ -12,7 +12,7 @@ const ContextMenuItem = (props: ContextMenuItem) => {
     <div
       className={`menu-item ${
         props.class || ''
-      } flex cursor-pointer flex-row items-center px-4 py-1 text-sm font-light text-font-color-black hover:bg-context-menu-list-hover/75 dark:text-font-color-white dark:hover:bg-dark-context-menu-list-hover`}
+      } flex cursor-pointer flex-row items-center px-4 py-1 text-sm font-light text-font-color-black hover:bg-context-menu-list-hover/75 dark:text-font-color-white dark:hover:bg-dark-context-menu-list-hover/25`}
       onClick={() => {
         if (!props.isContextMenuItemSeperator && props.handlerFunction) {
           props.handlerFunction();

diff --git a/src/renderer/src/components/FullScreenPlayer/FullScreenPlayer.tsx b/src/renderer/src/components/FullScreenPlayer/FullScreenPlayer.tsx
@@ -44,11 +44,14 @@ const FullScreenPlayer = () =>
     ]);
 
     const imgPath = useMemo(() => {
+      const isArtistBackgroundsEnabled = false;
+
       const selectedArtist = currentSongData?.artists?.find(
         (artist) => !!artist.onlineArtworkPaths?.picture_xl
       );
 
-      if (selectedArtist) return selectedArtist.onlineArtworkPaths?.picture_xl;
+      if (isArtistBackgroundsEnabled && selectedArtist)
+        return selectedArtist.onlineArtworkPaths?.picture_xl;
       return currentSongData.artworkPath;
     }, [currentSongData?.artists, currentSongData?.artworkPath]);
 

diff --git a/src/renderer/src/components/FullScreenPlayer/containers/LyricsContainer.tsx b/src/renderer/src/components/FullScreenPlayer/containers/LyricsContainer.tsx
@@ -111,15 +111,17 @@ const LyricsContainer = (props: Props) => {
         </>
       )}
       {isLyricsVisible && lyrics && !lyrics.lyrics.isSynced && (
-        <div className="flex h-full w-full flex-col justify-center text-2xl text-font-color-white opacity-50">
+        <div className="flex h-full w-full flex-col justify-center text-2xl text-font-color-highlight opacity-50">
           <span className="material-icons-round-outlined mb-2 text-5xl">brightness_alert</span>
           {t('lyricsPage.noSyncedLyrics')}
+          <p className="text-sm mt-4">{t('lyricsPage.noSyncedLyricsDescription')}</p>
         </div>
       )}
       {isLyricsVisible && lyrics === undefined && (
-        <div className="flex h-full w-full flex-col justify-center text-2xl text-font-color-white opacity-50">
+        <div className="flex h-full w-full flex-col justify-center text-2xl text-font-color-highlight opacity-50">
           <span className="material-icons-round-outlined mb-2 text-5xl">brightness_alert</span>
-          {t('lyricsPage.noLyrics')}
+          <p>{t('lyricsPage.noLyrics')}</p>
+          <p className="text-sm mt-4">{t('lyricsPage.noLyricsDescription')}</p>
         </div>
       )}
     </div>

diff --git a/src/renderer/src/components/Hyperlink.tsx b/src/renderer/src/components/Hyperlink.tsx
@@ -39,7 +39,7 @@ const Hyperlink = (props: HyperlinkProp) => {
 
   return (
     <span
-      className={`about-link w-fit cursor-pointer text-font-color-highlight-2 outline-1 outline-offset-1 hover:underline focus:!outline dark:text-dark-font-color-highlight-2 ${className}`}
+      className={`about-link w-fit cursor-pointer font-medium text-font-color-highlight-2 outline-1 outline-offset-1 hover:underline focus:!outline dark:text-dark-font-color-highlight-2 ${className}`}
       title={link}
       onClick={openLinkConfirmPrompt}
       role="link"