From b97b19f6dc80b8fca0f295bb07156a43a18f064e Mon Sep 17 00:00:00 2001
From: Oleksii Makodzeba <piratexpirate@gmail.com>
Date: Thu, 5 Apr 2018 21:54:30 +0300
Subject: [PATCH] Add support for custom players (#364)

---
 README.md                 | 17 +++++++++++++++++
 src/ReactPlayer.js        | 12 ++++++++++--
 test/specs/ReactPlayer.js | 30 ++++++++++++++++++++++++++++++
 3 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 87066a5d..58a52cd0 100644
--- a/README.md
+++ b/README.md
@@ -230,6 +230,23 @@ If you aren’t using React, you can still render a player using the standalone
 
 See [`jsFiddle` example](https://jsfiddle.net/krkcvx9s/)
 
+#### Adding your own players
+
+If you have your own player, that is compatible with ReactPlayer's internal architecture, you can use it like this:
+
+```javascript
+import YourOwnPlayer from './somewhere';
+ReactPlayer.addCustomPlayer(YourOwnPlayer);
+```
+
+Or you can clear all additional players:
+
+```javascript
+ReactPlayer.removeCustomPlayers();
+```
+
+It is your responsibility to ensure that custom players keep up with any internal changes to ReactPlayer in later versions.
+
 #### Using Bower
 
 ```bash
diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js
index 63213ede..6000b433 100644
--- a/src/ReactPlayer.js
+++ b/src/ReactPlayer.js
@@ -9,12 +9,20 @@ import renderPreloadPlayers from './preload'
 
 const SUPPORTED_PROPS = Object.keys(propTypes)
 
+let customPlayers = []
+
 export default class ReactPlayer extends Component {
+  static addCustomPlayer = player => {
+    customPlayers.push(player)
+  }
+  static removeCustomPlayers = () => {
+    customPlayers = []
+  }
   static displayName = 'ReactPlayer'
   static propTypes = propTypes
   static defaultProps = defaultProps
   static canPlay = url => {
-    for (let Player of players) {
+    for (let Player of [ ...customPlayers, ...players ]) {
       if (Player.canPlay(url)) {
         return true
       }
@@ -51,7 +59,7 @@ export default class ReactPlayer extends Component {
     this.player.seekTo(fraction)
   }
   getActivePlayer (url) {
-    for (let Player of players) {
+    for (let Player of [ ...customPlayers, ...players ]) {
       if (Player.canPlay(url)) {
         return Player
       }
diff --git a/test/specs/ReactPlayer.js b/test/specs/ReactPlayer.js
index 288b1b43..97d90eee 100644
--- a/test/specs/ReactPlayer.js
+++ b/test/specs/ReactPlayer.js
@@ -4,6 +4,7 @@ import React from 'react'
 import { render, unmountComponentAtNode } from 'react-dom'
 
 import ReactPlayer from '../../src/ReactPlayer'
+import { FilePlayer } from '../../src/players/FilePlayer'
 
 const { describe, it, expect, beforeEach, afterEach } = window
 
@@ -457,4 +458,33 @@ describe('ReactPlayer', () => {
       expect(el.querySelectorAll('video').length).to.equal(1)
     })
   })
+
+  describe('custom players', () => {
+    class CustomPlayer extends React.Component {
+      static canPlay = url => true
+      static displayName = 'CustomPlayer'
+      load () {}
+      render () {
+        return (
+          <div />
+        )
+      }
+    }
+
+    it('could be added with usage of static method', () => {
+      ReactPlayer.addCustomPlayer(CustomPlayer)
+      renderPlayer({
+        url: 'test:url'
+      })
+      expect(player.player.player instanceof CustomPlayer).to.be.true
+    })
+
+    it('could be cleared with usage of static method', () => {
+      ReactPlayer.removeCustomPlayers()
+      renderPlayer({
+        url: 'test:url'
+      })
+      expect(player.player.player instanceof FilePlayer).to.be.true
+    })
+  })
 })