Fixes #56. Issue with clicking noise when using it as a controlled co…

…mponent
leoasis · Jan 19, 2018 · 219bd6c · 219bd6c
1 parent e649e3f
commit 219bd6c
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 45 deletions.
diff --git a/examples/src/Example.js b/examples/src/Example.js
@@ -9,15 +9,48 @@ export default class Example extends React.Component {
     super(props);
 
     this.state = {
+      controlled: true,
       currentSong: songs[0],
       position: 0,
       volume: 100,
       playbackRate: 1,
-      loop: true,
+      loop: false,
       playStatus: Sound.status.PLAYING
     };
   }
 
+  getStatusText() {
+    switch (this.state.playStatus) {
+      case Sound.status.PLAYING:
+        return 'playing';
+      case Sound.status.PAUSED:
+        return 'paused';
+      case Sound.status.STOPPED:
+        return 'stopped';
+      default:
+        return '(unknown)';
+    }
+  }
+
+  handleSongSelected = (song) => {
+    this.setState({ currentSong: song, position: 0 });
+  }
+
+  handleControlledComponentChange = (ev) => {
+    this.setState({
+      controlled: ev.target.checked,
+      position: 0
+    });
+  }
+
+  renderCurrentSong() {
+    return (
+      <p>
+        Current song {this.state.currentSong.title}. Song is {this.getStatusText()}
+      </p>
+    );
+  }
+
   render() {
     const { volume, playbackRate, loop } = this.state;
 
@@ -26,8 +59,9 @@ export default class Example extends React.Component {
         <SongSelector
           songs={songs}
           selectedSong={this.state.currentSong}
-          onSongSelected={this.handleSongSelected.bind(this)}
+          onSongSelected={this.handleSongSelected}
         />
+        <label><input type="checkbox" checked={this.state.controlled} onChange={this.handleControlledComponentChange}/> Controlled Component</label>
         {this.state.currentSong && this.renderCurrentSong()}
         <PlayerControls
           playStatus={this.state.playStatus}
@@ -47,48 +81,41 @@ export default class Example extends React.Component {
           playbackRate={playbackRate}
         />
         {this.state.currentSong && (
-          <Sound
-            url={this.state.currentSong.url}
-            playStatus={this.state.playStatus}
-            playFromPosition={this.state.position}
-            volume={volume}
-            playbackRate={playbackRate}
-            loop={loop}
-            onLoading={({ bytesLoaded, bytesTotal }) => console.log(`${bytesLoaded / bytesTotal * 100}% loaded`)}
-            onLoad={() => console.log('Loaded')}
-            onPlaying={({ position }) => console.log(position)}
-            onPause={() => console.log('Paused')}
-            onResume={() => console.log('Resumed')}
-            onStop={() => console.log('Stopped')}
-            onFinishedPlaying={() => this.setState({ playStatus: Sound.status.STOPPED })}
-          />
+          this.state.controlled ? (
+            <Sound
+              url={this.state.currentSong.url}
+              playStatus={this.state.playStatus}
+              position={this.state.position}
+              volume={volume}
+              playbackRate={playbackRate}
+              loop={loop}
+              onLoading={({ bytesLoaded, bytesTotal }) => console.log(`${bytesLoaded / bytesTotal * 100}% loaded`)}
+              onLoad={() => console.log('Loaded')}
+              onPlaying={({ position }) => this.setState({ position })}
+              onPause={() => console.log('Paused')}
+              onResume={() => console.log('Resumed')}
+              onStop={() => console.log('Stopped')}
+              onFinishedPlaying={() => this.setState({ playStatus: Sound.status.STOPPED })}
+            />
+          ) : (
+            <Sound
+              url={this.state.currentSong.url}
+              playStatus={this.state.playStatus}
+              playFromPosition={this.state.position}
+              volume={volume}
+              playbackRate={playbackRate}
+              loop={loop}
+              onLoading={({ bytesLoaded, bytesTotal }) => console.log(`${bytesLoaded / bytesTotal * 100}% loaded`)}
+              onLoad={() => console.log('Loaded')}
+              onPlaying={({ position }) => console.log('Position', position)}
+              onPause={() => console.log('Paused')}
+              onResume={() => console.log('Resumed')}
+              onStop={() => console.log('Stopped')}
+              onFinishedPlaying={() => this.setState({ playStatus: Sound.status.STOPPED })}
+            />
+          )
         )}
       </div>
     );
   }
-
-  getStatusText() {
-    switch (this.state.playStatus) {
-      case Sound.status.PLAYING:
-        return 'playing';
-      case Sound.status.PAUSED:
-        return 'paused';
-      case Sound.status.STOPPED:
-        return 'stopped';
-      default:
-        return '(unknown)';
-    }
-  }
-
-  renderCurrentSong() {
-    return (
-      <p>
-        Current song {this.state.currentSong.title}. Song is {this.getStatusText()}
-      </p>
-    );
-  }
-
-  handleSongSelected(song) {
-    this.setState({ currentSong: song, position: 0 });
-  }
 }
diff --git a/src/index.js b/src/index.js
@@ -71,7 +71,6 @@ export default class Sound extends React.Component {
   };
 
   static defaultProps = {
-    playFromPosition: 0,
     volume: 100,
     playbackRate: 1,
     onError: noop,
@@ -123,8 +122,10 @@ export default class Sound extends React.Component {
       }
     }
 
-    if (this.props.playFromPosition !== prevProps.playFromPosition) {
-      sound.setPosition(this.props.playFromPosition);
+    if (this.props.playFromPosition != null) {
+      if (this.props.playFromPosition !== prevProps.playFromPosition) {
+        sound.setPosition(this.props.playFromPosition);
+      }
     }
 
     if (this.props.position != null) {