Skip to content

Commit

Permalink
Render FilePlayer by default
Browse files Browse the repository at this point in the history
Fall back to FilePlayer if no other players can play the given URL
Still renders Youtube or Vimeo if the preload config option is set
  • Loading branch information
cookpete committed Jul 29, 2016
1 parent 266536b commit 8d249ce
Show file tree
Hide file tree
Showing 4 changed files with 26 additions and 39 deletions.
2 changes: 0 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
30 changes: 25 additions & 5 deletions src/ReactPlayer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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()
}
Expand Down Expand Up @@ -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
Expand All @@ -74,7 +94,7 @@ export default class ReactPlayer extends Component {
}
return (
<div style={style} className={this.props.className}>
{players.map(this.renderPlayer)}
{this.renderPlayers()}
</div>
)
}
Expand Down
8 changes: 1 addition & 7 deletions src/players/FilePlayer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
25 changes: 0 additions & 25 deletions test/karma/canPlay.js
Original file line number Diff line number Diff line change
@@ -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

Expand Down Expand Up @@ -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
})
})
})

0 comments on commit 8d249ce

Please sign in to comment.