feature: custom thumbnail

README.md

@@ -134,6 +134,8 @@ artworkHostname: http://192.168.0.59:8123 #default is ''. Usually not needed, bu
 # media browser specific
 mediaBrowserItemsPerRow: 4 # default is 1. Use this to show items as icons.
 mediaBrowserShowTitleForThumbnailIcons: true # default is false. Only makes a difference if mediaBrowserItemsPerRow > 1. Will show title for thumbnail artworks.
+customThumbnail:
+  Voyage: https://i.scdn.co/image/ab67706f000000027b2e7ee752dc222ff2fd466f
 customThumbnailIfMissing:
   Ed Sheeran Radio: https://i.scdn.co/image/ab6761610000e5eb4d2f80ceffc6c70a432ccd7c
   Legendary: https://i.scdn.co/image/ab67706f000000027b2e7ee752dc222ff2fd466f

src/editor/advanced-editor.ts

@@ -37,6 +37,7 @@ class AdvancedEditor extends BaseEditor {
         The following needs to be configured using code (YAML): 
         <ul>
           <li>customSources</li>
+          <li>customThumbnail</li>
           <li>customThumbnailIfMissing</li>
           <li>mediaBrowserTitlesToIgnore</li>
         </ul>

src/types.ts

@@ -35,6 +35,7 @@ export interface CardConfig extends LovelaceCardConfig {
   dynamicVolumeSlider: boolean;
   mediaArtworkOverrides?: MediaArtworkOverride[];
   customSources?: CustomSources;
+  customThumbnail?: CustomThumbnail;
   customThumbnailIfMissing?: CustomThumbnail;
   mediaBrowserTitlesToIgnore?: string[];
   mediaBrowserItemsPerRow: number;

src/utils/media-browser-utils.ts

@@ -8,7 +8,7 @@ function hasItemsWithImage(items: MediaPlayerItem[]) {
   return items.some((item) => item.thumbnail);
 }
 function getThumbnail(mediaItem: MediaPlayerItem, config: CardConfig, itemsWithImage: boolean) {
-  let thumbnail = mediaItem.thumbnail;
+  let thumbnail = config.customThumbnail?.[mediaItem.title] ?? mediaItem.thumbnail;
   if (!thumbnail) {
     thumbnail = config.customThumbnailIfMissing?.[mediaItem.title];
     if (itemsWithImage && !thumbnail) {