fixes #35 from github - video component ignores transformations (#38)

* fixes #35 from github - video component ignores transformations

* add test for video component with transformation

Author: DanaShalev

package-lock.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",

package.json

@@ -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}

src/components/Video/Video.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');
+    });
+});