Add support for custom players (cookpete#364)

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

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
       }

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
+    })
+  })
 })