import { Component, Input, ViewChild, HostListener } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@ngx-translate/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: "14.0.0", version: "18.2.14", type: ThumbnailItemVideoComponent, 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 class=\"thumbnail-item-video\" [ngClass]=\"{ 'thumbnail-item-video--playable': videoUrl }\">\n    <div\n        class=\"thumbnail-image\"\n        [ngStyle]=\"{'backgroundImage': 'url(' + imageUrl + ')'}\">\n    </div>\n    <div class=\"play-overlay\">\n        <i class=\"icon fas fa-play\"></i>\n        <span class=\"label\">{{ \"platform.angular_components.watch\" | translate }}</span>\n    </div>\n    <video\n        *ngIf=\"videoUrl\"\n        #videoPlayer\n        class=\"thumbnail-video-preview\"\n        [src]=\"videoUrl\"\n        [loop]=\"true\"\n        [muted]=\"true\"\n        preload=\"none\">\n    </video>\n</div>\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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.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", template: "<div class=\"thumbnail-item-video\" [ngClass]=\"{ 'thumbnail-item-video--playable': videoUrl }\">\n    <div\n        class=\"thumbnail-image\"\n        [ngStyle]=\"{'backgroundImage': 'url(' + imageUrl + ')'}\">\n    </div>\n    <div class=\"play-overlay\">\n        <i class=\"icon fas fa-play\"></i>\n        <span class=\"label\">{{ \"platform.angular_components.watch\" | translate }}</span>\n    </div>\n    <video\n        *ngIf=\"videoUrl\"\n        #videoPlayer\n        class=\"thumbnail-video-preview\"\n        [src]=\"videoUrl\"\n        [loop]=\"true\"\n        [muted]=\"true\"\n        preload=\"none\">\n    </video>\n</div>\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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGh1bWJuYWlsLWl0ZW0tdmlkZW8uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1jb21wb25lbnRzL3RodW1ibmFpbHMvc3JjL2xpYi90aHVtYm5haWxzL2NvbXBvbmVudHMvdGh1bWJuYWlsLWl0ZW0vY29tcG9uZW50cy90aHVtYm5haWwtaXRlbS12aWRlby90aHVtYm5haWwtaXRlbS12aWRlby5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNvbXBvbmVudHMvdGh1bWJuYWlscy9zcmMvbGliL3RodW1ibmFpbHMvY29tcG9uZW50cy90aHVtYm5haWwtaXRlbS9jb21wb25lbnRzL3RodW1ibmFpbC1pdGVtLXZpZGVvL3RodW1ibmFpbC1pdGVtLXZpZGVvLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFjLFNBQVMsRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUFPdEYsTUFBTSxPQUFPLDJCQUEyQjtJQUU3QixRQUFRLENBQVU7SUFHbEIsUUFBUSxDQUFVO0lBRUMsV0FBVyxDQUFjO0lBRXZCLFlBQVk7UUFDcEMsSUFBSSxJQUFJLENBQUMsV0FBVyxFQUFFLGFBQWEsRUFBRSxDQUFDO1lBQ2xDLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQzFDLENBQUM7SUFDTCxDQUFDO0lBRTJCLFlBQVk7UUFDcEMsSUFBSSxJQUFJLENBQUMsV0FBVyxFQUFFLGFBQWEsRUFBRSxDQUFDO1lBQ2xDLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRSxDQUFDO1lBQ3ZDLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLFdBQVcsR0FBRyxDQUFDLENBQUM7UUFDbkQsQ0FBQztJQUNMLENBQUM7d0dBcEJRLDJCQUEyQjs0RkFBM0IsMkJBQTJCLDJUQ1B4Qyxvb0JBbUJBOzs0RkRaYSwyQkFBMkI7a0JBTHZDLFNBQVM7K0JBQ0ksd0JBQXdCOzhCQU0zQixRQUFRO3NCQURkLEtBQUs7dUJBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO2dCQUlsQixRQUFRO3NCQURkLEtBQUs7dUJBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO2dCQUdDLFdBQVc7c0JBQXBDLFNBQVM7dUJBQUMsYUFBYTtnQkFFSSxZQUFZO3NCQUF2QyxZQUFZO3VCQUFDLFlBQVk7Z0JBTUUsWUFBWTtzQkFBdkMsWUFBWTt1QkFBQyxZQUFZIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgRWxlbWVudFJlZiwgVmlld0NoaWxkLCBIb3N0TGlzdGVuZXIgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogXCJzLXRodW1ibmFpbC1pdGVtLXZpZGVvXCIsXG4gICAgdGVtcGxhdGVVcmw6IFwiLi90aHVtYm5haWwtaXRlbS12aWRlby5jb21wb25lbnQuaHRtbFwiLFxuICAgIHN0eWxlVXJsczogW1wiLi90aHVtYm5haWwtaXRlbS12aWRlby5jb21wb25lbnQuc2Nzc1wiXSxcbn0pXG5leHBvcnQgY2xhc3MgVGh1bWJuYWlsSXRlbVZpZGVvQ29tcG9uZW50IHtcbiAgICBASW5wdXQoeyByZXF1aXJlZDogdHJ1ZSB9KVxuICAgIHB1YmxpYyBpbWFnZVVybCE6IHN0cmluZztcblxuICAgIEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pXG4gICAgcHVibGljIHZpZGVvVXJsITogc3RyaW5nO1xuXG4gICAgQFZpZXdDaGlsZChcInZpZGVvUGxheWVyXCIpIHZpZGVvUGxheWVyITogRWxlbWVudFJlZjtcblxuICAgIEBIb3N0TGlzdGVuZXIoXCJtb3VzZWVudGVyXCIpIG9uTW91c2VFbnRlcigpOiB2b2lkIHtcbiAgICAgICAgaWYgKHRoaXMudmlkZW9QbGF5ZXI/Lm5hdGl2ZUVsZW1lbnQpIHtcbiAgICAgICAgICAgIHRoaXMudmlkZW9QbGF5ZXIubmF0aXZlRWxlbWVudC5wbGF5KCk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBASG9zdExpc3RlbmVyKFwibW91c2VsZWF2ZVwiKSBvbk1vdXNlTGVhdmUoKTogdm9pZCB7XG4gICAgICAgIGlmICh0aGlzLnZpZGVvUGxheWVyPy5uYXRpdmVFbGVtZW50KSB7XG4gICAgICAgICAgICB0aGlzLnZpZGVvUGxheWVyLm5hdGl2ZUVsZW1lbnQucGF1c2UoKTtcbiAgICAgICAgICAgIHRoaXMudmlkZW9QbGF5ZXIubmF0aXZlRWxlbWVudC5jdXJyZW50VGltZSA9IDA7XG4gICAgICAgIH1cbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwidGh1bWJuYWlsLWl0ZW0tdmlkZW9cIiBbbmdDbGFzc109XCJ7ICd0aHVtYm5haWwtaXRlbS12aWRlby0tcGxheWFibGUnOiB2aWRlb1VybCB9XCI+XG4gICAgPGRpdlxuICAgICAgICBjbGFzcz1cInRodW1ibmFpbC1pbWFnZVwiXG4gICAgICAgIFtuZ1N0eWxlXT1cInsnYmFja2dyb3VuZEltYWdlJzogJ3VybCgnICsgaW1hZ2VVcmwgKyAnKSd9XCI+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInBsYXktb3ZlcmxheVwiPlxuICAgICAgICA8aSBjbGFzcz1cImljb24gZmFzIGZhLXBsYXlcIj48L2k+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwibGFiZWxcIj57eyBcInBsYXRmb3JtLmFuZ3VsYXJfY29tcG9uZW50cy53YXRjaFwiIHwgdHJhbnNsYXRlIH19PC9zcGFuPlxuICAgIDwvZGl2PlxuICAgIDx2aWRlb1xuICAgICAgICAqbmdJZj1cInZpZGVvVXJsXCJcbiAgICAgICAgI3ZpZGVvUGxheWVyXG4gICAgICAgIGNsYXNzPVwidGh1bWJuYWlsLXZpZGVvLXByZXZpZXdcIlxuICAgICAgICBbc3JjXT1cInZpZGVvVXJsXCJcbiAgICAgICAgW2xvb3BdPVwidHJ1ZVwiXG4gICAgICAgIFttdXRlZF09XCJ0cnVlXCJcbiAgICAgICAgcHJlbG9hZD1cIm5vbmVcIj5cbiAgICA8L3ZpZGVvPlxuPC9kaXY+XG4iXX0=