diff --git a/assets/installer_assets/sidebar.bmp b/assets/installer_assets/sidebar.bmp index c0cf808f..4840b974 100644 Binary files a/assets/installer_assets/sidebar.bmp and b/assets/installer_assets/sidebar.bmp differ diff --git a/package.json b/package.json index 7f4d8993..71f0ddeb 100644 --- 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 index a2709f01..d16a7a09 100644 --- a/release/app/package-lock.json +++ b/release/app/package-lock.json @@ -1,12 +1,12 @@ { "name": "nora", - "version": "2.1.0-stable.20230426", + "version": "2.1.0-stable.20230503", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "nora", - "version": "2.1.0-stable.20230426", + "version": "2.1.0-stable.20230503", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/release/app/package.json b/release/app/package.json index 40a8a1ab..d3df0f82 100644 --- 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 index caed02fc..1fce15b8 100644 --- a/release/package-lock.json +++ b/release/package-lock.json @@ -1,6 +1,6 @@ { "name": "nora", - "version": "2.1.0-stable.20230426", + "version": "2.1.0-stable.20230503", "lockfileVersion": 2, "requires": true, "packages": { diff --git a/release/package.json b/release/package.json index 3d9436bf..02577f7b 100644 --- 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 index 38108277..6c4545e6 100644 --- 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 index 8a4de4f5..17605511 100644 --- 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 index 6fb2478a..07a2a98e 100644 --- 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} diff --git a/src/renderer/components/SongsPage/SongCard.tsx b/src/renderer/components/SongsPage/SongCard.tsx index 7349d743..27526c0d 100644 --- a/src/renderer/components/SongsPage/SongCard.tsx +++ b/src/renderer/components/SongsPage/SongCard.tsx @@ -95,16 +95,8 @@ const SongCard = (props: SongCardProp) => { : [47, 49, 55], [palette] ); - const [fr, fg, fb] = React.useMemo( - () => - palette && palette.LightVibrant && palette.DarkVibrant - ? palette.DarkVibrant.rgb - : [222, 220, 217], - [palette] - ); - const background = `linear-gradient(90deg,rgba(${r},${g},${b},1) 0%,rgba(${r},${g},${b},1) 50%,rgba(${r},${g},${b},0.6) 70%,rgba(${r},${g},${b},0) 100%)`; - const fontColor = `rgba(${fr},${fg},${fb},1)`; + const background = `linear-gradient(to top,rgba(${r},${g},${b},0.3) 0%,rgba(${r},${g},${b},0.15) 40%), linear-gradient(to top,rgba(0,0,0,0.8)0%,rgba(0,0,0,0.1) 60%)`; const handlePlayBtnClick = React.useCallback(() => { playSong(songId); @@ -503,7 +495,7 @@ const SongCard = (props: SongCardProp) => { key={artist.artistId} artistId={artist.artistId} name={artist.name} - style={{ color: fontColor }} + className="!text-font-color-white/80 dark:!text-font-color-white/80" /> ) : ( [ @@ -511,9 +503,11 @@ const SongCard = (props: SongCardProp) => { key={artist.artistId} artistId={artist.artistId} name={artist.name} - style={{ color: fontColor }} + className="!text-font-color-white/80 dark:!text-font-color-white/80" />, - ,, + + , + , ] ) ) @@ -521,7 +515,7 @@ const SongCard = (props: SongCardProp) => { ) : ( Unknown Artist ), - [fontColor, artists] + [artists] ); return ( @@ -533,9 +527,9 @@ const SongCard = (props: SongCardProp) => { currentSongData.songId === songId && 'current-song' } ${ isSongPlaying && 'playing' - } group relative mb-2 mr-2 aspect-[2/1] min-w-[10rem] max-w-[24rem] overflow-hidden rounded-2xl border-[transparent] border-background-color-2 shadow-xl transition-[border-color] ease-in-out dark:border-dark-background-color-2 ${ + } group/songCard relative mb-2 mr-2 aspect-[2/1] min-w-[10rem] max-w-[24rem] overflow-hidden rounded-2xl border-[transparent] border-background-color-2 shadow-xl transition-[border-color] ease-in-out dark:border-dark-background-color-2 ${ className || '' - } ${isBlacklisted && '!opacity-30'} ${ + } ${isBlacklisted && '!opacity-90 !brightness-50 dark:!opacity-75'} ${ isMultipleSelectionEnabled && multipleSelectionsData.selectionType === 'songs' && 'border-4' @@ -570,90 +564,93 @@ const SongCard = (props: SongCardProp) => { ); }} > -
+
Song cover
-
-
{ +
+
-
x.name).join(', ') : 'Unknown Artist' - } - data-song-id={songId} - > - {songArtistComponents} + /> + {isBlacklisted && ( + + block + + )} +
+
+
+
{ + e.stopPropagation(); + showSongInfoPage(); + }} + onKeyDown={(e) => e.key === 'Enter' && showSongInfoPage()} + tabIndex={0} + > + {title} +
+
x.name).join(', ') + : 'Unknown Artist' + } + data-song-id={songId} + > + {songArtistComponents} +
-
-
+
+ {isMultipleSelectionEnabled ? ( + multipleSelectionsData.selectionType === 'songs' && ( + + ) + ) : (
- {isMultipleSelectionEnabled && - multipleSelectionsData.selectionType === 'songs' && ( - - )} + )}
-
-
);