From 25986f0f3108dc7102297526907ff7e4d61630af Mon Sep 17 00:00:00 2001
From: Christopher Willis-Ford <cwillisf@media.mit.edu>
Date: Wed, 1 Apr 2020 17:14:59 -0700
Subject: [PATCH 1/5] fix costume animation in sprite library

---
 src/components/library/library.jsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx
index 049d18f8569..5e92f5a40ef 100644
--- a/src/components/library/library.jsx
+++ b/src/components/library/library.jsx
@@ -60,8 +60,15 @@ const getItemImageSource = function (item) {
         };
     }
 
-    // TODO: adjust libraries to be more storage-friendly; don't use split() here.
-    const md5ext = item.md5 || item.baseLayerMD5;
+    if (item.assetId && item.dataFormat) {
+        return {
+            assetId: item.assetId,
+            assetType: getAssetTypeForFileExtension(item.dataFormat)
+        };
+    }
+
+    // legacy
+    const md5ext = item.md5ext || item.md5 || item.baseLayerMD5;
     if (md5ext) {
         const [assetId, fileExtension] = md5ext.split('.');
         return {

From cf8a2e41dfa1a6aa2fd78d8f779767292175114f Mon Sep 17 00:00:00 2001
From: Christopher Willis-Ford <cwillisf@media.mit.edu>
Date: Thu, 2 Apr 2020 16:33:48 -0700
Subject: [PATCH 2/5] fix lint error with code that's arguably better anyway

---
 src/components/scratch-image/scratch-image.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/scratch-image/scratch-image.jsx b/src/components/scratch-image/scratch-image.jsx
index 15abe9d3fca..38c86bc3051 100644
--- a/src/components/scratch-image/scratch-image.jsx
+++ b/src/components/scratch-image/scratch-image.jsx
@@ -94,7 +94,6 @@ class ScratchImage extends React.PureComponent {
     }
     render () {
         const {
-            src: _src,
             imageSource: _imageSource,
             ...imgProps
         } = this.props;
@@ -109,8 +108,8 @@ class ScratchImage extends React.PureComponent {
                         ScratchImage.loadPendingImages();
                         return (
                             <img
-                                src={this.state.imageURI}
-                                {...imgProps}
+                                {...imgProps} // do this first in case it contains `src`
+                                src={this.state.imageURI} // overrides imgProps.src if present
                             />
                         );
                     }

From 9219af1db1ee31b70eae20e00b86952dbcfa4bf4 Mon Sep 17 00:00:00 2001
From: Christopher Willis-Ford <cwillisf@media.mit.edu>
Date: Mon, 27 Apr 2020 21:16:25 -0700
Subject: [PATCH 3/5] future-proof through simplification

`getItemIcons` (formerly `getItemImageSource`) now handles the current
library formats as well as upcoming library changes in which library
items will no longer have a `json` property. Or, at least, it should
work...

As part of that effort, `getItemIcons` now handles library items with
single or multiple icons internally, meaning that the caller no longer
needs to do extra work to check. Likewise, the `LibraryItem` container
now has just one `iconSource` property instead of an `icon` property for
the one-icon case and an `icons` property for the multi-icon case. The
LibraryItem component (not container) still only takes one icon, and the
container is still responsible for managing icon rotation.
---
 src/components/library/library.jsx | 19 ++++++++++++-------
 src/containers/library-item.jsx    | 29 +++++++++++++++++++----------
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx
index 5e92f5a40ef..52ed929882c 100644
--- a/src/components/library/library.jsx
+++ b/src/components/library/library.jsx
@@ -49,11 +49,19 @@ const getAssetTypeForFileExtension = function (fileExtension) {
 };
 
 /**
- * Figure out an `imageSource` (URI or asset ID & type) for a library item's icon.
+ * Figure out one or more icon(s) for a library item.
+ * If it's an animated thumbnail, this will return an array of `imageSource`.
+ * Otherwise it'll return just one `imageSource`.
  * @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`.
+ *   The latter is used internally as part of processing an animated thumbnail.
+ * @returns {LibraryItem.PropTypes.icons} - an `imageSource` or array of them, ready for `LibraryItem` & `ScratchImage`
  */
-const getItemImageSource = function (item) {
+const getItemIcons = function (item) {
+    const costumes = (item.json && item.json.costumes) || item.costumes;
+    if (costumes) {
+        return costumes.map(getItemIcons);
+    }
+
     if (item.rawURL) {
         return {
             uri: item.rawURL
@@ -67,7 +75,6 @@ const getItemImageSource = function (item) {
         };
     }
 
-    // legacy
     const md5ext = item.md5ext || item.md5 || item.baseLayerMD5;
     if (md5ext) {
         const [assetId, fileExtension] = md5ext.split('.');
@@ -258,8 +265,7 @@ class LibraryComponent extends React.Component {
                     ref={this.setFilteredDataRef}
                 >
                     {this.state.loaded ? this.getFilteredData().map((dataItem, index) => {
-                        const iconSource = getItemImageSource(dataItem);
-                        const icons = dataItem.json && dataItem.json.costumes.map(getItemImageSource);
+                        const icons = getItemIcons(dataItem);
                         return (<LibraryItem
                             bluetoothRequired={dataItem.bluetoothRequired}
                             collaborator={dataItem.collaborator}
@@ -268,7 +274,6 @@ class LibraryComponent extends React.Component {
                             extensionId={dataItem.extensionId}
                             featured={dataItem.featured}
                             hidden={dataItem.hidden}
-                            iconSource={iconSource}
                             icons={icons}
                             id={index}
                             insetIconURL={dataItem.insetIconURL}
diff --git a/src/containers/library-item.jsx b/src/containers/library-item.jsx
index f3444f9e968..ee2e65c7350 100644
--- a/src/containers/library-item.jsx
+++ b/src/containers/library-item.jsx
@@ -21,6 +21,8 @@ class LibraryItem extends React.PureComponent {
             'startRotatingIcons',
             'stopRotatingIcons'
         ]);
+        // TODO: is there a better "is it an array?" check to use here?
+        this.hasIconsArray = props.icons.hasOwnProperty('length');
         this.state = {
             iconIndex: 0,
             isRotatingIcon: false
@@ -53,7 +55,7 @@ class LibraryItem extends React.PureComponent {
         // only show hover effects on the item if not showing a play button
         if (!this.props.showPlayButton) {
             this.props.onMouseEnter(this.props.id);
-            if (this.props.icons && this.props.icons.length) {
+            if (this.hasIconsArray) {
                 this.stopRotatingIcons();
                 this.setState({
                     isRotatingIcon: true
@@ -65,7 +67,7 @@ class LibraryItem extends React.PureComponent {
         // only show hover effects on the item if not showing a play button
         if (!this.props.showPlayButton) {
             this.props.onMouseLeave(this.props.id);
-            if (this.props.icons && this.props.icons.length) {
+            if (this.hasIconsArray) {
                 this.setState({
                     isRotatingIcon: false
                 }, this.stopRotatingIcons);
@@ -92,13 +94,18 @@ class LibraryItem extends React.PureComponent {
         this.setState({iconIndex: nextIconIndex});
     }
     curIconSource () {
-        if (this.props.icons &&
-            this.state.isRotatingIcon &&
-            this.state.iconIndex < this.props.icons.length &&
-            this.props.icons[this.state.iconIndex]) {
-            return this.props.icons[this.state.iconIndex];
+        if (this.hasIconsArray) {
+            if (this.state.isRotatingIcon &&
+                this.state.iconIndex < this.props.icons.length &&
+                this.props.icons[this.state.iconIndex]) {
+                // multiple icons, currently animating: show current frame
+                return this.props.icons[this.state.iconIndex];
+            }
+            // multiple icons, not currently animating: show first frame
+            return this.props.icons[0];
         }
-        return this.props.iconSource;
+        // single icon
+        return this.props.icons;
     }
     render () {
         const iconSource = this.curIconSource();
@@ -142,8 +149,10 @@ LibraryItem.propTypes = {
     extensionId: PropTypes.string,
     featured: PropTypes.bool,
     hidden: PropTypes.bool,
-    iconSource: LibraryItemComponent.propTypes.iconSource, // single icon
-    icons: PropTypes.arrayOf(LibraryItemComponent.propTypes.iconSource), // rotating icons
+    icons: PropTypes.oneOfType([
+        LibraryItemComponent.propTypes.iconSource, // single icon
+        PropTypes.arrayOf(LibraryItemComponent.propTypes.iconSource) // rotating icons
+    ]),
     id: PropTypes.number.isRequired,
     insetIconURL: PropTypes.string,
     internetConnectionRequired: PropTypes.bool,

From 6eb0f5773659d92e2c9a60ff2a4891932fd51ebf Mon Sep 17 00:00:00 2001
From: Chris Willis-Ford <7019101+cwillisf@users.noreply.github.com>
Date: Tue, 28 Apr 2020 13:28:06 -0700
Subject: [PATCH 4/5] use `Array.isArray` to detect array

Co-Authored-By: apple502j <33279053+apple502j@users.noreply.github.com>
---
 src/containers/library-item.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/library-item.jsx b/src/containers/library-item.jsx
index ee2e65c7350..dbe145bde9c 100644
--- a/src/containers/library-item.jsx
+++ b/src/containers/library-item.jsx
@@ -22,7 +22,7 @@ class LibraryItem extends React.PureComponent {
             'stopRotatingIcons'
         ]);
         // TODO: is there a better "is it an array?" check to use here?
-        this.hasIconsArray = props.icons.hasOwnProperty('length');
+        this.hasIconsArray = Array.isArray(props.icons);
         this.state = {
             iconIndex: 0,
             isRotatingIcon: false

From ae71ac1941a8f3cbbb6707d736b351fc3fc002f0 Mon Sep 17 00:00:00 2001
From: Chris Willis-Ford <7019101+cwillisf@users.noreply.github.com>
Date: Wed, 6 May 2020 16:22:42 -0700
Subject: [PATCH 5/5] remove obsolete TODO comment

Co-authored-by: adroitwhiz <adroitwhiz@protonmail.com>
---
 src/containers/library-item.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/containers/library-item.jsx b/src/containers/library-item.jsx
index dbe145bde9c..4556333b6c4 100644
--- a/src/containers/library-item.jsx
+++ b/src/containers/library-item.jsx
@@ -21,7 +21,6 @@ class LibraryItem extends React.PureComponent {
             'startRotatingIcons',
             'stopRotatingIcons'
         ]);
-        // TODO: is there a better "is it an array?" check to use here?
         this.hasIconsArray = Array.isArray(props.icons);
         this.state = {
             iconIndex: 0,