ngx-lite-video/fesm2015/ngx-lite-video.mjs

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

import*as e from"@angular/core";import{Injectable as t,Optional as i,Component as o,ChangeDetectionStrategy as n,Input as r,NgModule as l}from"@angular/core";import*as a from"@angular/common";import{CommonModule as s}from"@angular/common";import*as g from"@angular/common/http";import{HttpClientModule as p}from"@angular/common/http";import{map as d,catchError as c,of as u,BehaviorSubject as $}from"rxjs";import*as m from"@angular/platform-browser";class NgxLiteVideoGeneralService{constructor(e,t){this.__domSanitizer=e,this.__http=t,this.__youtubeSizes={sd:"sddefault",medium:"mqdefault",high:"hqdefault",max:"maxresdefault"},this.__thumbHelper={max:"thumbnail_large",high:"thumbnail_large",medium:"thumbnail_medium",sd:"thumbnail_small"}}getYouTubeBanner(e,t){return`https://img.youtube.com/vi/${e}/${this.__youtubeSizes[t]}.jpg`}getYouTubeUrl(e,t,i,o,n,r){return this.__domSanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube-nocookie.com/embed/${e}?autoplay=1&controls=${t?"1":"0"}${o?"&playlist="+e+"&loop=1":""}${n?"&start="+n:""}${r?"&end="+r:""}${i?"&fs=1":"&fs=0"}`)}getVimeoVideoUrl(e,t,i,o){return this.__domSanitizer.bypassSecurityTrustResourceUrl(`https://player.vimeo.com/video/${e}?autoplay=1${t?"&controls=true":"&controls=false"}${i?"&loop=true":""}${o?"&background=true":""}`)}getVimeoBanner(e,t){return this.__http.get(`https://vimeo.com/api/v2/video/${e}.json`).pipe(d(e=>({bannerSrc:`url(${e[0][this.__thumbHelper[t]]})`,title:e[0].title})),c(()=>u({bannerSrc:"",title:""})))}hasNoVideoId(e){if(!e)throw Error("Video ID MUST be provided")}}NgxLiteVideoGeneralService.ɵfac=e.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"13.3.12",ngImport:e,type:NgxLiteVideoGeneralService,deps:[{token:m.DomSanitizer},{token:g.HttpClient,optional:!0}],target:e.ɵɵFactoryTarget.Injectable}),NgxLiteVideoGeneralService.ɵprov=e.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"13.3.12",ngImport:e,type:NgxLiteVideoGeneralService}),e.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"13.3.12",ngImport:e,type:NgxLiteVideoGeneralService,decorators:[{type:t}],ctorParameters:function(){return[{type:m.DomSanitizer},{type:g.HttpClient,decorators:[{type:i}]}]}});class NgxLiteVimeoComponent{constructor(e){this.__ngxService=e,this._showIframe$=new $(!1),this.thumbQuality="high",this.showTitle=!1,this.hasControls=!0,this.loop=!1,this.isBackground=!1}ngOnInit(){this.init()}ngOnChanges(){this.init(),this._showIframe$.next(!1)}init(){this.__ngxService.hasNoVideoId(this.videoId),this._vimeoBanner$=this.__ngxService.getVimeoBanner(this.videoId,this.thumbQuality),this._videoUrl=this.__ngxService.getVimeoVideoUrl(this.videoId,this.hasControls,this.loop,this.isBackground)}}NgxLiteVimeoComponent.ɵfac=e.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"13.3.12",ngImport:e,type:NgxLiteVimeoComponent,deps:[{token:NgxLiteVideoGeneralService}],target:e.ɵɵFactoryTarget.Component}),NgxLiteVimeoComponent.ɵcmp=e.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"13.3.12",type:NgxLiteVimeoComponent,selector:"ngx-lite-vimeo",inputs:{videoId:"videoId",thumbQuality:"thumbQuality",showTitle:"showTitle",hasControls:"hasControls",loop:"loop",isBackground:"isBackground",styleClass:"styleClass"},providers:[NgxLiteVideoGeneralService],usesOnChanges:!0,ngImport:e,template:'<div\r\n  *ngIf="_vimeoBanner$ | async as vimeoBanner"\r\n  [ngStyle]="{ \'background-image\': vimeoBanner.bannerSrc }"\r\n  class="ngx-lite-video{{ styleClass ? \' \' + styleClass : \'\' }}"\r\n  (click)="_showIframe$.next(true)"\r\n  [ngClass]="{ \'ngx-lite-with-title\': showTitle }"\r\n>\r\n  <iframe\r\n    *ngIf="_showIframe$ | async"\r\n    width="640"\r\n    height="360"\r\n    frameborder="0"\r\n    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"\r\n    allowfullscreen\r\n    [src]="_videoUrl"\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="vimeo-logo" aria-label="Vimeo Play Button"></button>\r\n  </div>\r\n\r\n  <!-- Title shown before iframe is loaded -->\r\n  <p *ngIf="showTitle && !_showIframe$.value" class="ngx-lite-video__title">\r\n    {{ vimeoBanner.title }}\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 .vimeo-logo{all:unset;width:72px;height:48px;background:rgba(23,35,34,.75);opacity:.8;border-radius:8px;transition:all .2s cubic-bezier(0,0,.2,1);display:flex;align-items:center;justify-content:center}.ngx-lite-video__play .vimeo-logo:after{content:"";border-color:transparent transparent transparent #fff;border-style:solid;border-width:10px 0 10px 20px}.ngx-lite-video__play:hover .vimeo-logo{background:#00adef;opacity:1}\n'],directives:[{type:a.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:a.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{type:a.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]}],pipes:{async:a.AsyncPipe},changeDetection:e.ChangeDetectionStrategy.OnPush}),e.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"13.3.12",ngImport:e,type:NgxLiteVimeoComponent,decorators:[{type:o,args:[{selector:"ngx-lite-vimeo",providers:[NgxLiteVideoGeneralService],changeDetection:n.OnPush,template:'<div\r\n  *ngIf="_vimeoBanner$ | async as vimeoBanner"\r\n  [ngStyle]="{ \'background-image\': vimeoBanner.bannerSrc }"\r\n  class="ngx-lite-video{{ styleClass ? \' \' + styleClass : \'\' }}"\r\n  (click)="_showIframe$.next(true)"\r\n  [ngClass]="{ \'ngx-lite-with-title\': showTitle }"\r\n>\r\n  <iframe\r\n    *ngIf="_showIframe$ | async"\r\n    width="640"\r\n    height="360"\r\n    frameborder="0"\r\n    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"\r\n    allowfullscreen\r\n    [src]="_videoUrl"\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="vimeo-logo" aria-label="Vimeo Play Button"></button>\r\n  </div>\r\n\r\n  <!-- Title shown before iframe is loaded -->\r\n  <p *ngIf="showTitle && !_showIframe$.value" class="ngx-lite-video__title">\r\n    {{ vimeoBanner.title }}\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 .vimeo-logo{all:unset;width:72px;height:48px;background:rgba(23,35,34,.75);opacity:.8;border-radius:8px;transition:all .2s cubic-bezier(0,0,.2,1);display:flex;align-items:center;justify-content:center}.ngx-lite-video__play .vimeo-logo:after{content:"";border-color:transparent transparent transparent #fff;border-style:solid;border-width:10px 0 10px 20px}.ngx-lite-video__play:hover .vimeo-logo{background:#00adef;opacity:1}\n']}]}],ctorParameters:function(){return[{type:NgxLiteVideoGeneralService}]},propDecorators:{videoId:[{type:r}],thumbQuality:[{type:r}],showTitle:[{type:r}],hasControls:[{type:r}],loop:[{type:r}],isBackground:[{type:r}],styleClass:[{type:r}]}});class NgxLiteVimeoModule{}NgxLiteVimeoModule.ɵfac=e.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"13.3.12",ngImport:e,type:NgxLiteVimeoModule,deps:[],target:e.ɵɵFactoryTarget.NgModule}),NgxLiteVimeoModule.ɵmod=e.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"13.3.12",ngImport:e,type:NgxLiteVimeoModule,declarations:[NgxLiteVimeoComponent],imports:[s,p],exports:[NgxLiteVimeoComponent]}),NgxLiteVimeoModule.ɵinj=e.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"13.3.12",ngImport:e,type:NgxLiteVimeoModule,imports:[[s,p]]}),e.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"13.3.12",ngImport:e,type:NgxLiteVimeoModule,decorators:[{type:l,args:[{declarations:[NgxLiteVimeoComponent],imports:[s,p],exports:[NgxLiteVimeoComponent]}]}]});class NgxLiteYoutubeComponent{constructor(e){this.__ngxService=e,this._showIframe$=new $(!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=e.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"13.3.12",ngImport:e,type:NgxLiteYoutubeComponent,deps:[{token:NgxLiteVideoGeneralService}],target:e.ɵɵFactoryTarget.Component}),NgxLiteYoutubeComponent.ɵcmp=e.ɵɵ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:[NgxLiteVideoGeneralService],usesOnChanges:!0,ngImport:e,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:e.ChangeDetectionStrategy.OnPush}),e.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"13.3.12",ngImport:e,type:NgxLiteYoutubeComponent,decorators:[{type:o,args:[{selector:"ngx-lite-youtube",providers:[NgxLiteVideoGeneralService],changeDetection:n.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:NgxLiteVideoGeneralService}]},propDecorators:{videoId:[{type:r}],videoTitle:[{type:r}],thumbQuality:[{type:r}],hasControls:[{type:r}],loop:[{type:r}],start:[{type:r}],allowFullScreen:[{type:r}],end:[{type:r}],styleClass:[{type:r}]}});class NgxLiteYoutubeModule{}NgxLiteYoutubeModule.ɵfac=e.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"13.3.12",ngImport:e,type:NgxLiteYoutubeModule,deps:[],target:e.ɵɵFactoryTarget.NgModule}),NgxLiteYoutubeModule.ɵmod=e.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"13.3.12",ngImport:e,type:NgxLiteYoutubeModule,declarations:[NgxLiteYoutubeComponent],imports:[s],exports:[NgxLiteYoutubeComponent]}),NgxLiteYoutubeModule.ɵinj=e.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"13.3.12",ngImport:e,type:NgxLiteYoutubeModule,imports:[[s]]}),e.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"13.3.12",ngImport:e,type:NgxLiteYoutubeModule,decorators:[{type:l,args:[{declarations:[NgxLiteYoutubeComponent],imports:[s],exports:[NgxLiteYoutubeComponent]}]}]});export{NgxLiteVimeoComponent,NgxLiteVimeoModule,NgxLiteYoutubeComponent,NgxLiteYoutubeModule};