feat: use the <umb-imaging-thumbnail> element in the <umb-input-media> element

Author: iOvergaard

src/packages/media/media/components/input-media/input-media.element.ts

@@ -1,7 +1,6 @@
 import type { UmbMediaCardItemModel } from '../../modals/index.js';
 import type { UmbMediaItemModel } from '../../repository/index.js';
 import { UmbMediaPickerContext } from './input-media.context.js';
-import { UmbImagingRepository } from '@umbraco-cms/backoffice/imaging';
 import { css, customElement, html, ifDefined, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
 import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
@@ -11,6 +10,8 @@ import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/modal';
 import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
 
+import '@umbraco-cms/backoffice/imaging';
+
 const elementName = 'umb-input-media';
 
 @customElement(elementName)
@@ -123,8 +124,6 @@ export class UmbInputMediaElement extends UmbFormControlMixin<string | undefined
 
 	#pickerContext = new UmbMediaPickerContext(this);
 
-	#imagingRepository = new UmbImagingRepository(this);
-
 	constructor() {
 		super();
 
@@ -143,22 +142,7 @@ export class UmbInputMediaElement extends UmbFormControlMixin<string | undefined
 			const missingCards = selectedItems.filter((item) => !this._cards.find((card) => card.unique === item.unique));
 			if (selectedItems?.length && !missingCards.length) return;
 
-			if (!selectedItems?.length) {
-				this._cards = [];
-				return;
-			}
-
-			const uniques = selectedItems.map((x) => x.unique);
-
-			const { data: thumbnails } = await this.#imagingRepository.requestThumbnailUrls(uniques, 400, 400);
-
-			this._cards = selectedItems.map((item) => {
-				const thumbnail = thumbnails?.find((x) => x.unique === item.unique);
-				return {
-					...item,
-					src: thumbnail?.url,
-				};
-			});
+			this._cards = selectedItems ?? [];
 		});
 
 		this.addValidator(
@@ -228,9 +212,10 @@ export class UmbInputMediaElement extends UmbFormControlMixin<string | undefined
 				name=${ifDefined(item.name === null ? undefined : item.name)}
 				detail=${ifDefined(item.unique)}
 				href="${this._editMediaPath}edit/${item.unique}">
-				${item.src
-					? html`<img src=${item.src} alt=${item.name} />`
-					: html`<umb-icon name=${ifDefined(item.mediaType.icon)}></umb-icon>`}
+				<umb-imaging-thumbnail
+					unique=${item.unique}
+					alt=${item.name}
+					icon=${item.mediaType.icon}></umb-imaging-thumbnail>
 				${this.#renderIsTrashed(item)}
 				<uui-action-bar slot="actions">
 					<uui-button