prettier all the sources 💅

CHANGELOG.md

@@ -1,4 +1,7 @@
 ## CHANGELOG
+### 0.6.4
+Return `play` in HTML5 method so we can react to the promise
+
 ### 0.6.3
 Update ALL imports of PropTypes [#37](https://github.com/souporserious/react-media-player/pull/37)
 

package.json

@@ -1,20 +1,21 @@
 {
   "name": "react-media-player",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "React media player.",
   "main": "lib/react-media-player.js",
-  "files": [
-    "dist",
-    "lib"
-  ],
+  "files": ["dist", "lib"],
   "scripts": {
     "build:lib": "babel src --out-dir lib",
-    "build": "npm run build:lib && NODE_ENV=production webpack --config webpack.prod.config.js",
-    "dev": "webpack-dev-server --inline --hot --progress --colors --host 0.0.0.0 --devtool eval",
-    "postbuild": "NODE_ENV=production TARGET=minify webpack --config webpack.prod.config.js",
+    "build":
+      "npm run build:lib && NODE_ENV=production webpack --config webpack.prod.config.js",
+    "dev":
+      "webpack-dev-server --inline --hot --progress --colors --host 0.0.0.0 --devtool eval",
+    "postbuild":
+      "NODE_ENV=production TARGET=minify webpack --config webpack.prod.config.js",
     "prebuild": "rm -rf dist && mkdir dist",
     "prepublish": "npm run build",
-    "deploy": "NODE_ENV=production TARGET=minify webpack && git-directory-deploy --directory example --branch gh-pages"
+    "deploy":
+      "NODE_ENV=production TARGET=minify webpack && git-directory-deploy --directory example --branch gh-pages"
   },
   "repository": {
     "type": "git",
@@ -29,7 +30,8 @@
     "player",
     "playlist"
   ],
-  "author": "Travis Arnold <travis@souporserious.com> (http://souporserious.com)",
+  "author":
+    "Travis Arnold <travis@souporserious.com> (http://souporserious.com)",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/souporserious/react-media-player/issues"

src/Media.jsx

@@ -1,5 +1,5 @@
 import React, { Component, Children } from 'react'
-import PropTypes from 'prop-types';
+import PropTypes from 'prop-types'
 import ReactDOM, { findDOMNode } from 'react-dom'
 import contextTypes from './context-types'
 import requestFullscreen from './utils/request-fullscreen'
@@ -20,7 +20,7 @@ const MEDIA_EVENTS_KEYS = Object.keys(MEDIA_EVENTS)
 
 class Media extends Component {
   static propTypes = {
-    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired
+    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
   }
 
   static childContextTypes = contextTypes
@@ -33,7 +33,7 @@ class Media extends Component {
     isLoading: true,
     isPlaying: false,
     isMuted: false,
-    isFullscreen: false
+    isFullscreen: false,
   }
 
   _playerProps = {}
@@ -45,11 +45,11 @@ class Media extends Component {
       _mediaSetters: {
         setPlayer: this._setPlayer,
         setPlayerProps: this._setPlayerProps,
-        setPlayerState: this._setPlayerState
+        setPlayerState: this._setPlayerState,
       },
       _mediaGetters: {
-        getPlayerEvents: this._getPlayerEvents()
-      }
+        getPlayerEvents: this._getPlayerEvents(),
+      },
     }
   }
 
@@ -74,7 +74,7 @@ class Media extends Component {
       muteUnmute: this.muteUnmute,
       setVolume: this.setVolume,
       addVolume: this.addVolume,
-      fullscreen: this.fullscreen
+      fullscreen: this.fullscreen,
     }
   }
 
@@ -85,7 +85,7 @@ class Media extends Component {
       const stateKey = MEDIA_EVENTS[key]
       const propCallback = this._playerProps[key]
 
-      events[key] = (val) => {
+      events[key] = val => {
         if (stateKey) {
           this.setState({ [stateKey]: val })
         }
@@ -97,15 +97,15 @@ class Media extends Component {
     return events
   }
 
-  _setPlayer = (component) => {
+  _setPlayer = component => {
     this._player = component
   }
 
-  _setPlayerProps = (props) => {
+  _setPlayerProps = props => {
     this._playerProps = props
   }
 
-  _setPlayerState = (state) => {
+  _setPlayerState = state => {
     this.setState(state)
   }
 
@@ -129,14 +129,14 @@ class Media extends Component {
     this._player.stop()
   }
 
-  seekTo = (currentTime) => {
+  seekTo = currentTime => {
     this._player.seekTo(currentTime)
     this.setState({ currentTime })
   }
 
-  skipTime = (amount) => {
+  skipTime = amount => {
     const { currentTime, duration } = this.state
-    let newTime = (currentTime + amount)
+    let newTime = currentTime + amount
 
     if (newTime < 0) {
       newTime = 0
@@ -147,12 +147,12 @@ class Media extends Component {
     this.seekTo(newTime)
   }
 
-  mute = (isMuted) => {
+  mute = isMuted => {
     if (isMuted) {
       this._lastVolume = this.state.volume
       this._player.setVolume(0)
     } else {
-      const volume = (this._lastVolume > 0) ? this._lastVolume : 0.1
+      const volume = this._lastVolume > 0 ? this._lastVolume : 0.1
       this._player.setVolume(volume)
     }
     this._player.mute(isMuted)
@@ -162,8 +162,8 @@ class Media extends Component {
     this.mute(!this.state.isMuted)
   }
 
-  setVolume = (volume) => {
-    const isMuted = (volume <= 0)
+  setVolume = volume => {
+    const isMuted = volume <= 0
 
     if (isMuted !== this.state.isMuted) {
       this.mute(isMuted)
@@ -174,8 +174,8 @@ class Media extends Component {
     this._player.setVolume(volume)
   }
 
-  addVolume = (amount) => {
-    let newVolume = (this.state.volume + (amount * 0.01))
+  addVolume = amount => {
+    let newVolume = this.state.volume + amount * 0.01
 
     if (newVolume < 0) {
       newVolume = 0

src/Player.jsx

@@ -8,13 +8,13 @@ class Player extends Component {
     vendor: PropTypes.oneOf(['video', 'audio', 'youtube', 'vimeo']),
     defaultCurrentTime: PropTypes.number,
     defaultVolume: PropTypes.number,
-    defaultMuted: PropTypes.bool
+    defaultMuted: PropTypes.bool,
   }
 
   static defaultProps = {
     defaultCurrentTime: -1,
     defaultVolume: 1,
-    defaultMuted: false
+    defaultMuted: false,
   }
 
   static contextTypes = contextTypes
@@ -40,7 +40,7 @@ class Player extends Component {
         progress: 0,
         duration: 0,
         isLoading: true,
-        isPlaying: false
+        isPlaying: false,
       })
     }
   }
@@ -49,7 +49,7 @@ class Player extends Component {
     return this._component && this._component.instance
   }
 
-  _setPlayer = (component) => {
+  _setPlayer = component => {
     this.context._mediaSetters.setPlayer(component)
     this._component = component
   }
@@ -71,7 +71,7 @@ class Player extends Component {
     this._defaultsSet = true
   }
 
-  _setLoading = (isLoading) => {
+  _setLoading = isLoading => {
     this.context._mediaSetters.setPlayerState({ isLoading })
   }
 
@@ -114,22 +114,30 @@ class Player extends Component {
   }
 
   render() {
-    const { src, vendor: _vendor, autoPlay, onReady, onEnded, defaultCurrentTime, defaultVolume, defaultMuted, ...extraProps } = this.props
+    const {
+      src,
+      vendor: _vendor,
+      autoPlay,
+      onReady,
+      onEnded,
+      defaultCurrentTime,
+      defaultVolume,
+      defaultMuted,
+      ...extraProps
+    } = this.props
     const { vendor, component } = getVendor(src, _vendor)
 
-    return (
-      createElement(component, {
-        ref: this._setPlayer,
-        src,
-        vendor,
-        autoPlay,
-        isLoading: this._setLoading,
-        onReady: this._handleOnReady,
-        onEnded: this._handleOnEnded,
-        extraProps,
-        ...this.context._mediaGetters.getPlayerEvents,
-      })
-    )
+    return createElement(component, {
+      ref: this._setPlayer,
+      src,
+      vendor,
+      autoPlay,
+      isLoading: this._setLoading,
+      onReady: this._handleOnReady,
+      onEnded: this._handleOnEnded,
+      extraProps,
+      ...this.context._mediaGetters.getPlayerEvents,
+    })
   }
 }
 

src/context-types.js

@@ -1,7 +1,7 @@
-import PropTypes from 'prop-types';
+import PropTypes from 'prop-types'
 
 export default {
   media: PropTypes.object,
   _mediaSetters: PropTypes.object,
-  _mediaGetters: PropTypes.object
+  _mediaGetters: PropTypes.object,
 }

src/controls/Fullscreen.jsx

@@ -20,7 +20,7 @@ class Fullscreen extends Component {
         style={style}
         onClick={this._handleFullscreen}
       >
-        { media.isFullscreen ? 'Exit Fullscreen' : 'Fullscreen' }
+        {media.isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
       </button>
     )
   }

src/controls/MuteUnmute.jsx

@@ -20,7 +20,7 @@ class MuteUnmute extends Component {
         style={style}
         onClick={this._handleMuteUnmute}
       >
-        { media.isMuted ? 'Unmute' : 'Mute' }
+        {media.isMuted ? 'Unmute' : 'Mute'}
       </button>
     )
   }

src/controls/PlayPause.jsx

@@ -20,7 +20,7 @@ class PlayPause extends Component {
         style={style}
         onClick={this._handlePlayPause}
       >
-        { media.isPlaying ? 'Pause' : 'Play' }
+        {media.isPlaying ? 'Pause' : 'Play'}
       </button>
     )
   }

src/controls/SeekBar.jsx

@@ -7,8 +7,10 @@ class SeekBar extends Component {
   _onChangeUsed = false
 
   shouldComponentUpdate({ media }) {
-    return this.props.media.currentTime !== media.currentTime ||
-           this.props.media.duration !== media.duration
+    return (
+      this.props.media.currentTime !== media.currentTime ||
+      this.props.media.duration !== media.duration
+    )
   }
 
   _handleMouseDown = () => {
@@ -41,15 +43,15 @@ class SeekBar extends Component {
       <input
         type="range"
         step="any"
-        max={(duration).toFixed(4)}
+        max={duration.toFixed(4)}
         value={currentTime}
         onMouseDown={this._handleMouseDown}
         onMouseUp={this._handleMouseUp}
         onChange={this._handleChange}
         className={className}
         style={{
-          backgroundSize: (currentTime * 100 / duration) + '% 100%',
-          ...style
+          backgroundSize: currentTime * 100 / duration + '% 100%',
+          ...style,
         }}
       />
     )

src/controls/Volume.jsx

@@ -36,8 +36,8 @@ class Volume extends Component {
         onChange={this._handleChange}
         className={className}
         style={{
-          backgroundSize: (volume * 100 / 1) + '% 100%',
-          ...style
+          backgroundSize: volume * 100 / 1 + '% 100%',
+          ...style,
         }}
       />
     )

src/decorators/with-media-props.jsx

@@ -8,12 +8,7 @@ export default function withMediaProps(MediaComponent) {
     static contextTypes = contextTypes
 
     render() {
-      return (
-        <MediaComponent
-          {...this.props}
-          media={this.context.media}
-        />
-      )
+      return <MediaComponent {...this.props} media={this.context.media} />
     }
   }
 }

src/utils/exit-fullscreen.js

@@ -3,9 +3,7 @@ export default (() => {
     'exitFullscreen',
     'mozCancelFullScreen',
     'msExitFullscreen',
-    'webkitExitFullscreen'
+    'webkitExitFullscreen',
   ]
-  return names.reduce((prev, curr) =>
-    document[curr] ? curr : prev
-  )
+  return names.reduce((prev, curr) => (document[curr] ? curr : prev))
 })()

src/utils/format-time.js

@@ -1,6 +1,6 @@
 export default function formatTime(current) {
   let h = Math.floor(current / 3600)
-  let m = Math.floor((current - (h * 3600)) / 60)
+  let m = Math.floor((current - h * 3600) / 60)
   let s = Math.floor(current % 60)
 
   if (s < 10) {

src/utils/fullscreen-change.js

@@ -3,9 +3,7 @@ export default function fullscreenChange(type, callback) {
     'fullscreenchange',
     'mozfullscreenchange',
     'MSFullscreenChange',
-    'webkitfullscreenchange'
+    'webkitfullscreenchange',
   ]
-  vendors.forEach(vendor =>
-    document[`${type}EventListener`](vendor, callback)
-  )
+  vendors.forEach(vendor => document[`${type}EventListener`](vendor, callback))
 }