added viideo ref (#127)

Author: strausr

packages/angular/projects/cloudinary-library/src/lib/cloudinary-video.component.ts

@@ -53,6 +53,7 @@ export class CloudinaryVideoComponent implements OnInit, OnChanges, OnDestroy {
  @Input('sources') sources: VideoSources;
  @Input('plugins') plugins: Plugins;
  @Input('poster') poster: string;
+ @Input('innerRef') innerRef: ElementRef;
 
  // Event emitters
  @Output() play: EventEmitter<any> = new EventEmitter();
@@ -89,6 +90,9 @@ export class CloudinaryVideoComponent implements OnInit, OnChanges, OnDestroy {
  if (this.muted) {
  this.el.nativeElement.children[0].muted = true;
  }
+
+ // attach ref to innerRef input
+ this.attachRef();
  }
 
  /**
@@ -144,4 +148,13 @@ export class CloudinaryVideoComponent implements OnInit, OnChanges, OnDestroy {
  emitEndedEvent() {
  this.ended.emit();
  }
+
+ /**
+ * Attach both this.videoRef and props.innerRef as ref to the given element.
+ */
+ attachRef() {
+ if (this.innerRef) {
+ this.innerRef.nativeElement = this.el.nativeElement.children[0];
+ }
+ }
 }

packages/angular/projects/cloudinary-library/src/tests/cloudinary-video.component.spec.ts

@@ -3,6 +3,7 @@ import { CloudinaryVideoComponent } from '../lib/cloudinary-video.component';
 import {CloudinaryVideo} from '@cloudinary/url-gen';
 import { auto, vp9 } from '@cloudinary/url-gen/qualifiers/videoCodec';
 import { videoCodec } from '@cloudinary/url-gen/actions/transcode';
+import {ElementRef} from "@angular/core";
 
 const cloudinaryVideo = new CloudinaryVideo('sample', { cloudName: 'demo'}, { analytics: false });
 
@@ -151,6 +152,23 @@ describe('CloudinaryVideoComponent render', () => {
 
  component.ngOnDestroy();
  }));
+
+ it('Should support forwarding innerRef to underlying video element', fakeAsync(() => {
+ component.cldVid = cloudinaryVideo;
+ const ref = new ElementRef<HTMLVideoElement>(null);
+ component.innerRef = ref;
+
+ fixture.detectChanges();
+ tick(0);
+ spyOn(component, 'emitPlayEvent');
+ const videoElement: HTMLVideoElement = fixture.nativeElement;
+ const vid = videoElement.querySelector('video');
+
+ ref.nativeElement.dispatchEvent(new Event('play'));
+ fixture.detectChanges();
+
+ expect(component.emitPlayEvent).toHaveBeenCalled();
+ }));
 });