From 62d0ce3adff80aee7a7e823db5afd5c2fece9e7b Mon Sep 17 00:00:00 2001
From: David Leoni <noreply@davidleoni.it>
Date: Fri, 14 Aug 2020 09:36:03 +0200
Subject: [PATCH] debugging-tools #15: added BotchLifeTreeItem

---
 src/components/botch/botch-life-tree-item.jsx | 174 ++++++++++++++++++
 src/components/botch/botch-life-tree.jsx      |  11 +-
 src/containers/botch-debug-tab.jsx            |   4 +-
 3 files changed, 184 insertions(+), 5 deletions(-)
 create mode 100644 src/components/botch/botch-life-tree-item.jsx

diff --git a/src/components/botch/botch-life-tree-item.jsx b/src/components/botch/botch-life-tree-item.jsx
new file mode 100644
index 00000000000..56650ebe21b
--- /dev/null
+++ b/src/components/botch/botch-life-tree-item.jsx
@@ -0,0 +1,174 @@
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {injectIntl} from 'react-intl';
+
+import LibraryItemComponent from '../../components/library-item/library-item.jsx';
+
+class BotchLifeTreeItem extends React.PureComponent {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleBlur',
+            'handleClick',
+            'handleFocus',
+            'handleKeyPress',
+            'handleMouseEnter',
+            'handleMouseLeave',
+            'handlePlay',
+            'handleStop',
+            'rotateIcon',
+            'startRotatingIcons',
+            'stopRotatingIcons'
+        ]);
+        this.state = {
+            iconIndex: 0,
+            isRotatingIcon: false
+        };
+    }
+    componentWillUnmount () {
+        clearInterval(this.intervalId);
+    }
+    handleBlur (id) {
+        this.handleMouseLeave(id);
+    }
+    handleClick (e) {
+        if (!this.props.disabled) {
+            this.props.onSelect(this.props.id);
+        }
+        e.preventDefault();
+    }
+    handleFocus (id) {
+        if (!this.props.showPlayButton) {
+            this.handleMouseEnter(id);
+        }
+    }
+    handleKeyPress (e) {
+        if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            this.props.onSelect(this.props.id);
+        }
+    }
+    handleMouseEnter () {
+        // 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) {
+                this.stopRotatingIcons();
+                this.setState({
+                    isRotatingIcon: true
+                }, this.startRotatingIcons);
+            }
+        }
+    }
+    handleMouseLeave () {
+        // 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) {
+                this.setState({
+                    isRotatingIcon: false
+                }, this.stopRotatingIcons);
+            }
+        }
+    }
+    handlePlay () {
+        this.props.onMouseEnter(this.props.id);
+    }
+    handleStop () {
+        this.props.onMouseLeave(this.props.id);
+    }
+    startRotatingIcons () {
+        this.rotateIcon();
+        this.intervalId = setInterval(this.rotateIcon, 300);
+    }
+    stopRotatingIcons () {
+        if (this.intervalId) {
+            this.intervalId = clearInterval(this.intervalId);
+        }
+    }
+    rotateIcon () {
+        const nextIconIndex = (this.state.iconIndex + 1) % this.props.icons.length;
+        this.setState({iconIndex: nextIconIndex});
+    }
+    curIconMd5 () {
+        const iconMd5Prop = this.props.iconMd5;
+        if (this.props.icons &&
+            this.state.isRotatingIcon &&
+            this.state.iconIndex < this.props.icons.length) {
+            const icon = this.props.icons[this.state.iconIndex] || {};
+            return icon.md5ext || // 3.0 library format
+                icon.baseLayerMD5 || // 2.0 library format, TODO GH-5084
+                iconMd5Prop;
+        }
+        return iconMd5Prop;
+    }
+    render () {
+        const iconMd5 = this.curIconMd5();
+        const iconURL = iconMd5 ?
+            `https://cdn.assets.scratch.mit.edu/internalapi/asset/${iconMd5}/get/` :
+            this.props.iconRawURL;
+        return (
+            <LibraryItemComponent
+                bluetoothRequired={this.props.bluetoothRequired}
+                collaborator={this.props.collaborator}
+                description={this.props.description}
+                disabled={this.props.disabled}
+                extensionId={this.props.extensionId}
+                featured={this.props.featured}
+                hidden={this.props.hidden}
+                iconURL={iconURL}
+                icons={this.props.icons}
+                id={this.props.id}
+                insetIconURL={this.props.insetIconURL}
+                internetConnectionRequired={this.props.internetConnectionRequired}
+                isPlaying={this.props.isPlaying}
+                name={this.props.name}
+                showPlayButton={this.props.showPlayButton}
+                onBlur={this.handleBlur}
+                onClick={this.handleClick}
+                onFocus={this.handleFocus}
+                onKeyPress={this.handleKeyPress}
+                onMouseEnter={this.handleMouseEnter}
+                onMouseLeave={this.handleMouseLeave}
+                onPlay={this.handlePlay}
+                onStop={this.handleStop}
+            />
+        );
+    }
+}
+
+BotchLifeTreeItem.propTypes = {
+    bluetoothRequired: PropTypes.bool,
+    collaborator: PropTypes.string,
+    description: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.node
+    ]),
+    disabled: PropTypes.bool,
+    extensionId: PropTypes.string,
+    featured: PropTypes.bool,
+    hidden: PropTypes.bool,
+    iconMd5: PropTypes.string,
+    iconRawURL: PropTypes.string,
+    icons: PropTypes.arrayOf(
+        PropTypes.shape({
+            baseLayerMD5: PropTypes.string, // 2.0 library format, TODO GH-5084
+            md5ext: PropTypes.string // 3.0 library format
+        })
+    ),
+    id: PropTypes.number.isRequired,
+    insetIconURL: PropTypes.string,
+    internetConnectionRequired: PropTypes.bool,
+    isPlaying: PropTypes.bool,
+    name: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.node
+    ]),
+    onMouseEnter: PropTypes.func.isRequired,
+    onMouseLeave: PropTypes.func.isRequired,
+    onSelect: PropTypes.func.isRequired,
+    showPlayButton: PropTypes.bool
+};
+
+export default injectIntl(BotchLifeTreeItem);
diff --git a/src/components/botch/botch-life-tree.jsx b/src/components/botch/botch-life-tree.jsx
index 003637e24a7..21feae7dd69 100644
--- a/src/components/botch/botch-life-tree.jsx
+++ b/src/components/botch/botch-life-tree.jsx
@@ -4,13 +4,13 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {defineMessages, injectIntl, intlShape} from 'react-intl';
 
-import LibraryItem from '../../containers/library-item.jsx';
 import Divider from '../divider/divider.jsx';
 import Filter from '../filter/filter.jsx';
 import TagButton from '../../containers/tag-button.jsx';
 import Spinner from '../spinner/spinner.jsx';
 
 import styles from './botch-life-tree.css';
+import BotchLifeTreeItem from './botch-life-tree-item.jsx';
 
 const messages = defineMessages({
     filterPlaceholder: {
@@ -28,6 +28,7 @@ const messages = defineMessages({
 const ALL_TAG = {tag: 'all', intlLabel: messages.allTag};
 const tagListPrefix = [ALL_TAG];
 
+
 class BotchLifeTree extends React.Component {
     constructor (props) {
         super(props);
@@ -212,7 +213,7 @@ class BotchLifeTree extends React.Component {
                     ref={this.setFilteredDataRef}
                 >
                     {this.state.loaded ? this.getFilteredData().map((dataItem, index) => (
-                        <LibraryItem
+                        <BotchLifeTreeItem
                             bluetoothRequired={dataItem.bluetoothRequired}
                             collaborator={dataItem.collaborator}
                             description={dataItem.description}
@@ -220,7 +221,11 @@ class BotchLifeTree extends React.Component {
                             extensionId={dataItem.extensionId}
                             featured={dataItem.featured}
                             hidden={dataItem.hidden}
-                            iconMd5={dataItem.md5}
+                            
+                            // Botch: our sprite md5 can be different from first costume
+                            // iconMd5={dataItem.md5}
+                            iconMd5={(dataItem.json && dataItem.json.costumes[0]) ?
+                                dataItem.json.costumes[0].md5ext : dataItem.md5}
                             iconRawURL={dataItem.rawURL}
                             icons={dataItem.json && dataItem.json.costumes}
                             id={index}
diff --git a/src/containers/botch-debug-tab.jsx b/src/containers/botch-debug-tab.jsx
index e4d8540255a..bbdd5c405a8 100644
--- a/src/containers/botch-debug-tab.jsx
+++ b/src/containers/botch-debug-tab.jsx
@@ -91,7 +91,7 @@ class BotchDebugTab extends React.Component {
         }
         
         // console.log('this=', this);
-        BOTCH.storageHelper.loadLibrarySprites().then(librarySprites => {
+        BOTCH.loadLibrarySprites().then(librarySprites => {
             const names = new Set();
             for (const libSprite of librarySprites){
                 const candidate = BotchDebugTab.findNewName(libSprite.name, names);
@@ -111,7 +111,7 @@ class BotchDebugTab extends React.Component {
             console.error('Botch extension is not loaded !');
             return;
         }
-        return BOTCH.storageHelper.get_all_tags();
+        return BOTCH.storageHelper.getAllTags();
     }
 
     handleSelect (index){