Add top songs for jellyfin

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - More consistent queue persistence behavior
   - `Retain window size` setting to persist window size
   - Default window width/height options
+- Added Top Songs list on the artist page for Jellyfin
 
 ### Fixed
 

src/api/controller.ts

@@ -66,6 +66,7 @@ import {
   getSongs as jfGetSongs,
   getSimilarSongs as jfGetSimilarSongs,
   getSongsByGenre as jfGetSongsByGenre,
+  getTopSongs as jfGetTopSongs,
 } from './jellyfinApi';
 import { APIEndpoints, ServerType } from '../types';
 
@@ -97,7 +98,7 @@ const endpoints = [
   { id: 'getMusicDirectorySongs', endpoint: { subsonic: getMusicDirectorySongs, jellyfin: jfGetMusicDirectorySongs } },
   { id: 'getDownloadUrl', endpoint: { subsonic: getDownloadUrl, jellyfin: jfGetDownloadUrl } },
   { id: 'getSongs', endpoint: { subsonic: undefined, jellyfin: jfGetSongs } },
-  { id: 'getTopSongs', endpoint: { subsonic: getTopSongs, jellyfin: undefined } },
+  { id: 'getTopSongs', endpoint: { subsonic: getTopSongs, jellyfin: jfGetTopSongs  } },
   { id: 'getSongsByGenre', endpoint: { subsonic: getSongsByGenre, jellyfin: jfGetSongsByGenre } },
   { id: 'getLyrics', endpoint: { subsonic: getLyrics, jellyfin: undefined } },
 

src/api/jellyfinApi.ts

@@ -505,6 +505,30 @@ export const getSongs = async (options: {
   );
 };
 
+export const getTopSongs = async (options: {
+  artist: string;
+  count: number;
+  musicFolderId?: string;
+}) => {
+  const { data } = await jellyfinApi.get(`/users/${auth.username}/items`, {
+    params: {
+      artistIds: options.artist,
+      fields: 'Genres, DateCreated, MediaSources, ParentId',
+      includeItemTypes: 'Audio',
+      limit: options.count,
+      startIndex: 0,
+      parentId: options.musicFolderId,
+      recursive: true,
+      sortBy: 'CommunityRating',
+      sortOrder: 'Descending',
+      imageTypeLimit: 1,
+      enableImageTypes: 'Primary',
+    },
+  });
+
+  return (data.Items || []).map((entry: any) => normalizeSong(entry));
+};
+
 export const getArtist = async (options: { id: string; musicFolderId?: string }) => {
   const { data } = await jellyfinApi.get(`/users/${auth.username}/items/${options.id}`, {
     params: { fields: 'Genres' },

src/components/library/ArtistView.tsx

@@ -91,9 +91,12 @@ const ArtistView = ({ ...rest }: any) => {
       apiController({
         serverType: config.serverType,
         endpoint: 'getTopSongs',
-        args: { artist: data?.title, count: 100 },
+        args: {
+          artist: config.serverType === Server.Jellyfin ? id : data?.title,
+          count: 100,
+        },
       }),
-    { enabled: Boolean(data?.title) }
+    { enabled: Boolean(data?.title || data?.id) }
   );
 
   const { data: allSongs } = useQuery(
@@ -799,7 +802,6 @@ const ArtistView = ({ ...rest }: any) => {
                   )}
                 </StyledPanel>
               )}
-
               {albumsByYearDesc.length > 0 && (
                 <StyledPanel>
                   <ScrollingMenu

src/components/shared/styled.ts

@@ -537,7 +537,7 @@ export const StyledPanel = styled(Panel)<{ $maxWidth?: string }>`
   color: ${(props) => props.theme.colors.layout.page.color};
   border-radius: ${(props) => props.theme.other.panel.borderRadius};
   max-width: ${(props) => props.$maxWidth};
-  /* margin-bottom: 10px; */
+  margin-bottom: 15px;
 
   .rs-panel-heading {
     user-select: none;