Add update playlist for jellyfin

src/renderer/api/controller.ts

@@ -96,7 +96,7 @@ const endpoints: ApiController = {
     getPlaylistSongList: jellyfinApi.getPlaylistSongList,
     getSongDetail: undefined,
     getSongList: jellyfinApi.getSongList,
-    updatePlaylist: undefined,
+    updatePlaylist: jellyfinApi.updatePlaylist,
     updateRating: undefined,
   },
   navidrome: {

src/renderer/api/jellyfin.api.ts

@@ -61,6 +61,8 @@ import {
   artistListSortMap,
   sortOrderMap,
   albumArtistListSortMap,
+  UpdatePlaylistArgs,
+  UpdatePlaylistResponse,
 } from '/@/renderer/api/types';
 import { useAuthStore } from '/@/renderer/store';
 import { ServerListItem, ServerType } from '/@/renderer/types';
@@ -312,9 +314,6 @@ const getSongList = async (args: SongListArgs): Promise<JFSongList> => {
     }
   }
 
-  console.log('yearsGroup :>> ', yearsGroup);
-  console.log('albumIds', query.albumIds);
-  console.log('artistIds :>> ', query.artistIds);
   const yearsFilter = yearsGroup.length ? getCommaDelimitedString(yearsGroup) : undefined;
   const albumIdsFilter = query.albumIds ? getCommaDelimitedString(query.albumIds) : undefined;
   const artistIdsFilter = query.artistIds ? getCommaDelimitedString(query.artistIds) : undefined;
@@ -457,6 +456,33 @@ const createPlaylist = async (args: CreatePlaylistArgs): Promise<CreatePlaylistR
   };
 };
 
+const updatePlaylist = async (args: UpdatePlaylistArgs): Promise<UpdatePlaylistResponse> => {
+  const { query, body, server } = args;
+
+  const json = {
+    Genres: body.genres?.map((item) => ({ Id: item.id, Name: item.name })) || [],
+    MediaType: 'Audio',
+    Name: body.name,
+    Overview: body.comment || '',
+    PremiereDate: null,
+    ProviderIds: {},
+    Tags: [],
+    UserId: server?.userId, // Required
+  };
+
+  await api
+    .post(`items/${query.id}`, {
+      headers: { 'X-MediaBrowser-Token': server?.credential },
+      json,
+      prefixUrl: server?.url,
+    })
+    .json<null>();
+
+  return {
+    id: query.id,
+  };
+};
+
 const deletePlaylist = async (args: DeletePlaylistArgs): Promise<null> => {
   const { query, server } = args;
 
@@ -728,10 +754,11 @@ const normalizePlaylist = (
 
   return {
     description: item.Overview || null,
-    duration: item.RunTimeTicks / 10000000,
+    duration: item.RunTimeTicks / 10000,
+    genres: item.GenreItems?.map((entry) => ({ id: entry.Id, name: entry.Name })),
     id: item.Id,
     imagePlaceholderUrl,
-    imageUrl,
+    imageUrl: imageUrl || null,
     name: item.Name,
     public: null,
     rules: null,
@@ -809,6 +836,7 @@ export const jellyfinApi = {
   getPlaylistList,
   getPlaylistSongList,
   getSongList,
+  updatePlaylist,
 };
 
 export const jfNormalize = {

src/renderer/api/navidrome.api.ts

@@ -578,6 +578,7 @@ const normalizePlaylist = (
   return {
     description: item.comment,
     duration: item.duration * 1000,
+    genres: [],
     id: item.id,
     imagePlaceholderUrl,
     imageUrl,

src/renderer/api/types.ts

@@ -237,6 +237,7 @@ export type MusicFolder = {
 export type Playlist = {
   description: string | null;
   duration: number | null;
+  genres: Genre[];
   id: string;
   imagePlaceholderUrl: string | null;
   imageUrl: string | null;
@@ -758,6 +759,7 @@ export type UpdatePlaylistQuery = {
 
 export type UpdatePlaylistBody = {
   comment?: string;
+  genres?: Genre[];
   name: string;
   public?: boolean;
   rules?: Record<string, any>;

src/renderer/features/playlists/components/playlist-detail-header.tsx

@@ -1,10 +1,10 @@
 import { Group, Stack } from '@mantine/core';
 import { closeAllModals, openModal } from '@mantine/modals';
-import { forwardRef, Ref } from 'react';
+import { forwardRef, Fragment, Ref } from 'react';
 import { RiMoreFill } from 'react-icons/ri';
 import { generatePath, useNavigate, useParams } from 'react-router';
 import { Link } from 'react-router-dom';
-import { DropdownMenu, Button, ConfirmModal, toast } from '/@/renderer/components';
+import { DropdownMenu, Button, ConfirmModal, toast, Text } from '/@/renderer/components';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { UpdatePlaylistForm } from './update-playlist-form';
 import { useDeletePlaylist } from '/@/renderer/features/playlists/mutations/delete-playlist-mutation';
@@ -13,6 +13,7 @@ import { LibraryHeader, PlayButton, PLAY_TYPES } from '/@/renderer/features/shar
 import { AppRoute } from '/@/renderer/router/routes';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { LibraryItem, Play } from '/@/renderer/types';
+import { formatDurationString } from '/@/renderer/utils';
 
 interface PlaylistDetailHeaderProps {
   background: string;
@@ -47,6 +48,7 @@ export const PlaylistDetailHeader = forwardRef(
           <UpdatePlaylistForm
             body={{
               comment: detailQuery?.data?.description || undefined,
+              genres: detailQuery?.data?.genres,
               name: detailQuery?.data?.name,
               public: detailQuery?.data?.public || false,
               rules: detailQuery?.data?.rules || undefined,
@@ -97,6 +99,19 @@ export const PlaylistDetailHeader = forwardRef(
       });
     };
 
+    const metadataItems = [
+      {
+        id: 'songCount',
+        secondary: false,
+        value: `${detailQuery?.data?.songCount || 0} songs`,
+      },
+      {
+        id: 'duration',
+        secondary: true,
+        value: detailQuery?.data?.duration && formatDurationString(detailQuery.data.duration),
+      },
+    ];
+
     return (
       <Stack>
         <LibraryHeader
@@ -107,16 +122,17 @@ export const PlaylistDetailHeader = forwardRef(
           item={{ route: AppRoute.PLAYLISTS, type: LibraryItem.PLAYLIST }}
           title={detailQuery?.data?.name || ''}
         >
+          <Stack mt="1rem">
             <Group>
-            <Button
+              {metadataItems.map((item, index) => (
-              compact
+                <Fragment key={`item-${item.id}-${index}`}>
-              component={Link}
+                  {index > 0 && <Text $noSelect>•</Text>}
-              to={generatePath(AppRoute.PLAYLISTS_DETAIL_SONGS, { playlistId })}
+                  <Text $secondary={item.secondary}>{item.value}</Text>
-              variant="subtle"
+                </Fragment>
-            >
+              ))}
-              View full playlist
-            </Button>
             </Group>
+            <Text lineClamp={3}>{detailQuery?.data?.description}</Text>
+          </Stack>
         </LibraryHeader>
         <Group
           maw="1920px"
@@ -150,6 +166,15 @@ export const PlaylistDetailHeader = forwardRef(
                 <DropdownMenu.Item onClick={openDeletePlaylist}>Delete playlist</DropdownMenu.Item>
               </DropdownMenu.Dropdown>
             </DropdownMenu>
+
+            <Button
+              compact
+              component={Link}
+              to={generatePath(AppRoute.PLAYLISTS_DETAIL_SONGS, { playlistId })}
+              variant="subtle"
+            >
+              View full playlist
+            </Button>
           </Group>
         </Group>
       </Stack>