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

Author: iOvergaard

src/packages/media/media/collection/media-collection.context.ts

@@ -1,39 +1,20 @@
 import type { UmbMediaCollectionFilterModel, UmbMediaCollectionItemModel } from './types.js';
 import { UMB_MEDIA_GRID_COLLECTION_VIEW_ALIAS } from './views/index.js';
-import { UmbImagingRepository } from '@umbraco-cms/backoffice/imaging';
-import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
 export class UmbMediaCollectionContext extends UmbDefaultCollectionContext<
 	UmbMediaCollectionItemModel,
 	UmbMediaCollectionFilterModel
 > {
-	#imagingRepository: UmbImagingRepository;
-
-	#thumbnailItems = new UmbArrayState<UmbMediaCollectionItemModel>([], (x) => x.unique);
-	public readonly thumbnailItems = this.#thumbnailItems.asObservable();
+	/**
+	 * The thumbnail items that are currently displayed in the collection.
+	 * @deprecated Use the `<umb-imaging-thumbnail>` element instead.
+	 */
+	public readonly thumbnailItems = this.items;
 
 	constructor(host: UmbControllerHost) {
 		super(host, UMB_MEDIA_GRID_COLLECTION_VIEW_ALIAS);
-		this.#imagingRepository = new UmbImagingRepository(host);
-
-		this.observe(this.items, async (items) => {
-			if (!items?.length) return;
-
-			const { data } = await this.#imagingRepository.requestThumbnailUrls(
-				items.map((m) => m.unique),
-				400,
-				400,
-			);
-
-			this.#thumbnailItems.setValue(
-				items.map((item) => {
-					const thumbnail = data?.find((m) => m.unique === item.unique)?.url;
-					return { ...item, url: thumbnail };
-				}),
-			);
-		});
 	}
 }
 

src/packages/media/media/collection/views/grid/media-grid-collection-view.element.ts

@@ -52,7 +52,7 @@ export class UmbMediaGridCollectionViewElement extends UmbLitElement {
 
 		this.observe(this.#collectionContext.loading, (loading) => (this._loading = loading), '_observeLoading');
 
-		this.observe(this.#collectionContext.thumbnailItems, (items) => (this._items = items), '_observeItems');
+		this.observe(this.#collectionContext.items, (items) => (this._items = items), '_observeItems');
 
 		this.observe(
 			this.#collectionContext.selection.selection,
@@ -127,13 +127,7 @@ export class UmbMediaGridCollectionViewElement extends UmbLitElement {
 				@selected=${() => this.#onSelect(item)}
 				@deselected=${() => this.#onDeselect(item)}
 				class="media-item">
-				${when(
-					item.url,
-					() => html`<img src=${item.url!} alt=${item.name} draggable="false" />`,
-					() => html`<umb-icon name=${item.icon}></umb-icon>`,
-				)}
-				<!-- TODO: [LK] I'd like to indicate a busy state when bulk actions are triggered. -->
-				<!-- <div class="container"><uui-loader></uui-loader></div> -->
+				<umb-imaging-thumbnail unique=${item.unique} alt=${item.name} icon=${item.icon}></umb-imaging-thumbnail>
 			</uui-card-media>
 		`;
 	}
@@ -158,16 +152,6 @@ export class UmbMediaGridCollectionViewElement extends UmbLitElement {
 				grid-auto-rows: 200px;
 				gap: var(--uui-size-space-5);
 			}
-
-			img {
-				background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".1"><path d="M50 0h50v50H50zM0 50h50v50H0z"/></svg>');
-				background-size: 10px 10px;
-				background-repeat: repeat;
-			}
-
-			umb-icon {
-				font-size: var(--uui-size-8);
-			}
 		`,
 	];
 }