feat: add thumbnail component that can request a media key and show it or fallback to an icon

Author: iOvergaard

src/packages/media/imaging/components/imaging-thumbnail.element.ts

@@ -0,0 +1,144 @@
+import { UmbImagingCropMode } from '../types.js';
+import { UmbImagingRepository } from '../imaging.repository.js';
+import { css, customElement, html, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+
+const ELEMENT_NAME = 'umb-imaging-thumbnail';
+
+@customElement(ELEMENT_NAME)
+export class UmbImagingThumbnailElement extends UmbLitElement {
+	/**
+	 * The unique identifier for the media item.
+	 * @remark This is also known as the media key and is used to fetch the resource.
+	 */
+	@property()
+	unique = '';
+
+	/**
+	 * The width of the thumbnail.
+	 */
+	@property({ type: Number })
+	width = 400;
+
+	/**
+	 * The height of the thumbnail.
+	 */
+	@property({ type: Number })
+	height = 400;
+
+	/**
+	 * The mode of the thumbnail.
+	 * @remark The mode determines how the image is cropped.
+	 * @enum {UmbImagingCropMode}
+	 */
+	@property()
+	mode: UmbImagingCropMode = UmbImagingCropMode.MIN;
+
+	/**
+	 * The alt text for the thumbnail.
+	 */
+	@property()
+	alt = '';
+
+	/**
+	 * The fallback icon for the thumbnail.
+	 */
+	@property()
+	icon = 'icon-picture';
+
+	/**
+	 * The `loading` state of the thumbnail.
+	 * @enum {'lazy' | 'eager'}
+	 * @default 'lazy'
+	 */
+	@property()
+	loading: 'lazy' | 'eager' = 'lazy';
+
+	@state()
+	private _isLoading = true;
+
+	@state()
+	private _thumbnailUrl = '';
+
+	#imagingRepository = new UmbImagingRepository(this);
+
+	protected override async firstUpdated() {
+		await this.#generateThumbnailUrl();
+		this._isLoading = false;
+	}
+
+	override render() {
+		return html` ${this.#renderThumbnail()} ${when(this._isLoading, () => this.#renderLoading())} `;
+	}
+
+	#renderLoading() {
+		return html`<div class="container"><uui-loader></uui-loader></div>`;
+	}
+
+	#renderThumbnail() {
+		if (this._isLoading) return nothing;
+
+		return when(
+			this._thumbnailUrl,
+			() =>
+				html`<img
+					id="figure"
+					src="${this._thumbnailUrl}"
+					alt="${this.alt}"
+					loading="${this.loading}"
+					draggable="false" />`,
+			() => html`<umb-icon id="icon" name="${this.icon}"></umb-icon>`,
+		);
+	}
+
+	async #generateThumbnailUrl() {
+		const { data } = await this.#imagingRepository.requestThumbnailUrls(
+			[this.unique],
+			this.height,
+			this.width,
+			this.mode,
+		);
+		this._thumbnailUrl = data[0]?.url ?? '';
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				display: block;
+				position: relative;
+				overflow: hidden;
+			}
+
+			.container {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+
+			#figure {
+				display: block;
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+
+				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;
+			}
+
+			#icon {
+				width: 100%;
+				height: 100%;
+				font-size: var(--uui-size-8);
+			}
+		`,
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		[ELEMENT_NAME]: UmbImagingThumbnailElement;
+	}
+}

src/packages/media/imaging/components/index.ts

@@ -0,0 +1 @@
+export * from './imaging-thumbnail.element.js';

src/packages/media/imaging/imaging.repository.ts

@@ -1,7 +1,6 @@
-import type { UmbImagingModel } from './types.js';
+import { UmbImagingCropMode, type UmbImagingModel } from './types.js';
 import { UmbImagingServerDataSource } from './imaging.server.data.js';
 import { UMB_IMAGING_STORE_CONTEXT } from './imaging.store.token.js';
-import { ImageCropModeModel } from '@umbraco-cms/backoffice/external/backend-api';
 import { UmbRepositoryBase } from '@umbraco-cms/backoffice/repository';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
@@ -68,7 +67,7 @@ export class UmbImagingRepository extends UmbRepositoryBase implements UmbApi {
 	 * @param {ImageCropModeModel} mode - The crop mode
 	 * @memberof UmbImagingRepository
 	 */
-	async requestThumbnailUrls(uniques: Array<string>, height: number, width: number, mode = ImageCropModeModel.MIN) {
+	async requestThumbnailUrls(uniques: Array<string>, height: number, width: number, mode = UmbImagingCropMode.MIN) {
 		const imagingModel: UmbImagingModel = { height, width, mode };
 		return this.requestResizedItems(uniques, imagingModel);
 	}

src/packages/media/imaging/index.ts

@@ -1,2 +1,3 @@
+export * from './components/index.js';
 export { UmbImagingRepository } from './imaging.repository.js';
 export { UMB_IMAGING_REPOSITORY_ALIAS } from './constants.js';

src/packages/media/imaging/types.ts

@@ -1,7 +1,9 @@
-import type { ImageCropModeModel } from '@umbraco-cms/backoffice/external/backend-api';
+import { ImageCropModeModel as UmbImagingCropMode } from '@umbraco-cms/backoffice/external/backend-api';
+
+export { UmbImagingCropMode };
 
 export interface UmbImagingModel {
 	height?: number;
 	width?: number;
-	mode?: ImageCropModeModel;
+	mode?: UmbImagingCropMode;
 }