Add Audio component

Author: Nir Maoz

src/components/Audio/Audio.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Video from '../Video';
+
+/**
+ * A component representing a Cloudinary served audio
+ * This component extends the Video component and replaces it's render function.
+ * Audio files are uploaded to Cloudinary as a video asset type.
+ * An <audio> tag with a video source, will play the audio only.
+ */
+class Audio extends Video {
+  mimeType = 'audio';
+
+  /**
+   * Render an audio element
+   */
+  render() {
+    const {innerRef, fallback, children} = this.props;
+
+    const {
+      tagAttributes, // Attributes of this video element
+      sources        // <source> tags of this video element
+    } = this.getVideoTagProps();
+
+    // We generated video attributes, lets delete the unneeded poster
+    delete tagAttributes.poster;
+
+    return (
+      <audio
+        ref={innerRef}
+        {...tagAttributes}>
+        {sources}
+        {fallback}
+        {children}
+      </audio>
+    );
+  }
+}
+
+Audio.propTypes = {publicId: PropTypes.string};
+Audio.defaultProps = {sourceTypes: ["aac","mp3","ogg"]};
+
+export default Audio;

src/components/Audio/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "Audio",
+  "version": "1.0.0",
+  "main": "./Audio.js",
+  "private": true
+}

src/components/Video/Video.js

@@ -7,6 +7,8 @@ import CloudinaryComponent from '../CloudinaryComponent';
  * A component representing a Cloudinary served video
  */
 class Video extends CloudinaryComponent {
+  mimeType = 'video';
+
   /**
    * Merge context with props
    * @return {*}
@@ -46,7 +48,7 @@ class Video extends CloudinaryComponent {
   generateSources = (cld, publicId, childTransformations, sourceTransformations, sourceTypes) => (
     sourceTypes.map(sourceType => {
       const src = this.generateVideoUrl(cld, publicId, childTransformations, sourceTransformations, sourceType);
-      const mimeType = 'video/' + (sourceType === 'ogv' ? 'ogg' : sourceType);
+      const mimeType = `${this.mimeType}/${sourceType === 'ogv' ? 'ogg' : sourceType}`;
 
       return <source key={mimeType} src={src} type={mimeType}/>;
     })
@@ -62,7 +64,7 @@ class Video extends CloudinaryComponent {
       publicId,
       fallback,
       children,
-      sourceTypes = Cloudinary.DEFAULT_VIDEO_PARAMS.source_types,
+      sourceTypes,
       sourceTransformation = {},
       ...options
     } = this.getMergedProps();
@@ -114,6 +116,8 @@ class Video extends CloudinaryComponent {
 }
 
 Video.propTypes = {publicId: PropTypes.string};
-Video.defaultProps = {};
+Video.defaultProps = {
+  sourceTypes: Cloudinary.DEFAULT_VIDEO_PARAMS.source_types
+};
 
 export default Video;

stories/index.js

@@ -7,6 +7,7 @@ import { withInfo } from "@storybook/addon-info";
 
 import Image from "../src/components/Image";
 import Video from "../src/components/Video";
+import Audio from "../src/components/Audio";
 import Transformation from "../src/components/Transformation";
 import CloudinaryContext from "../src/components/CloudinaryContext";
 import cloudinary from "cloudinary-core";
@@ -298,6 +299,55 @@ storiesOf("Video", module)
       );
     })
   );
+storiesOf("Audio", module)
+  .add(
+    "Simple tag",
+    withInfo({ text: "Simple tag" })(() => {
+      return <Audio cloudName="demo" controls publicId="dog" />;
+    })
+  )
+  .add(
+    "With fallback",
+    withInfo({ text: "With fallback" })(() => {
+      return (
+        <Audio
+          cloudName="demo"
+          controls="controls"
+          publicId="dog"
+          fallback="Cannot play audio"
+        />
+      );
+    })
+  )
+  .add(
+    "With inline fallback",
+    withInfo({ text: "With inline fallback" })(() => {
+      return (
+        <Audio cloudName="demo" controls="controls" publicId="dog">
+          Cannot play <b>audio</b>.
+        </Audio>
+      );
+    })
+  )
+  .add(
+    "With source types",
+    withInfo({ text: "With source types" })(() => {
+      return (
+        <Audio
+          cloudName="demo"
+          controls="controls"
+          publicId="dog"
+          sourceTypes={["mp3", "wav", "aac"]}
+          sourceTransformation={{
+            mp3: { duration: 2 },
+            wav: { duration: 3 }
+          }}
+        >
+          Cannot play audio.
+        </Audio>
+      );
+    })
+  );
 
 storiesOf("CloudinaryContext", module)
   .add(

test/AudioTest.js

@@ -0,0 +1,132 @@
+import React from 'react';
+import chai, {expect} from 'chai';
+import {shallow, mount} from 'enzyme';
+import Audio from '../src/components/Audio';
+import Transformation from '../src/components/Transformation';
+
+chai.use(require('chai-string'));
+
+describe('Audio', () => {
+  it("should include child transformation for a single source type", function () {
+    let tag = shallow(
+      <Audio cloudName='demo'
+             sourceTypes={'wav'}
+             publicId='dog'
+             sourceTransformation={{
+               wav: {duration: 3}
+             }}>
+        <Transformation quality='70'/>
+      </Audio>);
+    expect(tag.props().src).to.endWith('/q_70/du_3/dog.wav');
+  });
+
+  it('should support startOffset parameter', function () {
+    let tag = shallow(
+      <Audio cloudName="demo" sourceTypes={'wav'} publicId="dog">
+        <Transformation startOffset="auto"/>
+      </Audio>);
+    expect(tag.props().src).to.endWith('/so_auto/dog.wav');
+    tag = shallow(
+      <Audio cloudName="demo" sourceTypes={'wav'} publicId="dog">
+        <Transformation startOffset="2"/>
+      </Audio>);
+    expect(tag.props().src).to.endWith('/so_2/dog.wav');
+    tag = shallow(
+      <Audio cloudName="demo" sourceTypes={'wav'} publicId="dog">
+        <Transformation startOffset="2.34"/>
+      </Audio>);
+    expect(tag.props().src).to.endWith('/so_2.34/dog.wav');
+  });
+
+  it("should include child transformation for multiple source types", function () {
+    let tag = shallow(
+      <Audio cloudName='demo'
+             sourceTypes={['wav', 'mp3']}
+             publicId='dog'
+             sourceTransformation={{
+               wav: {effect: "volume:30"},
+               mp3: {effect: "volume:45"}
+             }}>
+        <Transformation duration="2"/>
+      </Audio>);
+    expect(tag.find('[type="audio/wav"]').props().src).to.endWith('/du_2/e_volume:30/dog.wav');
+    expect(tag.find('[type="audio/mp3"]').props().src).to.endWith('/du_2/e_volume:45/dog.mp3');
+  });
+
+  it('should support inner text', function () {
+    let tag = shallow(
+      <Audio cloudName='demo' publicId='dog'>
+        Your browser does not support the audio tag.
+      </Audio>
+    );
+    expect(tag.type()).to.equal("audio");
+  });
+
+  it('Should support forwarding innerRef to underlying audio element', function () {
+    let myRef = React.createRef();
+
+    let tag = mount(
+      <Audio
+        innerRef={myRef}
+        cloudName='demo'
+        sourceTypes='ogg'
+        publicId='dog'
+        sourceTransformation={{
+          ogg: {duration: 2}
+        }}
+      />
+    );
+
+    const audio = myRef.current;
+
+    expect(tag.find('audio').prop('src')).to.endWith('/du_2/dog.ogg');
+    expect(audio.src).to.endWith('/du_2/dog.ogg');
+    ['play', 'pause', 'canPlayType', 'addTextTrack'].forEach(func => expect(audio[func]).to.be.a('function'));
+  });
+
+  it('Should not set a poster attribute', function () {
+    let tag = shallow(
+      <Audio cloudName='demo' publicId='dog'/>
+    );
+
+    expect(tag.props().poster).to.equal(undefined);
+  });
+
+  it('Should pass camelCase attributes to Audio component', function () {
+    const tag = shallow(
+      <Audio playsInline autoPlay cloudName='demo' publicId='dog'/>
+    );
+
+    const {autoPlay, auto_play} = tag.props();
+
+    expect(autoPlay).to.equal(true);
+
+    expect(auto_play).to.equal(undefined);
+  });
+  it('Should pass camelCase attributes to inner audio element', function () {
+    let tag = mount(
+      <Audio autoPlay cloudName='demo' publicId='dog'/>
+    );
+
+    const audio = tag.find('audio');
+    expect(audio.prop('autoPlay')).to.equal(true);
+
+    expect(audio.prop('plays_inline')).to.equal(undefined);
+    expect(audio.prop('auto_play')).to.equal(undefined);
+  });
+  it("should generate default source tags", function () {
+    let tag = shallow(
+      <Audio cloudName='demo'
+             publicId='dog'
+             sourceTransformation={{
+               aac: {duration: 1},
+               mp3: {duration: 2},
+               ogg: {duration: 3},
+             }}>
+        <Transformation quality='70'/>
+      </Audio>);
+    expect(tag.find('[type="audio/aac"]').props().src).to.endWith('/du_1/dog.aac');
+    expect(tag.find('[type="audio/mp3"]').props().src).to.endWith('/du_2/dog.mp3');
+    expect(tag.find('[type="audio/ogg"]').props().src).to.endWith('/du_3/dog.ogg');
+  });
+});