From e9b37f36a0294d0a0dea3808a4db1c2a266c3a64 Mon Sep 17 00:00:00 2001
From: Dana Shalev <dana@cloudinary.com>
Date: Thu, 28 Dec 2017 11:48:10 +0200
Subject: [PATCH 1/3] fixes #35 from github - video component ignores
 transformations

---
 src/components/Video/Video.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/Video/Video.js b/src/components/Video/Video.js
index 4085d6b..c4d01b5 100644
--- a/src/components/Video/Video.js
+++ b/src/components/Video/Video.js
@@ -18,15 +18,16 @@ class Video extends CloudinaryComponent {
   }
 
   render() {
-    let {publicId, poster, sourceTypes, fallback, sourceTransformation, ...options} = Object.assign({},
+    let {publicId, poster, sourceTypes, fallback, sourceTransformation: sourceTransformations, ...options} = Object.assign({},
       this.context,
       this.props);
-    sourceTransformation = sourceTransformation || {};
+    sourceTransformations = sourceTransformations || {};
     sourceTypes = sourceTypes || Cloudinary.DEFAULT_VIDEO_PARAMS.source_types;
     options = CloudinaryComponent.normalizeOptions(options, {});
     let cld = Cloudinary.new(Util.withSnakeCaseKeys(options));
     let sources = [];
     let tagAttributes = Transformation.new(options).toHtmlAttributes();
+    let childTransformations = this.getTransformation(options);
     if (Util.isPlainObject(poster)) {
       let defaults = poster.publicId !== undefined && poster.publicId !== null ? Cloudinary.DEFAULT_IMAGE_PARAMS : DEFAULT_POSTER_OPTIONS;
       poster = cld.url(poster.publicId || publicId, Util.defaults({}, Util.withSnakeCaseKeys(poster), defaults));
@@ -40,15 +41,17 @@ class Video extends CloudinaryComponent {
 
     if (Util.isArray(sourceTypes)) {
       sources = sourceTypes.map(srcType => {
-          let transformation = sourceTransformation[srcType] || {};
-          let src = cld.url(publicId, Util.defaults({}, transformation, {resource_type: 'video', format: srcType}));
+          let sourceTransformation = sourceTransformations[srcType] || {};
+          let src = cld.url(publicId, Util.defaults({}, sourceTransformation, childTransformations, {resource_type: 'video', format: srcType}));
           let mimeType = 'video/' + (srcType === 'ogv' ? 'ogg' : srcType);
-          return <source key={mimeType} src={ src} type={ mimeType}/>;
+          return <source key={mimeType} src={src} type={mimeType}/>;
         }
       );
     } else {
-      tagAttributes["src"] = cld.url(publicId, {resource_type: 'video', format: sourceTypes});
+      let sourceTransformation = sourceTransformations[sourceTypes] || {};
+      tagAttributes.src = cld.url(publicId, Util.defaults({}, sourceTransformation, childTransformations, {resource_type: 'video', format: sourceTypes}));
     }
+
     return (
       <video {...tagAttributes}>
         {sources}

From 6f86d25726bf625fa8c977904390bda559cfd692 Mon Sep 17 00:00:00 2001
From: Dana Shalev <dana@cloudinary.com>
Date: Thu, 28 Dec 2017 18:26:47 +0200
Subject: [PATCH 2/3] add test for video component with transformation

---
 package-lock.json |  5 +++++
 package.json      |  1 +
 test/VideoTest.js | 37 +++++++++++++++++++++++++++++++++++++
 3 files changed, 43 insertions(+)
 create mode 100644 test/VideoTest.js

diff --git a/package-lock.json b/package-lock.json
index 3067908..f35626a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1991,6 +1991,11 @@
         "type-detect": "1.0.0"
       }
     },
+    "chai-string": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/chai-string/-/chai-string-1.4.0.tgz",
+      "integrity": "sha1-NZFAwFHTak5LGl/GuRAVL0OKjUk="
+    },
     "chalk": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
diff --git a/package.json b/package.json
index b4845b8..6043efc 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "browserify": "^13.1.0",
     "browserify-shim": "^3.8.12",
     "chai": "^3.5.0",
+    "chai-string": "^1.4.0",
     "enzyme": "^2.4.1",
     "jsdom": "^9.8.3",
     "mocha": "^3.0.2",
diff --git a/test/VideoTest.js b/test/VideoTest.js
new file mode 100644
index 0000000..5794b6b
--- /dev/null
+++ b/test/VideoTest.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import chai, { expect } from 'chai';
+import {shallow} from 'enzyme';
+import Video from '../src/components/Video';
+import Transformation from '../src/components/Transformation';
+
+chai.use(require('chai-string'));
+
+describe('Video', () => {
+    it("should include child transformation for a single source type", function () {
+        let tag = shallow(
+            <Video cloudName='demo'
+                   sourceTypes={'webm'}
+                   publicId='dog'
+                   sourceTransformation={{
+                       webm: {overlay: 'text:verdana_30:webm!'}
+                   }}>
+                <Transformation quality='70'/>
+            </Video>);
+        expect(tag.props().src).to.endWith('/q_70/l_text:verdana_30:webm!/dog.webm');
+    });
+
+    it("should include child transformation for multiple source types", function () {
+        let tag = shallow(
+            <Video cloudName='demo'
+                   sourceTypes={['webm', 'mp4']}
+                   publicId='dog'
+                   sourceTransformation={{
+                       webm: {overlay: 'text:verdana_30:webm!'},
+                       mp4: {overlay: 'text:verdana_30:mp4!'}
+                   }}>
+                <Transformation quality='70'/>
+            </Video>);
+        expect(tag.find('[type="video/webm"]').props().src).to.endWith('/q_70/l_text:verdana_30:webm!/dog.webm');
+        expect(tag.find('[type="video/mp4"]').props().src).to.endWith('/q_70/l_text:verdana_30:mp4!/dog.mp4');
+    });
+});
\ No newline at end of file

From ca455606deb880dad6b2107b8a13fd30775aad28 Mon Sep 17 00:00:00 2001
From: Dana Shalev <dana@cloudinary.com>
Date: Mon, 1 Jan 2018 20:33:07 +0200
Subject: [PATCH 3/3] video component should support inner text in addition to
 inner transformation component

---
 .../CloudinaryComponent/CloudinaryComponent.js        |  2 +-
 test/VideoTest.js                                     | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/CloudinaryComponent/CloudinaryComponent.js b/src/components/CloudinaryComponent/CloudinaryComponent.js
index a328d69..fedb4d7 100644
--- a/src/components/CloudinaryComponent/CloudinaryComponent.js
+++ b/src/components/CloudinaryComponent/CloudinaryComponent.js
@@ -29,7 +29,7 @@ class CloudinaryComponent extends Component {
       if (child.type && child.type.exposesProps){
         options = CloudinaryComponent.normalizeOptions(child.props, child.context);
       }
-      let childOptions = this.getChildTransformations(child.props.children);
+      let childOptions = child.props && this.getChildTransformations(child.props.children);
       if(childOptions !== undefined && childOptions !== null){
         options.transformation = childOptions;
       }
diff --git a/test/VideoTest.js b/test/VideoTest.js
index 5794b6b..cfcd934 100644
--- a/test/VideoTest.js
+++ b/test/VideoTest.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import chai, { expect } from 'chai';
+import chai, {expect} from 'chai';
 import {shallow} from 'enzyme';
 import Video from '../src/components/Video';
 import Transformation from '../src/components/Transformation';
@@ -34,4 +34,13 @@ describe('Video', () => {
         expect(tag.find('[type="video/webm"]').props().src).to.endWith('/q_70/l_text:verdana_30:webm!/dog.webm');
         expect(tag.find('[type="video/mp4"]').props().src).to.endWith('/q_70/l_text:verdana_30:mp4!/dog.mp4');
     });
+
+    it('should support inner text', function () {
+        let tag = shallow(
+            <Video cloudName='demo' publicId='dog'>
+                Your browser does not support the video tag.
+            </Video>
+        );
+        expect(tag.type()).to.equal("video");
+    });
 });
\ No newline at end of file