diff --git a/projects/angular-cld/src/lib/cloudinary-video.component.spec.ts b/projects/angular-cld/src/lib/cloudinary-video.component.spec.ts index 49971ea..f011aee 100644 --- a/projects/angular-cld/src/lib/cloudinary-video.component.spec.ts +++ b/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; + + 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(); + })); +}); + diff --git a/projects/angular-cld/src/lib/cloudinary-video.component.ts b/projects/angular-cld/src/lib/cloudinary-video.component.ts index 9efa139..2cc0f9e 100644 --- a/projects/angular-cld/src/lib/cloudinary-video.component.ts +++ b/projects/angular-cld/src/lib/cloudinary-video.component.ts @@ -11,6 +11,8 @@ import { OnDestroy, PLATFORM_ID, Inject, + EventEmitter, + Output } from '@angular/core'; import { isPlatformBrowser } from '@angular/common'; import { Cloudinary } from './cloudinary.service'; @@ -18,13 +20,19 @@ import { CloudinaryTransformationDirective } from './cloudinary-transformation.d @Component({ selector: 'cl-video', - template: '' + template: '' }) // 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 = new EventEmitter(); + @Output() loadstart: EventEmitter = new EventEmitter(); + @Output() playing: EventEmitter = new EventEmitter(); + @Output() error: EventEmitter = new EventEmitter(); + @Output() ended: EventEmitter = new EventEmitter(); + @ContentChildren(CloudinaryTransformationDirective) transformations: QueryList; @@ -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(); + } }