import {Component, OnInit, Input, ElementRef, EventEmitter, Output, OnChanges, OnDestroy} from '@angular/core';
import {CloudinaryVideo} from '@cloudinary/url-gen';
import {
cancelCurrentlyRunningPlugins,
HtmlVideoLayer,
Plugins,
VideoPoster,
VideoSources
} from '@cloudinary/html';
@Component({
selector: 'advanced-video',
template: `<video (play)="emitPlayEvent()"
(loadstart)="emitLoadstartEvent()"
(playing)="emitPlayingEvent()"
(error)="emitErrorEvent"
(ended)="emitEndedEvent">
</video>`,
})
export class CloudinaryVideoComponent implements OnInit, OnChanges, OnDestroy {
constructor(private el: ElementRef) { }
@Input('cldVid') cldVid: CloudinaryVideo;
@Input('cldPoster') cldPoster: VideoPoster;
@Input('sources') sources: VideoSources;
@Input('plugins') plugins: Plugins;
@Input('poster') poster: string;
@Input('innerRef') innerRef: ElementRef;
@Output() play: EventEmitter<any> = new EventEmitter();
@Output() loadstart: EventEmitter<any> = new EventEmitter();
@Output() playing: EventEmitter<any> = new EventEmitter();
@Output() error: EventEmitter<any> = new EventEmitter();
@Output() ended: EventEmitter<any> = new EventEmitter();
controls = this.el.nativeElement.attributes.controls;
loop = this.el.nativeElement.attributes.loop;
muted = this.el.nativeElement.attributes.muted;
preload = this.el.nativeElement.attributes.preload;
autoPlay = this.el.nativeElement.attributes.autoplay;
playsInline = this.el.nativeElement.attributes.playsInline;
private htmlVideoLayerInstance: HtmlVideoLayer;
ngOnInit() {
this.htmlVideoLayerInstance = new HtmlVideoLayer(
this.el.nativeElement.children[0],
this.cldVid,
this.sources,
this.plugins,
this.getVideoAttributes(),
this.cldPoster
);
if (this.muted) {
this.el.nativeElement.children[0].muted = true;
}
this.attachRef();
}
ngOnChanges() {
if (this.htmlVideoLayerInstance) {
cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState);
this.htmlVideoLayerInstance.update(this.cldVid, this.sources, this.plugins, this.getVideoAttributes(), this.cldPoster);
}
}
ngOnDestroy() {
cancelCurrentlyRunningPlugins(this.htmlVideoLayerInstance.htmlPluginState);
}
getVideoAttributes() {
return {
controls: this.controls,
loop: this.loop,
muted: this.muted,
poster: this.poster,
preload: this.preload,
autoplay: this.autoPlay,
playsinline: this.playsInline
};
}
emitPlayEvent() {
this.play.emit();
}
emitLoadstartEvent() {
this.loadstart.emit();
}
emitPlayingEvent() {
this.playing.emit();
}
emitErrorEvent() {
this.error.emit();
}
emitEndedEvent() {
this.ended.emit();
}
attachRef() {
if (this.innerRef) {
this.innerRef.nativeElement = this.el.nativeElement.children[0];
}
}
}