diff --git a/README.md b/README.md index 0ba0fde7..ff04ba23 100644 --- a/README.md +++ b/README.md @@ -234,6 +234,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 compatible with ReactPlayer's internal architecture, you can use it like this: + +```javascript +import YourOwnPlayer from './somewhere'; +ReactPlayer.addAdditionalPlayer(YourOwnPlayer); +``` + +Or you can clear all additional players: + +```javascript +ReactPlayer.clearAdditionalPlayers(); +``` + +All responsibilities for keeping your player's API compatible with ReactPlayer is on you. + #### Using Bower ```bash diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js index 63213ede..794e9de6 100644 --- a/src/ReactPlayer.js +++ b/src/ReactPlayer.js @@ -9,7 +9,15 @@ import renderPreloadPlayers from './preload' const SUPPORTED_PROPS = Object.keys(propTypes) +let additionalPlayers = [] + export default class ReactPlayer extends Component { + static addAdditionalPlayer = player => { + additionalPlayers.push(player) + } + static clearAdditionalPlayers = () => { + additionalPlayers = [] + } static displayName = 'ReactPlayer' static propTypes = propTypes static defaultProps = defaultProps @@ -19,6 +27,11 @@ export default class ReactPlayer extends Component { return true } } + for (let Player of additionalPlayers) { + if (Player.canPlay(url)) { + return true + } + } return false } config = getConfig(this.props, defaultProps, true) @@ -56,6 +69,11 @@ export default class ReactPlayer extends Component { return Player } } + for (let Player of additionalPlayers) { + if (Player.canPlay(url)) { + return Player + } + } // Fall back to FilePlayer if nothing else can play the URL return FilePlayer } diff --git a/test/specs/ReactPlayer.js b/test/specs/ReactPlayer.js index 2a70b3a1..644298b5 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 @@ -427,4 +428,34 @@ describe('ReactPlayer', () => { expect(el.querySelectorAll('video').length).to.equal(1) }) }) + + describe('additional players', () => { + class AdditionalPlayer extends React.Component { + static canPlay = url => true + static displayName = 'AdditionalPlayer' + load () {} + render () { + return ( +
+ ) + } + } + + it('could be added with usage of static method', () => { + ReactPlayer.addAdditionalPlayer(AdditionalPlayer) + renderPlayer({ + url: 'test:url' + }) + expect(player.player.player instanceof AdditionalPlayer).to.be.true + }) + + it('could be cleared with usage of static method', () => { + ReactPlayer.clearAdditionalPlayers() + renderPlayer({ + url: 'test:url' + }) + + expect(player.player.player instanceof FilePlayer).to.be.true + }) + }) })