Add sprite

src/components/crash-message/crash-message.jsx

@@ -33,7 +33,7 @@ const CrashMessage = props => (
                     />
                 </p>
             )}
-            <a href={`${BASE_API_URL}/`} className={styles.textLink}>Go back to project list</a>
+            <a href={`${BASE_API_URL}/`} className={styles.textLink}>Go back to projects list</a>
         </Box>
     </div>
 );

src/components/menu-bar/menu-bar.jsx

@@ -61,6 +61,7 @@ import collectMetadata from '../../lib/collect-metadata';
 import styles from './menu-bar.css';
 
 import remixIcon from './icon--remix.svg';
+import mystuffIcon from './icon--mystuff.png';
 import dropdownCaret from './dropdown-caret.svg';
 import languageIcon from '../language-selector/language-icon.svg';
 import aboutIcon from './icon--about.svg';
@@ -629,6 +630,21 @@ class MenuBar extends React.Component {
                         )}
                     </div>
                     {this.props.sessionExists &&
+                    <React.Fragment>
+                        <a href={`${BASE_API_URL}`}>
+                            <div
+                                className={classNames(
+                                    styles.menuBarItem,
+                                    styles.hoverable,
+                                    styles.mystuffButton
+                                )}
+                            >
+                                <img
+                                    className={styles.mystuffIcon}
+                                    src={mystuffIcon}
+                                />
+                            </div>
+                        </a>
                         <AccountNav
                             className={classNames(
                                 styles.menuBarItem,
@@ -641,7 +657,9 @@ class MenuBar extends React.Component {
                             onClick={this.props.onClickAccount}
                             onClose={this.props.onRequestCloseAccount}
                             onLogOut={this.handleLogout}
-                        />}
+                        />
+                    </React.Fragment>
+                    }
                 </div>
 
                 {aboutButton}

src/containers/costume-library.jsx

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {defineMessages, injectIntl, intlShape} from 'react-intl';
 import VM from 'scratch-vm';
+import {connect} from 'react-redux';
 
-import costumeLibraryContent from '../lib/libraries/costumes.json';
 import spriteTags from '../lib/libraries/sprite-tags';
 import LibraryComponent from '../components/library/library.jsx';
 
@@ -36,14 +36,16 @@ class CostumeLibrary extends React.PureComponent {
     }
     render () {
         return (
-            <LibraryComponent
-                data={costumeLibraryContent}
+            this.props.costumes
+            ? <LibraryComponent
+                data={this.props.costumes}
                 id="costumeLibrary"
                 tags={spriteTags}
                 title={this.props.intl.formatMessage(messages.libraryTitle)}
                 onItemSelected={this.handleItemSelected}
                 onRequestClose={this.props.onRequestClose}
             />
+            : null
         );
     }
 }
@@ -54,4 +56,10 @@ CostumeLibrary.propTypes = {
     vm: PropTypes.instanceOf(VM).isRequired
 };
 
-export default injectIntl(CostumeLibrary);
+const mapStateToProps = state => {
+    return {
+        costumes: state.assets.costumes,
+    };
+};
+
+export default injectIntl(connect(mapStateToProps,null)(CostumeLibrary));

src/containers/costume-tab.jsx

@@ -34,7 +34,6 @@ import paintIcon from '../components/action-menu/icon--paint.svg';
 import surpriseIcon from '../components/action-menu/icon--surprise.svg';
 import searchIcon from '../components/action-menu/icon--search.svg';
 
-import costumeLibraryContent from '../lib/libraries/costumes.json';
 import backdropLibraryContent from '../lib/libraries/backdrops.json';
 
 let messages = defineMessages({
@@ -168,16 +167,18 @@ class CostumeTab extends React.Component {
         this.handleNewCostume(emptyCostume(name));
     }
     handleSurpriseCostume () {
-        const item = costumeLibraryContent[Math.floor(Math.random() * costumeLibraryContent.length)];
-        const vmCostume = {
-            name: item.name,
-            md5: item.md5ext,
-            rotationCenterX: item.rotationCenterX,
-            rotationCenterY: item.rotationCenterY,
-            bitmapResolution: item.bitmapResolution,
-            skinId: null
-        };
-        this.handleNewCostume(vmCostume, true /* fromCostumeLibrary */);
+        if(this.props.costumes){
+            const item = this.props.costumes[Math.floor(Math.random() * this.props.costumes.length)];
+            const vmCostume = {
+                name: item.name,
+                md5: item.md5ext,
+                rotationCenterX: item.rotationCenterX,
+                rotationCenterY: item.rotationCenterY,
+                bitmapResolution: item.bitmapResolution,
+                skinId: null
+            };
+            this.handleNewCostume(vmCostume, true /* fromCostumeLibrary */);
+        }
     }
     handleSurpriseBackdrop () {
         const item = backdropLibraryContent[Math.floor(Math.random() * backdropLibraryContent.length)];
@@ -349,15 +350,17 @@ CostumeTab.propTypes = {
             name: PropTypes.string.isRequired
         }))
     }),
-    vm: PropTypes.instanceOf(VM)
+    vm: PropTypes.instanceOf(VM),
+    costumes: PropTypes.arrayOf(PropTypes.object)
 };
 
 const mapStateToProps = state => ({
     editingTarget: state.scratchGui.targets.editingTarget,
     isRtl: state.locales.isRtl,
     sprites: state.scratchGui.targets.sprites,
     stage: state.scratchGui.targets.stage,
-    dragging: state.scratchGui.assetDrag.dragging
+    dragging: state.scratchGui.assetDrag.dragging,
+    costumes: state.assets.costumes
 });
 
 const mapDispatchToProps = dispatch => ({

src/containers/gui.jsx

@@ -25,6 +25,7 @@ import {
     closeTelemetryModal,
     openExtensionLibrary
 } from '../reducers/modals';
+import { setCostumes, setSounds, setSprites } from '../reducers/assets.js';
 import { setSession } from "../reducers/session.js";
 
 import FontLoaderHOC from '../lib/font-loader-hoc.jsx';
@@ -41,6 +42,8 @@ import cloudManagerHOC from '../lib/cloud-manager-hoc.jsx';
 
 import GUIComponent from '../components/gui/gui.jsx';
 import {setIsScratchDesktop} from '../lib/isScratchDesktop.js';
+import { BASE_API_URL } from '../utils/constants.js';
+import customFetch from '../apis/customFetch.js';
 import { setModalExtension } from '../reducers/modal-choose-extension.js';
 
 class GUI extends React.Component {
@@ -62,6 +65,47 @@ class GUI extends React.Component {
             // At this time the project view in www doesn't need to know when a project is unloaded
             this.props.onProjectLoaded();
         }
+        if(this.props.token !== prevProps.token){
+            this.getSpritesFromApi();
+            this.getCostumesFromApi();
+            this.getSoundsFromApi();
+        }
+    }
+    getSpritesFromApi () {
+        this.props.onCustomFetch(`${BASE_API_URL}/md/api/sprites`, 'GET', this.props.token, this.props.onSetSession)
+            .then(response => {
+                this.props.onSetSprites(response);
+            })
+            .catch(error => {
+                console.error(
+                    'There was a problem fetching the sprites:',
+                    error
+                );
+            });
+    }
+    getCostumesFromApi () {
+        this.props.onCustomFetch(`${BASE_API_URL}/md/api/costumes`, 'GET', this.props.token, this.props.onSetSession)
+            .then(response => {
+                this.props.onSetCostumes(response);
+            })
+            .catch(error => {
+                console.error(
+                    'There was a problem fetching the costumes:',
+                    error
+                );
+            });
+        }
+    getSoundsFromApi () {
+        this.props.onCustomFetch(`${BASE_API_URL}/md/api/assets/sounds`, 'GET', this.props.token, this.props.onSetSession)
+            .then(response => {
+                this.props.onSetSounds(response);
+            })
+            .catch(error => {
+                console.error(
+                    'There was a problem fetching the sounds:',
+                    error
+                );
+            });
     }
     handleShowExtension(isFromButtonClick = false) {
         if(isFromButtonClick) {
@@ -89,8 +133,12 @@ class GUI extends React.Component {
             onStorageInit,
             onUpdateProjectId,
             onVmInit,
+            onSetSprites,
+            onSetCostumes,
+            onSetSounds,
             onSetSession,
             onProjectError,
+            onCustomFetch,
             projectHost,
             projectId,
             showExtension,
@@ -131,22 +179,28 @@ GUI.propTypes = {
     onStorageInit: PropTypes.func,
     onUpdateProjectId: PropTypes.func,
     onVmInit: PropTypes.func,
+    onSetSprites: PropTypes.func,
+    onSetCostumes: PropTypes.func,
+    onSetSounds: PropTypes.func,
     onSetSession: PropTypes.func,
     onProjectError: PropTypes.func,
+    onCustomFetch: PropTypes.func.isRequired,
     projectHost: PropTypes.string,
     projectId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     setModalExtensionVisibility: PropTypes.func,
     // showExtension: PropTypes.func,
     telemetryModalVisible: PropTypes.bool,
-    vm: PropTypes.instanceOf(VM).isRequired
+    vm: PropTypes.instanceOf(VM).isRequired,
+    token: PropTypes.string
 };
 
 GUI.defaultProps = {
     isScratchDesktop: false,
     onStorageInit: storageInstance => storageInstance.addOfficialScratchWebStores(),
     onProjectLoaded: () => {},
     onUpdateProjectId: () => {},
-    onVmInit: (/* vm */) => {}
+    onVmInit: (/* vm */) => {},
+    onCustomFetch: customFetch,
 };
 
 const mapStateToProps = state => {
@@ -176,7 +230,8 @@ const mapStateToProps = state => {
         ),
         telemetryModalVisible: state.scratchGui.modals.telemetryModal,
         tipsLibraryVisible: state.scratchGui.modals.tipsLibrary,
-        vm: state.scratchGui.vm
+        vm: state.scratchGui.vm,
+        token: state.session.session.token
     };
 };
 
@@ -187,6 +242,9 @@ const mapDispatchToProps = dispatch => ({
     onRequestCloseBackdropLibrary: () => dispatch(closeBackdropLibrary()),
     onRequestCloseCostumeLibrary: () => dispatch(closeCostumeLibrary()),
     onRequestCloseTelemetryModal: () => dispatch(closeTelemetryModal()),
+    onSetSprites: (sprites) => dispatch(setSprites(sprites)),
+    onSetCostumes: (costumes) => dispatch(setCostumes(costumes)),
+    onSetSounds: (sounds) => dispatch(setSounds(sounds)),
     onSetSession: (token) => dispatch(setSession(token)),
     onProjectError: error => dispatch(projectError(error)),
     showExtension: () => dispatch(openExtensionLibrary()),

src/containers/library-item.jsx

@@ -4,6 +4,7 @@ import React from 'react';
 import {injectIntl} from 'react-intl';
 
 import LibraryItemComponent from '../components/library-item/library-item.jsx';
+import { BASE_API_URL } from '../utils/constants.js';
 
 class LibraryItem extends React.PureComponent {
     constructor (props) {
@@ -106,7 +107,7 @@ class LibraryItem extends React.PureComponent {
     render () {
         const iconMd5 = this.curIconMd5();
         const iconURL = iconMd5 ?
-            `https://cdn.assets.scratch.mit.edu/internalapi/asset/${iconMd5}/get/` :
+            `${BASE_API_URL}/md/api/assets?assetID=${iconMd5.replace(".svg", '')}` :
             this.props.iconRawURL;
         return (
             <LibraryItemComponent

src/containers/sound-library.jsx

@@ -10,7 +10,6 @@ import LibraryComponent from '../components/library/library.jsx';
 import soundIcon from '../components/library-item/lib-icon--sound.svg';
 import soundIconRtl from '../components/library-item/lib-icon--sound-rtl.svg';
 
-import soundLibraryContent from '../lib/libraries/sounds.json';
 import soundTags from '../lib/libraries/sound-tags';
 
 import {connect} from 'react-redux';
@@ -147,6 +146,7 @@ class SoundLibrary extends React.PureComponent {
     }
     render () {
         // @todo need to use this hack to avoid library using md5 for image
+        const soundLibraryContent = this.props.sounds
         const soundLibraryThumbnailData = soundLibraryContent.map(sound => {
             const {
                 md5ext,
@@ -160,18 +160,20 @@ class SoundLibrary extends React.PureComponent {
         });
 
         return (
-            <LibraryComponent
-                showPlayButton
-                data={soundLibraryThumbnailData}
-                id="soundLibrary"
-                setStopHandler={this.setStopHandler}
-                tags={soundTags}
-                title={this.props.intl.formatMessage(messages.libraryTitle)}
-                onItemMouseEnter={this.handleItemMouseEnter}
-                onItemMouseLeave={this.handleItemMouseLeave}
-                onItemSelected={this.handleItemSelected}
-                onRequestClose={this.props.onRequestClose}
-            />
+            this.props.sounds
+                ? <LibraryComponent
+                    showPlayButton
+                    data={soundLibraryThumbnailData}
+                    id="soundLibrary"
+                    setStopHandler={this.setStopHandler}
+                    tags={soundTags}
+                    title={this.props.intl.formatMessage(messages.libraryTitle)}
+                    onItemMouseEnter={this.handleItemMouseEnter}
+                    onItemMouseLeave={this.handleItemMouseLeave}
+                    onItemSelected={this.handleItemSelected}
+                    onRequestClose={this.props.onRequestClose}
+                />
+                : null
         );
     }
 }
@@ -181,11 +183,13 @@ SoundLibrary.propTypes = {
     isRtl: PropTypes.bool,
     onNewSound: PropTypes.func.isRequired,
     onRequestClose: PropTypes.func,
-    vm: PropTypes.instanceOf(VM).isRequired
+    vm: PropTypes.instanceOf(VM).isRequired,
+    sounds: PropTypes.arrayOf(PropTypes.object)
 };
 
 const mapStateToProps = state => ({
-    isRtl: state.locales.isRtl
+    isRtl: state.locales.isRtl,
+    sounds: state.assets.sounds,
 });
 
 const mapDispatchToProps = () => ({});

src/containers/sound-tab.jsx

@@ -17,7 +17,6 @@ import RecordModal from './record-modal.jsx';
 import SoundEditor from './sound-editor.jsx';
 import SoundLibrary from './sound-library.jsx';
 
-import soundLibraryContent from '../lib/libraries/sounds.json';
 import {handleFileUpload, soundUpload} from '../lib/file-uploader.js';
 import errorBoundaryHOC from '../lib/error-boundary-hoc.jsx';
 import DragConstants from '../lib/drag-constants';
@@ -111,6 +110,8 @@ class SoundTab extends React.Component {
     }
 
     handleSurpriseSound () {
+        // TODO: maybe wrap this code inside if statement this.props.sounds
+        const soundLibraryContent = this.props.sounds;
         const soundItem = soundLibraryContent[Math.floor(Math.random() * soundLibraryContent.length)];
         const vmSound = {
             format: soundItem.dataFormat,
@@ -289,6 +290,7 @@ SoundTab.propTypes = {
     onShowImporting: PropTypes.func.isRequired,
     soundLibraryVisible: PropTypes.bool,
     soundRecorderVisible: PropTypes.bool,
+    sounds: PropTypes.arrayOf(PropTypes.object),
     sprites: PropTypes.shape({
         id: PropTypes.shape({
             sounds: PropTypes.arrayOf(PropTypes.shape({
@@ -310,7 +312,8 @@ const mapStateToProps = state => ({
     sprites: state.scratchGui.targets.sprites,
     stage: state.scratchGui.targets.stage,
     soundLibraryVisible: state.scratchGui.modals.soundLibrary,
-    soundRecorderVisible: state.scratchGui.modals.soundRecorder
+    soundRecorderVisible: state.scratchGui.modals.soundRecorder,
+    sounds: state.assets.sounds
 });
 
 const mapDispatchToProps = dispatch => ({