Add genres, musicfolder

src/api/controller.ts

@@ -47,6 +47,8 @@ import {
   unstar as jfUnstar,
   batchStar as jfBatchStar,
   batchUnstar as jfBatchUnstar,
+  getGenres as jfGetGenres,
+  getMusicFolders as jfGetMusicFolders,
 } from './jellyfinApi';
 import { APIEndpoints, ServerType } from '../types';
 
@@ -75,11 +77,11 @@ const endpoints = [
   { id: 'createPlaylist', endpoint: { subsonic: createPlaylist, jellyfin: undefined } },
   { id: 'updatePlaylist', endpoint: { subsonic: updatePlaylist, jellyfin: undefined } },
   { id: 'clearPlaylist', endpoint: { subsonic: clearPlaylist, jellyfin: undefined } },
-  { id: 'getGenres', endpoint: { subsonic: getGenres, jellyfin: undefined } },
+  { id: 'getGenres', endpoint: { subsonic: getGenres, jellyfin: jfGetGenres } },
   { id: 'getSearch', endpoint: { subsonic: getSearch, jellyfin: undefined } },
   { id: 'scrobble', endpoint: { subsonic: scrobble, jellyfin: undefined } },
   { id: 'getIndexes', endpoint: { subsonic: getIndexes, jellyfin: undefined } },
-  { id: 'getMusicFolders', endpoint: { subsonic: getMusicFolders, jellyfin: undefined } },
+  { id: 'getMusicFolders', endpoint: { subsonic: getMusicFolders, jellyfin: jfGetMusicFolders } },
   { id: 'getMusicDirectory', endpoint: { subsonic: getMusicDirectory, jellyfin: undefined } },
   { id: 'getMusicDirectorySongs', endpoint: { subsonic: getMusicDirectorySongs, jellyfin: undefined } },
   { id: 'getDownloadUrl', endpoint: { subsonic: getDownloadUrl, jellyfin: jfGetDownloadUrl } },

src/api/jellyfinApi.ts

@@ -176,6 +176,28 @@ const normalizePlaylist = (item: any) => {
   };
 };
 
+const normalizeGenre = (item: any) => {
+  return {
+    id: item.Id,
+    title: item.Name,
+    songCount: undefined,
+    albumCount: undefined,
+    type: Item.Genre,
+    uniqueId: nanoid(),
+  };
+};
+
+const normalizeFolder = (item: any) => {
+  return {
+    id: item.Id,
+    title: item.Name,
+    isDir: true,
+    image: getCoverArtUrl(item, 350),
+    type: Item.Folder,
+    uniqueId: nanoid(),
+  };
+};
+
 export const getPlaylist = async (options: { id: string }) => {
   const { data } = await jellyfinApi.get(`/Items`, {
     params: {
@@ -251,8 +273,9 @@ export const getAlbums = async (options: {
         fields: 'Genres, DateCreated, ChildCount',
         includeItemTypes: 'MusicAlbum',
         recursive: true,
-        sortBy: sortType!.replacement,
-        sortOrder: sortType!.sortOrder,
+        sortBy: sortType ? sortType!.replacement : 'SortName',
+        sortOrder: sortType ? sortType!.sortOrder : 'Ascending',
+        genres: !sortType ? options.type : undefined,
       },
     });
 
@@ -413,3 +436,15 @@ export const batchUnstar = async (options: { ids: string[] }) => {
 
   return res;
 };
+
+export const getGenres = async (options: { musicFolderId: string }) => {
+  const { data } = await jellyfinApi.get(`/genres`, {
+    params: { parentId: options.musicFolderId },
+  });
+  return (data.Items || []).map((entry: any) => normalizeGenre(entry));
+};
+
+export const getMusicFolders = async () => {
+  const { data } = await jellyfinApi.get(`/users/${auth.username}/items`);
+  return (data.Items || []).map((entry: any) => normalizeFolder(entry));
+};

src/components/library/AlbumList.tsx

@@ -98,11 +98,15 @@ const AlbumList = () => {
     }
   );
   const { data: genres }: any = useQuery(['genreList'], async () => {
-    const res = await apiController({ serverType: config.serverType, endpoint: 'getGenres' });
+    const res = await apiController({
+      serverType: config.serverType,
+      endpoint: 'getGenres',
+      args: { musicFolderId: musicFolder },
+    });
     return res.map((genre: any) => {
       if (genre.albumCount !== 0) {
         return {
-          label: `${genre.title} (${genre.albumCount})`,
+          label: `${genre.title} ${genre.albumCount ? `(${genre.albumCount})` : ''}`,
           value: genre.title,
           role: 'Genre',
         };

src/components/library/GenreList.tsx

@@ -23,8 +23,13 @@ const GenreList = () => {
   const config = useAppSelector((state) => state.config);
   const album = useAppSelector((state) => state.album);
   const misc = useAppSelector((state) => state.misc);
+  const folder = useAppSelector((state) => state.folder);
   const { isLoading, isError, data: genres, error }: any = useQuery(['genrePageList'], async () => {
-    const res = await apiController({ serverType: config.serverType, endpoint: 'getGenres' });
+    const res = await apiController({
+      serverType: config.serverType,
+      endpoint: 'getGenres',
+      args: { musicFolderId: folder.musicFolder },
+    });
     return _.orderBy(res, 'songCount', 'desc');
   });
   const filteredData = useSearchQuery(misc.searchQuery, genres, ['title']);

src/components/player/NowPlayingMiniView.tsx

@@ -79,7 +79,11 @@ const NowPlayingMiniView = () => {
   const [musicFolder, setMusicFolder] = useState(folder.musicFolder);
 
   const { isLoading: isLoadingGenres, data: genres }: any = useQuery(['genreList'], async () => {
-    const res = await apiController({ serverType: config.serverType, endpoint: 'getGenres' });
+    const res = await apiController({
+      serverType: config.serverType,
+      endpoint: 'getGenres',
+      args: { musicFolderId: musicFolder },
+    });
     const genresOrderedBySongCount = _.orderBy(res, 'songCount', 'desc');
     return genresOrderedBySongCount.map((genre: any) => {
       return {

src/components/player/NowPlayingView.tsx

@@ -96,7 +96,11 @@ const NowPlayingView = () => {
   ]);
 
   const { data: genres }: any = useQuery(['genreList'], async () => {
-    const res = await apiController({ serverType: config.serverType, endpoint: 'getGenres' });
+    const res = await apiController({
+      serverType: config.serverType,
+      endpoint: 'getGenres',
+      args: { musicFolderId: musicFolder },
+    });
     const genresOrderedBySongCount = _.orderBy(res, 'songCount', 'desc');
     return genresOrderedBySongCount.map((genre: any) => {
       return {

src/components/settings/ConfigPanels/ServerConfig.tsx

@@ -32,7 +32,7 @@ const ServerConfig = () => {
           data={isLoading ? [] : musicFolders}
           defaultValue={folder.musicFolder}
           valueKey="id"
-          labelKey="name"
+          labelKey="title"
           onChange={(e: any) => {
             settings.setSync('musicFolder.id', e);
             dispatch(setMusicFolder(e));