diff --git a/README.md b/README.md index 578fb272..89c5e6dd 100644 --- a/README.md +++ b/README.md @@ -113,8 +113,6 @@ Both `youtubeConfig` and `vimeoConfig` props can take a `preload` value. Setting ### Methods -There is a static method `ReactPlayer.canPlay(url)` to determine if a URL can be played by the media player. Note that this does *not* detect media that is unplayable due to streaming permissions etc. In that case, `onError` will occur after attemping to play. - To seek to a certain part of the media, there is a `seekTo(fraction)` instance method that will seek to the appropriate place in the media. See `App.js` for an example of this using `refs`. ### Supported media diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js index 9090e04c..774ca663 100644 --- a/src/ReactPlayer.js +++ b/src/ReactPlayer.js @@ -2,15 +2,15 @@ import 'es6-promise' import React, { Component } from 'react' import { propTypes, defaultProps } from './props' -import players from './players' +import YouTube from './players/YouTube' +import SoundCloud from './players/SoundCloud' +import Vimeo from './players/Vimeo' +import FilePlayer from './players/FilePlayer' export default class ReactPlayer extends Component { static displayName = 'ReactPlayer' static propTypes = propTypes static defaultProps = defaultProps - static canPlay (url) { - return players.some(player => player.canPlay(url)) - } componentDidMount () { this.progress() } @@ -52,6 +52,26 @@ export default class ReactPlayer extends Component { } this.progressTimeout = setTimeout(this.progress, this.props.progressFrequency) } + renderPlayers () { + const { url, youtubeConfig, vimeoConfig } = this.props + const players = [] + if (YouTube.canPlay(url)) { + players.push(YouTube) + } else if (SoundCloud.canPlay(url)) { + players.push(SoundCloud) + } else if (Vimeo.canPlay(url)) { + players.push(Vimeo) + } else if (url) { + players.push(FilePlayer) + } + if (!YouTube.canPlay(url) && youtubeConfig.preload) { + players.push(YouTube) + } + if (!Vimeo.canPlay(url) && vimeoConfig.preload) { + players.push(Vimeo) + } + return players.map(this.renderPlayer) + } renderPlayer = Player => { const active = Player.canPlay(this.props.url) const { youtubeConfig, soundcloudConfig, vimeoConfig, fileConfig, ...activeProps } = this.props @@ -74,7 +94,7 @@ export default class ReactPlayer extends Component { } return (
- {players.map(this.renderPlayer)} + {this.renderPlayers()}
) } diff --git a/src/players/FilePlayer.js b/src/players/FilePlayer.js index c5b42366..74274494 100644 --- a/src/players/FilePlayer.js +++ b/src/players/FilePlayer.js @@ -2,18 +2,12 @@ import React from 'react' import Base from './Base' -const MEDIA_PROTOCOLS = /^rtsp:\/\//i -const VIDEO_EXTENSIONS = /\.(mp4|og[gv]|webm|mov|m4v)($|\?)/i const AUDIO_EXTENSIONS = /\.(mp3|wav|m4a)($|\?)/i export default class FilePlayer extends Base { static displayName = 'FilePlayer' static canPlay (url) { - return ( - MEDIA_PROTOCOLS.test(url) || - VIDEO_EXTENSIONS.test(url) || - AUDIO_EXTENSIONS.test(url) - ) + return true } componentDidMount () { this.player = this.refs.player diff --git a/test/karma/canPlay.js b/test/karma/canPlay.js index cebfa6e3..87927cd7 100644 --- a/test/karma/canPlay.js +++ b/test/karma/canPlay.js @@ -1,7 +1,6 @@ import SoundCloud from '../../src/players/SoundCloud' import YouTube from '../../src/players/YouTube' import Vimeo from '../../src/players/Vimeo' -import FilePlayer from '../../src/players/FilePlayer' const { describe, it, expect } = window @@ -45,28 +44,4 @@ describe('canPlay', () => { expect(Vimeo.canPlay('https://www.youtube.com/watch?v=1234')).to.be.false }) }) - - describe('FilePlayer', () => { - it('knows what it can play', () => { - expect(FilePlayer.canPlay('http://example.com/file.mp4')).to.be.true - expect(FilePlayer.canPlay('http://example.com/file.ogg')).to.be.true - expect(FilePlayer.canPlay('http://example.com/file.ogv')).to.be.true - expect(FilePlayer.canPlay('http://example.com/file.webm')).to.be.true - expect(FilePlayer.canPlay('http://example.com/file.mp3')).to.be.true - expect(FilePlayer.canPlay('http://example.com/file.wav')).to.be.true - expect(FilePlayer.canPlay('http://example.com/file.mp4?foo=1&bar=2')).to.be.true - expect(FilePlayer.canPlay('http://example.com/file.ogg?foo=1&bar=2')).to.be.true - expect(FilePlayer.canPlay('http://example.com/file.ogv?foo=1&bar=2')).to.be.true - expect(FilePlayer.canPlay('http://example.com/file.webm?foo=1&bar=2')).to.be.true - expect(FilePlayer.canPlay('http://example.com/file.mp3?foo=1&bar=2')).to.be.true - expect(FilePlayer.canPlay('http://example.com/file.wav?foo=1&bar=2')).to.be.true - }) - - it('knows what it can\'t play', () => { - expect(FilePlayer.canPlay('http://example.com/file.mp5')).to.be.false - expect(FilePlayer.canPlay('http://example.com/file.ogh')).to.be.false - expect(FilePlayer.canPlay('http://example.com/file.web')).to.be.false - expect(FilePlayer.canPlay('http://example.com/file.txt')).to.be.false - }) - }) })