diff --git a/src/components/common/DefaultIconText.tsx b/src/components/common/DefaultIconText.tsx index c6ea81b18e..7624a0fd13 100644 --- a/src/components/common/DefaultIconText.tsx +++ b/src/components/common/DefaultIconText.tsx @@ -1,7 +1,7 @@ import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; import React, { type FC } from 'react'; import Icon from '@mui/material/Icon'; -import imageHelper from 'utils/image'; +import { getItemTypeIcon, getLibraryIcon } from 'utils/image'; import DefaultName from './DefaultName'; import type { ItemDto } from 'types/base/models/item-dto'; @@ -14,38 +14,24 @@ const DefaultIconText: FC = ({ item, defaultCardImageIcon }) => { - if (item.CollectionType) { - return ( - - ); + let icon; + + if (item.Type === BaseItemKind.CollectionFolder || item.CollectionType) { + icon = getLibraryIcon(item.CollectionType); } - if (item.Type && !(item.Type === BaseItemKind.TvChannel || item.Type === BaseItemKind.Studio )) { - return ( - - ); + if (!icon) { + icon = getItemTypeIcon(item.Type, defaultCardImageIcon); } - if (defaultCardImageIcon) { + if (icon) { return ( ); } diff --git a/src/utils/image.test.ts b/src/utils/image.test.ts new file mode 100644 index 0000000000..d8c54a0008 --- /dev/null +++ b/src/utils/image.test.ts @@ -0,0 +1,106 @@ +import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind'; +import { describe, expect, it } from 'vitest'; + +import { getItemTypeIcon, getLibraryIcon } from './image'; +import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type'; + +const ITEM_ICON_MAP: Record = { + AggregateFolder: undefined, + Audio: 'audiotrack', + AudioBook: undefined, + BasePluginFolder: undefined, + Book: 'book', + BoxSet: 'video_library', + Channel: undefined, + ChannelFolderItem: undefined, + CollectionFolder: undefined, + Episode: 'tv', + Folder: 'folder', + Genre: undefined, + LiveTvChannel: undefined, + LiveTvProgram: undefined, + ManualPlaylistsFolder: undefined, + Movie: 'movie', + MusicAlbum: 'album', + MusicArtist: 'person', + MusicGenre: undefined, + MusicVideo: undefined, + Person: 'person', + Photo: 'photo', + PhotoAlbum: 'photo_album', + Playlist: 'queue', + PlaylistsFolder: undefined, + Program: 'live_tv', + Recording: undefined, + Season: undefined, + Series: 'tv', + Studio: undefined, + Trailer: undefined, + TvChannel: undefined, + TvProgram: undefined, + UserRootFolder: undefined, + UserView: undefined, + Video: undefined, + Year: undefined +}; + +const LIBRARY_ICON_MAP: Record = { + Books: 'book', + Boxsets: 'video_library', + Folders: 'folder', + Homevideos: 'photo', + Livetv: 'live_tv', + Movies: 'movie', + Music: 'music_note', + Musicvideos: 'music_video', + Photos: 'photo', + Playlists: 'queue', + Trailers: 'theaters', + Tvshows: 'tv', + Unknown: 'folder' +}; + +describe('getItemTypeIcon()', () => { + it('Should return the correct icon for item type', () => { + Object.entries(BaseItemKind).forEach(([key, value]) => { + expect(Object.prototype.hasOwnProperty.call(ITEM_ICON_MAP, key)).toBe(true); + expect(`${key}=${getItemTypeIcon(value)}`).toBe(`${key}=${ITEM_ICON_MAP[key]}`); + }); + }); + + it('Should return undefined for undefined type', () => { + expect(getItemTypeIcon(undefined, 'default')) + .toBeUndefined(); + }); + + it('Should return the default icon for unknown type if provided', () => { + expect(getItemTypeIcon('foobar', 'default')) + .toBe('default'); + }); + + it('Should return undefined for unknown type', () => { + expect(getItemTypeIcon('foobar')) + .toBeUndefined(); + }); +}); + +describe('getLibraryIcon()', () => { + it('Should return the correct icon for collection type', () => { + Object.entries(CollectionType).forEach(([key, value]) => { + expect(Object.prototype.hasOwnProperty.call(LIBRARY_ICON_MAP, key)).toBe(true); + expect(`${key}=${getLibraryIcon(value)}`).toBe(`${key}=${LIBRARY_ICON_MAP[key]}`); + }); + }); + + it('Should return the correct icon for nonstandard types', () => { + expect(getLibraryIcon(undefined)) + .toBe('quiz'); + expect(getLibraryIcon('channels')) + .toBe('videocam'); + }); + + it('Should return the default icon for unknown types', () => { + expect(getLibraryIcon('foobar')) + .toBe('folder'); + }); +}); diff --git a/src/utils/image.ts b/src/utils/image.ts index bcd3d667ff..d170122b74 100644 --- a/src/utils/image.ts +++ b/src/utils/image.ts @@ -108,7 +108,7 @@ export function getLibraryIcon(library: CollectionType | string | null | undefin } } -export function getItemTypeIcon(itemType: BaseItemKind | string, defaultIcon?: string) { +export function getItemTypeIcon(itemType: BaseItemKind | string | undefined, defaultIcon?: string) { switch (itemType) { case BaseItemKind.MusicAlbum: return 'album'; @@ -136,8 +136,10 @@ export function getItemTypeIcon(itemType: BaseItemKind | string, defaultIcon?: s return 'photo'; case BaseItemKind.PhotoAlbum: return 'photo_album'; + case undefined: + return; default: - return defaultIcon || 'folder'; + return defaultIcon; } }