mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Normalize item icons

Browse source
This commit is contained in:
Bill Thornton 2024-09-17 16:30:08 -04:00
parent 3e494a14d9
commit 414ae94312
2 changed files with 36 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/components/cardbuilder/cardBuilder.js
View file

@ -4,6 +4,7 @@
* @module components/cardBuilder/cardBuilder
*/
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
import { PersonKind } from '@jellyfin/sdk/lib/generated-client/models/person-kind';
import escapeHtml from 'escape-html';
@ -12,7 +13,7 @@ import datetime from 'scripts/datetime';
import dom from 'scripts/dom';
import globalize from 'lib/globalize';
import { getBackdropShape, getPortraitShape, getSquareShape } from 'utils/card';
import imageHelper from 'utils/image';
import { getItemTypeIcon, getLibraryIcon } from 'utils/image';
import focusManager from '../focusManager';
import imageLoader from '../images/imageLoader';
@ -1053,7 +1054,7 @@ function buildCard(index, item, apiClient, options) {
indicatorsHtml += indicators.getPlayedIndicatorHtml(item);
}
if (item.Type === 'CollectionFolder' || item.CollectionType) {
if (item.Type === BaseItemKind.CollectionFolder || item.CollectionType) {
const refreshClass = item.RefreshProgress ? '' : ' class="hide"';
indicatorsHtml += '<div is="emby-itemrefreshindicator"' + refreshClass + ' data-progress="' + (item.RefreshProgress || 0) + '" data-status="' + item.RefreshStatus + '"></div>';
importRefreshIndicator();
@ -1180,41 +1181,18 @@ function getHoverMenuHtml(item, action) {
* @returns {string} HTML markup of the card overlay.
*/
export function getDefaultText(item, options) {
if (item.CollectionType) {
return '<span class="cardImageIcon material-icons ' + imageHelper.getLibraryIcon(item.CollectionType) + '" aria-hidden="true"></span>';
let icon;
if (item.Type === BaseItemKind.CollectionFolder || item.CollectionType) {
icon = getLibraryIcon(item.CollectionType);
}
switch (item.Type) {
case 'MusicAlbum':
return '<span class="cardImageIcon material-icons album" aria-hidden="true"></span>';
case 'MusicArtist':
case 'Person':
return '<span class="cardImageIcon material-icons person" aria-hidden="true"></span>';
case 'Audio':
return '<span class="cardImageIcon material-icons audiotrack" aria-hidden="true"></span>';
case 'Movie':
return '<span class="cardImageIcon material-icons movie" aria-hidden="true"></span>';
case 'Episode':
case 'Series':
return '<span class="cardImageIcon material-icons tv" aria-hidden="true"></span>';
case 'Program':
return '<span class="cardImageIcon material-icons live_tv" aria-hidden="true"></span>';
case 'Book':
return '<span class="cardImageIcon material-icons book" aria-hidden="true"></span>';
case 'Folder':
return '<span class="cardImageIcon material-icons folder" aria-hidden="true"></span>';
case 'BoxSet':
return '<span class="cardImageIcon material-icons collections" aria-hidden="true"></span>';
case 'Playlist':
return '<span class="cardImageIcon material-icons view_list" aria-hidden="true"></span>';
case 'Photo':
return '<span class="cardImageIcon material-icons photo" aria-hidden="true"></span>';
case 'PhotoAlbum':
return '<span class="cardImageIcon material-icons photo_album" aria-hidden="true"></span>';
if (!icon) {
icon = getItemTypeIcon(item.Type, options?.defaultCardImageIcon);
}
if (options?.defaultCardImageIcon) {
return '<span class="cardImageIcon material-icons ' + options.defaultCardImageIcon + '" aria-hidden="true"></span>';
if (icon) {
return `<span class="cardImageIcon material-icons ${icon}" aria-hidden="true"></span>`;
}
const defaultName = isUsingLiveTvNaming(item.Type) ? item.Name : itemHelper.getDisplayName(item);

46
src/utils/image.ts
View file

@ -1,3 +1,4 @@
import { CollectionType } from '@jellyfin/sdk/lib/generated-client/models/collection-type';
import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
import type { DeviceInfo } from '@jellyfin/sdk/lib/generated-client/models/device-info';
import type { SessionInfo } from '@jellyfin/sdk/lib/generated-client/models/session-info';
@ -75,36 +76,39 @@ export function getDeviceIcon(info: DeviceInfo | SessionInfo) {
}
}
export function getLibraryIcon(library: string | null | undefined) {
export function getLibraryIcon(library: CollectionType | string | null | undefined) {
switch (library) {
case 'movies':
return 'video_library';
case 'music':
return 'library_music';
case 'photos':
return 'photo_library';
case 'livetv':
case CollectionType.Movies:
return 'movie';
case CollectionType.Music:
return 'music_note';
case CollectionType.Homevideos:
case CollectionType.Photos:
return 'photo';
case CollectionType.Livetv:
return 'live_tv';
case 'tvshows':
case CollectionType.Tvshows:
return 'tv';
case 'trailers':
case CollectionType.Trailers:
return 'local_movies';
case 'homevideos':
return 'photo_library';
case 'musicvideos':
case CollectionType.Musicvideos:
return 'music_video';
case 'books':
return 'library_books';
case CollectionType.Books:
return 'book';
case CollectionType.Boxsets:
return 'video_library';
case CollectionType.Playlists:
return 'library_add';
case 'channels':
return 'videocam';
case 'playlists':
return 'view_list';
case undefined:
return 'quiz';
default:
return 'folder';
}
}
export function getItemTypeIcon(itemType: BaseItemKind | string) {
export function getItemTypeIcon(itemType: BaseItemKind | string, defaultIcon?: string) {
switch (itemType) {
case BaseItemKind.MusicAlbum:
return 'album';
@ -125,15 +129,15 @@ export function getItemTypeIcon(itemType: BaseItemKind | string) {
case BaseItemKind.Folder:
return 'folder';
case BaseItemKind.BoxSet:
return 'collections';
return 'video_library';
case BaseItemKind.Playlist:
return 'view_list';
return 'library_add';
case BaseItemKind.Photo:
return 'photo';
case BaseItemKind.PhotoAlbum:
return 'photo_album';
default:
return 'folder';
return defaultIcon || 'folder';
}
}