Fix video & audio mime types

Author: nirmaoz

__tests__/audio.test.js

@@ -56,10 +56,10 @@ describe('Audio', () => {
         <Transformation duration='2' />
       </Audio>
     )
-    expect(tag.find('[type="audio/wav"]').props().src).toEndWith(
+    expect(tag.find('[type="audio/vnd.wav"]').props().src).toEndWith(
       '/du_2/e_volume:30/dog.wav'
     )
-    expect(tag.find('[type="audio/mp3"]').props().src).toEndWith(
+    expect(tag.find('[type="audio/mpeg"]').props().src).toEndWith(
       '/du_2/e_volume:45/dog.mp3'
     )
   })
@@ -140,7 +140,7 @@ describe('Audio', () => {
     expect(tag.find('[type="audio/aac"]').props().src).toEndWith(
       '/du_1/dog.aac'
     )
-    expect(tag.find('[type="audio/mp3"]').props().src).toEndWith(
+    expect(tag.find('[type="audio/mpeg"]').props().src).toEndWith(
       '/du_2/dog.mp3'
     )
     expect(tag.find('[type="audio/ogg"]').props().src).toEndWith(

__tests__/video.test.js

@@ -371,6 +371,10 @@ describe('Video', () => {
             {
               type: 'webm',
               transformations: { videoCodec: 'auto' }
+            },
+            {
+              type: '3gp',
+              transformations: { videoCodec: 'auto' }
             }
           ]}
           audioCodec={'aac'}
@@ -387,7 +391,7 @@ describe('Video', () => {
       expect(tag.props().height).toEqual(100);
       expect(tag.props().poster).toEqual(`${VIDEO_UPLOAD_PATH}ac_aac,so_3,vc_h264/dog.jpg`);
 
-      expect(tag.children('source')).toHaveLength(4);
+      expect(tag.children('source')).toHaveLength(5);
 
       expect(tag.childAt(0).prop('type')).toEqual('video/mp4; codecs=hev1');
       expect(tag.childAt(0).prop('src')).toEqual(`${VIDEO_UPLOAD_PATH}ac_aac,so_3,vc_h265/dog.mp4`);
@@ -400,6 +404,9 @@ describe('Video', () => {
 
       expect(tag.childAt(3).prop('type')).toEqual('video/webm');
       expect(tag.childAt(3).prop('src')).toEqual(`${VIDEO_UPLOAD_PATH}ac_aac,so_3,vc_auto/dog.webm`);
+
+      expect(tag.childAt(4).prop('type')).toEqual('video/3gpp');
+      expect(tag.childAt(4).prop('src')).toEqual(`${VIDEO_UPLOAD_PATH}ac_aac,so_3,vc_auto/dog.3gp`);
     });
   });
 })

src/Util/cloudinaryReactUtils.js

@@ -2,6 +2,35 @@ import {Transformation, Util} from "cloudinary-core";
 // props passed to cloudinary-core but should not be rendered as dom attributes
 const CLOUDINARY_REACT_PROPS = ['accessibility', 'breakpoints', 'dataSrc', 'placeholder', 'publicId', 'signature'];
 
+/**
+ * Convert common video file extensions to mime types
+ * Most other common video file extensions have an identical mime type so do not need conversion.
+ */
+const VIDEO_MIME_TYPES = {
+  flv: 'x-flv',
+  '3gp': '3gpp',
+  mov: 'quicktime',
+  mpg: 'mpeg',
+  avi: 'x-msvideo',
+  wmv: 'x-ms-wmv',
+  ogv: 'ogg'
+};
+
+/**
+ * Convert common audio file extensions to mime types
+ * Most other common audio file extensions have an identical mime type so do not need conversion.
+ */
+const AUDIO_MIME_TYPES = {
+  m4a: 'mp4',
+  wav: 'vnd.wav',
+  m3u: 'x-mpegurl',
+  mp3: 'mpeg',
+  ogv: 'ogg',
+  aif: 'x-aiff',
+  aifc: 'x-aiff',
+  aiff: 'x-aiff',
+};
+
 // props passed to cloudinary-core for dom elements attributes generation
 // Map Cloudinary props from array to object for efficient lookup
 const CLOUDINARY_PROPS = [...Transformation.PARAM_NAMES, ...CLOUDINARY_REACT_PROPS].map(Util.camelCase).reduce(
@@ -47,5 +76,7 @@ const extractCloudinaryProps = ({children, ...props}) => {
 
 export {
   CLOUDINARY_REACT_PROPS,
+  VIDEO_MIME_TYPES,
+  AUDIO_MIME_TYPES,
   extractCloudinaryProps
 };

src/components/Audio/Audio.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Video from '../Video';
+import {AUDIO_MIME_TYPES} from "../../Util";
 
 /**
  * A component representing a Cloudinary served audio
@@ -10,6 +11,7 @@ import Video from '../Video';
  */
 class Audio extends Video {
   mimeType = 'audio';
+  mimeSubTypes = AUDIO_MIME_TYPES;
 
   /**
    * Render an audio element

src/components/Video/Video.js

@@ -2,13 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {Cloudinary, Util} from 'cloudinary-core';
 import CloudinaryComponent from '../CloudinaryComponent';
-import {extractCloudinaryProps} from "../../Util";
+import {VIDEO_MIME_TYPES, extractCloudinaryProps} from "../../Util";
 
 /**
  * A component representing a Cloudinary served video
  */
 class Video extends CloudinaryComponent {
   mimeType = 'video';
+  mimeSubTypes = VIDEO_MIME_TYPES;
 
   /**
    * Merge context with props
@@ -76,7 +77,7 @@ class Video extends CloudinaryComponent {
    * @param publicId - identifier of the video asset
    * @param childTransformations - child transformations for this video element
    * @param transformations - source transformations for specified source type
-   * @param sourceType - format of the video url 
+   * @param sourceType - format of the video url
    * @param mimeType - MIME type if specified source type
    */
   toSourceTag = (cld, publicId, childTransformations, transformations, sourceType, mimeType) => {
@@ -91,11 +92,11 @@ class Video extends CloudinaryComponent {
 
   /**
    * Determines MIME type of given source type and codecs.
-   * @param type - format of the video 
+   * @param type - format of the video
    * @param codecs - optional information about codecs of the video
    */
   buildMimeType = (type, codecs) => {
-    let mimeType = `${this.mimeType}/${type === 'ogv' ? 'ogg' : type}`;
+    let mimeType = `${this.mimeType}/${this.mimeSubTypes[type] || type}`;
     if (!Util.isEmpty(codecs)) {
       mimeType += "; codecs=" + (Util.isArray(codecs) ? codecs.join(', ') : codecs);
     }