From a74339606a6c7c773ea11d1eee1f43dde859a53b Mon Sep 17 00:00:00 2001
From: Pete Cook <pete@cookpete.com>
Date: Tue, 3 Apr 2018 19:40:08 +0100
Subject: [PATCH] Add forceVideo option for FilePlayer

---
 README.md                 |  2 +-
 index.d.ts                |  1 +
 src/players/FilePlayer.js |  5 ++++-
 src/props.js              |  2 ++
 test/specs/ReactPlayer.js | 30 ++++++++++++++++++++++++++++++
 5 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 0ba0fde7..61068852 100644
--- a/README.md
+++ b/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
 
diff --git a/index.d.ts b/index.d.ts
index d1fa129b..674f6154 100644
--- a/index.d.ts
+++ b/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;
diff --git a/src/players/FilePlayer.js b/src/players/FilePlayer.js
index b78331f1..b4421cdd 100644
--- a/src/players/FilePlayer.js
+++ b/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
diff --git a/src/props.js b/src/props.js
index a8230e30..d3509b34 100644
--- a/src/props.js
+++ b/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,
diff --git a/test/specs/ReactPlayer.js b/test/specs/ReactPlayer.js
index 2a70b3a1..288b1b43 100644
--- a/test/specs/ReactPlayer.js
+++ b/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 => {