Fixed Jellyfin SDK type errors

src/components/cardbuilder/Card/Card.tsx

@@ -7,11 +7,11 @@ import type { CardOptions } from 'types/cardOptions';
 import type { ItemDto } from 'types/base/models/item-dto';
 
 interface CardProps {
-    item?: ItemDto;
+    item: ItemDto;
     cardOptions: CardOptions;
 }
 
-const Card: FC<CardProps> = ({ item = {}, cardOptions }) => {
+const Card: FC<CardProps> = ({ item, cardOptions }) => {
     const { getCardWrapperProps, getCardBoxProps } = useCard({ item, cardOptions } );
     const cardWrapperProps = getCardWrapperProps();
     const cardBoxProps = getCardBoxProps();

src/components/cardbuilder/Card/cardHelper.ts

@@ -217,6 +217,7 @@ function getParentTitle(
             .map(artist => {
                 const artistItem: ItemDto = {
                     ...artist,
+                    Key: artist.Id ?? "",
                     Type: BaseItemKind.MusicArtist,
                     IsFolder: true
                 };
@@ -511,6 +512,7 @@ function getChannelName(item: ItemDto) {
     if (item.ChannelId) {
         return getTextActionButton(
             {
+                Key: item.ChannelId,
                 Id: item.ChannelId,
                 ServerId: item.ServerId,
                 Name: item.ChannelName,
@@ -598,6 +600,7 @@ function getMediaTitle(cardOptions: CardOptions, item: ItemDto): TextLine {
             });
 
     return getTextActionButton({
+        Key: item.Id ?? "",
         Id: item.Id,
         ServerId: item.ServerId,
         Name: name,
@@ -620,6 +623,7 @@ function getParentTitleOrTitle(
     ) {
         if (item.SeriesId) {
             return getTextActionButton({
+                Key: item.SeriesId,
                 Id: item.SeriesId,
                 ServerId: item.ServerId,
                 Name: item.SeriesName,

src/components/cardbuilder/Card/useCard.ts

@@ -39,7 +39,7 @@ function useCard({ item, cardOptions }: UseCardProps) {
         shape
     });
     const imgUrl = imgInfo.imgUrl;
-    const blurhash = imgInfo.blurhash;
+    const blurhash = imgInfo.blurhash ?? undefined;
     const forceName = imgInfo.forceName;
     const coveredImage = cardOptions.coverImage ?? imgInfo.coverImage;
     const overlayText = cardOptions.overlayText;

src/components/cardbuilder/Card/useCardImageUrl.ts

@@ -111,7 +111,7 @@ function shouldShowPreferBanner(
 }
 
 function shouldShowPreferDisc(
-    imageTagsDisc: string | undefined,
+    imageTagsDisc: string | null | undefined,
     cardOptions: CardOptions
 ): boolean {
     return cardOptions.preferDisc === true && Boolean(imageTagsDisc);

src/components/indicators/useIndicator.tsx

@@ -154,8 +154,8 @@ const useIndicator = (item: ItemDto) => {
 
     const getPlayedIndicator = () => {
         if (enablePlayedIndicator(item)) {
-            const userData = item.UserData || {};
-            if (userData.UnplayedItemCount) {
+            const userData = item.UserData;
+            if (userData?.UnplayedItemCount) {
                 return (
                     <Box className='countIndicator indicator unplayedItemCount'>
                         {formatCountIndicator(userData.UnplayedItemCount)}
@@ -164,9 +164,9 @@ const useIndicator = (item: ItemDto) => {
             }
 
             if (
-                (userData.PlayedPercentage
-                    && userData.PlayedPercentage >= 100)
-                || userData.Played
+                (userData?.PlayedPercentage
+                    && userData?.PlayedPercentage >= 100)
+                || userData?.Played
             ) {
                 return (
                     <Box className='playedIndicator indicator'>

src/components/listview/List/ListImageContainer.tsx

@@ -28,7 +28,7 @@ interface ListImageContainerProps {
 }
 
 const ListImageContainer: FC<ListImageContainerProps> = ({
-    item = {},
+    item,
     listOptions,
     action,
     isLargeStyle,
@@ -73,7 +73,7 @@ const ListImageContainer: FC<ListImageContainerProps> = ({
             className={imageClass}
         >
 
-            <Media item={item} imgUrl={imgUrl} blurhash={blurhash} defaultCardImageIcon={defaultCardImageIcon} />
+            <Media item={item} imgUrl={imgUrl} blurhash={blurhash ?? undefined} defaultCardImageIcon={defaultCardImageIcon} />
 
             {disableIndicators !== true && mediaSourceIndicator}
 

src/components/listview/List/ListItemBody.tsx

@@ -22,7 +22,7 @@ interface ListItemBodyProps {
 }
 
 const ListItemBody: FC<ListItemBodyProps> = ({
-    item = {},
+    item,
     listOptions = {},
     action,
     isLargeStyle,

src/components/playlisteditor/playlisteditor.ts

@@ -95,7 +95,7 @@ function createPlaylist(dlg: DialogElement) {
     return getPlaylistsApi(api)
         .createPlaylist({
             createPlaylistDto: {
-                Name: name,
+                Name: name ?? "",
                 IsPublic: dlg.querySelector<HTMLInputElement>('#chkPlaylistPublic')?.checked,
                 Ids: itemIds?.split(','),
                 UserId: apiClient.getCurrentUserId()