diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.context.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.context.ts index 60ca5a16f5..4785fc9b8c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.context.ts @@ -1,7 +1,5 @@ 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'; @@ -9,31 +7,14 @@ export class UmbMediaCollectionContext extends UmbDefaultCollectionContext< UmbMediaCollectionItemModel, UmbMediaCollectionFilterModel > { - #imagingRepository: UmbImagingRepository; - - #thumbnailItems = new UmbArrayState([], (x) => x.unique); - public readonly thumbnailItems = this.#thumbnailItems.asObservable(); + /** + * The thumbnail items that are currently displayed in the collection. + * @deprecated Use the `` 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 }; - }), - ); - }); } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/grid/media-grid-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/grid/media-grid-collection-view.element.ts index 2345df4307..b4d6909278 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/collection/views/grid/media-grid-collection-view.element.ts +++ b/src/Umbraco.Web.UI.Client/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`${item.name}`, - () => html``, - )} - - + `; } @@ -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,'); - background-size: 10px 10px; - background-repeat: repeat; - } - - umb-icon { - font-size: var(--uui-size-8); - } `, ]; }