Implement Video tag.

Author: Amir Tocker

src/components/Video/Video.js

@@ -1,6 +1,14 @@
 import React, {Component, PropTypes} from 'react';
+import cloudinary from 'cloudinary-core';
+import CloudinaryComponent from '../CloudinaryComponent';
+const Util = cloudinary.Util;
+const Cloudinary = cloudinary.Cloudinary;
+const DEFAULT_POSTER_OPTIONS = {
+  format: 'jpg',
+  resource_type: 'video'
+};
 
-export default class Video extends React.Component {
+export default class Video extends CloudinaryComponent {
   constructor(props) {
     super(props);
     this.state = {};
@@ -29,11 +37,42 @@ export default class Video extends React.Component {
   }
 
   render() {
+    let {publicId, poster, sourceTypes, fallback, sourceTransformation, ...options} = Object.assign({}, this.context, this.props);
+    sourceTransformation = sourceTransformation || {};
+    sourceTypes = sourceTypes || Cloudinary.DEFAULT_VIDEO_PARAMS.source_types;
+    options = this.getOptions(options, {});
+    let cld = Cloudinary.new(options);
+    let sources = [];
+    let tagAttributes = cloudinary.Transformation.new(options).toHtmlAttributes();
+    if (Util.isPlainObject(poster)) {
+      let defaults = poster.publicId != null ? Cloudinary.DEFAULT_IMAGE_PARAMS : DEFAULT_POSTER_OPTIONS;
+      poster = cld.url(poster.publicId || publicId, Util.defaults({}, poster, defaults));
+    }
+    if(!Util.isEmpty(poster)){
+      tagAttributes["poster"] = poster;
+    }
+
+    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 mimeType = 'video/' + (srcType == 'ogv' ? 'ogg' : srcType);
+        return <source key={mimeType} src={ src} type={ mimeType}/>;
+        }
+      );
+    } else {
+      tagAttributes["src"] = cld.url(publicId, {resource_type: 'video', format: sourceTypes});
+    }
+    console.log("Ready to return tag", tagAttributes);
     return (
-      <div>Video Not Implemented yet.<video></video></div>
+      <video {...tagAttributes}>
+        {sources}
+        {fallback}
+        {this.props.children}
+      </video>
     );
   }
 }
-Video.propTypes = {initialCount: React.PropTypes.number};
-Video.defaultProps = {initialCount: 0};
-Video.contextTypes = {};
+Video.propTypes = {publicId: PropTypes.string};
+// Video.defaultProps = {initialCount: 0};
+Video.contextTypes = CloudinaryComponent.contextTypes;

stories/index.js

@@ -3,8 +3,7 @@ import { storiesOf, action, linkTo } from '@kadira/storybook';
 import Image from '../src/components/Image';
 import Video from '../src/components/Video';
 import CloudinaryContext from '../src/components/CloudinaryContext';
-
-let CLImage = Image;
+import cloudinary from 'cloudinary-core';
 
 storiesOf('Image', module)
   .add('image', ()=> {
@@ -30,10 +29,40 @@ storiesOf('Image', module)
     )
   });
 storiesOf('Video', module)
-  .add('Video', ()=> {
+  .add('Simple tag', ()=> {
+    return (
+      <Video cloudName="demo" controls publicId="dog"/>
+    )
+  }).add('With fallback', ()=> {
+    return (
+      <Video cloudName="demo" controls="controls" publicId="dog" fallback="Cannot display video"/>
+    )
+  }).add('With inline fallback', ()=> {
+    return (
+      <Video cloudName="demo" controls="controls" publicId="dog" >
+        Cannot display <b>video</b>.
+      </Video>
+    )
+  }).add('With source types', ()=> {
+    return (
+      <Video cloudName="demo" controls="controls" publicId="dog" sourceTypes={['webm', 'ogv', 'mp4']}>
+        Cannot display video.
+      </Video>
+    )
+  }).add('Simple tag with width', ()=> {
+    return (
+      <Video cloudName="demo" controls publicId="dog" width="300" crop="scale"/>
+    )
+  }).add('Simple tag with poster url', ()=> {
+    let url = cloudinary.Cloudinary.new({cloud_name: "demo"}).url("sample", {width:300, crop: "scale"});
+    return (
+      <Video cloudName="demo" controls publicId="dog" width="300" crop="scale" poster={url}/>
+    )
+  }).add('Simple tag with poster object', ()=> {
     return (
-      <Video />
-    )});
+      <Video cloudName="demo" controls publicId="dog" width="300" crop="scale" poster={{publicId: "sample"}}/>
+    )
+  });
 storiesOf('CloudinaryContext', module)
   .add('CloudinaryContext', ()=> {
     let t = { width: 0.5, crop: "scale"};
@@ -47,7 +76,6 @@ storiesOf('CloudinaryContext', module)
       </CloudinaryContext>
     )})
   .add('Nested Context', ()=> {
-    let t = { width: 0.5, crop: "scale"};
     return (
       <CloudinaryContext cloudName="demo" width="50" crop="scale">
         <Image publicId="sample"/>