Add sound loading and playback on click

src/components/library/library.jsx

@@ -17,6 +17,10 @@ class LibraryComponent extends React.Component {
             // Double select: select as the library's value.
             this.props.onRequestClose();
             this.props.onItemSelected(this.props.data[id]);
+        } else {
+            if (this.props.onItemChosen) {
+                this.props.onItemChosen(this.props.data[id]);
+            }
         }
         this.setState({selectedItem: id});
     }
@@ -61,6 +65,7 @@ LibraryComponent.propTypes = {
         })
         /* eslint-enable react/no-unused-prop-types, lines-around-comment */
     ),
+    onItemChosen: React.PropTypes.func,
     onItemSelected: React.PropTypes.func,
     onRequestClose: React.PropTypes.func,
     title: React.PropTypes.string.isRequired,

src/containers/sound-library.jsx

@@ -1,24 +1,44 @@
 const bindAll = require('lodash.bindall');
 const React = require('react');
 const VM = require('scratch-vm');
+const AudioEngine = require('scratch-audio');
 
 const LibaryComponent = require('../components/library/library.jsx');
 const soundIcon = require('../components/target-pane/icon--sound-dark.svg');
 
 const soundLibraryContent = require('../lib/libraries/sounds.json');
 
+const md5ToUrl = md5 => (`https://cdn.assets.scratch.mit.edu/internalapi/asset/${md5}/get/`);
+
 class SoundLibrary extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
-            'handleItemSelected'
+            'handleItemSelected',
+            'handleItemChosen'
         ]);
     }
+    componentDidMount () {
+        // @todo lots of architectural questions here
+        // - Should the sound library component own an audio player, or use the VM?
+        // - Should the sound library load up all the sounds or only on demand?
+        // - How can we get a callback for knowing when the sound has been loaded?
+        this.audioEngine = new AudioEngine();
+        this.player = this.audioEngine.createPlayer();
+        this.audioEngine.loadSounds(soundLibraryContent.map(sound => (
+            {
+                fileUrl: md5ToUrl(sound.md5),
+                ...sound
+            }
+        )));
+    }
+    handleItemChosen (item) {
+        this.player.playSound(item._md5);
+    }
     handleItemSelected (item) {
         // @todo these two props should be handled by a VM.addSound function
         const nextSoundId = this.props.vm.editingTarget.sprite.sounds.length;
-        const fileUrl = `https://cdn.assets.scratch.mit.edu/internalapi/asset/${item._md5}/get/`;
-
+        const fileUrl = md5ToUrl(item._md5);
         const vmSound = {
             fileUrl,
             format: item.format,
@@ -28,25 +48,20 @@ class SoundLibrary extends React.Component {
             soundID: nextSoundId,
             name: item.name
         };
-
         // @todo awaiting an official VM.addSound function
         // it will need to both add to sprite and load the sound
         this.props.vm.editingTarget.sprite.sounds.push(vmSound);
         this.props.vm.runtime.audioEngine.loadSounds([vmSound]);
     }
     render () {
-        /*
-            @todo the library is overfit for images,
-            have to use this hack to avoid using md5 for file image
-        */
+        // @todo need to use this hack to avoid library using md5 for image
         const soundLibraryThumbnailData = soundLibraryContent.map(sound => {
             const {
                 md5,
                 ...otherData
             } = sound;
             return {
                 _md5: md5,
-                // @todo another part of the hack for thumbnails
                 rawURL: soundIcon,
                 ...otherData
             };
@@ -57,6 +72,7 @@ class SoundLibrary extends React.Component {
                 data={soundLibraryThumbnailData}
                 title="Sound Library"
                 visible={this.props.visible}
+                onItemChosen={this.handleItemChosen}
                 onItemSelected={this.handleItemSelected}
                 onRequestClose={this.props.onRequestClose}
             />