Revert "Merge pull request #4735 from paulkaplan/revert-storage-update"

Go back to `scratch-storage` version 1.3.1 in the `scratch-desktop`
branch so that we have the performance improvements from
LLK/scratch-storage#83

If I understand correctly we reverted from 1.3.1 to 1.2.2 because of
problems affecting HTTP saves, which are not available in Scratch
Desktop.

This reverts commit b435ac3101, reversing
changes made to 0d7a05d37a.

package.json

@@ -100,6 +100,7 @@
     "react-test-renderer": "16.2.0",
     "react-tooltip": "3.8.0",
     "react-virtualized": "9.20.1",
+    "react-visibility-sensor": "5.0.2",
     "redux": "3.7.2",
     "redux-mock-store": "^1.2.3",
     "redux-throttle": "0.1.1",
@@ -109,7 +110,7 @@
     "scratch-l10n": "3.3.20190516144548",
     "scratch-paint": "0.2.0-prerelease.20190516171147",
     "scratch-render": "0.1.0-prerelease.20190419202157",
-    "scratch-storage": "1.2.2",
+    "scratch-storage": "1.3.1",
     "scratch-svg-renderer": "0.2.0-prerelease.20190419183947",
     "scratch-vm": "0.2.0-prerelease.20190515153227",
     "selenium-webdriver": "3.6.0",

src/components/library-item/library-item.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import Box from '../box/box.jsx';
+import ScratchImage from '../scratch-image/scratch-image.jsx';
 import styles from './library-item.css';
 import classNames from 'classnames';
 
@@ -35,10 +36,12 @@ class LibraryItemComponent extends React.PureComponent {
                             />
                         </div>
                     ) : null}
-                    <img
-                        className={styles.featuredImage}
-                        src={this.props.iconURL}
-                    />
+                    {this.props.iconSource ? (
+                        <ScratchImage
+                            className={styles.featuredImage}
+                            imageSource={this.props.iconSource}
+                        />
+                    ) : null}
                 </div>
                 {this.props.insetIconURL ? (
                     <div className={styles.libraryItemInsetImageContainer}>
@@ -121,9 +124,9 @@ class LibraryItemComponent extends React.PureComponent {
                 {/* Layers of wrapping is to prevent layout thrashing on animation */}
                 <Box className={styles.libraryItemImageContainerWrapper}>
                     <Box className={styles.libraryItemImageContainer}>
-                        <img
+                        <ScratchImage
                             className={styles.libraryItemImage}
-                            src={this.props.iconURL}
+                            imageSource={this.props.iconSource}
                         />
                     </Box>
                 </Box>
@@ -146,7 +149,7 @@ LibraryItemComponent.propTypes = {
     extensionId: PropTypes.string,
     featured: PropTypes.bool,
     hidden: PropTypes.bool,
-    iconURL: PropTypes.string,
+    iconSource: ScratchImage.ImageSourcePropType,
     insetIconURL: PropTypes.string,
     internetConnectionRequired: PropTypes.bool,
     name: PropTypes.oneOfType([

src/components/library/library.jsx

@@ -9,6 +9,7 @@ import Modal from '../../containers/modal.jsx';
 import Divider from '../divider/divider.jsx';
 import Filter from '../filter/filter.jsx';
 import TagButton from '../../containers/tag-button.jsx';
+import storage from '../../lib/storage';
 
 import styles from './library.css';
 
@@ -28,6 +29,47 @@ const messages = defineMessages({
 const ALL_TAG = {tag: 'all', intlLabel: messages.allTag};
 const tagListPrefix = [ALL_TAG];
 
+/**
+ * Find the AssetType which corresponds to a particular file extension. For example, 'png' => AssetType.ImageBitmap.
+ * @param {string} fileExtension - the file extension to look up.
+ * @returns {AssetType} - the AssetType corresponding to the extension, if any.
+ */
+const getAssetTypeForFileExtension = function (fileExtension) {
+    const compareOptions = {
+        sensitivity: 'accent',
+        usage: 'search'
+    };
+    for (const assetTypeId in storage.AssetType) {
+        const assetType = storage.AssetType[assetTypeId];
+        if (fileExtension.localeCompare(assetType.runtimeFormat, compareOptions) === 0) {
+            return assetType;
+        }
+    }
+};
+
+/**
+ * Figure out an `imageSource` (URI or asset ID & type) for a library item's icon.
+ * @param {object} item - either a library item or one of a library item's costumes.
+ * @returns {object} - an `imageSource` ready to be passed to a `ScratchImage`.
+ */
+const getItemImageSource = function (item) {
+    if (item.rawURL) {
+        return {
+            uri: item.rawURL
+        };
+    }
+
+    // TODO: adjust libraries to be more storage-friendly; don't use split() here.
+    const md5 = item.md5 || item.baseLayerMD5;
+    if (md5) {
+        const [assetId, fileExtension] = md5.split('.');
+        return {
+            assetId: assetId,
+            assetType: getAssetTypeForFileExtension(fileExtension)
+        };
+    }
+};
+
 class LibraryComponent extends React.Component {
     constructor (props) {
         super(props);
@@ -162,8 +204,10 @@ class LibraryComponent extends React.Component {
                     })}
                     ref={this.setFilteredDataRef}
                 >
-                    {this.getFilteredData().map((dataItem, index) => (
-                        <LibraryItem
+                    {this.getFilteredData().map((dataItem, index) => {
+                        const iconSource = getItemImageSource(dataItem);
+                        const icons = dataItem.json && dataItem.json.costumes.map(getItemImageSource);
+                        return (<LibraryItem
                             bluetoothRequired={dataItem.bluetoothRequired}
                             collaborator={dataItem.collaborator}
                             description={dataItem.description}
@@ -171,9 +215,8 @@ class LibraryComponent extends React.Component {
                             extensionId={dataItem.extensionId}
                             featured={dataItem.featured}
                             hidden={dataItem.hidden}
-                            iconMd5={dataItem.md5}
-                            iconRawURL={dataItem.rawURL}
-                            icons={dataItem.json && dataItem.json.costumes}
+                            iconSource={iconSource}
+                            icons={icons}
                             id={index}
                             insetIconURL={dataItem.insetIconURL}
                             internetConnectionRequired={dataItem.internetConnectionRequired}
@@ -182,8 +225,8 @@ class LibraryComponent extends React.Component {
                             onMouseEnter={this.handleMouseEnter}
                             onMouseLeave={this.handleMouseLeave}
                             onSelect={this.handleSelect}
-                        />
-                    ))}
+                        />);
+                    })}
                 </div>
             </Modal>
         );

src/components/scratch-image/scratch-image.jsx

@@ -0,0 +1,139 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import VisibilitySensor from 'react-visibility-sensor';
+
+import storage from '../../lib/storage';
+
+class ScratchImage extends React.PureComponent {
+    static init () {
+        this._maxParallelism = 6;
+        this._currentJobs = 0;
+        this._pendingImages = new Set();
+    }
+
+    static loadPendingImages () {
+        if (this._currentJobs >= this._maxParallelism) {
+            // already busy
+            return;
+        }
+
+        // Find the first visible image. If there aren't any, find the first non-visible image.
+        let nextImage;
+        for (const image of this._pendingImages) {
+            if (image.isVisible) {
+                nextImage = image;
+                break;
+            } else {
+                nextImage = nextImage || image;
+            }
+        }
+
+        // If we found an image to load:
+        // 1) Remove it from the queue
+        // 2) Load the image
+        // 3) Pump the queue again
+        if (nextImage) {
+            this._pendingImages.delete(nextImage);
+            const imageSource = nextImage.props.imageSource;
+            ++this._currentJobs;
+            storage
+                .load(imageSource.assetType, imageSource.assetId)
+                .then(asset => {
+                    if (!nextImage.wasUnmounted) {
+                        const dataURI = asset.encodeDataURI();
+
+                        nextImage.setState({
+                            imageURI: dataURI
+                        });
+                    }
+                    --this._currentJobs;
+                    this.loadPendingImages();
+                });
+        }
+    }
+
+    constructor (props) {
+        super(props);
+        this.state = {};
+        Object.assign(this.state, this._loadImageSource(props.imageSource));
+    }
+    componentWillReceiveProps (nextProps) {
+        const newState = this._loadImageSource(nextProps.imageSource);
+        this.setState(newState);
+    }
+    componentWillUnmount () {
+        this.wasUnmounted = true;
+        ScratchImage._pendingImages.delete(this);
+    }
+    /**
+     * Calculate the state changes necessary to load the image specified in the provided source info. If the component
+     * is mounted, call setState() with the return value of this function. If the component has not yet mounted, use
+     * the return value of this function as initial state for the component.
+     *
+     * @param {object} imageSource - the new source for the image, including either assetId or URI
+     * @returns {object} - the new state values, if any.
+     */
+    _loadImageSource (imageSource) {
+        if (imageSource) {
+            if (imageSource.uri) {
+                ScratchImage._pendingImages.delete(this);
+                return {
+                    imageURI: imageSource.uri,
+                    lastRequestedAsset: null
+                };
+            }
+            if (this.state.lastRequestedAsset !== imageSource.assetId) {
+                ScratchImage._pendingImages.add(this);
+                return {
+                    lastRequestedAsset: imageSource.assetId
+                };
+            }
+        }
+        // Nothing to do - don't change any state.
+        return {};
+    }
+    render () {
+        const {
+            src: _src,
+            imageSource: _imageSource,
+            ...imgProps
+        } = this.props;
+        return (
+            <VisibilitySensor
+                intervalCheck
+                scrollCheck
+            >
+                {
+                    ({isVisible}) => {
+                        this.isVisible = isVisible;
+                        ScratchImage.loadPendingImages();
+                        return (
+                            <img
+                                src={this.state.imageURI}
+                                {...imgProps}
+                            />
+                        );
+                    }
+                }
+            </VisibilitySensor>
+        );
+    }
+}
+
+ScratchImage.ImageSourcePropType = PropTypes.oneOfType([
+    PropTypes.shape({
+        assetId: PropTypes.string.isRequired,
+        assetType: PropTypes.oneOf(Object.values(storage.AssetType)).isRequired
+    }),
+    PropTypes.shape({
+        uri: PropTypes.string.isRequired
+    })
+]);
+
+ScratchImage.propTypes = {
+    imageSource: ScratchImage.ImageSourcePropType.isRequired
+};
+
+ScratchImage.init();
+
+export default ScratchImage;

src/containers/library-item.jsx

@@ -75,21 +75,17 @@ class LibraryItem extends React.PureComponent {
         const nextIconIndex = (this.state.iconIndex + 1) % this.props.icons.length;
         this.setState({iconIndex: nextIconIndex});
     }
-    curIconMd5 () {
+    curIconSource () {
         if (this.props.icons &&
             this.state.isRotatingIcon &&
             this.state.iconIndex < this.props.icons.length &&
-            this.props.icons[this.state.iconIndex] &&
-            this.props.icons[this.state.iconIndex].baseLayerMD5) {
-            return this.props.icons[this.state.iconIndex].baseLayerMD5;
+            this.props.icons[this.state.iconIndex]) {
+            return this.props.icons[this.state.iconIndex];
         }
-        return this.props.iconMd5;
+        return this.props.iconSource;
     }
     render () {
-        const iconMd5 = this.curIconMd5();
-        const iconURL = iconMd5 ?
-            `https://cdn.assets.scratch.mit.edu/internalapi/asset/${iconMd5}/get/` :
-            this.props.iconRawURL;
+        const iconSource = this.curIconSource();
         return (
             <LibraryItemComponent
                 bluetoothRequired={this.props.bluetoothRequired}
@@ -99,8 +95,7 @@ class LibraryItem extends React.PureComponent {
                 extensionId={this.props.extensionId}
                 featured={this.props.featured}
                 hidden={this.props.hidden}
-                iconURL={iconURL}
-                icons={this.props.icons}
+                iconSource={iconSource}
                 id={this.props.id}
                 insetIconURL={this.props.insetIconURL}
                 internetConnectionRequired={this.props.internetConnectionRequired}
@@ -127,13 +122,8 @@ LibraryItem.propTypes = {
     extensionId: PropTypes.string,
     featured: PropTypes.bool,
     hidden: PropTypes.bool,
-    iconMd5: PropTypes.string,
-    iconRawURL: PropTypes.string,
-    icons: PropTypes.arrayOf(
-        PropTypes.shape({
-            baseLayerMD5: PropTypes.string
-        })
-    ),
+    iconSource: LibraryItemComponent.propTypes.iconSource, // single icon
+    icons: PropTypes.arrayOf(LibraryItemComponent.propTypes.iconSource), // rotating icons
     id: PropTypes.number.isRequired,
     insetIconURL: PropTypes.string,
     internetConnectionRequired: PropTypes.bool,

test/integration/costumes.test.js

@@ -193,7 +193,11 @@ describe('Working with costumes', () => {
             .mouseMove(abbyElement)
             .perform();
         // wait for one of Abby's alternate costumes to appear
-        await findByXpath('//img[@src="https://cdn.assets.scratch.mit.edu/internalapi/asset/b6e23922f23b49ddc6f62f675e77417c.svg/get/"]');
+        const src1 = await abbyElement.findElement({css: 'img'}).getAttribute('src');
+        await driver.sleep(300);
+        const src2 = await abbyElement.findElement({css: 'img'}).getAttribute('src');
+        const sourcesMatch = (src1 === src2);
+        await expect(sourcesMatch).toBeFalsy(); // 'src' attribute should have changed by now
         const logs = await getLogs();
         await expect(logs).toEqual([]);
     });