Reload video on props change (#200)

Author: Nir Maoz

bundlewatch.config.js

@@ -2,7 +2,7 @@ const bundlewatchConfig = {
   files: [
     {
       path: './dist/cloudinary-react.js',
-      maxSize: '44kb'
+      maxSize: '44.5kb'
     }
   ],
   defaultCompression: 'gzip',

e2e-test/package.json

@@ -35,6 +35,7 @@
     ]
   },
   "devDependencies": {
+    "typescript": "^3.7.2",
     "cypress": "^4.9.0",
     "start-server-and-test": "^1.11.0"
   }

package.json

@@ -54,6 +54,8 @@
     "mocha": "^8.0.1",
     "npm-run-all": "^4.1.5",
     "react-dom": "^16.3.3",
+    "sinon": "^9.2.1",
+    "sinon-chai": "^3.5.0",
     "webpack": "4.27.1",
     "webpack-cli": "^3.1.2"
   },

src/components/CloudinaryComponent/CloudinaryComponent.js

@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react';
+import React, {PureComponent, createRef} from 'react';
 import PropTypes from 'prop-types';
 import {Transformation, Util} from 'cloudinary-core';
 import {CloudinaryContextType} from '../CloudinaryContext/CloudinaryContextType';
@@ -43,6 +43,7 @@ function only(source, keys = []) {
 class CloudinaryComponent extends PureComponent {
   constructor(props, context) {
     super(props, context);
+    this.element = createRef();
   }
 
   render() {
@@ -158,6 +159,23 @@ class CloudinaryComponent extends PureComponent {
     return CloudinaryComponent.normalizeOptions(context, props);
   };
 
+  /**
+   * Attach both this.element and props.innerRef as ref to the given element
+   * @param element - the element to attach a ref to
+   */
+  attachRef = (element) => {
+    const {innerRef} = this.props;
+    this.element.current = element;
+
+    if (innerRef) {
+      if (innerRef instanceof Function) {
+        innerRef(element);
+      } else {
+        innerRef.current = element;
+      }
+    }
+  };
+
   static contextType = CloudinaryContextType;
 }
 

src/components/Image/Image.js

@@ -18,7 +18,6 @@ const RESPONSIVE_OVERRIDE_WARNING = [
 class Image extends CloudinaryComponent {
   constructor(props, context) {
     super(props, context);
-    this.imgElement = createRef();
     this.placeholderElement = createRef();
     this.state = {isLoaded: false}
     this.listenerRemovers = [];
@@ -33,7 +32,7 @@ class Image extends CloudinaryComponent {
       console.warn(RESPONSIVE_OVERRIDE_WARNING);
     }
 
-    return responsive && this.imgElement && this.imgElement.current;
+    return responsive && this.element && this.element.current;
   }
 
   /**
@@ -95,7 +94,7 @@ class Image extends CloudinaryComponent {
     // Handle lazy loading
     if (this.shouldLazyLoad()) {
       // Will set this.state.isInView = true when in view
-      Util.detectIntersection(this.imgElement.current, this.onIntersect);
+      Util.detectIntersection(this.element.current, this.onIntersect);
     } else {
       // Handle responsive only if lazy loading wasn't requested or already handled
       if (this.isResponsive()) {
@@ -109,29 +108,12 @@ class Image extends CloudinaryComponent {
         }
 
         // Make original image responsive
-        const removeImgListener = makeElementResponsive(this.imgElement.current, options);
+        const removeImgListener = makeElementResponsive(this.element.current, options);
         this.listenerRemovers.push(removeImgListener);
       }
     }
   }
 
-  /**
-   * Attach both this.imgElement and props.innerRef as ref to the given element
-   * @param imgElement - the element to attach a ref to
-   */
-  attachRef = (imgElement) => {
-    const {innerRef} = this.props;
-    this.imgElement.current = imgElement;
-
-    if (innerRef) {
-      if (innerRef instanceof Function) {
-        innerRef(imgElement);
-      } else {
-        innerRef.current = imgElement;
-      }
-    }
-  };
-
   shouldLazyLoad = () => {
     const {loading} = this.getExtendedProps();
     const {isInView} = this.state;

src/components/Video/Video.js

@@ -98,11 +98,24 @@ class Video extends CloudinaryComponent {
     return {sources, tagAttributes};
   };
 
+  reloadVideo = () => {
+    if (this.element && this.element.current){
+      this.element.current.load();
+    }
+  }
+
+  componentDidUpdate() {
+    // Load video on props change
+    this.reloadVideo();
+  }
+
+
+
   /**
    * Render a video element
    */
   render() {
-    const {innerRef, fallback, children} = this.props;
+    const {fallback, children} = this.props;
 
     const {
       tagAttributes, // Attributes of this video element
@@ -111,7 +124,7 @@ class Video extends CloudinaryComponent {
 
     return (
       <video
-        ref={innerRef}
+        ref={this.attachRef}
         {...tagAttributes}>
         {sources}
         {fallback}

test/VideoTest.js

@@ -1,7 +1,11 @@
 import React from 'react';
+import sinon from 'sinon';
+import sinonChai from 'sinon-chai'
 import chai, {expect} from 'chai';
 import {shallow, mount} from 'enzyme';
 import cloudinary from './cloudinary-proxy';
+chai.use(sinonChai);
+
 const {Video, Transformation} = cloudinary;
 chai.use(require('chai-string'));
 
@@ -199,4 +203,17 @@ describe('Video', () => {
     expect(video.prop('data-testid')).to.equal("testing");
     expect(video.prop('datatestid')).to.equal(undefined);
   });
+  it('reloads video on props change', () => {
+    const tag = shallow(
+      <Video cloudName='demo' publicId='dog'/>
+    );
+
+    //detect calls for reloadVideo()
+    sinon.spy(tag.instance(), 'reloadVideo');
+
+    expect(tag.instance().reloadVideo).to.not.have.been.called;
+
+    tag.setProps({publicId: "cat"});
+    expect(tag.instance().reloadVideo).to.have.been.called;
+  })
 });