diff --git a/src/components/library-item/library-item.jsx b/src/components/library-item/library-item.jsx index 6abe41b9721cfb01865d55b0b1b3bdc308119cba..8e113c9be08af583a36272da486fe8afe31e0367 100644 --- a/src/components/library-item/library-item.jsx +++ b/src/components/library-item/library-item.jsx @@ -8,17 +8,29 @@ const styles = require('./library-item.css'); class LibraryItem extends React.Component { constructor (props) { super(props); - bindAll(this, ['handleClick']); + bindAll(this, [ + 'handleClick', + 'handleMouseEnter', + 'handleMouseLeave' + ]); } handleClick (e) { this.props.onSelect(this.props.id); e.preventDefault(); } + handleMouseEnter () { + this.props.onMouseEnter(this.props.id); + } + handleMouseLeave () { + this.props.onMouseLeave(this.props.id); + } render () { return ( <Box className={styles.libraryItem} onClick={this.handleClick} + onMouseEnter={this.handleMouseEnter} + onMouseLeave={this.handleMouseLeave} > <Box className={styles.libraryItemImageContainer}> <img @@ -36,6 +48,8 @@ LibraryItem.propTypes = { iconURL: PropTypes.string.isRequired, id: PropTypes.number.isRequired, name: PropTypes.string.isRequired, + onMouseEnter: PropTypes.func.isRequired, + onMouseLeave: PropTypes.func.isRequired, onSelect: PropTypes.func.isRequired }; diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx index 3be748703243d9e5dcc6d2a4ba6f4ce3997c1328..71b29ff612ff1552eae7df150f2eaa9782a9120d 100644 --- a/src/components/library/library.jsx +++ b/src/components/library/library.jsx @@ -10,12 +10,22 @@ const styles = require('./library.css'); class LibraryComponent extends React.Component { constructor (props) { super(props); - bindAll(this, ['handleSelect']); + bindAll(this, [ + 'handleSelect', + 'handleMouseEnter', + 'handleMouseLeave' + ]); } handleSelect (id) { this.props.onRequestClose(); this.props.onItemSelected(this.props.data[id]); } + handleMouseEnter (id) { + if (this.props.onItemMouseEnter) this.props.onItemMouseEnter(this.props.data[id]); + } + handleMouseLeave (id) { + if (this.props.onItemMouseLeave) this.props.onItemMouseLeave(this.props.data[id]); + } render () { if (!this.props.visible) return null; return ( @@ -36,6 +46,8 @@ class LibraryComponent extends React.Component { id={itemId} key={`item_${itemId}`} name={dataItem.name} + onMouseEnter={this.handleMouseEnter} + onMouseLeave={this.handleMouseLeave} onSelect={this.handleSelect} /> ); @@ -57,6 +69,8 @@ LibraryComponent.propTypes = { }) /* eslint-enable react/no-unused-prop-types, lines-around-comment */ ), + onItemMouseEnter: PropTypes.func, + onItemMouseLeave: PropTypes.func, onItemSelected: PropTypes.func, onRequestClose: PropTypes.func, title: PropTypes.string.isRequired, diff --git a/src/containers/sound-library.jsx b/src/containers/sound-library.jsx index d478d141a7f6d8c538a03830b7583d4d39ad990c..f267959a8af0a5062a442be832b66bcfec526c55 100644 --- a/src/containers/sound-library.jsx +++ b/src/containers/sound-library.jsx @@ -14,14 +14,18 @@ class SoundLibrary extends React.Component { super(props); bindAll(this, [ 'handleItemSelected', - 'handleItemChosen' + 'handleItemMouseEnter', + 'handleItemMouseLeave' ]); } componentDidMount () { this.audioEngine = new AudioEngine(); this.player = this.audioEngine.createPlayer(); } - handleItemChosen (soundItem) { + componentWillReceiveProps (newProps) { + if (this.player && !newProps.visible) this.player.stopAllSounds(); + } + handleItemMouseEnter (soundItem) { const md5ext = soundItem._md5; const idParts = md5ext.split('.'); const md5 = idParts[0]; @@ -39,6 +43,9 @@ class SoundLibrary extends React.Component { this.player.playSound(soundItem._md5); }); } + handleItemMouseLeave () { + this.player.stopAllSounds(); + } handleItemSelected (soundItem) { const vmSound = { format: soundItem.format, @@ -68,7 +75,8 @@ class SoundLibrary extends React.Component { data={soundLibraryThumbnailData} title="Sound Library" visible={this.props.visible} - onItemChosen={this.handleItemChosen} + onItemMouseEnter={this.handleItemMouseEnter} + onItemMouseLeave={this.handleItemMouseLeave} onItemSelected={this.handleItemSelected} onRequestClose={this.props.onRequestClose} />