diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx index 0a86c26dbff2f94f6624c9ff220fa29027af724b..f2c8e770b2e6d7069cfae5546a13cf68fd49c654 100644 --- a/src/components/library/library.jsx +++ b/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 diff --git a/src/containers/sound-library.jsx b/src/containers/sound-library.jsx index 677d93dfb9671b98249082f146fff61f0fc841e2..d3b9782d1a4eed68442deb3ba07b0ef7af3361f3 100644 --- a/src/containers/sound-library.jsx +++ b/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}