ngx-lite-video/esm2020/lib/components/ngx-lite-youtube/ngx-lite-youtube.component.mjs

ngx-lite-video is an Angular package for lazy loading embedded YouTube and Vimeo videos, improving page speed and user experience.

import{ChangeDetectionStrategy as e,Component as t,Input as i}from"@angular/core";import{BehaviorSubject as o}from"rxjs";import{NgxLiteVideoGeneralService as n}from"../../services/ngx-lite-video-general-service.service";import*as r from"@angular/core";import*as l from"../../services/ngx-lite-video-general-service.service";import*as a from"@angular/common";export class NgxLiteYoutubeComponent{constructor(e){this.__ngxService=e,this._showIframe$=new o(!1),this.thumbQuality="high",this.hasControls=!0,this.loop=!1,this.allowFullScreen=!0}ngOnInit(){this.init()}ngOnChanges(){this.init(),this._showIframe$.next(!1)}init(){this.__ngxService.hasNoVideoId(this.videoId),this._bannerSrc=`url(${this.__ngxService.getYouTubeBanner(this.videoId,this.thumbQuality)})`,this._videoUrl=this.__ngxService.getYouTubeUrl(this.videoId,this.hasControls,this.allowFullScreen,this.loop,this.start,this.end)}}NgxLiteYoutubeComponent.ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"13.3.12",ngImport:r,type:NgxLiteYoutubeComponent,deps:[{token:l.NgxLiteVideoGeneralService}],target:r.ɵɵFactoryTarget.Component}),NgxLiteYoutubeComponent.ɵcmp=r.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"13.3.12",type:NgxLiteYoutubeComponent,selector:"ngx-lite-youtube",inputs:{videoId:"videoId",videoTitle:"videoTitle",thumbQuality:"thumbQuality",hasControls:"hasControls",loop:"loop",start:"start",allowFullScreen:"allowFullScreen",end:"end",styleClass:"styleClass"},providers:[n],usesOnChanges:!0,ngImport:r,template:'<div\r\n  [ngStyle]="{ \'background-image\': _bannerSrc }"\r\n  class="ngx-lite-video{{ styleClass ? \' \' + styleClass : \'\' }}"\r\n  (click)="_showIframe$.next(true)"\r\n  [ngClass]="{ \'ngx-lite-with-title\': videoTitle }"\r\n>\r\n  <iframe\r\n    *ngIf="_showIframe$ | async"\r\n    width="560"\r\n    height="315"\r\n    [src]="_videoUrl"\r\n    title="YouTube video player"\r\n    frameborder="0"\r\n    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"\r\n    allowfullscreen\r\n  ></iframe>\r\n\r\n  <!-- Play btn before iframe is loaded -->\r\n  <div class="ngx-lite-video__play" *ngIf="!_showIframe$.value">\r\n    <button class="youtube-logo" aria-label="YouTube Play Button"></button>\r\n  </div>\r\n\r\n  <!-- Title shown before iframe is loaded -->\r\n  <p *ngIf="videoTitle && !_showIframe$.value" class="ngx-lite-video__title">\r\n    {{ videoTitle }}\r\n  </p>\r\n</div>\r\n',styles:[".ngx-lite-video{position:relative;width:100%;height:0;padding:56.25% 0 0;background:center/cover no-repeat #000;cursor:pointer}.ngx-lite-video *{box-sizing:border-box;margin:0;padding:0}.ngx-lite-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.ngx-lite-video__title{position:absolute;top:20px;left:20px;color:#fff;font-size:18px;font-family:YouTube Noto,Roboto,Arial,Helvetica,sans-serif;line-height:1.3}.ngx-lite-video__play{z-index:2;display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%}.ngx-lite-with-title:before{content:\"\";position:absolute;top:0;background:linear-gradient(180deg,rgba(0,0,0,.7904411765) 0%,rgba(0,0,0,0) 35%);width:100%;height:100%}.ngx-lite-video__play .youtube-logo{all:unset;width:72px;height:48px;transition:all .2s cubic-bezier(0,0,.2,1);background:center/68px 48px no-repeat url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='%23f00' fill-opacity='.9' d='M66.5 7.7c-.8-2.9-2.5-5.4-5.4-6.2C55.8.1 34 0 34 0S12.2.1 6.9 1.6c-3 .7-4.6 3.2-5.4 6.1a89.6 89.6 0 000 32.5c.8 3 2.5 5.5 5.4 6.3C12.2 47.9 34 48 34 48s21.8-.1 27.1-1.6c3-.7 4.6-3.2 5.4-6.1C68 35 68 24 68 24s0-11-1.5-16.3z'/%3E%3Cpath fill='%23fff' d='M45 24L27 14v20'/%3E%3C/svg%3E\");filter:grayscale(1)}.ngx-lite-video__play:hover .youtube-logo{filter:none}\n"],directives:[{type:a.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{type:a.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]},{type:a.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]}],pipes:{async:a.AsyncPipe},changeDetection:r.ChangeDetectionStrategy.OnPush}),r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"13.3.12",ngImport:r,type:NgxLiteYoutubeComponent,decorators:[{type:t,args:[{selector:"ngx-lite-youtube",providers:[n],changeDetection:e.OnPush,template:'<div\r\n  [ngStyle]="{ \'background-image\': _bannerSrc }"\r\n  class="ngx-lite-video{{ styleClass ? \' \' + styleClass : \'\' }}"\r\n  (click)="_showIframe$.next(true)"\r\n  [ngClass]="{ \'ngx-lite-with-title\': videoTitle }"\r\n>\r\n  <iframe\r\n    *ngIf="_showIframe$ | async"\r\n    width="560"\r\n    height="315"\r\n    [src]="_videoUrl"\r\n    title="YouTube video player"\r\n    frameborder="0"\r\n    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"\r\n    allowfullscreen\r\n  ></iframe>\r\n\r\n  <!-- Play btn before iframe is loaded -->\r\n  <div class="ngx-lite-video__play" *ngIf="!_showIframe$.value">\r\n    <button class="youtube-logo" aria-label="YouTube Play Button"></button>\r\n  </div>\r\n\r\n  <!-- Title shown before iframe is loaded -->\r\n  <p *ngIf="videoTitle && !_showIframe$.value" class="ngx-lite-video__title">\r\n    {{ videoTitle }}\r\n  </p>\r\n</div>\r\n',styles:[".ngx-lite-video{position:relative;width:100%;height:0;padding:56.25% 0 0;background:center/cover no-repeat #000;cursor:pointer}.ngx-lite-video *{box-sizing:border-box;margin:0;padding:0}.ngx-lite-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.ngx-lite-video__title{position:absolute;top:20px;left:20px;color:#fff;font-size:18px;font-family:YouTube Noto,Roboto,Arial,Helvetica,sans-serif;line-height:1.3}.ngx-lite-video__play{z-index:2;display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%}.ngx-lite-with-title:before{content:\"\";position:absolute;top:0;background:linear-gradient(180deg,rgba(0,0,0,.7904411765) 0%,rgba(0,0,0,0) 35%);width:100%;height:100%}.ngx-lite-video__play .youtube-logo{all:unset;width:72px;height:48px;transition:all .2s cubic-bezier(0,0,.2,1);background:center/68px 48px no-repeat url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='%23f00' fill-opacity='.9' d='M66.5 7.7c-.8-2.9-2.5-5.4-5.4-6.2C55.8.1 34 0 34 0S12.2.1 6.9 1.6c-3 .7-4.6 3.2-5.4 6.1a89.6 89.6 0 000 32.5c.8 3 2.5 5.5 5.4 6.3C12.2 47.9 34 48 34 48s21.8-.1 27.1-1.6c3-.7 4.6-3.2 5.4-6.1C68 35 68 24 68 24s0-11-1.5-16.3z'/%3E%3Cpath fill='%23fff' d='M45 24L27 14v20'/%3E%3C/svg%3E\");filter:grayscale(1)}.ngx-lite-video__play:hover .youtube-logo{filter:none}\n"]}]}],ctorParameters:function(){return[{type:l.NgxLiteVideoGeneralService}]},propDecorators:{videoId:[{type:i}],videoTitle:[{type:i}],thumbQuality:[{type:i}],hasControls:[{type:i}],loop:[{type:i}],start:[{type:i}],allowFullScreen:[{type:i}],end:[{type:i}],styleClass:[{type:i}]}});