Updated to v2.1.0-stable.20230503

- Added a new design for the song cards in Home page. - Fixed a possible bug where media control buttons doesn't work as expected. Fixes #166. - Removed predictive search when searching for artists, albums and genres in the SongTagsEditingPage.
Sandakan · May 3, 2023 · 0d0d39c · 0d0d39c
1 parent 356f408
commit 0d0d39c
Show file tree

Hide file tree

Showing 10 changed files with 146 additions and 136 deletions.
diff --git a/assets/installer_assets/sidebar.bmp b/assets/installer_assets/sidebar.bmp
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "nora",
   "productName": "Nora",
   "description": "An elegant music player built using Electron and React. Inspired by Oto Music for Android by Piyush Mamidwar.",
-  "version": "2.1.0-stable.20230426",
+  "version": "2.1.0-stable.20230503",
   "license": "MIT",
   "appPreferences": {
     "removeReactStrictMode": false,

diff --git a/release/app/package-lock.json b/release/app/package-lock.json
diff --git a/release/app/package.json b/release/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "nora",
   "productName": "Nora",
-  "version": "2.1.0-stable.20230426",
+  "version": "2.1.0-stable.20230503",
   "description": "An elegant music player built using Electron and React. Inspired by Oto Music for Android by Piyush Mamidwar.",
   "main": "./dist/main/main.js",
   "author": {

diff --git a/release/package-lock.json b/release/package-lock.json
diff --git a/release/package.json b/release/package.json
@@ -1,7 +1,7 @@
 {
   "name": "nora",
   "productName": "Nora",
-  "version": "2.1.0-stable.20230426",
+  "version": "2.1.0-stable.20230503",
   "description": "An elegant music player built using Electron and React. Inspired by Oto Music for Android by Piyush Mamidwar.",
   "main": "./dist/main/main.js",
   "author": {

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -1297,50 +1297,6 @@ export default function App() {
     };
   }, [displayMessageFromMain]);
 
-  React.useEffect(() => {
-    if ('mediaSession' in navigator) {
-      navigator.mediaSession.metadata = new MediaMetadata({
-        title: contentRef.current.currentSongData.title,
-        artist: Array.isArray(contentRef.current.currentSongData.artists)
-          ? contentRef.current.currentSongData.artists
-              .map((artist) => artist.name)
-              .join(', ')
-          : `Unknown Artist`,
-        album: contentRef.current.currentSongData.album
-          ? contentRef.current.currentSongData.album.name || 'Unknown Album'
-          : 'Unknown Album',
-        artwork: [
-          {
-            src: `data:;base64,${contentRef.current.currentSongData.artwork}`,
-            sizes: '300x300',
-            type: 'image/webp',
-          },
-        ],
-      });
-      const handleSkipForwardClickWithParams = () =>
-        handleSkipForwardClick('PLAYER_SKIP');
-
-      navigator.mediaSession.setActionHandler('pause', () =>
-        toggleSongPlayback(false)
-      );
-      navigator.mediaSession.setActionHandler('play', () =>
-        toggleSongPlayback(true)
-      );
-      navigator.mediaSession.setActionHandler(
-        'previoustrack',
-        handleSkipBackwardClick
-      );
-      navigator.mediaSession.setActionHandler(
-        `nexttrack`,
-        handleSkipForwardClickWithParams
-      );
-      navigator.mediaSession.playbackState = content.player.isCurrentSongPlaying
-        ? 'playing'
-        : 'paused';
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [content.currentSongData, content.player.isCurrentSongPlaying]);
-
   const handleContextMenuVisibilityUpdate = React.useCallback(() => {
     if (contentRef.current.contextMenuData.isVisible) {
       dispatch({
@@ -1743,6 +1699,63 @@ export default function App() {
     [toggleSongPlayback, changeQueueCurrentSongIndex]
   );
 
+  React.useEffect(() => {
+    navigator.mediaSession.metadata = new MediaMetadata({
+      title: contentRef.current.currentSongData.title,
+      artist: Array.isArray(contentRef.current.currentSongData.artists)
+        ? contentRef.current.currentSongData.artists
+            .map((artist) => artist.name)
+            .join(', ')
+        : `Unknown Artist`,
+      album: contentRef.current.currentSongData.album
+        ? contentRef.current.currentSongData.album.name || 'Unknown Album'
+        : 'Unknown Album',
+      artwork: [
+        {
+          src: `data:;base64,${contentRef.current.currentSongData.artwork}`,
+          sizes: '300x300',
+          type: 'image/webp',
+        },
+      ],
+    });
+    const handleSkipForwardClickWithParams = () =>
+      handleSkipForwardClick('PLAYER_SKIP');
+
+    navigator.mediaSession.setActionHandler('pause', () =>
+      toggleSongPlayback(false)
+    );
+    navigator.mediaSession.setActionHandler('play', () =>
+      toggleSongPlayback(true)
+    );
+    navigator.mediaSession.setActionHandler(
+      'previoustrack',
+      handleSkipBackwardClick
+    );
+    navigator.mediaSession.setActionHandler(
+      `nexttrack`,
+      handleSkipForwardClickWithParams
+    );
+    navigator.mediaSession.playbackState = content.player.isCurrentSongPlaying
+      ? 'playing'
+      : 'paused';
+    return () => {
+      navigator.mediaSession.metadata = null;
+      navigator.mediaSession.playbackState = 'none';
+      navigator.mediaSession.setActionHandler('play', null);
+      navigator.mediaSession.setActionHandler('pause', null);
+      navigator.mediaSession.setActionHandler('seekbackward', null);
+      navigator.mediaSession.setActionHandler('seekforward', null);
+      navigator.mediaSession.setActionHandler('previoustrack', null);
+      navigator.mediaSession.setActionHandler('nexttrack', null);
+    };
+  }, [
+    content.currentSongData,
+    content.player.isCurrentSongPlaying,
+    handleSkipBackwardClick,
+    handleSkipForwardClick,
+    toggleSongPlayback,
+  ]);
+
   const toggleShuffling = React.useCallback((isShuffling?: boolean) => {
     dispatch({ type: 'TOGGLE_SHUFFLE_STATE', data: isShuffling });
     if (isShuffling !== undefined)

diff --git a/src/renderer/components/SongTagsEditingPage/SongTagsEditingPage.tsx b/src/renderer/components/SongTagsEditingPage/SongTagsEditingPage.tsx
@@ -117,7 +117,7 @@ function SongTagsEditingPage() {
   React.useEffect(() => {
     if (artistKeyword.trim()) {
       window.api
-        .search('Artists', artistKeyword, false)
+        .search('Artists', artistKeyword, false, false)
         .then((res) => {
           console.log(res);
           if (res.artists.length > 0)
@@ -141,7 +141,7 @@ function SongTagsEditingPage() {
   React.useEffect(() => {
     if (albumKeyword.trim()) {
       window.api
-        .search('Albums', albumKeyword, false)
+        .search('Albums', albumKeyword, false, false)
         .then((res) => {
           console.log(res);
           if (res.albums.length > 0)
@@ -165,7 +165,7 @@ function SongTagsEditingPage() {
   React.useEffect(() => {
     if (genreKeyword.trim()) {
       window.api
-        .search('Genres', genreKeyword, false)
+        .search('Genres', genreKeyword, false, false)
         .then((res) => {
           console.log(res);
           if (res.genres.length > 0)

diff --git a/src/renderer/components/SongsControlsContainer/CurrentlyPlayingSongInfoContainer.tsx b/src/renderer/components/SongsControlsContainer/CurrentlyPlayingSongInfoContainer.tsx
@@ -152,14 +152,14 @@ const CurrentlyPlayingSongInfoContainer = () => {
     currentSongData.isKnownSource,
   ]);
 
-  const contextMenuCurrrentSongData =
+  const contextMenuCurrentSongData =
     React.useMemo((): ContextMenuAdditionalData => {
       const { title, artworkPath, artists } = currentSongData;
       return {
         title,
         artworkPath: artworkPath ?? DefaultSongCover,
         subTitle:
-          artists?.map((artist) => artist.name).join(', ') ?? 'Unknonwn artist',
+          artists?.map((artist) => artist.name).join(', ') || 'Unknown artist',
         // subTitle2: album?.name,
       };
     }, [currentSongData]);
@@ -302,7 +302,7 @@ const CurrentlyPlayingSongInfoContainer = () => {
               contextMenuItems,
               e.pageX,
               e.pageY,
-              contextMenuCurrrentSongData
+              contextMenuCurrentSongData
             );
           }}
         />
@@ -327,7 +327,7 @@ const CurrentlyPlayingSongInfoContainer = () => {
                   contextMenuItems,
                   e.pageX,
                   e.pageY,
-                  contextMenuCurrrentSongData
+                  contextMenuCurrentSongData
                 );
               }}
               tabIndex={0}