Handle sound ending

Update UI play/stop button when the sound ends

Author: chrisgarrity

src/components/library/library.jsx

@@ -38,6 +38,7 @@ class LibraryComponent extends React.Component {
             'handleFilterClear',
             'handleMouseEnter',
             'handleMouseLeave',
+            'handlePlayingEnd',
             'handleSelect',
             'handleTagClick',
             'setFilteredDataRef'
@@ -54,6 +55,7 @@ class LibraryComponent extends React.Component {
         setTimeout(() => {
             this.setState({loaded: true});
         });
+        if (this.props.setStopHandler) this.props.setStopHandler(this.handlePlayingEnd);
     }
     componentDidUpdate (prevProps, prevState) {
         if (prevState.filterQuery !== this.state.filterQuery ||
@@ -75,7 +77,6 @@ class LibraryComponent extends React.Component {
         });
     }
     handleMouseEnter (id) {
-        console.log('Library MouseEnter id:', id, ', playingItem: ', this.state.playingItem);
         // don't restart if mouse over already playing item
         if (this.props.onItemMouseEnter && this.state.playingItem !== id) {
             this.setState({
@@ -90,6 +91,13 @@ class LibraryComponent extends React.Component {
             }, this.props.onItemMouseLeave(this.getFilteredData()[id]));
         }
     }
+    handlePlayingEnd () {
+        if (this.state.playingItem !== null) {
+            this.setState({
+                playingItem: null
+            });
+        }
+    }
     handleFilterChange (event) {
         this.setState({
             filterQuery: event.target.value,
@@ -239,6 +247,7 @@ LibraryComponent.propTypes = {
     onItemMouseLeave: PropTypes.func,
     onItemSelected: PropTypes.func,
     onRequestClose: PropTypes.func,
+    setStopHandler: PropTypes.func,
     showPlayButton: PropTypes.bool,
     tags: PropTypes.arrayOf(PropTypes.shape(TagButton.propTypes)),
     title: PropTypes.string.isRequired

src/containers/sound-library.jsx

@@ -29,7 +29,9 @@ class SoundLibrary extends React.PureComponent {
         bindAll(this, [
             'handleItemSelected',
             'handleItemMouseEnter',
-            'handleItemMouseLeave'
+            'handleItemMouseLeave',
+            'onStop',
+            'setStopHandler'
         ]);
 
         /**
@@ -43,6 +45,11 @@ class SoundLibrary extends React.PureComponent {
          * @type {Promise<SoundPlayer>}
          */
         this.playingSoundPromise = null;
+
+        /**
+         * function to call when the sound ends
+         */
+        this.handleStop = null;
     }
     componentDidMount () {
         this.audioEngine = new AudioEngine();
@@ -51,10 +58,22 @@ class SoundLibrary extends React.PureComponent {
     componentWillUnmount () {
         this.stopPlayingSound();
     }
+    onStop () {
+        if (this.playingSoundPromise !== null) {
+            this.playingSoundPromise.then(soundPlayer => soundPlayer.removeListener('stop', this.onStop));
+            if (this.handleStop) this.handleStop();
+        }
+
+    }
+    setStopHandler (func) {
+        this.handleStop = func;
+    }
     stopPlayingSound () {
         // Playback is queued, playing, or has played recently and finished
         // normally.
         if (this.playingSoundPromise !== null) {
+            // Forcing sound to stop, so stop listening for sound ending:
+            this.playingSoundPromise.then(soundPlayer => soundPlayer.removeListener('stop', this.onStop));
             // Queued playback began playing before this method.
             if (this.playingSoundPromise.isPlaying) {
                 // Fetch the player from the promise and stop playback soon.
@@ -102,6 +121,7 @@ class SoundLibrary extends React.PureComponent {
                 // Play the sound. Playing the sound will always come before a
                 // paired stop if the sound must stop early.
                 soundPlayer.play();
+                soundPlayer.addListener('stop', this.onStop);
                 // Set that the sound is playing. This affects the type of stop
                 // instruction given if the sound must stop early.
                 if (this.playingSoundPromise !== null) {
@@ -144,6 +164,7 @@ class SoundLibrary extends React.PureComponent {
                 showPlayButton
                 data={soundLibraryThumbnailData}
                 id="soundLibrary"
+                setStopHandler={this.setStopHandler}
                 tags={soundTags}
                 title={this.props.intl.formatMessage(messages.libraryTitle)}
                 onItemMouseEnter={this.handleItemMouseEnter}