added video event support (#300)

Author: strausr

projects/angular-cld/src/lib/cloudinary-video.component.spec.ts

@@ -1,5 +1,5 @@
 import { Component, DebugElement } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { Cloudinary } from './cloudinary.service';
 import CloudinaryConfiguration from './cloudinary-configuration.class';
@@ -401,3 +401,54 @@ describe('CloudinaryVideo', () => {
   });
 });
 
+
+describe('Video event handler', () => {
+  let localCloudinary: Cloudinary = new Cloudinary(require('cloudinary-core'),
+    { cloud_name: '@@fake_angular2_sdk@@' } as CloudinaryConfiguration);
+  let component: CloudinaryVideo;
+  let fixture: ComponentFixture<CloudinaryVideo>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CloudinaryVideo],
+      providers: [{ provide: Cloudinary , useValue: localCloudinary}]
+    });
+    fixture = TestBed.createComponent(CloudinaryVideo);
+    component = fixture.componentInstance;
+    component.publicId = 'demo';
+  });
+
+  it('should emit play event', fakeAsync(() => {
+    spyOn(component, 'emitPlayEvent');
+    const videoElement: HTMLVideoElement = fixture.nativeElement;
+    const vid = videoElement.querySelector('video');
+
+    vid.dispatchEvent(new Event('play'));
+    fixture.detectChanges();
+
+    expect(component.emitPlayEvent).toHaveBeenCalled();
+  }));
+
+  it('should emit playing event', fakeAsync(() => {
+    spyOn(component, 'emitPlayingEvent');
+    const videoElement: HTMLVideoElement = fixture.nativeElement;
+    const vid = videoElement.querySelector('video');
+
+    vid.dispatchEvent(new Event('playing'));
+    fixture.detectChanges();
+
+    expect(component.emitPlayingEvent).toHaveBeenCalled();
+  }));
+
+  it('should emit loadstart event', fakeAsync(() => {
+    spyOn(component, 'emitLoadstartEvent');
+    const videoElement: HTMLVideoElement = fixture.nativeElement;
+    const vid = videoElement.querySelector('video');
+
+    vid.dispatchEvent(new Event('loadstart'));
+    fixture.detectChanges();
+
+    expect(component.emitLoadstartEvent).toHaveBeenCalled();
+  }));
+});
+

projects/angular-cld/src/lib/cloudinary-video.component.ts

@@ -11,20 +11,28 @@ import {
   OnDestroy,
   PLATFORM_ID,
   Inject,
+  EventEmitter,
+  Output
 } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
 import { Cloudinary } from './cloudinary.service';
 import { CloudinaryTransformationDirective } from './cloudinary-transformation.directive';
 
 @Component({
   selector: 'cl-video',
-  template: '<video></video>'
+  template: '<video (play)="emitPlayEvent()" (loadstart)="emitLoadstartEvent()" (playing)="emitPlayingEvent()" (error)="emitErrorEvent" (ended)="emitEndedEvent"></video>'
 })
 // See also video reference - http://cloudinary.com/documentation/video_manipulation_and_delivery#video_transformations_reference
 export class CloudinaryVideo
   implements AfterViewInit, OnInit, OnChanges, OnDestroy {
   @Input('public-id') publicId: string;
 
+  @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();
+
   @ContentChildren(CloudinaryTransformationDirective)
   transformations: QueryList<CloudinaryTransformationDirective>;
 
@@ -103,4 +111,24 @@ export class CloudinaryVideo
     }
     element.appendChild(fragment);
   }
+
+  emitPlayEvent() {
+    this.play.emit();
+  }
+
+  emitLoadstartEvent() {
+    this.loadstart.emit();
+  }
+
+  emitPlayingEvent() {
+    this.playing.emit();
+  }
+
+  emitErrorEvent() {
+    this.error.emit();
+  }
+
+  emitEndedEvent() {
+    this.ended.emit();
+  }
 }