chore(edit-content): Use DotContentletThumbnail Component in Binary File

core-web/libs/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/dot-contentlet-thumbnail.tsx

@@ -24,6 +24,9 @@ export class DotContentletThumbnail {
     @Prop()
     showVideoThumbnail = true;
 
+    @Prop()
+    playableVideo = false;
+
     @Prop()
     contentlet: DotContentletItem;
 
@@ -49,7 +52,11 @@ export class DotContentletThumbnail {
         return (
             <Host>
                 {this.shouldShowVideoThumbnail() ? (
-                    <dot-video-thumbnail contentlet={this.contentlet} cover={this.cover} />
+                    <dot-video-thumbnail
+                        contentlet={this.contentlet}
+                        cover={this.cover}
+                        playable={this.playableVideo}
+                    />
                 ) : this.renderImage ? (
                     <div class={`thumbnail ${imgClass}`} style={{ 'background-image': image }}>
                         <img
@@ -73,7 +80,9 @@ export class DotContentletThumbnail {
     private getImageURL(): string {
         return this.contentlet.mimeType === 'application/pdf'
             ? `/contentAsset/image/${this.contentlet.inode}/${this.contentlet.titleImage}/pdf_page/1/resize_w/250/quality_q/45`
-            : `/dA/${this.contentlet.inode}/500w/50q?r=${this.contentlet.modDateMilis}`;
+            : `/dA/${this.contentlet.inode}/500w/50q?r=${
+                  this.contentlet.modDateMilis || this.contentlet.modDate
+              }`;
     }
 
     private switchToIcon(): any {
@@ -87,6 +96,7 @@ export class DotContentletThumbnail {
     }
 
     private shouldShowVideoThumbnail() {
+        console.log(this.contentlet);
         return this.contentlet?.mimeType?.includes('video') && this.showVideoThumbnail;
     }
 }

core-web/libs/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/readme.md

@@ -2,7 +2,6 @@
 
 <!-- Auto Generated Below -->
 
-
 ## Properties
 
 | Property             | Attribute              | Description | Type                | Default     |
@@ -12,22 +11,23 @@
 | `cover`              | `cover`                |             | `boolean`           | `true`      |
 | `height`             | `height`               |             | `string`            | `''`        |
 | `iconSize`           | `icon-size`            |             | `string`            | `''`        |
+| `playableVideo`      | `playable-video`       |             | `boolean`           | `false`     |
 | `showVideoThumbnail` | `show-video-thumbnail` |             | `boolean`           | `true`      |
 | `width`              | `width`                |             | `string`            | `''`        |
 
-
 ## Dependencies
 
 ### Used by
 
- - [dot-card-contentlet](../../components/dot-card-contentlet)
+-   [dot-card-contentlet](../../components/dot-card-contentlet)
 
 ### Depends on
 
-- [dot-video-thumbnail](../dot-video-thumbnail)
-- [dot-contentlet-icon](../dot-contentlet-icon)
+-   [dot-video-thumbnail](../dot-video-thumbnail)
+-   [dot-contentlet-icon](../dot-contentlet-icon)
 
 ### Graph
+
 ```mermaid
 graph TD;
   dot-contentlet-thumbnail --> dot-video-thumbnail
@@ -36,6 +36,6 @@ graph TD;
   style dot-contentlet-thumbnail fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
-----------------------------------------------
+---
 
-*Built with [StencilJS](https://stenciljs.com/)*
+_Built with [StencilJS](https://stenciljs.com/)_

core-web/libs/dotcms-webcomponents/src/elements/dot-video-thumbnail/dot-video-thumbnail.scss

@@ -3,7 +3,8 @@ dot-video-thumbnail {
     height: 100%;
 
     .thumbnail,
-    img {
+    img,
+    video {
         width: 100%;
         height: 100%;
     }

core-web/libs/dotcms-webcomponents/src/elements/dot-video-thumbnail/dot-video-thumbnail.tsx

@@ -16,6 +16,14 @@ export class DotVideoThumbnail {
      */
     @Prop() contentlet: DotContentletItem;
 
+    /**
+     * If the video is playable or not.
+     *
+     * @type {boolean}
+     * @memberof DotVideoThumbnail
+     */
+    @Prop() playable: boolean = false;
+
     /**
      *
      *
@@ -31,10 +39,14 @@ export class DotVideoThumbnail {
 
         return (
             <Host>
-                {this.src && (
-                    <div class={`thumbnail ${cssClass}`} style={bgImage}>
-                        <img src={this.src} alt={title} />
-                    </div>
+                {this.playable ? (
+                    <video src={`/dA/${this.contentlet.inode}`} controls></video>
+                ) : (
+                    this.src && (
+                        <div class={`thumbnail ${cssClass}`} style={bgImage}>
+                            <img src={this.src} alt={title} />
+                        </div>
+                    )
                 )}
             </Host>
         );

core-web/libs/dotcms-webcomponents/src/elements/dot-video-thumbnail/readme.md

@@ -2,28 +2,28 @@
 
 <!-- Auto Generated Below -->
 
-
 ## Properties
 
-| Property     | Attribute | Description | Type                | Default     |
-| ------------ | --------- | ----------- | ------------------- | ----------- |
-| `contentlet` | --        |             | `DotContentletItem` | `undefined` |
-| `cover`      | `cover`   |             | `boolean`           | `true`      |
-
+| Property     | Attribute  | Description                      | Type                | Default     |
+| ------------ | ---------- | -------------------------------- | ------------------- | ----------- |
+| `contentlet` | --         |                                  | `DotContentletItem` | `undefined` |
+| `cover`      | `cover`    |                                  | `boolean`           | `true`      |
+| `playable`   | `playable` | If the video is playable or not. | `boolean`           | `false`     |
 
 ## Dependencies
 
 ### Used by
 
- - [dot-contentlet-thumbnail](../dot-contentlet-thumbnail)
+-   [dot-contentlet-thumbnail](../dot-contentlet-thumbnail)
 
 ### Graph
+
 ```mermaid
 graph TD;
   dot-contentlet-thumbnail --> dot-video-thumbnail
   style dot-video-thumbnail fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
-----------------------------------------------
+---
 
-*Built with [StencilJS](https://stenciljs.com/)*
+_Built with [StencilJS](https://stenciljs.com/)_

core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/components/dot-binary-field-editor/dot-binary-field-editor.component.spec.ts

@@ -101,6 +101,20 @@ describe('DotBinaryFieldEditorComponent', () => {
         spectator.detectChanges();
     });
 
+    it('should emit cancel event on escape keydown', () => {
+        const event = new KeyboardEvent('keydown', { key: 'Escape' });
+
+        const cancelSpy = jest.spyOn(spectator.component.cancel, 'emit');
+        const preventDefaultSpy = jest.spyOn(event, 'preventDefault');
+        const stopPropagationSpy = jest.spyOn(event, 'stopPropagation');
+
+        document.dispatchEvent(event);
+
+        expect(cancelSpy).toHaveBeenCalled();
+        expect(preventDefaultSpy).toHaveBeenCalled();
+        expect(stopPropagationSpy).toHaveBeenCalled();
+    });
+
     describe('label', () => {
         it('should set label and have css class required', () => {
             const label = spectator.query(byTestId('editor-label'));

core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/components/dot-binary-field-editor/dot-binary-field-editor.component.ts

@@ -11,6 +11,7 @@ import {
     ChangeDetectorRef,
     Component,
     EventEmitter,
+    HostListener,
     Input,
     OnInit,
     Output,
@@ -103,6 +104,19 @@ export class DotBinaryFieldEditorComponent implements OnInit {
         return this.form.get('content') as FormControl;
     }
 
+    /**
+     * Close the editor when the user press ESC
+     * And prevent the default behavior of the edit conten iframe
+     *
+     * @param {*} event
+     * @memberof DotBinaryFieldEditorComponent
+     */
+    @HostListener('document:keydown.escape', ['$event']) onEscape(event) {
+        this.cancel.emit();
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
     ngOnInit(): void {
         this.setFormValues();
         this.name.valueChanges

core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.html

@@ -1,29 +1,41 @@
-<div class="preview-container" [ngClass]="{ 'preview-container--fade': file.content }">
-    <div class="preview-code_container" *ngIf="file.content; else contentThumnail">
-        <code>{{ file.content }}</code>
+<div class="preview-container" [ngClass]="{ 'preview-container--fade': content }">
+    <div
+        class="preview-code_container"
+        *ngIf="content; else contentThumnail"
+        (click)="this.editFile.emit()"
+        data-testId="code-preview">
+        <code>{{ content }}</code>
     </div>
 
     <ng-template #contentThumnail>
         <div class="preview-image__container">
-            <dot-content-thumbnail
-                [url]="file.url"
-                [inode]="file.inode"
-                [name]="file.name"
-                [contentType]="file.contentType"
-                [titleImage]="file.titleImage"
-                [objectFit]="objectFit"
-                [iconSize]="'48px'"></dot-content-thumbnail>
+            <ng-container *ngIf="tempFile; else contentletThumbnail">
+                <dot-temp-file-thumbnail
+                    [tempFile]="tempFile"
+                    [iconSize]="'48px'"
+                    data-testId="temp-file-thumbnail"></dot-temp-file-thumbnail>
+            </ng-container>
+
+            <ng-template #contentletThumbnail>
+                <dot-contentlet-thumbnail
+                    [iconSize]="'48px'"
+                    [cover]="false"
+                    [contentlet]="contentlet"
+                    [playableVideo]="true"
+                    data-testId="contentlet-thumbnail">
+                </dot-contentlet-thumbnail>
+            </ng-template>
         </div>
 
         <div class="preview-metadata__container">
-            <span class="preview-metadata_header">{{ file.name }}</span>
-            <div class="preview-metadata" *ngIf="file.width && file.height">
+            <span class="preview-metadata_header">{{ metadata.name }}</span>
+            <div class="preview-metadata" *ngIf="metadata.width && metadata.height">
                 <i class="pi pi-arrows-alt"></i>
-                <span>{{ file.width }} x {{ file.height }}</span>
+                <span>{{ metadata.width }} x {{ metadata.height }}</span>
             </div>
-            <div class="preview-metadata" *ngIf="file.fileSize">
+            <div class="preview-metadata" *ngIf="metadata.fileSize">
                 <i class="pi pi-file"></i>
-                <span>{{ file.fileSize | dotFileSizeFormat }}</span>
+                <span>{{ metadata.fileSize | dotFileSizeFormat }}</span>
             </div>
         </div>
     </ng-template>
@@ -67,14 +79,14 @@
 
 <p-overlayPanel #op>
     <div class="preview-metadata__responsive">
-        <span class="preview-metadata_header">{{ file.name }}</span>
-        <div *ngIf="file.width && file.height">
+        <span class="preview-metadata_header">{{ metadata.name }}</span>
+        <div *ngIf="metadata.width && metadata.height">
             {{ 'dot.binary.field.file.dimension' | dm }}:
-            <span>{{ file.width }}px, {{ file.height }}px</span>
+            <span>{{ metadata.width }}px, {{ metadata.height }}px</span>
         </div>
-        <div *ngIf="file.fileSize">
+        <div *ngIf="metadata.fileSize">
             {{ 'dot.binary.field.file.size' | dm }}:
-            <span>{{ file.fileSize }} Bytes</span>
+            <span>{{ metadata.fileSize }} Bytes</span>
         </div>
     </div>
 </p-overlayPanel>

core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.scss

@@ -6,6 +6,12 @@
     height: 100%;
 }
 
+dot-contentlet-thumbnail::ng-deep {
+    img {
+        object-fit: cover;
+    }
+}
+
 .preview-container {
     display: flex;
     gap: $spacing-1;
@@ -29,9 +35,11 @@
     height: 100%;
     width: 100%;
     user-select: none;
+    cursor: pointer;
 }
 
-.preview-image__container {
+.preview-image__container,
+dot-contentlet-thumbnail {
     height: 100%;
     width: 100%;
     display: flex;
@@ -49,6 +57,7 @@
     bottom: 0;
     left: 0;
     border-radius: $border-radius-md;
+    pointer-events: none;
 }
 
 .preview-metadata__container,
@@ -98,7 +107,6 @@
     justify-content: flex-end;
     align-items: center;
     gap: $spacing-1;
-    width: 100%;
     z-index: 100;
 }
 
@@ -118,6 +126,7 @@ code {
     width: 100%;
     white-space: pre-wrap;
     overflow: hidden;
+    line-height: normal;
 }
 
 @container preview (min-width: 376px) {