Set volume to null by default

- Fixes cookpete/react-player#357
- Fixes `onStart` not firing when changing URLs
- Moves the forced `setVolume` to run on ready instead of every play event

Author: philip-luther

README.md

@@ -65,12 +65,12 @@ Prop | Description | Default
 `url` | The url of a video or song to play
 `playing` | Set to `true` or `false` to pause or play the media | `false`
 `loop` | Set to `true` or `false` to loop the media | `false`
-`controls` | Set to `true` or `false` to display native player controls<br />*Note: Vimeo, Twitch and Wistia player controls are not configurable and will always display* | `false`
-`volume` | Sets the volume of the appropriate player | `0.8`
-`muted` | Mutes the player | `false`
-`playbackRate` | Sets the playback rate of the appropriate player<br />*Note: Only supported by YouTube, Wistia, and file paths* | `1`
-`width` | Sets the width of the player | `640px`
-`height` | Sets the height of the player | `360px`
+`controls` | Set to `true` or `false` to display native player controls<br />&nbsp; ◦ &nbsp;Vimeo, Twitch and Wistia player will always display controls | `false`
+`volume` | Set the volume of the player, between `0` and `1`<br/>&nbsp; ◦ &nbsp;`null` uses default volume on all players [`#357`](https://github.com/CookPete/react-player/issues/357) | `null`
+`muted` | Mutes the player<br/>&nbsp; ◦ &nbsp;Only works if `volume` is set | `false`
+`playbackRate` | Set the playback rate of the player<br />&nbsp; ◦ &nbsp;Only supported by YouTube, Wistia, and file paths | `1`
+`width` | Set the width of the player | `640px`
+`height` | Set the height of the player | `360px`
 `style` | Add [inline styles](https://facebook.github.io/react/tips/inline-styles.html) to the root element | `{}`
 `progressInterval` | The time between `onProgress` callbacks, in milliseconds | `1000`
 `playsinline` | Applies the `playsinline` attribute where supported | `false`

src/Player.js

@@ -32,6 +32,7 @@ export default class Player extends Component {
     const { url, playing, volume, muted, playbackRate } = this.props
     if (url !== nextProps.url) {
       this.isLoading = true
+      this.startOnPlay = true
       this.onDurationCalled = false
       this.player.load(nextProps.url, this.isReady)
     }
@@ -41,11 +42,13 @@ export default class Player extends Component {
     if (playing && !nextProps.playing && this.isPlaying) {
       this.player.pause()
     }
-    if (volume !== nextProps.volume && !nextProps.muted) {
-      this.player.setVolume(nextProps.volume)
-    }
-    if (muted !== nextProps.muted) {
-      this.player.setVolume(nextProps.muted ? 0 : nextProps.volume)
+    if (nextProps.volume !== null) {
+      if (volume !== nextProps.volume && !nextProps.muted) {
+        this.player.setVolume(nextProps.volume)
+      }
+      if (muted !== nextProps.muted) {
+        this.player.setVolume(nextProps.muted ? 0 : nextProps.volume)
+      }
     }
     if (playbackRate !== nextProps.playbackRate && this.player.setPlaybackRate) {
       this.player.setPlaybackRate(nextProps.playbackRate)
@@ -116,8 +119,11 @@ export default class Player extends Component {
     if (!this.mounted) return
     this.isReady = true
     this.isLoading = false
-    const { onReady, playing } = this.props
+    const { onReady, playing, volume, muted } = this.props
     onReady()
+    if (muted || volume !== null) {
+      this.player.setVolume(muted ? 0 : volume)
+    }
     if (playing) {
       this.player.play()
     }
@@ -126,15 +132,14 @@ export default class Player extends Component {
   onPlay = () => {
     this.isPlaying = true
     this.isLoading = false
-    const { volume, muted, onStart, onPlay, playbackRate } = this.props
+    const { onStart, onPlay, playbackRate } = this.props
     if (this.startOnPlay) {
       if (this.player.setPlaybackRate) {
         this.player.setPlaybackRate(playbackRate)
       }
       onStart()
       this.startOnPlay = false
     }
-    this.player.setVolume(muted ? 0 : volume)
     onPlay()
     if (this.seekOnPlay) {
       this.seekTo(this.seekOnPlay)

src/props.js

@@ -66,7 +66,7 @@ export const defaultProps = {
   playing: false,
   loop: false,
   controls: false,
-  volume: 0.8,
+  volume: null,
   muted: false,
   playbackRate: 1,
   width: '640px',