Expect library item data that conforms to sb3 spec

src/components/library/library.jsx

@@ -217,9 +217,9 @@ class LibraryComponent extends React.Component {
                             extensionId={dataItem.extensionId}
                             featured={dataItem.featured}
                             hidden={dataItem.hidden}
-                            iconMd5={dataItem.md5}
+                            iconMd5={dataItem.type === 'sprite' ? dataItem.costumes[0].md5ext : dataItem.md5ext}
                             iconRawURL={dataItem.rawURL}
-                            icons={dataItem.json && dataItem.json.costumes}
+                            icons={dataItem.costumes}
                             id={index}
                             insetIconURL={dataItem.insetIconURL}
                             internetConnectionRequired={dataItem.internetConnectionRequired}

src/containers/backdrop-library.jsx

@@ -27,13 +27,13 @@ class BackdropLibrary extends React.Component {
     handleItemSelect (item) {
         const vmBackdrop = {
             name: item.name,
-            rotationCenterX: item.info[0] && item.info[0] / 2,
-            rotationCenterY: item.info[1] && item.info[1] / 2,
-            bitmapResolution: item.info.length > 2 ? item.info[2] : 1,
+            rotationCenterX: item.rotationCenterX,
+            rotationCenterY: item.rotationCenterY,
+            bitmapResolution: item.bitmapResolution,
             skinId: null
         };
         // Do not switch to stage, just add the backdrop
-        this.props.vm.addBackdrop(item.md5, vmBackdrop);
+        this.props.vm.addBackdrop(item.md5ext, vmBackdrop);
     }
     render () {
         return (

src/containers/costume-library.jsx

@@ -25,18 +25,16 @@ class CostumeLibrary extends React.PureComponent {
         ]);
     }
     handleItemSelected (item) {
-        const split = item.md5.split('.');
-        const type = split.length > 1 ? split[1] : null;
-        const rotationCenterX = type === 'svg' ? item.info[0] : item.info[0] / 2;
-        const rotationCenterY = type === 'svg' ? item.info[1] : item.info[1] / 2;
+        const rotationCenterX = item.dataFormat === 'svg' ? item.rotationCenterX : item.rotationCenterX / 2;
+        const rotationCenterY = item.dataFormat === 'svg' ? item.rotationCenterY : item.rotationCenterY / 2;
         const vmCostume = {
             name: item.name,
             rotationCenterX,
             rotationCenterY,
-            bitmapResolution: item.info.length > 2 ? item.info[2] : 1,
+            bitmapResolution: item.bitmapResolution,
             skinId: null
         };
-        this.props.vm.addCostumeFromLibrary(item.md5, vmCostume);
+        this.props.vm.addCostumeFromLibrary(item.md5ext, vmCostume);
     }
     render () {
         return (

src/containers/costume-tab.jsx

@@ -179,16 +179,14 @@ class CostumeTab extends React.Component {
     }
     handleSurpriseCostume () {
         const item = costumeLibraryContent[Math.floor(Math.random() * costumeLibraryContent.length)];
-        const split = item.md5.split('.');
-        const type = split.length > 1 ? split[1] : null;
-        const rotationCenterX = type === 'svg' ? item.info[0] : item.info[0] / 2;
-        const rotationCenterY = type === 'svg' ? item.info[1] : item.info[1] / 2;
+        const rotationCenterX = item.dataFormat === 'svg' ? item.rotationCenterX : item.rotationCenterX / 2;
+        const rotationCenterY = item.dataFormat === 'svg' ? item.rotationCenterY : item.rotationCenterY / 2;
         const vmCostume = {
             name: item.name,
-            md5: item.md5,
-            rotationCenterX,
-            rotationCenterY,
-            bitmapResolution: item.info.length > 2 ? item.info[2] : 1,
+            md5: item.md5ext,
+            rotationCenterX: rotationCenterX,
+            rotationCenterY: rotationCenterY,
+            bitmapResolution: item.bitmapResolution,
             skinId: null
         };
         this.handleNewCostume(vmCostume, true /* fromCostumeLibrary */);
@@ -197,10 +195,10 @@ class CostumeTab extends React.Component {
         const item = backdropLibraryContent[Math.floor(Math.random() * backdropLibraryContent.length)];
         const vmCostume = {
             name: item.name,
-            md5: item.md5,
-            rotationCenterX: item.info[0] && item.info[0] / 2,
-            rotationCenterY: item.info[1] && item.info[1] / 2,
-            bitmapResolution: item.info.length > 2 ? item.info[2] : 1,
+            md5: item.md5ext,
+            rotationCenterX: item.rotationCenterX,
+            rotationCenterY: item.rotationCenterY,
+            bitmapResolution: item.bitmapResolution,
             skinId: null
         };
         this.handleNewCostume(vmCostume);

src/containers/sound-library.jsx

@@ -149,11 +149,11 @@ class SoundLibrary extends React.PureComponent {
         // @todo need to use this hack to avoid library using md5 for image
         const soundLibraryThumbnailData = soundLibraryContent.map(sound => {
             const {
-                md5,
+                md5ext,
                 ...otherData
             } = sound;
             return {
-                _md5: md5,
+                _md5: md5ext,
                 rawURL: this.props.isRtl ? soundIconRtl : soundIcon,
                 ...otherData
             };

src/containers/sound-tab.jsx

@@ -113,8 +113,8 @@ class SoundTab extends React.Component {
     handleSurpriseSound () {
         const soundItem = soundLibraryContent[Math.floor(Math.random() * soundLibraryContent.length)];
         const vmSound = {
-            format: soundItem.format,
-            md5: soundItem.md5,
+            format: soundItem.dataFormat,
+            md5: soundItem.md5ext,
             rate: soundItem.rate,
             sampleCount: soundItem.sampleCount,
             name: soundItem.name

src/containers/sprite-library.jsx

@@ -28,7 +28,7 @@ class SpriteLibrary extends React.PureComponent {
     handleItemSelect (item) {
         // Randomize position of library sprite
         randomizeSpritePosition(item);
-        this.props.vm.addSprite(JSON.stringify(item.json)).then(() => {
+        this.props.vm.addSprite(JSON.stringify(item)).then(() => {
             this.props.onActivateBlocksTab();
         });
     }

src/containers/stage-selector.jsx

@@ -69,10 +69,10 @@ class StageSelector extends React.Component {
     addBackdropFromLibraryItem (item, shouldActivateTab = true) {
         const vmBackdrop = {
             name: item.name,
-            md5: item.md5,
-            rotationCenterX: item.info[0] && item.info[0] / 2,
-            rotationCenterY: item.info[1] && item.info[1] / 2,
-            bitmapResolution: item.info.length > 2 ? item.info[2] : 1,
+            md5: item.md5ext,
+            rotationCenterX: item.rotationCenterX,
+            rotationCenterY: item.rotationCenterY,
+            bitmapResolution: item.bitmapResolution,
             skinId: null
         };
         this.handleNewBackdrop(vmBackdrop, shouldActivateTab);

src/containers/target-pane.jsx

@@ -111,7 +111,7 @@ class TargetPane extends React.Component {
         );
         const item = surpriseSprites[Math.floor(Math.random() * surpriseSprites.length)];
         randomizeSpritePosition(item);
-        this.props.vm.addSprite(JSON.stringify(item.json))
+        this.props.vm.addSprite(JSON.stringify(item))
             .then(this.handleActivateBlocksTab);
     }
     handlePaintSpriteClick () {

src/lib/randomize-sprite-position.js

@@ -1,16 +1,7 @@
 const randomizeSpritePosition = spriteObject => {
     // https://github.com/LLK/scratch-flash/blob/689f3c79a7e8b2e98f5be80056d877f303a8d8ba/src/Scratch.as#L1385
-    const randomX = Math.floor((200 * Math.random()) - 100);
-    const randomY = Math.floor((100 * Math.random()) - 50);
-    if (spriteObject.hasOwnProperty('json')) {
-        // Library sprite object
-        spriteObject.json.x = randomX;
-        spriteObject.json.y = randomY;
-    } else if (spriteObject.hasOwnProperty('x') && spriteObject.hasOwnProperty('y')) {
-        // Scratch 3 sprite object
-        spriteObject.x = randomX;
-        spriteObject.y = randomY;
-    }
+    spriteObject.x = Math.floor((200 * Math.random()) - 100);
+    spriteObject.y = Math.floor((100 * Math.random()) - 50);
 };
 
 export default randomizeSpritePosition;