import { NgClass, NgStyle } from '@angular/common';
import { Component, HostListener, Input, ViewChild } from '@angular/core';
import { TranslatePipe } from '@ngx-translate/core';
import * as i0 from "@angular/core";
export class ThumbnailItemVideoComponent {
    imageUrl;
    videoUrl;
    videoPlayer;
    onMouseEnter() {
        if (this.videoPlayer?.nativeElement) {
            this.videoPlayer.nativeElement.play();
        }
    }
    onMouseLeave() {
        if (this.videoPlayer?.nativeElement) {
            this.videoPlayer.nativeElement.pause();
            this.videoPlayer.nativeElement.currentTime = 0;
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailItemVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ThumbnailItemVideoComponent, isStandalone: true, selector: "s-thumbnail-item-video", inputs: { imageUrl: "imageUrl", videoUrl: "videoUrl" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], ngImport: i0, template: "<div\r\n    class=\"thumbnail-item-video\"\r\n    [ngClass]=\"{ 'thumbnail-item-video--playable': videoUrl }\"\r\n>\r\n    <div\r\n        class=\"thumbnail-image\"\r\n        [ngStyle]=\"{ backgroundImage: 'url(' + imageUrl + ')' }\"\r\n    ></div>\r\n    <div class=\"play-overlay\">\r\n        <i class=\"icon fas fa-play\"></i>\r\n        <span class=\"label\">{{ 'platform.angular_components.watch' | translate }}</span>\r\n    </div>\r\n    @if (videoUrl) {\r\n        <video\r\n            #videoPlayer\r\n            class=\"thumbnail-video-preview\"\r\n            [src]=\"videoUrl\"\r\n            [loop]=\"true\"\r\n            [muted]=\"true\"\r\n            preload=\"none\"\r\n        ></video>\r\n    }\r\n</div>\r\n", styles: [".thumbnail-item-video{cursor:pointer;height:100px;overflow:hidden;position:relative;width:100px}.thumbnail-item-video .thumbnail-image{background-repeat:no-repeat;background-size:cover;height:100%;width:100%}.thumbnail-item-video .thumbnail-video-preview{height:100%;left:0;width:100%;object-fit:cover;opacity:0;position:absolute;top:0;transition:opacity .3s ease-in-out}.thumbnail-item-video:hover .thumbnail-video-preview{opacity:1}.thumbnail-item-video .play-overlay{align-items:center;color:#fff;display:flex;flex-direction:column;gap:8px;justify-content:center;left:50%;opacity:1;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .3s ease-in-out;width:100%;z-index:10}.thumbnail-item-video .play-overlay .icon{color:#fff;font-size:24px}.thumbnail-item-video .play-overlay .label{overflow:hidden;padding:0 8px;text-overflow:ellipsis;width:100%}.thumbnail-item-video--playable:hover .play-overlay{opacity:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailItemVideoComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-thumbnail-item-video', standalone: true, imports: [NgClass, NgStyle, TranslatePipe], template: "<div\r\n    class=\"thumbnail-item-video\"\r\n    [ngClass]=\"{ 'thumbnail-item-video--playable': videoUrl }\"\r\n>\r\n    <div\r\n        class=\"thumbnail-image\"\r\n        [ngStyle]=\"{ backgroundImage: 'url(' + imageUrl + ')' }\"\r\n    ></div>\r\n    <div class=\"play-overlay\">\r\n        <i class=\"icon fas fa-play\"></i>\r\n        <span class=\"label\">{{ 'platform.angular_components.watch' | translate }}</span>\r\n    </div>\r\n    @if (videoUrl) {\r\n        <video\r\n            #videoPlayer\r\n            class=\"thumbnail-video-preview\"\r\n            [src]=\"videoUrl\"\r\n            [loop]=\"true\"\r\n            [muted]=\"true\"\r\n            preload=\"none\"\r\n        ></video>\r\n    }\r\n</div>\r\n", styles: [".thumbnail-item-video{cursor:pointer;height:100px;overflow:hidden;position:relative;width:100px}.thumbnail-item-video .thumbnail-image{background-repeat:no-repeat;background-size:cover;height:100%;width:100%}.thumbnail-item-video .thumbnail-video-preview{height:100%;left:0;width:100%;object-fit:cover;opacity:0;position:absolute;top:0;transition:opacity .3s ease-in-out}.thumbnail-item-video:hover .thumbnail-video-preview{opacity:1}.thumbnail-item-video .play-overlay{align-items:center;color:#fff;display:flex;flex-direction:column;gap:8px;justify-content:center;left:50%;opacity:1;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .3s ease-in-out;width:100%;z-index:10}.thumbnail-item-video .play-overlay .icon{color:#fff;font-size:24px}.thumbnail-item-video .play-overlay .label{overflow:hidden;padding:0 8px;text-overflow:ellipsis;width:100%}.thumbnail-item-video--playable:hover .play-overlay{opacity:0}\n"] }]
        }], propDecorators: { imageUrl: [{
                type: Input,
                args: [{ required: true }]
            }], videoUrl: [{
                type: Input,
                args: [{ required: true }]
            }], videoPlayer: [{
                type: ViewChild,
                args: ['videoPlayer']
            }], onMouseEnter: [{
                type: HostListener,
                args: ['mouseenter']
            }], onMouseLeave: [{
                type: HostListener,
                args: ['mouseleave']
            }] } });
//# sourceMappingURL=data:application/json;base64, 