Add Vidme support

README.md

@@ -6,13 +6,13 @@ ReactPlayer
 [![Dependency Status](https://img.shields.io/david/CookPete/react-player.svg)](https://david-dm.org/CookPete/react-player)
 [![devDependency Status](https://img.shields.io/david/dev/CookPete/react-player.svg)](https://david-dm.org/CookPete/react-player?type=dev)
 
-A react component for playing media from YouTube, SoundCloud, Streamable or Vimeo, as well as supported media files. Used by [rplayr](http://rplayr.com), an app to generate playlists from Reddit URLs.
+A react component for playing media from YouTube, SoundCloud, Streamable, Vidme or Vimeo, as well as supported media files. Used by [rplayr](http://rplayr.com), an app to generate playlists from Reddit URLs.
 
 The component parses a URL and loads in the appropriate markup and external SDKs to play media from [various sources](#supported-media). [Props](#props) can be passed in to control playback and react to events such as buffering or media ending.
 
 ### Polyfills
 
-If you are using `npm` and need to support [browsers without `Promise`](http://caniuse.com/#feat=promises) you will need a [`Promise` polyfill](https://github.com/stefanpenner/es6-promise). To support `Streamable` videos you will also need a [`fetch` polyfill](https://github.com/github/fetch) for [browsers without `fetch`](http://caniuse.com/#feat=fetch)
+If you are using `npm` and need to support [browsers without `Promise`](http://caniuse.com/#feat=promises) you will need a [`Promise` polyfill](https://github.com/stefanpenner/es6-promise). To support `Streamable` or `Vidme` videos you will also need a [`fetch` polyfill](https://github.com/github/fetch) for [browsers without `fetch`](http://caniuse.com/#feat=fetch)
 
 ### Usage
 
@@ -127,6 +127,7 @@ To seek to a certain part of the media, there is a `seekTo(fraction)` instance m
 * YouTube videos use the [YouTube iFrame Player API](https://developers.google.com/youtube/iframe_api_reference)
 * Soundcloud tracks are [resolved](https://developers.soundcloud.com/docs/api/reference#resolve) and played in an [`<audio>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/audio) element using the track’s `stream_url`
 * Streamable videos are [resolved](https://streamable.com/documentation#retrieve-video) and played in a [`<video>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/video) element using the track’s `mp4` path
+* Vidme videos are [resolved](https://docs.vid.me/#api-Video-DetailByURL) and played in a [`<video>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/video) element using the track’s `complete_url` path
 * Vimeo videos use the [Vimeo Player API](https://developer.vimeo.com/player/js-api)
 * [Supported file types](https://github.com/CookPete/react-player/blob/master/src/players/FilePlayer.js#L5-L6) are playing using [`<video>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/video) or [`<audio>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/audio) elements
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "react-player",
-  "description": "A react component for playing a variety of URLs, including file paths, YouTube, SoundCloud, Streamable and Vimeo",
+  "description": "A react component for playing a variety of URLs, including file paths, YouTube, SoundCloud, Streamable, Vidme and Vimeo",
   "main": "dist/ReactPlayer.js",
   "authors": [
     "Pete Cook <pete@cookpete.com> (http://github.com/cookpete)"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-player",
   "version": "0.11.0",
-  "description": "A react component for playing a variety of URLs, including file paths, YouTube, SoundCloud, Streamable and Vimeo",
+  "description": "A react component for playing a variety of URLs, including file paths, YouTube, SoundCloud, Streamable, Vidme and Vimeo",
   "main": "lib/ReactPlayer.js",
   "scripts": {
     "clean": "rimraf lib demo",

src/ReactPlayer.js

@@ -6,6 +6,7 @@ import SoundCloud from './players/SoundCloud'
 import Vimeo from './players/Vimeo'
 import FilePlayer from './players/FilePlayer'
 import Streamable from './players/Streamable'
+import Vidme from './players/Vidme'
 
 export default class ReactPlayer extends Component {
   static displayName = 'ReactPlayer'
@@ -63,6 +64,8 @@ export default class ReactPlayer extends Component {
       players.push(Vimeo)
     } else if (Streamable.canPlay(url)) {
       players.push(Streamable)
+    } else if (Vidme.canPlay(url)) {
+      players.push(Vidme)
     } else if (url) {
       // Fall back to FilePlayer if nothing else can play the URL
       players.push(FilePlayer)

src/demo/App.js

@@ -171,6 +171,13 @@ export default class App extends Component {
                 {this.renderLoadButton('https://streamable.com/ifjh', 'Test B')}
               </td>
             </tr>
+            <tr>
+              <th>Vidme</th>
+              <td>
+                {this.renderLoadButton('https://vid.me/yvi', 'Test A')}
+                {this.renderLoadButton('https://vid.me/yvf', 'Test B')}
+              </td>
+            </tr>
             <tr>
               <th>Files</th>
               <td>

src/players/Vidme.js

@@ -0,0 +1,37 @@
+import FilePlayer from './FilePlayer'
+
+const RESOLVE_URL = 'https://api.vid.me/videoByUrl/'
+const MATCH_URL = /^https?:\/\/vid.me\/([a-z0-9]+)$/
+
+const cache = {} // Cache song data requests
+
+export default class Vidme extends FilePlayer {
+  static displayName = 'Vidme'
+  static canPlay (url) {
+    return MATCH_URL.test(url)
+  }
+  getData (url) {
+    const { onError } = this.props
+    const id = url.match(MATCH_URL)[1]
+    if (cache[id]) {
+      return Promise.resolve(cache[id])
+    }
+    return window.fetch(RESOLVE_URL + id)
+      .then(response => {
+        if (response.status === 200) {
+          cache[id] = response.json()
+          return cache[id]
+        } else {
+          onError(new Error('Vidme track could not be resolved'))
+        }
+      })
+  }
+  load (url) {
+    const { onError } = this.props
+    this.stop()
+    this.getData(url).then(data => {
+      if (!this.mounted) return
+      this.player.src = data.video.complete_url
+    }, onError)
+  }
+}