Fix handling of dynamic updates to public-id. Fixes #83 (#94)

Implement OnChanges for image and video components to support data binding of "public-id" attrbiute. Update photo_album sample with usage example.

Author: eitanp461

samples/photo_album/app/js/photo-list/photo-list.component.html

@@ -2,19 +2,20 @@
     <div id="posterframe">
         <!-- This will render the fetched Facebook profile picture using Cloudinary according to the
       requested transformations. This also shows how to chain transformations -->
-        <cl-image
-                class="static-photo"
-                responsive
-                width="auto"
-                crop="scale"
-                public-id="officialchucknorrispage"
-                type="facebook"
-                angle="20"
-        >
-            <cl-transformation effect="art:hokusai"></cl-transformation>
-            <cl-transformation border="3px_solid_rgb:00390b" radius="20"></cl-transformation>
-        </cl-image>
-
+        <a (click)=changePublicId()>
+          <cl-image
+                  class="static-photo"
+                  responsive
+                  width="auto"
+                  crop="scale"
+                  [public-id]="publicId"
+                  type="facebook"
+                  angle="20"
+          >
+              <cl-transformation effect="art:hokusai"></cl-transformation>
+              <cl-transformation border="3px_solid_rgb:00390b" radius="20"></cl-transformation>
+          </cl-image>
+        </a>
     </div>
 
     <h1 class="welcome">Welcome!</h1>
@@ -221,4 +222,4 @@ <h2 *ngIf="photo.context">{{photo.context.custom.photo}}</h2>
             supported transformations.
         </div>
     </div>
-</div>
+</div>

samples/photo_album/app/js/photo-list/photo-list.component.ts

@@ -11,6 +11,7 @@ import {Photo} from '../model/photo';
 export class PhotoListComponent implements OnInit {
 
     private photos: Observable<Photo[]>;
+    private publicId: string = 'officialchucknorrispage';
 
     constructor(
         private photoAlbum: PhotoAlbum
@@ -19,4 +20,8 @@ export class PhotoListComponent implements OnInit {
     ngOnInit(): void {
         this.photos = this.photoAlbum.getPhotos();
     }
+
+    changePublicId() {
+      this.publicId = (this.publicId === 'officialchucknorrispage') ? 'billclinton' : 'officialchucknorrispage';
+    }
 }

src/cloudinary-image.component.spec.ts

@@ -183,5 +183,40 @@ describe('CloudinaryImage', () => {
       expect(img.attributes.getNamedItem('data-src')).toBeNull();
     });
   });
+
+  describe('Bound public-id', () => {
+    @Component({
+      template: `<cl-image id="image1" [public-id]="publicId"></cl-image>`
+    })
+    class TestComponent {
+      publicId: string = 'sample';
+    }
+
+    let fixture: ComponentFixture<TestComponent>;
+    let des: DebugElement;  // the elements w/ the directive
+
+    beforeEach(() => {
+      fixture = TestBed.configureTestingModule({
+        declarations: [CloudinaryTransformationDirective, CloudinaryImage, TestComponent],
+        providers: [{ provide: Cloudinary, useValue: localCloudinary }]
+      }).createComponent(TestComponent);
+
+      fixture.detectChanges(); // initial binding
+      // all elements with an attached CloudinaryImage
+      des = fixture.debugElement.query(By.directive(CloudinaryImage));
+    });
+
+    it('creates an img element with a bound public-id', () => {
+      const img = des.children[0].nativeElement as HTMLImageElement;
+      expect(img.src).toEqual(jasmine.stringMatching(/image\/upload\/sample/));
+
+      // Update data-bound publicId
+      fixture.componentInstance.publicId = 'updatedId';
+      fixture.detectChanges();
+
+      // Verify that the img src has updated
+      expect(img.src).toEqual(jasmine.stringMatching(/image\/upload\/updatedId/));
+    });
+  });
 });
 

src/cloudinary-image.component.ts

@@ -6,6 +6,8 @@ import {
     QueryList,
     AfterViewInit,
     OnInit,
+    OnChanges,
+    SimpleChanges,
     OnDestroy
 } from '@angular/core';
 import {Cloudinary} from './cloudinary.service';
@@ -15,7 +17,7 @@ import {CloudinaryTransformationDirective} from './cloudinary-transformation.dir
     selector: 'cl-image',
     template: '<img>'
 })
-export class CloudinaryImage implements AfterViewInit, OnInit, OnDestroy {
+export class CloudinaryImage implements AfterViewInit, OnInit, OnChanges, OnDestroy {
 
     @Input('public-id') publicId: string;
 
@@ -39,6 +41,14 @@ export class CloudinaryImage implements AfterViewInit, OnInit, OnDestroy {
         this.observer.observe(this.el.nativeElement, config);
     }
 
+    ngOnChanges(changes: SimpleChanges) {
+      // Listen to changes on the data-bound property 'publicId'.
+      // Update component unless this is the first value assigned.
+      if (changes.publicId && !changes.publicId.isFirstChange()) {
+        this.loadImage();
+      }
+    }
+
     ngOnDestroy(): void {
         this.observer.disconnect();
     }

src/cloudinary-video.component.spec.ts

@@ -225,5 +225,58 @@ describe('CloudinaryVideo', () => {
       }
     });
   });
+
+  describe('Bound public-id', () => {
+    @Component({
+      template: `
+            <cl-video cloud-name="my_other_cloud" [public-id]="publicId" secure="true" class="my-videos">
+                <cl-transformation overlay="text:arial_60:watchme" gravity="north" y="20"></cl-transformation>
+            </cl-video>
+            `
+    })
+    class TestComponent {
+      publicId: string = 'watchme';
+    }
+
+    let fixture: ComponentFixture<TestComponent>;
+    let des: DebugElement;  // the elements w/ the directive
+
+    beforeEach(() => {
+      fixture = TestBed.configureTestingModule({
+        declarations: [CloudinaryTransformationDirective, CloudinaryVideo, TestComponent],
+        providers: [{ provide: Cloudinary, useValue: localCloudinary }]
+      }).createComponent(TestComponent);
+
+      fixture.detectChanges(); // initial binding
+
+      // Our element under test, which is attached to CloudinaryVideo
+      des = fixture.debugElement.query(By.directive(CloudinaryVideo));
+    });
+
+    it('creates a video element with a bound public-id', () => {
+      const video = des.children[0].nativeElement as HTMLVideoElement;
+      // Created <video> element should have 3 child <source> elements for mp4, webm, ogg
+      expect(video.childElementCount).toBe(3);
+
+      const testMarkup = (id: string) => {
+        for (let i = 0; i < 3; i++) {
+          expect(video.children[i].attributes.getNamedItem('src')).toBeDefined();
+          expect(video.children[i].attributes.getNamedItem('src').value).toEqual(
+            jasmine.stringMatching
+              (new RegExp(`https:\/\/res.cloudinary.com\/my_other_cloud\/video\/upload\/g_north,l_text:arial_60:watchme,y_20\/${id}`)));
+        }
+      };
+
+      // Check initial binding
+      testMarkup('watchme');
+
+      // Update data-bound publicId
+      fixture.componentInstance.publicId = 'updatedId';
+      fixture.detectChanges();
+
+      // Verify that the video elememnt has updated
+      testMarkup('updatedId');
+    });
+  });
 });
 

src/cloudinary-video.component.ts

@@ -6,6 +6,8 @@ import {
     QueryList,
     AfterViewInit,
     OnInit,
+    OnChanges,
+    SimpleChanges,
     OnDestroy
 } from '@angular/core';
 import {Cloudinary} from './cloudinary.service';
@@ -16,7 +18,7 @@ import {CloudinaryTransformationDirective} from './cloudinary-transformation.dir
     template: '<video></video>'
 })
 // See also video reference - http://cloudinary.com/documentation/video_manipulation_and_delivery#video_transformations_reference
-export class CloudinaryVideo implements AfterViewInit, OnInit, OnDestroy {
+export class CloudinaryVideo implements AfterViewInit, OnInit, OnChanges, OnDestroy {
 
     @Input('public-id') publicId: string;
 
@@ -40,6 +42,14 @@ export class CloudinaryVideo implements AfterViewInit, OnInit, OnDestroy {
         this.observer.observe(this.el.nativeElement, config);
     }
 
+    ngOnChanges(changes: SimpleChanges) {
+      // Listen to changes on the data-bound property 'publicId'.
+      // Update component unless this is the first value assigned.
+      if (changes.publicId && !changes.publicId.isFirstChange()) {
+        this.loadVideo(changes.publicId.currentValue);
+      }
+    }
+
     ngOnDestroy(): void {
         this.observer.disconnect();
     }