Add hover hooks to libraries and hook up sound hover action

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
 };
 

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,

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}
             />