Added a blurred background to full and mini player

- Updated app dependencies. - Disabled prettier lint workflow because it doesn't detect the config file. - Added a `how to use` prompt when visiting the lyrics editor for the first time.
Sandakan · Jul 12, 2024 · e77aa3b · e77aa3b
1 parent 7cd905d
commit e77aa3b
Show file tree

Hide file tree

Showing 13 changed files with 531 additions and 819 deletions.
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -33,4 +33,4 @@ jobs:
         uses: wearerequired/lint-action@v2
         with:
           eslint: true
-          prettier: true
+          prettier: false
diff --git a/electron-builder.yml b/electron-builder.yml
@@ -2,7 +2,7 @@ appId: com.sandakannipunajith.nora
 productName: Nora
 copyright: Copyright © 2024 Sandakan Nipunajith
 icon: ./build/icon.ico
-artifactName: '${productName} Setup ${version}-${os}-${arch}.${ext}'
+artifactName: '${productName} v${version}-${os}-${arch}.${ext}'
 
 directories:
   buildResources: build
@@ -94,9 +94,6 @@ mac:
         - x64
         - arm64
 
-dmg:
-  artifactName: '${name}-${version}.${ext}'
-
 linux:
   target:
     - AppImage

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
     "metadataEditingSupportedExtensions": [
       "mp3"
     ],
-    "removeReactStrictMode": true,
+    "removeReactStrictMode": false,
     "showSongIdInsteadOfSongYear": false,
     "supportedMusicExtensions": [
       "mp3",
@@ -98,7 +98,7 @@
     "electron-store": "^10.0.0",
     "electron-updater": "^6.1.7",
     "i18next": "^23.7.6",
-    "music-metadata": "^8.3.0",
+    "music-metadata": "^9.0.0",
     "node-id3": "^0.2.6",
     "node-vibrant": "^3.2.1-alpha.1",
     "react-beautiful-dnd": "^13.1.1",
@@ -134,7 +134,7 @@
     "eslint-plugin-react-refresh": "^0.4.6",
     "husky": "^9.0.11",
     "jest": "^29.7.0",
-    "material-symbols": "^0.20.0",
+    "material-symbols": "^0.21.0",
     "postcss": "^8.4.35",
     "prettier": "^3.2.4",
     "prettier-plugin-tailwindcss": "^0.6.1",

diff --git a/src/@types/app.d.ts b/src/@types/app.d.ts
@@ -477,6 +477,7 @@ declare global {
     doNotShowBlacklistSongConfirm: boolean;
     isReducedMotion: boolean;
     doNotVerifyWhenOpeningLinks: boolean;
+    doNotShowHelpPageOnLyricsEditorStartUp: boolean;
     showSongRemainingTime: boolean;
     showArtistArtworkNearSongControls: boolean;
     disableBackgroundArtworks: boolean;

diff --git a/src/renderer/src/assets/locales/en/en.json b/src/renderer/src/assets/locales/en/en.json
@@ -89,7 +89,7 @@
     "goBack": "Go back",
     "saveArtwork": "Save artwork",
     "readMoreAboutTitle": "Read more about the `{{title}}`",
-    "doNotShowThisMessageAgain": "Do not show this message again.",
+    "doNotShowThisMessageAgain": "Do not show again.",
     "artistConflictResolved": "Artist conflict resolved successfully.",
     "featArtistSuggestionResolved": "Featuring artists suggestion resolved successfully.",
     "hasInternet": "You are connected to internet.",

diff --git a/src/renderer/src/components/FullScreenPlayer/FullScreenPlayer.tsx b/src/renderer/src/components/FullScreenPlayer/FullScreenPlayer.tsx
@@ -13,7 +13,7 @@ import SeekBarSlider from '../SeekBarSlider';
 
 // type Props = {};
 
-const isArtistBackgroundsEnabled = true;
+const isArtistBackgroundsEnabled = false;
 
 const FullScreenPlayer = () =>
   // (props: Props)
@@ -66,9 +66,9 @@ const FullScreenPlayer = () =>
             fallbackSrc={DefaultSongCover}
             loading="eager"
             alt="Song Cover"
-            className="h-full w-full object-cover shadow-lg !blur-[2px] !brightness-[.25] transition-[filter] delay-100 duration-200 ease-in-out"
+            className={`h-full w-full object-cover shadow-lg blur-none !brightness-[.25] transition-[filter] delay-100 duration-200 ease-in-out ${isLyricsVisible ? '!blur-[2rem]' : '!blur-[2rem]'}`}
           />
-          <div className="absolute inset-0 h-full w-full bg-gradient-to-r from-black/50 to-black/5"></div>
+          {/* <div className="absolute inset-0 h-full w-full bg-gradient-to-r from-black/50 to-black/5"></div> */}
         </div>
         <TitleBar />
         <div

diff --git a/src/renderer/src/components/LyricsEditingPage/LyricsEditingPage.tsx b/src/renderer/src/components/LyricsEditingPage/LyricsEditingPage.tsx
@@ -86,6 +86,16 @@ const LyricsEditingPage = () => {
     [currentSongData.songId, songId]
   );
 
+  useEffect(() => {
+    if (
+      changePromptMenuData &&
+      !localStorageData?.preferences?.doNotShowHelpPageOnLyricsEditorStartUp
+    ) {
+      changePromptMenuData(true, <LyricsEditorHelpPrompt showDoNotShowAgainCheckbox />);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     if (lyrics) {
       const lines: ExtendedEditingLyricsLineData[] = lyrics.map((lineData, index) => ({

diff --git a/src/renderer/src/components/LyricsEditingPage/LyricsEditorHelpPrompt.tsx b/src/renderer/src/components/LyricsEditingPage/LyricsEditorHelpPrompt.tsx
@@ -4,20 +4,48 @@ import { AppUpdateContext } from '../../contexts/AppUpdateContext';
 
 import Button from '../Button';
 import ShortcutButton from '../SettingsPage/ShortcutButton';
+import Checkbox from '../Checkbox';
+import { AppContext } from '../../contexts/AppContext';
+import storage from '../../../src/utils/localStorage';
 
 const AppShortcutsPrompt = lazy(() => import('../SettingsPage/AppShortcutsPrompt'));
 
-const LyricsEditorHelpPrompt = () => {
+type Props = {
+  showDoNotShowAgainCheckbox?: boolean;
+};
+
+const LyricsEditorHelpPrompt = (props: Props) => {
+  const { localStorageData } = useContext(AppContext);
   const { changePromptMenuData } = useContext(AppUpdateContext);
   const { t } = useTranslation();
 
+  const { showDoNotShowAgainCheckbox = false } = props;
+
   return (
     <div>
-      <div className="title-container mb-4 flex items-center text-3xl font-medium text-font-color-highlight dark:text-dark-font-color-highlight">
-        <span className="material-icons-round-outlined mr-2 text-4xl">help</span>{' '}
-        {t('lyricsEditorHelpPrompt.title')}
+      <div className="title-container mb-4 flex items-center justify-between text-font-color-highlight dark:text-dark-font-color-highlight">
+        <span className="flex items-center text-3xl font-medium">
+          <span className="material-icons-round-outlined mr-2 text-4xl">help</span>{' '}
+          {t('lyricsEditorHelpPrompt.title')}
+        </span>
+
+        {showDoNotShowAgainCheckbox && (
+          <Checkbox
+            id="doNotShowHelpPageOnLyricsEditorStartUpCheckbox"
+            className="no-blacklist-song-confirm-checkbox-container my-8"
+            labelContent={t('common.doNotShowThisMessageAgain')}
+            isChecked={
+              localStorageData &&
+              (localStorageData.preferences?.doNotShowHelpPageOnLyricsEditorStartUp || false)
+            }
+            checkedStateUpdateFunction={(state) => {
+              storage.preferences.setPreferences('doNotShowHelpPageOnLyricsEditorStartUp', state);
+            }}
+          />
+        )}
       </div>
-      <ul className="pl-4">
+
+      <ul className="list-outside list-disc pl-8">
         <li>
           <h3 className="text-xl font-medium">{t('lyricsEditorHelpPrompt.subTitle1')}</h3>
           <div className="mb-6 py-2 pl-4">

diff --git a/src/renderer/src/components/LyricsPage/LyricLine.tsx b/src/renderer/src/components/LyricsPage/LyricLine.tsx
@@ -100,17 +100,17 @@ const LyricLine = (props: LyricProp) => {
             })
           : undefined
       }
-      className={`highlight duration-250 mb-5 flex w-fit select-none flex-col items-center justify-center text-balance text-center text-5xl font-medium text-font-color-black transition-[transform,color,filter] first:mt-8 last:mb-4 empty:mb-16 dark:text-font-color-white ${
+      className={`highlight duration-250 z-0 mb-5 flex w-fit select-none flex-col items-center justify-center text-balance text-center text-5xl font-medium text-font-color-black transition-[transform,color,filter] first:mt-8 last:mb-4 empty:mb-16 dark:text-font-color-white ${
         syncedLyrics
-          ? `cursor-pointer ${
+          ? `cursor-pointer blur-[1px] ${
               isInRange
                 ? '!scale-100 text-font-color-highlight !text-opacity-90 !blur-0 dark:!text-dark-font-color-highlight [&>div>span]:!mr-3'
                 : 'scale-[.7] !text-opacity-20 hover:!text-opacity-75'
             }`
           : '!text-4xl'
-      } ${playerType === 'mini' && '!mb-2 !text-2xl !text-font-color-white'} ${
+      } ${playerType === 'mini' && '!mb-2 !text-2xl !text-font-color-white blur-[1px]'} ${
         playerType === 'full' &&
-        '!mb-6 origin-left !items-start !justify-start !text-left !text-6xl !text-font-color-white blur-[1px]'
+        '!mb-6 origin-left !items-start !justify-start !text-left !text-6xl !text-font-color-white blur-[2px]'
       }`}
       ref={lyricsRef}
       onClick={() =>

diff --git a/src/renderer/src/components/MiniPlayer/MiniPlayer.tsx b/src/renderer/src/components/MiniPlayer/MiniPlayer.tsx
@@ -74,8 +74,8 @@ export default function MiniPlayer(props: MiniPlayerProps) {
           loading="eager"
           alt="Song Cover"
           className={`h-full w-full object-cover transition-[filter] delay-100 duration-200 ease-in-out group-focus-within:blur-[2px] group-focus-within:brightness-75 group-hover:blur-[2px] group-hover:brightness-75 group-focus:blur-[4px] group-focus:brightness-75 ${
-            isLyricsVisible ? '!blur-[2px] !brightness-[.25]' : ''
-          } ${!isCurrentSongPlaying ? 'blur-[2px] brightness-75' : 'blur-0 brightness-100'}`}
+            isLyricsVisible ? '!blur-[1rem] !brightness-[.25]' : ''
+          } ${!isCurrentSongPlaying ? 'blur-[1rem] brightness-75' : 'blur-0 brightness-100'}`}
         />
       </div>
       <LyricsContainer isLyricsVisible={isLyricsVisible} />

diff --git a/src/renderer/src/components/SongsPage/Song.tsx b/src/renderer/src/components/SongsPage/Song.tsx
@@ -418,6 +418,7 @@ const Song = forwardRef((props: SongProp, ref: ForwardedRef<HTMLDivElement>) =>
         label: t('common.info'),
         class: 'info',
         iconName: 'info',
+        iconClassName: 'material-icons-round-outlined',
         handlerFunction: goToSongInfoPage,
         isDisabled: isMultipleSelectionsEnabled
       },

diff --git a/src/renderer/src/utils/localStorage.ts b/src/renderer/src/utils/localStorage.ts
@@ -26,7 +26,8 @@ export const LOCAL_STORAGE_DEFAULT_TEMPLATE: LocalStorage = {
     lyricsAutomaticallySaveState: 'NONE',
     showTrackNumberAsSongIndex: true,
     allowToPreventScreenSleeping: true,
-    enableImageBasedDynamicThemes: false
+    enableImageBasedDynamicThemes: false,
+    doNotShowHelpPageOnLyricsEditorStartUp: false
   },
   playback: {
     currentSong: {