Add forceVideo option for FilePlayer

Author: cookpete

README.md

@@ -134,7 +134,7 @@ Key | Options
 `mixcloud` | `options`: Override the [default player options](https://www.mixcloud.com/developers/widget/#methods)
 `dailymotion` | `params`: Override the [default player vars](https://developer.dailymotion.com/player#player-parameters)<br />`preload`: Used for [preloading](#preloading)
 `twitch` | `options`: Override the [default player options](https://dev.twitch.tv/docs/embed)
-`file` | `attributes`: Apply [element attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/video#Attributes)<br />`forceAudio`: Always render an `<audio>` element<br />`forceHLS`: Use [hls.js](https://github.com/video-dev/hls.js) for HLS streams<br />`forceDASH`: Always use [dash.js](https://github.com/Dash-Industry-Forum/dash.js) for DASH streams<br />`hlsOptions`: Override the [default `hls.js` options](https://github.com/video-dev/hls.js/blob/master/doc/API.md#fine-tuning)
+`file` | `attributes`: Apply [element attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/video#Attributes)<br />`forceVideo`: Always render a `<video>` element<br />`forceAudio`: Always render an `<audio>` element<br />`forceHLS`: Use [hls.js](https://github.com/video-dev/hls.js) for HLS streams<br />`forceDASH`: Always use [dash.js](https://github.com/Dash-Industry-Forum/dash.js) for DASH streams<br />`hlsOptions`: Override the [default `hls.js` options](https://github.com/video-dev/hls.js/blob/master/doc/API.md#fine-tuning)
 
 ##### Preloading
 

index.d.ts

@@ -46,6 +46,7 @@ export interface MixcloudConfig {
 export interface FileConfig {
   attributes?: Object;
   tracks?: TrackProps[];
+  forceVideo?: boolean;
   forceAudio?: boolean;
   forceHLS?: boolean;
   forceDASH?: boolean;

src/players/FilePlayer.js

@@ -82,7 +82,10 @@ export class FilePlayer extends Component {
     this.props.onSeek(e.target.currentTime)
   }
   shouldUseAudio (props) {
-    if (this.props.config.file.attributes.poster) {
+    if (props.config.file.forceVideo) {
+      return false
+    }
+    if (props.config.file.attributes.poster) {
       return false // Use <video> so that poster is shown
     }
     return AUDIO_EXTENSIONS.test(props.url) || props.config.file.forceAudio

src/props.js

@@ -38,6 +38,7 @@ export const propTypes = {
     file: shape({
       attributes: object,
       tracks: array,
+      forceVideo: bool,
       forceAudio: bool,
       forceHLS: bool,
       forceDASH: bool,
@@ -124,6 +125,7 @@ export const defaultProps = {
     file: {
       attributes: {},
       tracks: [],
+      forceVideo: false,
       forceAudio: false,
       forceHLS: false,
       forceDASH: false,

test/specs/ReactPlayer.js

@@ -370,6 +370,36 @@ describe('ReactPlayer', () => {
     })
   })
 
+  describe.only('FilePlayer forceVideo', () => {
+    beforeEach(done => {
+      renderPlayer({
+        url: 'http://example.com/file.mp3',
+        config: { file: { forceVideo: true } }
+      }, () => done())
+    })
+
+    it('forces video element', () => {
+      const video = player.getInternalPlayer()
+      expect(video).to.be.a('HTMLVideoElement')
+      expect(video.src).to.equal('http://example.com/file.mp3')
+    })
+  })
+
+  describe.only('FilePlayer forceAudio', () => {
+    beforeEach(done => {
+      renderPlayer({
+        url: 'http://example.com/random/path',
+        config: { file: { forceAudio: true } }
+      }, () => done())
+    })
+
+    it('forces audio element', () => {
+      const video = player.getInternalPlayer()
+      expect(video).to.be.a('HTMLAudioElement')
+      expect(video.src).to.equal('http://example.com/random/path')
+    })
+  })
+
   // onPause being called was a bug that has been fixed
   // so skip this test for now
   it.skip('Twitch switches from video to channel', done => {