ngx-lite-video/esm2020/lib/components/ngx-lite-vimeo/ngx-lite-vimeo.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 a from"../../services/ngx-lite-video-general-service.service";import*as s from"@angular/common";export class NgxLiteVimeoComponent{constructor(e){this.__ngxService=e,this._showIframe$=new o(!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=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"13.3.12",ngImport:r,type:NgxLiteVimeoComponent,deps:[{token:a.NgxLiteVideoGeneralService}],target:r.ɵɵFactoryTarget.Component}),NgxLiteVimeoComponent.ɵcmp=r.ɵɵ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:[n],usesOnChanges:!0,ngImport:r,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:s.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:s.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{type:s.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]}],pipes:{async:s.AsyncPipe},changeDetection:r.ChangeDetectionStrategy.OnPush}),r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"13.3.12",ngImport:r,type:NgxLiteVimeoComponent,decorators:[{type:t,args:[{selector:"ngx-lite-vimeo",providers:[n],changeDetection:e.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:a.NgxLiteVideoGeneralService}]},propDecorators:{videoId:[{type:i}],thumbQuality:[{type:i}],showTitle:[{type:i}],hasControls:[{type:i}],loop:[{type:i}],isBackground:[{type:i}],styleClass:[{type:i}]}});