@shival99/z-ui 2.1.24 → 2.1.26

package/fesm2022/shival99-z-ui-components-z-gallery.mjs

@@ -198,6 +198,8 @@ class ZGalleryItemComponent {
     formattedSize = computed(() => formatFileSize(this.file().size), ...(ngDevMode ? [{ debugName: "formattedSize" }] : []));
     category = computed(() => getFileCategory(this.file()), ...(ngDevMode ? [{ debugName: "category" }] : []));
     isImage = computed(() => this.category() === 'image', ...(ngDevMode ? [{ debugName: "isImage" }] : []));
+    isVideo = computed(() => this.category() === 'video', ...(ngDevMode ? [{ debugName: "isVideo" }] : []));
+    hasVideoPreview = computed(() => this.isVideo() && !!this.file().url, ...(ngDevMode ? [{ debugName: "hasVideoPreview" }] : []));
     fileExtension = computed(() => {
         const fileName = this.file().name;
         const parts = fileName.split('.');
@@ -312,6 +314,24 @@ class ZGalleryItemComponent {
               (load)="onImageLoad()"
               (error)="onImageError()"
             />
+          } @else if (hasVideoPreview()) {
+            <video
+              [src]="file().url"
+              [poster]="file().thumbnailUrl ?? ''"
+              class="size-full object-cover transition-all duration-500 group-hover:scale-110"
+              muted
+              playsinline
+              preload="metadata"
+            ></video>
+            <div
+              class="absolute inset-0 flex items-center justify-center bg-black/10 transition-colors duration-300 group-hover:bg-black/25"
+            >
+              <div
+                class="flex size-12 items-center justify-center rounded-full bg-black/50 shadow-lg backdrop-blur-sm transition-transform duration-300 group-hover:scale-110"
+              >
+                <i z-icon zType="lucidePlay" zSize="20" class="fill-white text-white"></i>
+              </div>
+            </div>
           } @else {
             <div
               class="flex size-full flex-col items-center justify-center gap-2 bg-gradient-to-br"
@@ -428,6 +448,18 @@ class ZGalleryItemComponent {
               class="size-full rounded-sm object-cover"
               loading="lazy"
             />
+          } @else if (hasVideoPreview()) {
+            <video
+              [src]="file().url"
+              [poster]="file().thumbnailUrl ?? ''"
+              class="size-full rounded-sm object-cover"
+              muted
+              playsinline
+              preload="metadata"
+            ></video>
+            <div class="absolute inset-0 flex items-center justify-center rounded-sm bg-black/25">
+              <i z-icon zType="lucidePlay" zSize="12" class="fill-white text-white"></i>
+            </div>
           } @else {
             <span class="absolute inset-0 opacity-30 dark:opacity-20" [class]="categoryStyle().bg"></span>
             <i
@@ -543,6 +575,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
               (load)="onImageLoad()"
               (error)="onImageError()"
             />
+          } @else if (hasVideoPreview()) {
+            <video
+              [src]="file().url"
+              [poster]="file().thumbnailUrl ?? ''"
+              class="size-full object-cover transition-all duration-500 group-hover:scale-110"
+              muted
+              playsinline
+              preload="metadata"
+            ></video>
+            <div
+              class="absolute inset-0 flex items-center justify-center bg-black/10 transition-colors duration-300 group-hover:bg-black/25"
+            >
+              <div
+                class="flex size-12 items-center justify-center rounded-full bg-black/50 shadow-lg backdrop-blur-sm transition-transform duration-300 group-hover:scale-110"
+              >
+                <i z-icon zType="lucidePlay" zSize="20" class="fill-white text-white"></i>
+              </div>
+            </div>
           } @else {
             <div
               class="flex size-full flex-col items-center justify-center gap-2 bg-gradient-to-br"
@@ -659,6 +709,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
               class="size-full rounded-sm object-cover"
               loading="lazy"
             />
+          } @else if (hasVideoPreview()) {
+            <video
+              [src]="file().url"
+              [poster]="file().thumbnailUrl ?? ''"
+              class="size-full rounded-sm object-cover"
+              muted
+              playsinline
+              preload="metadata"
+            ></video>
+            <div class="absolute inset-0 flex items-center justify-center rounded-sm bg-black/25">
+              <i z-icon zType="lucidePlay" zSize="12" class="fill-white text-white"></i>
+            </div>
           } @else {
             <span class="absolute inset-0 opacity-30 dark:opacity-20" [class]="categoryStyle().bg"></span>
             <i