support switching albumartist tracks/albums

jeffvli · Apr 19, 2024 · 00ff893 · 00ff893
1 parent ffbede9
commit 00ff893
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 12 deletions.
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -282,6 +282,7 @@
             "moreFromGeneric": "more from {{item}}"
         },
         "albumList": {
+            "artistAlbums": "Albums by {{artist}}",
             "genreAlbums": "\"{{genre}}\" $t(entity.album_other)",
             "showTracks": "show $t(entity.track_other)",
             "title": "$t(entity.album_other)"
@@ -478,7 +479,7 @@
         "gaplessAudio_description": "sets the gapless audio setting for mpv",
         "gaplessAudio_optionWeak": "weak (recommended)",
         "genreBehavior": "genre page default behavior",
-        "genreBahvior_description": "determines whether clicking on a genre opens by default in track or album list",
+        "genreBehavior_description": "determines whether clicking on a genre opens by default in track or album list",
         "globalMediaHotkeys": "global media hotkeys",
         "globalMediaHotkeys_description": "enable or disable the usage of your system media hotkeys to control playback",
         "homeConfiguration": "home page configuration",

diff --git a/src/renderer/features/albums/components/album-list-header.tsx b/src/renderer/features/albums/components/album-list-header.tsx
@@ -13,11 +13,13 @@ import { AlbumListFilter, useCurrentServer, usePlayButtonBehavior } from '/@/ren
 import { titleCase } from '/@/renderer/utils';
 import { RiMusicLine } from 'react-icons/ri';
 import { generatePath } from 'react-router';
-import { Link } from 'react-router-dom';
+import { Link, createSearchParams } from 'react-router-dom';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useDisplayRefresh } from '/@/renderer/hooks/use-display-refresh';
 
 interface AlbumListHeaderProps {
+    albumArtist: string | null;
+    albumArtistId?: string;
     genreId?: string;
     gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
     itemCount?: number;
@@ -26,6 +28,8 @@ interface AlbumListHeaderProps {
 }
 
 export const AlbumListHeader = ({
+    albumArtist,
+    albumArtistId,
     genreId,
     itemCount,
     gridRef,
@@ -58,6 +62,17 @@ export const AlbumListHeader = ({
         genreRef.current = genreId;
     }, [filter, genreId, refresh, tableRef]);
 
+    const tracksLink = albumArtistId
+        ? `${generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_SONGS, {
+              albumArtistId,
+          })}?${createSearchParams({
+              artistId: albumArtistId,
+              artistName: albumArtist || '',
+          })}`
+        : genreId
+        ? generatePath(AppRoute.LIBRARY_GENRES_SONGS, { genreId })
+        : null;
+
     return (
         <Stack
             ref={cq.ref}
@@ -81,15 +96,13 @@ export const AlbumListHeader = ({
                         >
                             {itemCount}
                         </LibraryHeaderBar.Badge>
-                        {genreId && (
+                        {tracksLink && (
                             <Button
                                 compact
                                 component={Link}
                                 radius={0}
                                 size="md"
-                                to={generatePath(AppRoute.LIBRARY_GENRES_SONGS, {
-                                    genreId,
-                                })}
+                                to={tracksLink}
                                 tooltip={{
                                     label: t('page.albumList.showTracks', {
                                         postProcess: 'sentenceCase',

diff --git a/src/renderer/features/albums/routes/album-list-route.tsx b/src/renderer/features/albums/routes/album-list-route.tsx
@@ -141,7 +141,7 @@ const AlbumListRoute = () => {
 
     const artist = searchParams.get('artistName');
     const title = artist
-        ? t('page.trackList.artistTracks', { artist })
+        ? t('page.albumList.artistAlbums', { artist })
         : genreId
         ? t('page.albumList.genreAlbums', { genre: titleCase(genreTitle) })
         : undefined;
@@ -150,6 +150,8 @@ const AlbumListRoute = () => {
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
                 <AlbumListHeader
+                    albumArtist={artist}
+                    albumArtistId={albumArtistId}
                     genreId={genreId}
                     gridRef={gridRef}
                     itemCount={itemCount}

diff --git a/src/renderer/features/songs/components/song-list-header.tsx b/src/renderer/features/songs/components/song-list-header.tsx
@@ -4,7 +4,7 @@ import { Flex, Group, Stack } from '@mantine/core';
 import debounce from 'lodash/debounce';
 import { useTranslation } from 'react-i18next';
 import { RiAlbumLine } from 'react-icons/ri';
-import { Link, generatePath } from 'react-router-dom';
+import { Link, createSearchParams, generatePath } from 'react-router-dom';
 import { LibraryItem } from '/@/renderer/api/types';
 import { Button, PageHeader, SearchInput } from '/@/renderer/components';
 import { FilterBar, LibraryHeaderBar } from '/@/renderer/features/shared';
@@ -17,6 +17,8 @@ import { AppRoute } from '/@/renderer/router/routes';
 import { useDisplayRefresh } from '/@/renderer/hooks/use-display-refresh';
 
 interface SongListHeaderProps {
+    albumArtist: string | null;
+    albumArtistId?: string;
     genreId?: string;
     gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
     itemCount?: number;
@@ -25,6 +27,8 @@ interface SongListHeaderProps {
 }
 
 export const SongListHeader = ({
+    albumArtist,
+    albumArtistId,
     genreId,
     gridRef,
     title,
@@ -64,6 +68,17 @@ export const SongListHeader = ({
 
     const playButtonBehavior = usePlayButtonBehavior();
 
+    const albumsLink = albumArtistId
+        ? `${generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_DISCOGRAPHY, {
+              albumArtistId,
+          })}?${createSearchParams({
+              artistId: albumArtistId,
+              artistName: albumArtist || '',
+          })}`
+        : genreId
+        ? generatePath(AppRoute.LIBRARY_GENRES_ALBUMS, { genreId })
+        : null;
+
     return (
         <Stack
             ref={cq.ref}
@@ -86,15 +101,13 @@ export const SongListHeader = ({
                         >
                             {itemCount}
                         </LibraryHeaderBar.Badge>
-                        {genreId && (
+                        {albumsLink && (
                             <Button
                                 compact
                                 component={Link}
                                 radius={0}
                                 size="md"
-                                to={generatePath(AppRoute.LIBRARY_GENRES_ALBUMS, {
-                                    genreId,
-                                })}
+                                to={albumsLink}
                                 tooltip={{
                                     label: t('page.trackList.showAlbums', {
                                         postProcess: 'sentenceCase',

diff --git a/src/renderer/features/songs/routes/song-list-route.tsx b/src/renderer/features/songs/routes/song-list-route.tsx
@@ -145,6 +145,8 @@ const TrackListRoute = () => {
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
                 <SongListHeader
+                    albumArtist={artist}
+                    albumArtistId={albumArtistId}
                     genreId={genreId}
                     gridRef={gridRef}
                     itemCount={itemCount}