Merge pull request #232 from cloudinary/use-fetch-format-angular

feat: add useFetchFormat prop in angular sdk

Author: pawelphilipczyk-cloudinary

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

@@ -58,6 +58,7 @@ export class CloudinaryVideoComponent implements OnInit, OnChanges, OnDestroy {
  @Input('plugins') plugins: Plugins;
  @Input('poster') poster: string;
  @Input('innerRef') innerRef: ElementRef;
+ @Input('useFetchFormat') useFetchFormat: boolean;
 
  // Event emitters
  @Output() play: EventEmitter<any> = new EventEmitter();
@@ -87,7 +88,8 @@ export class CloudinaryVideoComponent implements OnInit, OnChanges, OnDestroy {
  this.sources,
  this.plugins,
  this.getVideoAttributes(),
- this.cldPoster
+ this.cldPoster,
+ { useFetchFormat: this.useFetchFormat }
  );
 
  // check if video should be muted. We need to take care of this here since Angular has a bug with binding the muted

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

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { CloudinaryVideoComponent } from '../lib/cloudinary-video.component';
 import {CloudinaryImage, CloudinaryVideo} from '@cloudinary/url-gen';
-import { auto, vp9 } from '@cloudinary/url-gen/qualifiers/videoCodec';
+import { auto, vp9, theora } from '@cloudinary/url-gen/qualifiers/videoCodec';
 import { videoCodec } from '@cloudinary/url-gen/actions/transcode';
 import {ElementRef} from "@angular/core";
 
@@ -90,6 +90,51 @@ describe('CloudinaryVideoComponent render', () => {
  .toEqual( 'video/webm; codecs=avc1.4D401E, mp4a.40.2');
  }));
 
+ it('should render video with input sources when using useFetchFormat', fakeAsync(() => {
+ component.cldVid = cloudinaryVideo;
+ component.useFetchFormat = true;
+ component.sources = [
+ {
+ type: 'mp4',
+ codecs: ['vp8', 'vorbis'],
+ transcode: videoCodec(auto())
+ },
+ {
+ type: 'webm',
+ codecs: ['avc1.4D401E', 'mp4a.40.2'],
+ transcode: videoCodec(vp9())
+ },
+ {
+ type: 'ogv',
+ codecs: ['theora'],
+ transcode: videoCodec(theora())
+ }];
+
+ fixture.detectChanges();
+ tick(0);
+ const vidElement: HTMLVideoElement = fixture.nativeElement;
+ const video = vidElement.querySelector('video');
+
+ expect(video.childElementCount).toBe(3);
+
+ // First source
+ expect(video.children[0].attributes.getNamedItem('src').value)
+ .toEqual( 'https://res.cloudinary.com/demo/video/upload/vc_auto/f_mp4/sample');
+ expect(video.children[0].attributes.getNamedItem('type').value)
+ .toEqual( 'video/mp4; codecs=vp8, vorbis');
+
+ // Second source
+ expect(video.children[1].attributes.getNamedItem('src').value)
+ .toEqual( 'https://res.cloudinary.com/demo/video/upload/vc_vp9/f_webm/sample');
+ expect(video.children[1].attributes.getNamedItem('type').value)
+ .toEqual( 'video/webm; codecs=avc1.4D401E, mp4a.40.2');
+
+ // Third source
+ expect(video.children[2].attributes.getNamedItem('src').value)
+ .toEqual( 'https://res.cloudinary.com/demo/video/upload/vc_theora/f_ogv/sample');
+ expect(video.children[2].attributes.getNamedItem('type').value)
+ .toEqual( 'video/ogg; codecs=theora');
+ }));
 
  it('should contain poster when "auto" is passed as cldPoster', fakeAsync(() => {
  component.cldVid = new CloudinaryVideo('sample', { cloudName: 'demo'}, { analytics: false });