Add initial playlist detail page

src/renderer/api/controller.ts

@@ -213,6 +213,16 @@ const updatePlaylist = async (args: UpdatePlaylistArgs) => {
   return (apiController('updatePlaylist') as ControllerEndpoint['updatePlaylist'])?.(args);
 };
 
+const getPlaylistDetail = async (args: PlaylistDetailArgs) => {
+  return (apiController('getPlaylistDetail') as ControllerEndpoint['getPlaylistDetail'])?.(args);
+};
+
+const getPlaylistSongList = async (args: PlaylistSongListArgs) => {
+  return (apiController('getPlaylistSongList') as ControllerEndpoint['getPlaylistSongList'])?.(
+    args,
+  );
+};
+
 export const controller = {
   createPlaylist,
   getAlbumArtistList,
@@ -221,7 +231,9 @@ export const controller = {
   getArtistList,
   getGenreList,
   getMusicFolderList,
+  getPlaylistDetail,
   getPlaylistList,
+  getPlaylistSongList,
   getSongList,
   updatePlaylist,
 };

src/renderer/api/navidrome.api.ts

@@ -313,19 +313,16 @@ const createPlaylist = async (args: CreatePlaylistArgs): Promise<CreatePlaylistR
 };
 
 const updatePlaylist = async (args: UpdatePlaylistArgs): Promise<UpdatePlaylistResponse> => {
-  const { query, server, signal } = args;
-
-  const previous = query.previous as NDPlaylist;
+  const { query, body, server, signal } = args;
 
   const json: NDUpdatePlaylistParams = {
-    ...previous,
-    comment: query.comment || '',
-    name: query.name,
-    public: query.public || false,
+    comment: body.comment || '',
+    name: body.name,
+    public: body.public || false,
   };
 
   const data = await api
-    .post(`api/playlist/${previous.id}`, {
+    .post(`api/playlist/${query.id}`, {
       headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
       json,
       prefixUrl: server?.url,
@@ -335,7 +332,6 @@ const updatePlaylist = async (args: UpdatePlaylistArgs): Promise<UpdatePlaylistR
 
   return {
     id: data.id,
-    name: query.name,
   };
 };
 
@@ -406,19 +402,20 @@ const getPlaylistSongList = async (args: PlaylistSongListArgs): Promise<NDSongLi
     playlist_id: query.id,
   };
 
-  const data = await api
-    .get(`api/playlist/${query.id}/tracks`, {
-      headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
-      prefixUrl: server?.url,
-      searchParams: parseSearchParams(searchParams),
-      signal,
-    })
-    .json<NDSongListResponse>();
+  const res = await api.get(`api/playlist/${query.id}/tracks`, {
+    headers: { 'x-nd-authorization': `Bearer ${server?.ndCredential}` },
+    prefixUrl: server?.url,
+    searchParams: parseSearchParams(searchParams),
+    signal,
+  });
+
+  const data = await res.json<NDSongListResponse>();
+  const itemCount = res.headers.get('x-total-count');
 
   return {
     items: data,
     startIndex: query?.startIndex || 0,
-    totalRecordCount: data.length,
+    totalRecordCount: Number(itemCount),
   };
 };
 

src/renderer/api/navidrome.types.ts

@@ -269,7 +269,7 @@ export type NDCreatePlaylistResponse = {
 
 export type NDCreatePlaylist = NDCreatePlaylistResponse;
 
-export type NDUpdatePlaylistParams = NDPlaylist;
+export type NDUpdatePlaylistParams = Partial<NDPlaylist>;
 
 export type NDUpdatePlaylistResponse = NDPlaylist;
 

src/renderer/api/normalize.ts

@@ -23,6 +23,7 @@ import type {
   RawAlbumListResponse,
   RawGenreListResponse,
   RawMusicFolderListResponse,
+  RawPlaylistDetailResponse,
   RawPlaylistListResponse,
   RawSongListResponse,
 } from '/@/renderer/api/types';
@@ -191,12 +192,32 @@ const playlistList = (data: RawPlaylistListResponse | undefined, server: ServerL
   };
 };
 
+const playlistDetail = (
+  data: RawPlaylistDetailResponse | undefined,
+  server: ServerListItem | null,
+) => {
+  let playlist;
+  switch (server?.type) {
+    case 'jellyfin':
+      playlist = jfNormalize.playlist(data as JFPlaylist);
+      break;
+    case 'navidrome':
+      playlist = ndNormalize.playlist(data as NDPlaylist);
+      break;
+    case 'subsonic':
+      break;
+  }
+
+  return playlist;
+};
+
 export const normalize = {
   albumArtistList,
   albumDetail,
   albumList,
   genreList,
   musicFolderList,
+  playlistDetail,
   playlistList,
   songList,
 };

src/renderer/api/query-keys.ts

@@ -6,6 +6,7 @@ import type {
   ArtistListQuery,
   PlaylistListQuery,
   PlaylistDetailQuery,
+  PlaylistSongListQuery,
 } from './types';
 
 export const queryKeys = {
@@ -48,8 +49,8 @@ export const queryKeys = {
   },
   playlists: {
     detail: (serverId: string, id?: string, query?: PlaylistDetailQuery) => {
-      if (query) return [serverId, 'playlists', 'detail', id, query] as const;
-      if (id) return [serverId, 'playlists', 'detail', id] as const;
+      if (query) return [serverId, 'playlists', id, 'detail', query] as const;
+      if (id) return [serverId, 'playlists', id, 'detail'] as const;
       return [serverId, 'playlists', 'detail'] as const;
     },
     list: (serverId: string, query?: PlaylistListQuery) => {
@@ -57,6 +58,11 @@ export const queryKeys = {
       return [serverId, 'playlists', 'list'] as const;
     },
     root: (serverId: string) => [serverId, 'playlists'] as const,
+    songList: (serverId: string, id: string, query?: PlaylistSongListQuery) => {
+      if (query) return [serverId, 'playlists', id, 'songList', query] as const;
+      if (id) return [serverId, 'playlists', id, 'songList'] as const;
+      return [serverId, 'playlists', 'songList'] as const;
+    },
   },
   server: {
     root: (serverId: string) => [serverId] as const,

src/renderer/api/types.ts

@@ -742,17 +742,23 @@ export type CreatePlaylistArgs = { query: CreatePlaylistQuery } & BaseEndpointAr
 // Update Playlist
 export type RawUpdatePlaylistResponse = UpdatePlaylistResponse | undefined;
 
-export type UpdatePlaylistResponse = { id: string; name: string };
+export type UpdatePlaylistResponse = { id: string };
 
 export type UpdatePlaylistQuery = {
+  id: string;
+};
+
+export type UpdatePlaylistBody = {
   comment?: string;
   name: string;
-  previous: RawPlaylistDetailResponse;
   public?: boolean;
   rules?: Record<string, any>;
 };
 
-export type UpdatePlaylistArgs = { query: UpdatePlaylistQuery } & BaseEndpointArgs;
+export type UpdatePlaylistArgs = {
+  body: UpdatePlaylistBody;
+  query: UpdatePlaylistQuery;
+} & BaseEndpointArgs;
 
 // Delete Playlist
 export type RawDeletePlaylistResponse = NDDeletePlaylist | undefined;