diff --git a/core-web/libs/block-editor/src/lib/block-editor.module.ts b/core-web/libs/block-editor/src/lib/block-editor.module.ts index d4ea4982160..bd63a98a684 100644 --- a/core-web/libs/block-editor/src/lib/block-editor.module.ts +++ b/core-web/libs/block-editor/src/lib/block-editor.module.ts @@ -29,7 +29,8 @@ import { DotFieldRequiredDirective, DotMessagePipe, DotSpinnerComponent, - DotContentletStatusBadgeComponent + DotContentletStatusBadgeComponent, + DotContentThumbnailComponent } from '@dotcms/ui'; //Editor @@ -78,7 +79,8 @@ const initTranslations = (dotMessageService: DotMessageService) => { DragHandleDirective, DotContextMenuComponent, DotAddButtonComponent, - DotContentletStatusBadgeComponent + DotContentletStatusBadgeComponent, + DotContentThumbnailComponent ], declarations: [ EditorDirective, diff --git a/core-web/libs/block-editor/src/lib/nodes/contentlet-block/contentlet-block.component.html b/core-web/libs/block-editor/src/lib/nodes/contentlet-block/contentlet-block.component.html index 5b5a8577dc8..17a1bc6cce8 100644 --- a/core-web/libs/block-editor/src/lib/nodes/contentlet-block/contentlet-block.component.html +++ b/core-web/libs/block-editor/src/lib/nodes/contentlet-block/contentlet-block.component.html @@ -2,12 +2,10 @@
- + iconSize="72px" + class="relative h-[94px] w-[94px]" />
diff --git a/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.css b/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.css index 0dc1936a60c..0a8694ea23b 100644 --- a/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.css +++ b/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.css @@ -28,9 +28,7 @@ width: 32px; } -.icon-wrapper dot-contentlet-thumbnail { - align-items: center; - display: block; +.icon-wrapper dot-content-thumbnail { position: relative; width: 42px; height: 42px; @@ -43,7 +41,7 @@ } .icon-wrapper.page, -.icon-wrapper.page dot-contentlet-thumbnail { +.icon-wrapper.page dot-content-thumbnail { flex-basis: 64px; height: 64px; width: 64px; diff --git a/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.html b/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.html index c21a1b35c9a..3e051e04821 100644 --- a/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.html +++ b/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.html @@ -3,11 +3,7 @@ {{ url }} } @else { @if (data?.contentlet) { - + } @else { } diff --git a/core-web/libs/block-editor/src/lib/shared/shared.module.ts b/core-web/libs/block-editor/src/lib/shared/shared.module.ts index a49172b5bf6..38bfeca5080 100644 --- a/core-web/libs/block-editor/src/lib/shared/shared.module.ts +++ b/core-web/libs/block-editor/src/lib/shared/shared.module.ts @@ -5,7 +5,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; import { TagModule } from 'primeng/tag'; -import { DotContentletStatusBadgeComponent } from '@dotcms/ui'; +import { DotContentletStatusBadgeComponent, DotContentThumbnailComponent } from '@dotcms/ui'; // Shared import { @@ -26,7 +26,8 @@ import { SuggestionsService } from './services'; ReactiveFormsModule, ButtonModule, TagModule, - DotContentletStatusBadgeComponent + DotContentletStatusBadgeComponent, + DotContentThumbnailComponent ], declarations: [ SuggestionsComponent, diff --git a/core-web/libs/dotcms-webcomponents/src/components.d.ts b/core-web/libs/dotcms-webcomponents/src/components.d.ts index d6e8a0d372e..328b8083b09 100644 --- a/core-web/libs/dotcms-webcomponents/src/components.d.ts +++ b/core-web/libs/dotcms-webcomponents/src/components.d.ts @@ -450,6 +450,13 @@ export namespace Components { */ "size": string; } + /** + * @deprecated Angular code must use `DotContentThumbnailComponent` + * (`dot-content-thumbnail`) from `@dotcms/ui` instead — pass the contentlet + * via its `contentlet`/`options` inputs or a resolved model via `thumbnail`. + * This web component remains only for Stencil-internal use + * (`dot-card-contentlet`) and legacy JSP pages. See dotCMS/core#36295. + */ interface DotContentletThumbnail { /** * @default '' @@ -1840,6 +1847,13 @@ declare global { prototype: HTMLDotContentletLockIconElement; new (): HTMLDotContentletLockIconElement; }; + /** + * @deprecated Angular code must use `DotContentThumbnailComponent` + * (`dot-content-thumbnail`) from `@dotcms/ui` instead — pass the contentlet + * via its `contentlet`/`options` inputs or a resolved model via `thumbnail`. + * This web component remains only for Stencil-internal use + * (`dot-card-contentlet`) and legacy JSP pages. See dotCMS/core#36295. + */ interface HTMLDotContentletThumbnailElement extends Components.DotContentletThumbnail, HTMLStencilElement { } var HTMLDotContentletThumbnailElement: { @@ -2751,6 +2765,13 @@ declare namespace LocalJSX { */ "size"?: string; } + /** + * @deprecated Angular code must use `DotContentThumbnailComponent` + * (`dot-content-thumbnail`) from `@dotcms/ui` instead — pass the contentlet + * via its `contentlet`/`options` inputs or a resolved model via `thumbnail`. + * This web component remains only for Stencil-internal use + * (`dot-card-contentlet`) and legacy JSP pages. See dotCMS/core#36295. + */ interface DotContentletThumbnail { /** * @default '' @@ -3891,6 +3912,13 @@ declare module "@stencil/core" { */ "dot-contentlet-icon": LocalJSX.DotContentletIcon & JSXBase.HTMLAttributes; "dot-contentlet-lock-icon": LocalJSX.DotContentletLockIcon & JSXBase.HTMLAttributes; + /** + * @deprecated Angular code must use `DotContentThumbnailComponent` + * (`dot-content-thumbnail`) from `@dotcms/ui` instead — pass the contentlet + * via its `contentlet`/`options` inputs or a resolved model via `thumbnail`. + * This web component remains only for Stencil-internal use + * (`dot-card-contentlet`) and legacy JSP pages. See dotCMS/core#36295. + */ "dot-contentlet-thumbnail": LocalJSX.DotContentletThumbnail & JSXBase.HTMLAttributes; "dot-context-menu": LocalJSX.DotContextMenu & JSXBase.HTMLAttributes; "dot-data-view-button": LocalJSX.DotDataViewButton & JSXBase.HTMLAttributes; diff --git a/core-web/libs/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/dot-contentlet-thumbnail.tsx b/core-web/libs/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/dot-contentlet-thumbnail.tsx index 3c5869f4ad0..0bd228d800f 100644 --- a/core-web/libs/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/dot-contentlet-thumbnail.tsx +++ b/core-web/libs/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/dot-contentlet-thumbnail.tsx @@ -5,6 +5,13 @@ import { Component, h, Host, Prop, State } from '@stencil/core'; import { DotContentletItem } from '../../models/dot-contentlet-item.model'; +/** + * @deprecated Angular code must use `DotContentThumbnailComponent` + * (`dot-content-thumbnail`) from `@dotcms/ui` instead — pass the contentlet + * via its `contentlet`/`options` inputs or a resolved model via `thumbnail`. + * This web component remains only for Stencil-internal use + * (`dot-card-contentlet`) and legacy JSP pages. See dotCMS/core#36295. + */ @Component({ tag: 'dot-contentlet-thumbnail', styleUrl: 'dot-contentlet-thumbnail.scss' diff --git a/core-web/libs/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/readme.md b/core-web/libs/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/readme.md index e78b1227215..b827f615f28 100644 --- a/core-web/libs/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/readme.md +++ b/core-web/libs/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/readme.md @@ -3,6 +3,12 @@ +> **[DEPRECATED]** Angular code must use `DotContentThumbnailComponent` +(`dot-content-thumbnail`) from `@dotcms/ui` instead — pass the contentlet +via its `contentlet`/`options` inputs or a resolved model via `thumbnail`. +This web component remains only for Stencil-internal use +(`dot-card-contentlet`) and legacy JSP pages. See dotCMS/core#36295. + ## Properties | Property | Attribute | Description | Type | Default | diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html index 2a8e2a1ae6b..dc8e615f751 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html @@ -15,19 +15,10 @@ } @else {
- @if (fileInfo.source === 'temp') { - - } @else { - - } +
@if (metadata) { diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss index 729933de667..04754717d48 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss @@ -37,6 +37,10 @@ overflow: hidden; user-select: none; cursor: pointer; + // Narrow layout (container height: auto): cap the card like the media + // thumbnails instead of growing with the whole text content. Ignored on + // the wide layout, where both axes are definite. + aspect-ratio: 16 / 9; } .dot-file-field-preview__code-content { @@ -56,6 +60,10 @@ justify-content: center; overflow: hidden; background-color: #e5e7eb; + // Narrow layout (container height: auto): keep every card the same height + // regardless of the media's natural ratio. Ignored on the wide layout, + // where both width and height are definite. + aspect-ratio: 16 / 9; @container preview (min-width: 500px) { max-width: 17.5rem; @@ -196,17 +204,6 @@ text-decoration: none; } -// Third-party web-component internals – cannot be styled with Tailwind -:host { - dot-contentlet-thumbnail::ng-deep { - .thumbnail img, - .background-image:not(.svg-thumbnail) img { - object-fit: cover; - } - } -} - -// Third-party web-component internals – cannot be styled with Tailwind .preview-container--fade .preview-code_container::after { content: ""; background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.spec.ts index b984fd55dc6..39933c5936b 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.spec.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.spec.ts @@ -67,6 +67,15 @@ describe('DotFileFieldPreviewComponent', () => { expect(spectator.query(byTestId('download-btn'))).toBeTruthy(); }); + it('should render the unified thumbnail with the temp file pdf src', () => { + spectator.detectChanges(); + + expect(spectator.query(byTestId('contentlet-thumbnail'))).toBeTruthy(); + expect( + spectator.query(byTestId('dot-content-thumbnail-image')).getAttribute('src') + ).toBe(TEMP_FILE_MOCK.thumbnailUrl); + }); + it('should call downloadAsset when click on the download btn', () => { const downloadSpy = jest .spyOn(spectator.component, 'downloadAsset') @@ -80,6 +89,17 @@ describe('DotFileFieldPreviewComponent', () => { expect(downloadSpy).toHaveBeenCalledWith(expectedUrl); }); + it('should render with fallback metadata when the temp file has none (image editor save)', () => { + spectator.setInput('previewFile', { + source: 'temp', + file: { ...TEMP_FILE_MOCK, metadata: undefined } + } as unknown); + spectator.detectChanges(); + + expect(spectator.component).toBeTruthy(); + expect(spectator.query(byTestId('metadata-title'))).toHaveText(TEMP_FILE_MOCK.fileName); + }); + it('should not show download button when referenceUrl is missing', () => { spectator.setInput('previewFile', { source: 'temp', @@ -109,9 +129,15 @@ describe('DotFileFieldPreviewComponent', () => { expect(spectator.component).toBeTruthy(); }); - it('should be have a dot-contentlet-thumbnail', () => { + it('should render the unified thumbnail with the contentlet image src', () => { spectator.detectChanges(); - expect(spectator.query('dot-contentlet-thumbnail')).toBeTruthy(); + + const { inode, modDate } = NEW_FILE_MOCK.entity; + + expect(spectator.query(byTestId('contentlet-thumbnail'))).toBeTruthy(); + expect( + spectator.query(byTestId('dot-content-thumbnail-image')).getAttribute('src') + ).toBe(`/dA/${inode}/asset/500w/50q?r=${modDate}`); }); it('should show proper metadata', () => { diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts index 372d7cc7971..a3268aaa9b7 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts @@ -1,7 +1,6 @@ import { of } from 'rxjs'; import { - CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, computed, @@ -27,10 +26,14 @@ import { DotFileMetadata } from '@dotcms/dotcms-models'; import { - DotTempFileThumbnailComponent, + DotContentThumbnail, + DotContentThumbnailComponent, DotFileSizeFormatPipe, DotMessagePipe, - DotCopyButtonComponent + DotCopyButtonComponent, + buildFallbackTempFileMetadata, + contentletToThumbnailModel, + tempFileToThumbnailModel } from '@dotcms/ui'; import { getFileMetadata } from '@dotcms/utils'; @@ -47,6 +50,8 @@ type FileInfo = UploadedFile & { downloadLink: string | null; content: string | null; metadata: DotFileMetadata; + /** Resolved model for the thumbnail viewer, built from either origin. */ + thumbnail: DotContentThumbnail; }; const buildTempDownloadLink = (referenceUrl: string): string => { @@ -58,7 +63,7 @@ const buildTempDownloadLink = (referenceUrl: string): string => { @Component({ selector: 'dot-file-field-preview', imports: [ - DotTempFileThumbnailComponent, + DotContentThumbnailComponent, DotFileSizeFormatPipe, DotMessagePipe, ButtonModule, @@ -70,8 +75,7 @@ const buildTempDownloadLink = (referenceUrl: string): string => { providers: [ConfirmationService], templateUrl: './dot-file-field-preview.component.html', styleUrls: ['./dot-file-field-preview.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - schemas: [CUSTOM_ELEMENTS_SCHEMA] + changeDetection: ChangeDetectionStrategy.OnPush }) export class DotFileFieldPreviewComponent implements OnInit { readonly #dotResourceLinksService = inject(DotResourceLinksService); @@ -149,7 +153,8 @@ export class DotFileFieldPreviewComponent implements OnInit { contentType, fieldVariable, downloadLink: `/contentAsset/raw-data/${file.inode}/${fieldVariable}?byInode=true&force_download=true`, - metadata: getFileMetadata(file) + metadata: getFileMetadata(file), + thumbnail: contentletToThumbnailModel(file, { fieldVariable, playableVideo: true }) }; } @@ -162,7 +167,9 @@ export class DotFileFieldPreviewComponent implements OnInit { contentType: DEFAULT_CONTENT_TYPE, fieldVariable: DEFAULT_CONTENT_TYPE, downloadLink: file.referenceUrl ? buildTempDownloadLink(file.referenceUrl) : null, - metadata: file.metadata + // Temp files fresh from the image editor may lack the metadata block + metadata: file.metadata ?? buildFallbackTempFileMetadata(file), + thumbnail: tempFileToThumbnailModel(file) }; }); diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.html index 0aada0e9730..48f4f3dcb68 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.html +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.html @@ -127,10 +127,9 @@ @if (showThumbnail) {
-
} @@ -159,11 +158,12 @@ @case ('image') {
- +
+ +
} diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.ts index ed654b582ae..126e40e2353 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.ts @@ -4,7 +4,6 @@ import { ChangeDetectionStrategy, Component, computed, - CUSTOM_ELEMENTS_SCHEMA, DestroyRef, forwardRef, inject, @@ -25,7 +24,11 @@ import { filter } from 'rxjs/operators'; import { DotMessageService } from '@dotcms/data-access'; import { DotCMSContentlet, DotCMSContentTypeField, DotLanguage } from '@dotcms/dotcms-models'; -import { DotContentletStatusBadgeComponent, DotMessagePipe } from '@dotcms/ui'; +import { + DotContentletStatusBadgeComponent, + DotContentThumbnailComponent, + DotMessagePipe +} from '@dotcms/ui'; import { RelationshipFieldStore } from './../../store/relationship-field.store'; import { FooterComponent } from './../dot-select-existing-content/components/footer/footer.component'; @@ -47,13 +50,13 @@ import { BaseControlValueAccessor } from '../../../shared/base-control-value-acc MenuModule, DotMessagePipe, DotContentletStatusBadgeComponent, + DotContentThumbnailComponent, LanguagePipe, PaginationComponent ], templateUrl: './dot-relationship-field.component.html', styleUrl: './dot-relationship-field.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, - schemas: [CUSTOM_ELEMENTS_SCHEMA], providers: [ RelationshipFieldStore, { diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.html index 5b39737a27d..c4eb771c35e 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.html +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.html @@ -145,10 +145,9 @@
-

{{ item.title }}

diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.ts index 2311f6534b2..639354b88b6 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.ts @@ -3,7 +3,6 @@ import { ChangeDetectionStrategy, Component, computed, - CUSTOM_ELEMENTS_SCHEMA, effect, inject, model, @@ -27,7 +26,11 @@ import { ToggleSwitchModule } from 'primeng/toggleswitch'; import { TooltipModule } from 'primeng/tooltip'; import { DotCMSContentlet } from '@dotcms/dotcms-models'; -import { DotContentletStatusBadgeComponent, DotMessagePipe } from '@dotcms/ui'; +import { + DotContentletStatusBadgeComponent, + DotContentThumbnailComponent, + DotMessagePipe +} from '@dotcms/ui'; import { SearchComponent } from './components/search/search.component'; import { ExistingContentStore } from './store/existing-content.store'; @@ -61,11 +64,11 @@ const STATIC_COLUMNS = 6; FormsModule, TooltipModule, SearchComponent, - ToggleSwitchModule + ToggleSwitchModule, + DotContentThumbnailComponent ], templateUrl: './dot-select-existing-content.component.html', - changeDetection: ChangeDetectionStrategy.OnPush, - schemas: [CUSTOM_ELEMENTS_SCHEMA] + changeDetection: ChangeDetectionStrategy.OnPush }) export class DotSelectExistingContentComponent implements OnInit { /** diff --git a/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.html b/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.html index c7b2be68957..813159f2379 100644 --- a/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.html +++ b/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.html @@ -80,10 +80,10 @@ class="h-14 max-h-14 cursor-pointer bg-(--color-palette-primary-100) p-1" (click)="onDoubleClick(item); $event.stopPropagation()"> @if (!isFolder) { - } @else { diff --git a/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.spec.ts b/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.spec.ts index f552346f9a2..04912b22af9 100644 --- a/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.spec.ts +++ b/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.spec.ts @@ -468,8 +468,10 @@ describe('DotFolderListViewComponent', () => { it('should have a title column', () => { const titleColumn = spectator.query(byTestId('item-title')); + const titleText = spectator.query(byTestId('item-title-text')); - expect(titleColumn.textContent.trim()).toBe(firstItem.title); + expect(titleColumn).toBeTruthy(); + expect(titleText.textContent.trim()).toBe(firstItem.title); }); it('should have a status column', () => { @@ -518,7 +520,7 @@ describe('DotFolderListViewComponent', () => { }); it('should have a contentlet title', () => { - const contentletTitle = spectator.query(byTestId('item-title')); + const contentletTitle = spectator.query(byTestId('item-title-text')); expect(contentletTitle.textContent.trim()).toBe(firstItem.title); }); diff --git a/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.ts b/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.ts index f768be69350..b855bf75c7f 100644 --- a/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.ts +++ b/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.ts @@ -5,7 +5,6 @@ import { ChangeDetectionStrategy, Component, computed, - CUSTOM_ELEMENTS_SCHEMA, effect, inject, input, @@ -33,6 +32,7 @@ import { } from '@dotcms/dotcms-models'; import { DotContentletStatusBadgeComponent, + DotContentThumbnailComponent, DotLocaleTagPipe, DotMessagePipe, DotRelativeDatePipe @@ -46,6 +46,7 @@ import { DOT_DRAG_ITEM, HEADER_COLUMNS } from '../shared/constants'; ButtonModule, TagModule, DotContentletStatusBadgeComponent, + DotContentThumbnailComponent, DotMessagePipe, DotRelativeDatePipe, SkeletonModule, @@ -53,7 +54,6 @@ import { DOT_DRAG_ITEM, HEADER_COLUMNS } from '../shared/constants'; DotLocaleTagPipe, NgTemplateOutlet ], - schemas: [CUSTOM_ELEMENTS_SCHEMA], templateUrl: './dot-folder-list-view.component.html', styleUrls: ['./dot-folder-list-view.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.html b/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.html index 56be23236c2..623b5170764 100644 --- a/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.html +++ b/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.html @@ -5,16 +5,14 @@ class="flex h-full w-20 shrink-0 items-center justify-center overflow-hidden" [class]=" $isIconThumbnail() - ? 'bg-gray-100 group-hover:bg-(--color-palette-primary-200) group-hover:[--gray-700:var(--color-palette-primary-600)]' + ? 'bg-gray-100 group-hover:bg-(--color-palette-primary-200) group-hover:[--dot-content-thumbnail-icon-color:var(--color-palette-primary-600)]' : '' "> - - + class="pointer-events-none" + iconSize="32px" + [thumbnail]="$thumbnail()" />
diff --git a/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.spec.ts b/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.spec.ts index afd73b4167a..f71f981f47e 100644 --- a/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.spec.ts +++ b/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.spec.ts @@ -115,17 +115,14 @@ describe('DotUvePaletteContentletComponent', () => { }); describe('Template Rendering', () => { - it('should render dot-contentlet-thumbnail with correct properties', () => { - const thumbnail = spectator.query( - '[data-testid="contentlet-thumbnail"]' - ) as HTMLElement & { - iconSize: string; - contentlet: DotCMSContentlet; - }; + it('should render dot-content-thumbnail with the resolved model', () => { + const thumbnail = spectator.query('[data-testid="contentlet-thumbnail"]'); expect(thumbnail).toBeTruthy(); - expect(thumbnail.contentlet).toBeDefined(); - expect(thumbnail.contentlet.identifier).toBe('test-identifier'); + expect(thumbnail.tagName.toLowerCase()).toBe('dot-content-thumbnail'); + expect(spectator.component.$thumbnail()).toEqual( + expect.objectContaining({ type: expect.any(String), icon: expect.any(String) }) + ); }); it('should render contentlet title', () => { diff --git a/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.ts b/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.ts index bccca225b2d..321eb76f413 100644 --- a/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.ts +++ b/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.ts @@ -1,19 +1,13 @@ -import { - ChangeDetectionStrategy, - Component, - computed, - CUSTOM_ELEMENTS_SCHEMA, - input -} from '@angular/core'; +import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core'; import { TooltipModule } from 'primeng/tooltip'; import { DotCMSContentlet } from '@dotcms/dotcms-models'; +import { contentletToThumbnailModel, DotContentThumbnailComponent } from '@dotcms/ui'; @Component({ selector: 'dot-uve-palette-contentlet', - imports: [TooltipModule], - schemas: [CUSTOM_ELEMENTS_SCHEMA], + imports: [TooltipModule, DotContentThumbnailComponent], templateUrl: './dot-uve-palette-contentlet.component.html', changeDetection: ChangeDetectionStrategy.OnPush, host: { @@ -26,17 +20,9 @@ import { DotCMSContentlet } from '@dotcms/dotcms-models'; export class DotUvePaletteContentletComponent { $contentlet = input.required({ alias: 'contentlet' }); - readonly $isIconThumbnail = computed(() => { - const c = this.$contentlet(); - const mime = c?.mimeType ?? ''; - const renderImage = - !!c?.['hasTitleImage'] || - mime === 'application/pdf' || - !!c?.['image'] || - mime.includes('video'); + readonly $thumbnail = computed(() => contentletToThumbnailModel(this.$contentlet())); - return !renderImage; - }); + readonly $isIconThumbnail = computed(() => this.$thumbnail().type === 'icon'); readonly $hostClass = 'group flex w-full items-center overflow-hidden cursor-grab active:cursor-grabbing ' + diff --git a/core-web/libs/ui/src/index.ts b/core-web/libs/ui/src/index.ts index eac4c9e173b..7523c979218 100644 --- a/core-web/libs/ui/src/index.ts +++ b/core-web/libs/ui/src/index.ts @@ -28,7 +28,9 @@ export * from './lib/components/dot-pages-favorite-page-empty-skeleton/dot-pages export * from './lib/components/dot-severity-icon/dot-severity-icon.component'; export * from './lib/components/dot-sidebar-accordion'; export * from './lib/components/dot-sidebar-header/dot-sidebar-header.component'; -export * from './lib/components/dot-temp-file-thumbnail/dot-temp-file-thumbnail.component'; +export * from './lib/components/dot-content-thumbnail/dot-content-thumbnail.component'; +export * from './lib/components/dot-content-thumbnail/models/dot-content-thumbnail.model'; +export * from './lib/components/dot-content-thumbnail/utils/dot-content-thumbnail.utils'; export * from './lib/components/dot-content-type/dot-content-type.component'; export { DotSiteComponent } from './lib/components/dot-site/dot-site.component'; export * from './lib/components/dot-theme/dot-theme.component'; diff --git a/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.html b/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.html index 2db93714ecf..2d3da003518 100644 --- a/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.html +++ b/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.html @@ -1,10 +1,9 @@
-
diff --git a/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.scss b/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.scss index cdb08f07cd6..3957e98280b 100644 --- a/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.scss +++ b/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.scss @@ -34,15 +34,10 @@ height: 100%; background: colors.$color-palette-gray-200; - dot-contentlet-thumbnail { - width: 100%; - height: 100%; - - img { - object-fit: contain; - width: 100%; - height: 100%; - } + // Card look: whole asset visible inside the padded box, never cropped + dot-content-thumbnail img, + dot-content-thumbnail video { + object-fit: contain; } } } diff --git a/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.spec.ts b/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.spec.ts index 0c608053c70..59ef2cac32a 100644 --- a/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.spec.ts +++ b/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.spec.ts @@ -32,10 +32,10 @@ describe('DotAssetCardComponent', () => { }); }); - it('should use the dot-contentlet-thumbnail', () => { + it('should use the dot-content-thumbnail', () => { const card = spectator.query(Card); - const thumbnail = spectator.query('dot-contentlet-thumbnail'); - expect(thumbnail).toBeDefined(); + const thumbnail = spectator.query('dot-content-thumbnail'); + expect(thumbnail).toBeTruthy(); expect(card).toBeDefined(); }); diff --git a/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.ts b/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.ts index 727b1fd76ff..445b46f8bca 100644 --- a/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.ts +++ b/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.ts @@ -1,19 +1,19 @@ -import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, Input } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; import { Card } from 'primeng/card'; import { Tag } from 'primeng/tag'; import { DotCMSContentlet } from '@dotcms/dotcms-models'; +import { DotContentThumbnailComponent } from '../../../dot-content-thumbnail/dot-content-thumbnail.component'; import { DotContentletStatusBadgeComponent } from '../../../dot-contentlet-status-badge/dot-contentlet-status-badge.component'; @Component({ selector: 'dot-asset-card', templateUrl: './dot-asset-card.component.html', styleUrls: ['./dot-asset-card.component.scss'], - imports: [Card, Tag, DotContentletStatusBadgeComponent], - changeDetection: ChangeDetectionStrategy.OnPush, - schemas: [CUSTOM_ELEMENTS_SCHEMA] + imports: [Card, Tag, DotContentletStatusBadgeComponent, DotContentThumbnailComponent], + changeDetection: ChangeDetectionStrategy.OnPush }) export class DotAssetCardComponent { @Input() contentlet: DotCMSContentlet; diff --git a/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.html b/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.html index 244a172b698..9f5ed1efe50 100644 --- a/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.html +++ b/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.html @@ -26,7 +26,7 @@ -
+
-
diff --git a/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.scss b/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.scss index a68fafafe0f..e02cd955d5c 100644 --- a/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.scss +++ b/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.scss @@ -22,7 +22,8 @@ .dataview-thumbnail { width: 100%; - max-height: 3rem; + // Definite height: dot-content-thumbnail sizes itself from its container + height: 3rem; overflow: hidden; position: relative; } diff --git a/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.ts b/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.ts index 19064a7fc48..56f98d158ce 100644 --- a/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.ts +++ b/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.ts @@ -2,7 +2,6 @@ import { DatePipe } from '@angular/common'; import { ChangeDetectionStrategy, Component, - CUSTOM_ELEMENTS_SCHEMA, ElementRef, input, model, @@ -22,6 +21,7 @@ import { TableModule } from 'primeng/table'; import { DotCMSContentlet } from '@dotcms/dotcms-models'; import { DotMessagePipe } from '../../../../dot-message/dot-message.pipe'; +import { DotContentThumbnailComponent } from '../../../dot-content-thumbnail/dot-content-thumbnail.component'; @Component({ selector: 'dot-dataview', @@ -34,12 +34,12 @@ import { DotMessagePipe } from '../../../../dot-message/dot-message.pipe'; MessageModule, SkeletonModule, DatePipe, - DotMessagePipe + DotMessagePipe, + DotContentThumbnailComponent ], templateUrl: './dot-dataview.component.html', styleUrls: ['./dot-dataview.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - schemas: [CUSTOM_ELEMENTS_SCHEMA] + changeDetection: ChangeDetectionStrategy.OnPush }) export class DotDataViewComponent { /** diff --git a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-icon.component.ts b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-icon.component.ts new file mode 100644 index 00000000000..b1c305f6b38 --- /dev/null +++ b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-icon.component.ts @@ -0,0 +1,50 @@ +import { ChangeDetectionStrategy, Component, input } from '@angular/core'; + +/** + * Internal renderer for the icon fallback. Renders a Material Symbols glyph + * whose size auto-scales with the thumbnail container (cqmin units — the + * viewer host declares `container-type: size`) unless an explicit `size` + * override is provided. Color is themeable from the outside via the + * `--dot-content-thumbnail-icon-color` CSS custom property. + * + * Styles are self-contained (no Tailwind): the component also ships inside + * bundles without the Tailwind utilities (e.g. dotcms-binary-field-builder). + */ +@Component({ + selector: 'dot-content-thumbnail-icon', + template: ` + + {{ $icon() }} + + `, + styles: ` + :host { + display: flex; + height: 100%; + width: 100%; + align-items: center; + justify-content: center; + } + + i { + /* cqi (inline size): the viewer host is an inline-size container only, + so this is a fallback for consumers that skip the iconSize input */ + font-size: clamp(16px, 55cqi, 72px); + line-height: 1; + user-select: none; + color: var(--dot-content-thumbnail-icon-color, var(--gray-700, #6c7389)); + } + `, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class DotContentThumbnailIconComponent { + $icon = input.required({ alias: 'icon' }); + $alt = input('', { alias: 'alt' }); + /** Explicit font-size override (e.g. '48px'); when unset the glyph auto-scales via container queries. */ + $size = input(undefined, { alias: 'size' }); +} diff --git a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-image.component.ts b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-image.component.ts new file mode 100644 index 00000000000..e7027d1cf6a --- /dev/null +++ b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-image.component.ts @@ -0,0 +1,51 @@ +import { ChangeDetectionStrategy, Component, input, output } from '@angular/core'; + +/** + * Internal renderer for raster/vector image thumbnails (`image`, `pdf`, `svg` + * types). Purely presentational — visibility during load is orchestrated by + * the viewer, which hides this renderer until it emits `loaded`. Kept private + * to the `dot-content-thumbnail` folder — consumers use the viewer. + * + * Styles are self-contained (no Tailwind): the component also ships inside + * bundles without the Tailwind utilities (e.g. dotcms-binary-field-builder). + */ +@Component({ + selector: 'dot-content-thumbnail-image', + template: ` + + `, + styles: ` + :host { + display: block; + height: 100%; + width: 100%; + } + + .thumbnail-image { + height: 100%; + width: 100%; + object-fit: cover; + } + + .thumbnail-image--contain { + object-fit: contain; + } + `, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class DotContentThumbnailImageComponent { + $src = input.required({ alias: 'src' }); + $alt = input('', { alias: 'alt' }); + $fit = input<'cover' | 'contain'>('cover', { alias: 'fit' }); + + loaded = output(); + failed = output(); +} diff --git a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-video.component.ts b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-video.component.ts new file mode 100644 index 00000000000..c20f0188aa9 --- /dev/null +++ b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-video.component.ts @@ -0,0 +1,67 @@ +import { ChangeDetectionStrategy, Component, input, output } from '@angular/core'; + +/** + * Internal renderer for video thumbnails. Playable videos render with native + * controls; non-playable ones show a static first frame — the `src` carries a + * `#t=0.1` media fragment (set by the mapper) so the browser seeks and paints + * that frame without playback (replaces the legacy Stencil canvas approach). + * + * Styles are self-contained (no Tailwind): the component also ships inside + * bundles without the Tailwind utilities (e.g. dotcms-binary-field-builder). + */ +@Component({ + selector: 'dot-content-thumbnail-video', + template: ` + @if ($playable()) { + + + } @else { + + } + `, + styles: ` + :host { + display: block; + height: 100%; + width: 100%; + } + + .thumbnail-video { + height: 100%; + width: 100%; + } + + .thumbnail-video--frame { + object-fit: cover; + pointer-events: none; + } + `, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class DotContentThumbnailVideoComponent { + $src = input.required({ alias: 'src' }); + $alt = input('', { alias: 'alt' }); + $playable = input(false, { alias: 'playable' }); + + loaded = output(); + failed = output(); +} diff --git a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.spec.ts b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.spec.ts new file mode 100644 index 00000000000..f74d71c85ed --- /dev/null +++ b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.spec.ts @@ -0,0 +1,322 @@ +import { Spectator, byTestId, createComponentFactory } from '@ngneat/spectator/jest'; + +import { DotCMSContentlet } from '@dotcms/dotcms-models'; + +import { DotContentThumbnailComponent } from './dot-content-thumbnail.component'; +import { DotContentThumbnail } from './models/dot-content-thumbnail.model'; + +const IMAGE_THUMBNAIL: DotContentThumbnail = { + type: 'image', + src: '/dA/inode-123/asset/500w/50q?r=99', + icon: 'image', + alt: 'photo.jpg' +}; + +const SVG_THUMBNAIL: DotContentThumbnail = { + type: 'svg', + src: '/contentAsset/image/inode-123/asset', + icon: 'image', + alt: 'logo.svg' +}; + +const PDF_THUMBNAIL: DotContentThumbnail = { + type: 'pdf', + src: '/contentAsset/image/inode-123/asset/pdf_page/1/resize_w/250/quality_q/45', + icon: 'insert_drive_file', + alt: 'doc.pdf' +}; + +const PLAYABLE_VIDEO_THUMBNAIL: DotContentThumbnail = { + type: 'video', + src: '/dA/inode-123/asset', + icon: 'videocam', + alt: 'clip.mp4', + playable: true +}; + +const FRAME_VIDEO_THUMBNAIL: DotContentThumbnail = { + type: 'video', + src: '/dA/inode-123#t=0.1', + icon: 'videocam', + alt: 'clip.mp4', + playable: false +}; + +const ICON_THUMBNAIL: DotContentThumbnail = { + type: 'icon', + src: '', + icon: 'audiotrack', + alt: 'song.mp3' +}; + +describe('DotContentThumbnailComponent', () => { + let spectator: Spectator; + + const createComponent = createComponentFactory({ + component: DotContentThumbnailComponent + }); + + const create = (thumbnail: DotContentThumbnail, props: Record = {}) => { + spectator = createComponent({ props: { thumbnail, ...props } }); + }; + + describe('contentlet input', () => { + const contentlet = { + inode: 'inode-123', + title: 'A file', + modDate: '99', + baseType: 'DOTASSET', + contentType: 'dotAsset', + hasTitleImage: true + } as unknown as DotCMSContentlet; + + it('resolves the thumbnail model from a contentlet', () => { + spectator = createComponent({ props: { contentlet } }); + + const img = spectator.query(byTestId('dot-content-thumbnail-image')); + + expect(img.getAttribute('src')).toBe('/dA/inode-123/500w/50q?r=99'); + }); + + it('applies the mapping options', () => { + spectator = createComponent({ + props: { + contentlet: { ...contentlet, mimeType: 'video/mp4' } as DotCMSContentlet, + options: { playableVideo: true, fieldVariable: 'asset' } + } + }); + + const video = spectator.query( + byTestId('dot-content-thumbnail-video') + ); + + expect(video.getAttribute('src')).toBe('/dA/inode-123/asset'); + }); + + it('prefers an explicit thumbnail model over the contentlet', () => { + spectator = createComponent({ props: { contentlet, thumbnail: ICON_THUMBNAIL } }); + + expect(spectator.query(byTestId('dot-content-thumbnail-icon'))).toBeTruthy(); + }); + + it('renders the default icon when neither input is provided', () => { + spectator = createComponent(); + + const icon = spectator.query(byTestId('dot-content-thumbnail-icon')); + + expect(icon.textContent.trim()).toBe('insert_drive_file'); + }); + }); + + describe('rendering by type', () => { + it('renders an image with object-cover for type image', () => { + create(IMAGE_THUMBNAIL); + + const img = spectator.query(byTestId('dot-content-thumbnail-image')); + + expect(img).toBeTruthy(); + expect(img.getAttribute('src')).toBe(IMAGE_THUMBNAIL.src); + expect(img.getAttribute('alt')).toBe(IMAGE_THUMBNAIL.alt); + expect(img.classList).not.toContain('thumbnail-image--contain'); + }); + + it('renders an image with object-contain for type svg', () => { + create(SVG_THUMBNAIL); + + const img = spectator.query(byTestId('dot-content-thumbnail-image')); + + expect(img.getAttribute('src')).toBe(SVG_THUMBNAIL.src); + expect(img.classList).toContain('thumbnail-image--contain'); + }); + + it('renders an image with object-cover for type pdf', () => { + create(PDF_THUMBNAIL); + + const img = spectator.query(byTestId('dot-content-thumbnail-image')); + + expect(img.getAttribute('src')).toBe(PDF_THUMBNAIL.src); + expect(img.classList).not.toContain('thumbnail-image--contain'); + }); + + it('renders a video with controls when playable', () => { + create(PLAYABLE_VIDEO_THUMBNAIL); + + const video = spectator.query( + byTestId('dot-content-thumbnail-video') + ); + + expect(video).toBeTruthy(); + expect(video.getAttribute('src')).toBe(PLAYABLE_VIDEO_THUMBNAIL.src); + expect(video.hasAttribute('controls')).toBe(true); + }); + + it('renders a muted first-frame video without controls when not playable', () => { + create(FRAME_VIDEO_THUMBNAIL); + + const video = spectator.query( + byTestId('dot-content-thumbnail-video-frame') + ); + + expect(video).toBeTruthy(); + expect(video.getAttribute('src')).toBe(FRAME_VIDEO_THUMBNAIL.src); + expect(video.hasAttribute('controls')).toBe(false); + expect(video.getAttribute('preload')).toBe('metadata'); + }); + + it('renders the material icon glyph for type icon', () => { + create(ICON_THUMBNAIL); + + const icon = spectator.query(byTestId('dot-content-thumbnail-icon')); + + expect(icon).toBeTruthy(); + expect(icon.textContent.trim()).toBe('audiotrack'); + expect(icon.classList).toContain('material-symbols-outlined'); + }); + + it('falls back to insert_drive_file when the icon model has no glyph', () => { + create({ ...ICON_THUMBNAIL, icon: '' }); + + const icon = spectator.query(byTestId('dot-content-thumbnail-icon')); + + expect(icon.textContent.trim()).toBe('insert_drive_file'); + }); + }); + + describe('icon sizing', () => { + it('auto-scales by default (no inline font-size)', () => { + create(ICON_THUMBNAIL); + + const icon = spectator.query(byTestId('dot-content-thumbnail-icon')); + + expect(icon.style.fontSize).toBe(''); + }); + + it('applies the explicit iconSize override', () => { + create(ICON_THUMBNAIL, { iconSize: '48px' }); + + const icon = spectator.query(byTestId('dot-content-thumbnail-icon')); + + expect(icon.style.fontSize).toBe('48px'); + }); + }); + + describe('state machine', () => { + it('starts as loading for media types (pulse visible, media hidden)', () => { + create(IMAGE_THUMBNAIL); + + const loading = spectator.query(byTestId('dot-content-thumbnail-loading')); + + expect(loading).toBeTruthy(); + expect(loading.classList).not.toContain('thumbnail-loading--hidden'); + expect(spectator.query('dot-content-thumbnail-image').classList).toContain( + 'thumbnail-media--hidden' + ); + }); + + it('starts as loaded for icon type (no pulse)', () => { + create(ICON_THUMBNAIL); + + expect(spectator.query(byTestId('dot-content-thumbnail-loading'))).toBeFalsy(); + }); + + it('fades out the pulse and reveals the media on load', () => { + create(IMAGE_THUMBNAIL); + + spectator.dispatchFakeEvent(byTestId('dot-content-thumbnail-image'), 'load'); + spectator.detectChanges(); + + expect(spectator.query(byTestId('dot-content-thumbnail-loading')).classList).toContain( + 'thumbnail-loading--hidden' + ); + expect(spectator.query('dot-content-thumbnail-image').classList).not.toContain( + 'thumbnail-media--hidden' + ); + }); + + it('falls back to the icon renderer on media error', () => { + create(IMAGE_THUMBNAIL); + + spectator.dispatchFakeEvent(byTestId('dot-content-thumbnail-image'), 'error'); + spectator.detectChanges(); + + const icon = spectator.query(byTestId('dot-content-thumbnail-icon')); + + expect(spectator.query(byTestId('dot-content-thumbnail-image'))).toBeFalsy(); + expect(icon).toBeTruthy(); + expect(icon.textContent.trim()).toBe(IMAGE_THUMBNAIL.icon); + expect(spectator.query(byTestId('dot-content-thumbnail-loading'))).toBeFalsy(); + }); + + it('falls back to the icon renderer when the video errors', () => { + create(PLAYABLE_VIDEO_THUMBNAIL); + + spectator.dispatchFakeEvent(byTestId('dot-content-thumbnail-video'), 'error'); + spectator.detectChanges(); + + expect(spectator.query(byTestId('dot-content-thumbnail-icon'))).toBeTruthy(); + }); + + it('never masks playable videos (no skeleton, video visible while loading)', () => { + create(PLAYABLE_VIDEO_THUMBNAIL); + + expect(spectator.query(byTestId('dot-content-thumbnail-loading'))).toBeFalsy(); + expect(spectator.query('dot-content-thumbnail-video').classList).not.toContain( + 'thumbnail-media--hidden' + ); + }); + + it('keeps the skeleton for non-playable first-frame videos until loadeddata', () => { + create(FRAME_VIDEO_THUMBNAIL); + + const loading = spectator.query(byTestId('dot-content-thumbnail-loading')); + + expect(loading).toBeTruthy(); + expect(loading.classList).not.toContain('thumbnail-loading--hidden'); + expect(spectator.query('dot-content-thumbnail-video').classList).toContain( + 'thumbnail-media--hidden' + ); + + spectator.dispatchFakeEvent( + byTestId('dot-content-thumbnail-video-frame'), + 'loadeddata' + ); + spectator.detectChanges(); + + expect(spectator.query(byTestId('dot-content-thumbnail-loading')).classList).toContain( + 'thumbnail-loading--hidden' + ); + expect(spectator.query('dot-content-thumbnail-video').classList).not.toContain( + 'thumbnail-media--hidden' + ); + }); + + it('emits stateChange transitions', () => { + spectator = createComponent({ + props: { thumbnail: IMAGE_THUMBNAIL }, + detectChanges: false + }); + + const states: string[] = []; + spectator.output('stateChange').subscribe((state) => states.push(state as string)); + spectator.detectChanges(); + + spectator.dispatchFakeEvent(byTestId('dot-content-thumbnail-image'), 'load'); + spectator.detectChanges(); + + expect(states).toEqual(['loading', 'loaded']); + }); + + it('resets to the model type and loading state when the thumbnail input changes', () => { + create(IMAGE_THUMBNAIL); + + spectator.dispatchFakeEvent(byTestId('dot-content-thumbnail-image'), 'error'); + spectator.detectChanges(); + expect(spectator.query(byTestId('dot-content-thumbnail-icon'))).toBeTruthy(); + + spectator.setInput('thumbnail', { ...IMAGE_THUMBNAIL, src: '/dA/other/500w' }); + + expect(spectator.query(byTestId('dot-content-thumbnail-image'))).toBeTruthy(); + expect(spectator.query(byTestId('dot-content-thumbnail-loading'))).toBeTruthy(); + }); + }); +}); diff --git a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.ts b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.ts new file mode 100644 index 00000000000..aa620b36b5f --- /dev/null +++ b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.ts @@ -0,0 +1,222 @@ +import { + ChangeDetectionStrategy, + Component, + computed, + effect, + input, + linkedSignal, + output +} from '@angular/core'; + +import { DotCMSContentlet } from '@dotcms/dotcms-models'; + +import { DotContentThumbnailIconComponent } from './components/dot-content-thumbnail-icon.component'; +import { DotContentThumbnailImageComponent } from './components/dot-content-thumbnail-image.component'; +import { DotContentThumbnailVideoComponent } from './components/dot-content-thumbnail-video.component'; +import { + DotContentThumbnail, + DotContentThumbnailState, + DotContentThumbnailType, + DotContentletThumbnailOptions +} from './models/dot-content-thumbnail.model'; +import { contentletToThumbnailModel } from './utils/dot-content-thumbnail.utils'; + +const EMPTY_THUMBNAIL: DotContentThumbnail = { + type: 'icon', + src: '', + icon: 'insert_drive_file', + alt: '' +}; + +/** + * Presentational thumbnail viewer for dotCMS content (saved contentlets and + * temp files). Renders per-type (image/svg/pdf/video/icon) through internal + * renderers, with a loading pulse and an icon fallback on media error. + * + * Two ways to feed it — pass exactly one: + * + * ```html + * + * + * + * + * + * + * ``` + * + * Fills its parent container (`h-full w-full`); media renders `object-cover` + * (`object-contain` for SVG). The icon glyph auto-scales with the container + * (override with `iconSize`) and can be recolored via the + * `--dot-content-thumbnail-icon-color` CSS custom property. + * + * Replaces the deprecated Stencil `dot-contentlet-thumbnail` web component + * and the former `dot-temp-file-thumbnail`. + */ +@Component({ + selector: 'dot-content-thumbnail', + imports: [ + DotContentThumbnailImageComponent, + DotContentThumbnailVideoComponent, + DotContentThumbnailIconComponent + ], + template: ` + @let model = $model(); + @switch ($type()) { + @case ('video') { + + + } + @case ('icon') { + + } + @default { + + } + } + + @if ($hasLoadingOverlay()) { +
+ } + `, + /* Styles are self-contained (no Tailwind): the component also ships inside + bundles without the Tailwind utilities (e.g. dotcms-binary-field-builder). */ + styles: ` + :host { + position: relative; + display: flex; + height: 100%; + width: 100%; + align-items: center; + justify-content: center; + overflow: hidden; + /* inline-size only: size containment would zero the content's height + contribution and collapse auto-height wrappers (e.g. the file field + below its 500px container breakpoint) */ + container-type: inline-size; + } + + .thumbnail-media { + transition: opacity 0.3s; + } + + .thumbnail-media--hidden { + opacity: 0; + } + + .thumbnail-loading { + position: absolute; + inset: 0; + overflow: hidden; + pointer-events: none; + background: var(--color-palette-gray-200, #e5e7eb); + transition: opacity 0.3s; + } + + .thumbnail-loading--hidden { + opacity: 0; + } + + /* Sliding-highlight shimmer, exact replica of PrimeNG p-skeleton. Uses the + PrimeNG token when the theme provides it, with the Lara default as fallback. */ + .thumbnail-loading::after { + content: ''; + position: absolute; + inset: 0; + transform: translateX(-100%); + background: linear-gradient( + 90deg, + rgba(255, 255, 255, 0), + var(--p-skeleton-animation-background, rgba(255, 255, 255, 0.4)), + rgba(255, 255, 255, 0) + ); + animation: dot-content-thumbnail-shimmer 1.2s infinite; + } + + /* Stop compositing work once the overlay has faded out */ + .thumbnail-loading--hidden::after { + animation: none; + } + + @keyframes dot-content-thumbnail-shimmer { + to { + transform: translateX(100%); + } + } + `, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class DotContentThumbnailComponent { + /** Contentlet to preview; the component resolves the thumbnail model itself. */ + $contentlet = input(undefined, { alias: 'contentlet' }); + /** Mapping options used with `contentlet` (fieldVariable, playableVideo…). */ + $options = input(undefined, { alias: 'options' }); + /** Already-resolved model; takes precedence over `contentlet`. */ + $thumbnail = input(undefined, { alias: 'thumbnail' }); + /** Explicit icon font-size override; when unset the glyph auto-scales with the container. */ + $iconSize = input(undefined, { alias: 'iconSize' }); + + stateChange = output(); + + protected readonly $model = computed(() => { + const thumbnail = this.$thumbnail(); + + if (thumbnail) { + return thumbnail; + } + + const contentlet = this.$contentlet(); + + return contentlet + ? contentletToThumbnailModel(contentlet, this.$options()) + : EMPTY_THUMBNAIL; + }); + + /** Effective render type; falls back to 'icon' on media error, resets when the model changes. */ + protected readonly $type = linkedSignal(() => this.$model().type); + + /** Skeleton applies to async media that stays hidden until it paints — not icons nor playable videos. */ + protected readonly $hasLoadingOverlay = computed(() => { + const type = this.$type(); + + return type !== 'icon' && !(type === 'video' && this.$model().playable); + }); + + /** Icon has no async load, so it starts (and resets) as 'loaded'. */ + protected readonly $state = linkedSignal(() => + this.$model().type === 'icon' ? 'loaded' : 'loading' + ); + + constructor() { + effect(() => this.stateChange.emit(this.$state())); + } + + protected onLoaded(): void { + this.$state.set('loaded'); + } + + protected onFailed(): void { + this.$state.set('error'); + this.$type.set('icon'); + } +} diff --git a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/models/dot-content-thumbnail.model.ts b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/models/dot-content-thumbnail.model.ts new file mode 100644 index 00000000000..5e6dba50f1c --- /dev/null +++ b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/models/dot-content-thumbnail.model.ts @@ -0,0 +1,49 @@ +/** + * Media type resolved for a thumbnail. `pdf` and `image` render the same way + * (an `` of a server-rendered raster) but are kept distinct so consumers + * and tests stay expressive; `svg` renders with `object-contain` so vector + * images are never cropped or distorted. + */ +export type DotContentThumbnailType = 'image' | 'svg' | 'pdf' | 'video' | 'icon'; + +/** + * Loading lifecycle of the thumbnail media. `icon` thumbnails have no async + * load and start as `loaded`. On `error` the viewer falls back to the icon + * renderer. + */ +export type DotContentThumbnailState = 'loading' | 'loaded' | 'error'; + +/** + * Resolved, render-ready thumbnail model consumed by `dot-content-thumbnail`. + * Build it with `contentletToThumbnailModel` / `tempFileToThumbnailModel`, or + * let the component resolve it by passing the `contentlet` input instead. + */ +export interface DotContentThumbnail { + type: DotContentThumbnailType; + /** + * Resolved asset URL. Empty string for `icon`. For non-playable videos it + * already carries the `#t=0.1` media fragment used to paint the first frame. + */ + src: string; + /** + * Material Symbols glyph name (e.g. `insert_drive_file`). Always populated, + * on every type, so the viewer can fall back to it when the media errors. + */ + icon: string; + alt: string; + /** Video only: render with controls (true) vs a static first-frame preview. */ + playable?: boolean; +} + +/** + * Options for `contentletToThumbnailModel`. Defaults mirror the legacy Stencil + * `dot-contentlet-thumbnail` element as used by most call sites. + */ +export interface DotContentletThumbnailOptions { + /** Binary/image field variable used to build field-scoped `/dA` URLs. */ + fieldVariable?: string; + /** Render videos as playable (`