feat: support fetching dynamic assets and merging them to asset libra…

packages/scratch-gui/src/containers/backdrop-library.jsx

@@ -2,8 +2,11 @@ import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {defineMessages, injectIntl} from 'react-intl';
+import {connect} from 'react-redux';
 import intlShape from '../lib/intlShape.js';
+import {costumeShape} from '../lib/assets-prop-types.js';
 import VM from '@scratch/scratch-vm';
+import mergeDynamicAssets from '../lib/merge-dynamic-assets.js';
 
 import backdropLibraryContent from '../lib/libraries/backdrops.json';
 import backdropTags from '../lib/libraries/backdrop-tags';
@@ -22,8 +25,10 @@ class BackdropLibrary extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
-            'handleItemSelect'
+            'handleItemSelect',
+            'mergeDynamicAssets'
         ]);
+        this.processedBackdrops = {};
     }
     handleItemSelect (item) {
         const vmBackdrop = {
@@ -36,10 +41,22 @@ class BackdropLibrary extends React.Component {
         // Do not switch to stage, just add the backdrop
         this.props.vm.addBackdrop(item.md5ext, vmBackdrop);
     }
+    mergeDynamicAssets () {
+        if (this.processedBackdrops.source === this.props.dynamicBackdrops) {
+            return this.processedBackdrops.data;
+        }
+        this.processedBackdrops = mergeDynamicAssets(
+            backdropLibraryContent,
+            this.props.dynamicBackdrops
+        );
+
+        return this.processedBackdrops.data;
+    }
     render () {
+        const mergedAssets = this.mergeDynamicAssets();
         return (
             <LibraryComponent
-                data={backdropLibraryContent}
+                data={mergedAssets}
                 id="backdropLibrary"
                 tags={backdropTags}
                 title={this.props.intl.formatMessage(messages.libraryTitle)}
@@ -48,12 +65,17 @@ class BackdropLibrary extends React.Component {
             />
         );
     }
-}
+};
+
+const mapStateToProps = state => ({
+    dynamicBackdrops: state.scratchGui.dynamicAssets.backdrops
+});
 
 BackdropLibrary.propTypes = {
+    dynamicBackdrops: PropTypes.arrayOf(costumeShape),
     intl: intlShape.isRequired,
     onRequestClose: PropTypes.func,
     vm: PropTypes.instanceOf(VM).isRequired
 };
 
-export default injectIntl(BackdropLibrary);
+export default injectIntl(connect(mapStateToProps)(BackdropLibrary));

packages/scratch-gui/src/containers/costume-library.jsx

@@ -2,8 +2,11 @@ import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {defineMessages, injectIntl} from 'react-intl';
+import {connect} from 'react-redux';
 import intlShape from '../lib/intlShape.js';
+import {costumeShape} from '../lib/assets-prop-types.js';
 import VM from '@scratch/scratch-vm';
+import mergeDynamicAssets from '../lib/merge-dynamic-assets.js';
 
 import costumeLibraryContent from '../lib/libraries/costumes.json';
 import spriteTags from '../lib/libraries/sprite-tags';
@@ -22,8 +25,10 @@ class CostumeLibrary extends React.PureComponent {
     constructor (props) {
         super(props);
         bindAll(this, [
-            'handleItemSelected'
+            'handleItemSelected',
+            'mergeDynamicAssets'
         ]);
+        this.processedCostumes = {};
     }
     handleItemSelected (item) {
         const vmCostume = {
@@ -35,10 +40,21 @@ class CostumeLibrary extends React.PureComponent {
         };
         this.props.vm.addCostumeFromLibrary(item.md5ext, vmCostume);
     }
+    mergeDynamicAssets () {
+        if (this.processedCostumes.source === this.props.dynamicCostumes) {
+            return this.processedCostumes.data;
+        }
+        this.processedCostumes = mergeDynamicAssets(
+            costumeLibraryContent,
+            this.props.dynamicCostumes
+        );
+        return this.processedCostumes.data;
+    }
     render () {
+        const data = this.mergeDynamicAssets();
         return (
             <LibraryComponent
-                data={costumeLibraryContent}
+                data={data}
                 id="costumeLibrary"
                 tags={spriteTags}
                 title={this.props.intl.formatMessage(messages.libraryTitle)}
@@ -47,12 +63,17 @@ class CostumeLibrary extends React.PureComponent {
             />
         );
     }
-}
+};
+
+const mapStateToProps = state => ({
+    dynamicCostumes: state.scratchGui.dynamicAssets.costumes
+});
 
 CostumeLibrary.propTypes = {
+    dynamicCostumes: PropTypes.arrayOf(costumeShape),
     intl: intlShape.isRequired,
     onRequestClose: PropTypes.func,
     vm: PropTypes.instanceOf(VM).isRequired
 };
 
-export default injectIntl(CostumeLibrary);
+export default injectIntl(connect(mapStateToProps)(CostumeLibrary));

packages/scratch-gui/src/containers/gui.jsx

@@ -28,6 +28,7 @@ import {
 } from '../reducers/modals';
 
 import {setPlatform} from '../reducers/platform';
+import {setDynamicAssets} from '../reducers/dynamic-assets';
 
 import FontLoaderHOC from '../lib/font-loader-hoc.jsx';
 import LocalizationHOC from '../lib/localization-hoc.jsx';
@@ -45,6 +46,11 @@ import {PLATFORM} from '../lib/platform.js';
 import GUIComponent from '../components/gui/gui.jsx';
 import {GUIStoragePropType} from '../gui-config';
 import {AccountMenuOptionsPropTypes} from '../lib/account-menu-options';
+import {
+    costumeShape,
+    soundShape,
+    spriteShape
+} from '../lib/assets-prop-types.js';
 
 class GUI extends React.Component {
     componentDidMount () {
@@ -54,8 +60,14 @@ class GUI extends React.Component {
         if (this.props.platform) {
             this.props.setPlatform(this.props.platform);
         }
+        if (this.props.dynamicAssets) {
+            this.props.onUpdateDynamicAssets(this.props.dynamicAssets);
+        }
     }
     componentDidUpdate (prevProps) {
+        if (this.props.dynamicAssets !== prevProps.dynamicAssets) {
+            this.props.onUpdateDynamicAssets(this.props.dynamicAssets);
+        }
         if (this.props.projectId !== prevProps.projectId) {
             if (this.props.projectId !== null) {
                 this.props.onUpdateProjectId(this.props.projectId);
@@ -116,6 +128,12 @@ GUI.propTypes = {
     assetHost: PropTypes.string,
     children: PropTypes.node,
     cloudHost: PropTypes.string,
+    dynamicAssets: PropTypes.shape({
+        backdrops: PropTypes.arrayOf(costumeShape),
+        costumes: PropTypes.arrayOf(costumeShape),
+        sounds: PropTypes.arrayOf(soundShape),
+        sprites: PropTypes.arrayOf(spriteShape)
+    }),
     error: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
     fetchingProject: PropTypes.bool,
     intl: intlShape,
@@ -129,6 +147,7 @@ GUI.propTypes = {
     onSeeCommunity: PropTypes.func,
     onStorageInit: PropTypes.func,
     onUpdateProjectId: PropTypes.func,
+    onUpdateDynamicAssets: PropTypes.func,
     onVmInit: PropTypes.func,
     platform: PropTypes.oneOf(Object.keys(PLATFORM)),
     setPlatform: PropTypes.func.isRequired,
@@ -191,6 +210,7 @@ const mapStateToProps = (state, ownProps) => {
 const mapDispatchToProps = dispatch => ({
     onExtensionButtonClick: () => dispatch(openExtensionLibrary()),
     onActivateTab: tab => dispatch(activateTab(tab)),
+    onUpdateDynamicAssets: dynamicAssets => dispatch(setDynamicAssets(dynamicAssets)),
     onActivateCostumesTab: () => dispatch(activateTab(COSTUMES_TAB_INDEX)),
     onActivateSoundsTab: () => dispatch(activateTab(SOUNDS_TAB_INDEX)),
     setPlatform: platform => dispatch(setPlatform(platform)),

packages/scratch-gui/src/containers/sound-library.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {defineMessages, injectIntl} from 'react-intl';
 import intlShape from '../lib/intlShape.js';
+import {soundShape} from '../lib/assets-prop-types.js';
 import VM from '@scratch/scratch-vm';
 import AudioEngine from 'scratch-audio';
 
@@ -13,6 +14,7 @@ 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 mergeDynamicAssets from '../lib/merge-dynamic-assets.js';
 
 import {connect} from 'react-redux';
 
@@ -32,7 +34,8 @@ class SoundLibrary extends React.PureComponent {
             'handleItemMouseEnter',
             'handleItemMouseLeave',
             'onStop',
-            'setStopHandler'
+            'setStopHandler',
+            'mergeDynamicAssets'
         ]);
 
         /**
@@ -51,6 +54,7 @@ class SoundLibrary extends React.PureComponent {
          * function to call when the sound ends
          */
         this.handleStop = null;
+        this.processedSounds = {};
     }
     componentDidMount () {
         this.audioEngine = new AudioEngine();
@@ -150,9 +154,21 @@ class SoundLibrary extends React.PureComponent {
             this.props.onNewSound();
         });
     }
+    mergeDynamicAssets () {
+        if (this.processedSounds.source === this.props.dynamicSounds) {
+            return this.processedSounds.data;
+        }
+        this.processedSounds = mergeDynamicAssets(
+            soundLibraryContent,
+            this.props.dynamicSounds
+        );
+        return this.processedSounds.data;
+    }
     render () {
+        const data = this.mergeDynamicAssets();
+
         // @todo need to use this hack to avoid library using md5 for image
-        const soundLibraryThumbnailData = soundLibraryContent.map(sound => {
+        const soundLibraryThumbnailData = data.map(sound => {
             const {
                 md5ext,
                 ...otherData
@@ -182,6 +198,7 @@ class SoundLibrary extends React.PureComponent {
 }
 
 SoundLibrary.propTypes = {
+    dynamicSounds: PropTypes.arrayOf(soundShape),
     intl: intlShape.isRequired,
     isRtl: PropTypes.bool,
     onNewSound: PropTypes.func.isRequired,
@@ -190,6 +207,7 @@ SoundLibrary.propTypes = {
 };
 
 const mapStateToProps = state => ({
+    dynamicSounds: state.scratchGui.dynamicAssets.sounds,
     isRtl: state.locales.isRtl
 });
 

packages/scratch-gui/src/containers/sprite-library.jsx

@@ -2,8 +2,11 @@ import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {injectIntl, defineMessages} from 'react-intl';
+import {connect} from 'react-redux';
 import intlShape from '../lib/intlShape.js';
+import {spriteShape} from '../lib/assets-prop-types.js';
 import VM from '@scratch/scratch-vm';
+import mergeDynamicAssets from '../lib/merge-dynamic-assets.js';
 
 import spriteLibraryContent from '../lib/libraries/sprites.json';
 import randomizeSpritePosition from '../lib/randomize-sprite-position';
@@ -23,8 +26,10 @@ class SpriteLibrary extends React.PureComponent {
     constructor (props) {
         super(props);
         bindAll(this, [
-            'handleItemSelect'
+            'handleItemSelect',
+            'mergeDynamicAssets'
         ]);
+        this.processedSprites = {};
     }
     handleItemSelect (item) {
         // Randomize position of library sprite
@@ -33,10 +38,21 @@ class SpriteLibrary extends React.PureComponent {
             this.props.onActivateBlocksTab();
         });
     }
+    mergeDynamicAssets () {
+        if (this.processedSprites.source === this.props.dynamicSprites) {
+            return this.processedSprites.data;
+        }
+        this.processedSprites = mergeDynamicAssets(
+            spriteLibraryContent,
+            this.props.dynamicSprites
+        );
+        return this.processedSprites.data;
+    }
     render () {
+        const data = this.mergeDynamicAssets();
         return (
             <LibraryComponent
-                data={spriteLibraryContent}
+                data={data}
                 id="spriteLibrary"
                 tags={spriteTags}
                 title={this.props.intl.formatMessage(messages.libraryTitle)}
@@ -47,11 +63,16 @@ class SpriteLibrary extends React.PureComponent {
     }
 }
 
+const mapStateToProps = state => ({
+    dynamicSprites: state.scratchGui.dynamicAssets.sprites
+});
+
 SpriteLibrary.propTypes = {
+    dynamicSprites: PropTypes.arrayOf(spriteShape),
     intl: intlShape.isRequired,
     onActivateBlocksTab: PropTypes.func.isRequired,
     onRequestClose: PropTypes.func,
     vm: PropTypes.instanceOf(VM).isRequired
 };
 
-export default injectIntl(SpriteLibrary);
+export default injectIntl(connect(mapStateToProps)(SpriteLibrary));

packages/scratch-gui/src/lib/assets-prop-types.js

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+
+// The backdrops json effectively has the same shape as costumes
+const costumeShape = PropTypes.shape({
+    assetId: PropTypes.string,
+    bitmapResolution: PropTypes.number,
+    dataFormat: PropTypes.string,
+    md5ext: PropTypes.string,
+    name: PropTypes.string,
+    rotationCenterX: PropTypes.number,
+    rotationCenterY: PropTypes.number,
+    tags: PropTypes.arrayOf(PropTypes.string)
+});
+
+const soundShape = PropTypes.shape({
+    assetId: PropTypes.string,
+    dataFormat: PropTypes.string,
+    format: PropTypes.string,
+    md5ext: PropTypes.string,
+    name: PropTypes.string,
+    rate: PropTypes.number,
+    sampleCount: PropTypes.number,
+    tags: PropTypes.arrayOf(PropTypes.string)
+});
+
+const spriteShape = PropTypes.shape({
+    costumes: PropTypes.arrayOf(costumeShape),
+    isStage: PropTypes.bool,
+    name: PropTypes.string,
+    sounds: PropTypes.arrayOf(soundShape),
+    tags: PropTypes.arrayOf(PropTypes.string)
+});
+
+export {
+    costumeShape,
+    soundShape,
+    spriteShape
+};