Merge remote-tracking branch 'origin/develop' into UEPR-230

Author: MiroslavDionisiev

.nvmrc

@@ -1 +1 @@
-20.19.0
+20.19.2

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "scratch-editor",
-  "version": "11.1.0",
+  "version": "11.2.0-feature-parity.2",
   "private": "true",
   "description": "Scratch editor mono-repository",
   "author": "Scratch Foundation",

package.json

@@ -6,7 +6,7 @@
 npm-*
 
 # Double copies of all the static assets and tutorial gifs
-/src
+# /src
 
 # Testing
 /.nyc_output

packages/scratch-gui/.npmignore

@@ -1 +1 @@
-20.19.0
+20.19.2

packages/scratch-gui/.nvmrc

@@ -1,6 +1,6 @@
 {
   "name": "@scratch/scratch-gui",
-  "version": "11.1.0",
+  "version": "11.2.0-feature-parity.2",
   "description": "Graphical User Interface for creating and running Scratch 3.0 projects",
   "author": "Massachusetts Institute of Technology",
   "license": "AGPL-3.0-only",
@@ -16,6 +16,18 @@
       "types": "./dist/types/index.d.ts",
       "default": "./dist/scratch-gui.js"
     },
+    "./costumes": {
+      "default": "./src/lib/libraries/costumes.json"
+    },
+    "./sprites": {
+      "default": "./src/lib/libraries/sprites.json"
+    },
+    "./sounds": {
+      "default": "./src/lib/libraries/sounds.json"
+    },
+    "./backdrops": {
+      "default": "./src/lib/libraries/backdrops.json"
+    },
     "./standalone": {
       "types": "./dist/types/index-standalone.d.ts",
       "default": "./dist/scratch-gui-standalone.js"
@@ -43,9 +55,9 @@
   },
   "dependencies": {
     "@microbit/microbit-universal-hex": "0.2.2",
-    "@scratch/scratch-render": "11.1.0",
-    "@scratch/scratch-svg-renderer": "11.1.0",
-    "@scratch/scratch-vm": "11.1.0",
+    "@scratch/scratch-render": "11.2.0-feature-parity.2",
+    "@scratch/scratch-svg-renderer": "11.2.0-feature-parity.2",
+    "@scratch/scratch-vm": "11.2.0-feature-parity.2",
     "arraybuffer-loader": "1.0.8",
     "autoprefixer": "9.8.8",
     "balance-text": "3.3.1",
@@ -92,16 +104,18 @@
     "react-tabs": "2.3.1",
     "react-tooltip": "4.5.1",
     "react-virtualized": "9.22.6",
+    "react-visibility-sensor": "5.1.1",
     "redux-throttle": "0.1.1",
-    "scratch-audio": "2.0.119",
-    "scratch-blocks": "1.1.209",
-    "scratch-l10n": "5.0.198",
-    "scratch-paint": "3.0.207",
-    "scratch-render-fonts": "1.0.182",
-    "scratch-storage": "4.0.106",
+    "scratch-audio": "2.0.147",
+    "scratch-blocks": "1.1.210",
+    "scratch-l10n": "5.0.247",
+    "scratch-paint": "3.0.260",
+    "scratch-render-fonts": "1.0.195",
+    "scratch-storage": "4.0.142",
     "startaudiocontext": "1.2.1",
     "style-loader": "4.0.0",
     "to-style": "1.3.3",
+    "text-encoding": "0.7.0",
     "wav-encoder": "1.3.0",
     "xhr": "2.6.0"
   },
@@ -112,14 +126,14 @@
     "redux": "^3.7.2"
   },
   "devDependencies": {
-    "@babel/cli": "7.27.0",
-    "@babel/core": "7.26.10",
-    "@babel/eslint-parser": "7.27.0",
+    "@babel/cli": "7.27.2",
+    "@babel/core": "7.27.1",
+    "@babel/eslint-parser": "7.27.1",
     "@babel/plugin-proposal-object-rest-spread": "7.20.7",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-transform-async-to-generator": "7.25.9",
-    "@babel/preset-env": "7.26.9",
-    "@babel/preset-react": "7.26.3",
+    "@babel/plugin-transform-async-to-generator": "7.27.1",
+    "@babel/preset-env": "7.27.2",
+    "@babel/preset-react": "7.27.1",
     "@types/prop-types": "15.7.14",
     "@types/react-modal": "3.16.3",
     "@typescript-eslint/eslint-plugin": "8.7.0",
@@ -141,9 +155,8 @@
     "html-webpack-plugin": "5.6.3",
     "jest": "21.2.1",
     "jest-junit": "7.0.0",
+    "mkdirp": "1.0.4",
     "raf": "3.4.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
     "react-test-renderer": "16.14.0",
     "redux-mock-store": "1.5.5",
     "rimraf": "2.7.1",
@@ -156,7 +169,7 @@
     "ts-loader": "9.5.2",
     "url-loader": "4.1.1",
     "web-audio-test-api": "0.5.2",
-    "webpack": "5.98.0",
+    "webpack": "5.99.8",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.2.1",
     "yauzl": "2.10.0"

packages/scratch-gui/package.json

@@ -149,20 +149,19 @@ VideoStep.propTypes = {
     video: PropTypes.string.isRequired
 };
 
-const ImageStep = ({title, image}) => (
-    <Fragment>
-        <div className={styles.stepTitle}>
-            {title}
-        </div>
-        <div className={styles.stepImageContainer}>
-            <img
-                className={styles.stepImage}
-                draggable={false}
-                key={image} /* Use src as key to prevent hanging around on slow connections */
-                src={image}
-            />
-        </div>
-    </Fragment>
+const ImageStep = ({title, image}) => (<Fragment>
+    <div className={styles.stepTitle}>
+        {title}
+    </div>
+    <div className={styles.stepImageContainer}>
+        <img
+            className={styles.stepImage}
+            draggable={false}
+            key={image} /* Use src as key to prevent hanging around on slow connections */
+            src={image}
+        />
+    </div>
+</Fragment>
 );
 
 ImageStep.propTypes = {
@@ -292,9 +291,9 @@ const Cards = props => {
         onShowAll,
         onNextStep,
         onPrevStep,
-        showVideos,
         step,
         expanded,
+        showVideos,
         ...posProps
     } = props;
     let {x, y} = posProps;
@@ -361,18 +360,19 @@ const Cards = props => {
                                 />
                             ) : (
                                 steps[step].video ? (
-                                    showVideos ? (
-                                        <VideoStep
-                                            dragging={dragging}
-                                            expanded={expanded}
-                                            video={translateVideo(steps[step].video, locale)}
-                                        />
-                                    ) : ( // Else show the deck image and title
-                                        <ImageStep
-                                            image={content[activeDeckId].img}
-                                            title={content[activeDeckId].name}
-                                        />
-                                    )
+                                    showVideos ?
+                                        (
+                                            <VideoStep
+                                                dragging={dragging}
+                                                expanded={expanded}
+                                                video={translateVideo(steps[step].video, locale)}
+                                            />
+                                        ) : (
+                                            <ImageStep
+                                                image={content[activeDeckId].img}
+                                                title={content[activeDeckId].name}
+                                            />
+                                        )
                                 ) : (
                                     <ImageStep
                                         image={translateImage(steps[step].image, locale)}
@@ -428,10 +428,6 @@ Cards.propTypes = {
     y: PropTypes.number
 };
 
-Cards.defaultProps = {
-    showVideos: true
-};
-
 export {
     Cards as default,
     // Others exported for testability

packages/scratch-gui/src/components/cards/cards.jsx

@@ -24,6 +24,18 @@ const PHASES = keyMirror({
     notfound: null
 });
 
+const defaultPrescanMessage = (<FormattedMessage
+    defaultMessage="Have your device nearby, then begin searching."
+    description="Prompt for beginning the search"
+    id="gui.connection.auto-scanning.prescan"
+/>);
+
+const defaultScanBeginMessage = (<FormattedMessage
+    defaultMessage="Press the button on your device."
+    description="Prompt for pushing the button on the device"
+    id="gui.connection.auto-scanning.scanBeginMessage"
+/>);
+
 const AutoScanningStep = props => {
     // Offer to update both during scan and after a failed scan, as long there's an update function.
     // It's possible the scan will find "some" device but not the desired device,
@@ -35,16 +47,23 @@ const AutoScanningStep = props => {
             <div className={styles.activityAreaInfo}>
                 <div className={styles.centeredRow}>
                     {props.phase === PHASES.prescan && (
-                        <React.Fragment>
+                        props.connectionIconURL ? (
                             <img
                                 className={styles.radarBig}
-                                src={radarIcon}
+                                src={props.connectionIconURL}
                             />
-                            <img
-                                className={styles.bluetoothCenteredIcon}
-                                src={bluetoothIcon}
-                            />
-                        </React.Fragment>
+                        ) : (
+                            <React.Fragment>
+                                <img
+                                    className={styles.radarBig}
+                                    src={radarIcon}
+                                />
+                                <img
+                                    className={styles.bluetoothCenteredIcon}
+                                    src={bluetoothIcon}
+                                />
+                            </React.Fragment>
+                        )
                     )}
                     {props.phase === PHASES.pressbutton && (
                         <React.Fragment>
@@ -77,20 +96,8 @@ const AutoScanningStep = props => {
         </Box>
         <Box className={styles.bottomArea}>
             <Box className={classNames(styles.bottomAreaItem, styles.instructions)}>
-                {props.phase === PHASES.prescan && (
-                    <FormattedMessage
-                        defaultMessage="Have your device nearby, then begin searching."
-                        description="Prompt for beginning the search"
-                        id="gui.connection.auto-scanning.prescan"
-                    />
-                )}
-                {props.phase === PHASES.pressbutton && (
-                    <FormattedMessage
-                        defaultMessage="Press the button on your device."
-                        description="Prompt for pushing the button on the device"
-                        id="gui.connection.auto-scanning.pressbutton"
-                    />
-                )}
+                {props.phase === PHASES.prescan && props.prescanMessage}
+                {props.phase === PHASES.pressbutton && props.scanBeginMessage}
             </Box>
             {showUpdate && (
                 <Box className={classNames(styles.bottomAreaItem, styles.instructions)}>
@@ -180,15 +187,20 @@ const AutoScanningStep = props => {
 };
 
 AutoScanningStep.propTypes = {
+    connectionIconURL: PropTypes.string,
     connectionTipIconURL: PropTypes.string,
     onRefresh: PropTypes.func,
     onStartScan: PropTypes.func,
     onUpdatePeripheral: PropTypes.func,
-    phase: PropTypes.oneOf(Object.keys(PHASES))
+    phase: PropTypes.oneOf(Object.keys(PHASES)),
+    prescanMessage: PropTypes.node,
+    scanBeginMessage: PropTypes.node
 };
 
 AutoScanningStep.defaultProps = {
-    phase: PHASES.prescan
+    phase: PHASES.prescan,
+    prescanMessage: defaultPrescanMessage,
+    scanBeginMessage: defaultScanBeginMessage
 };
 
 export {

packages/scratch-gui/src/components/connection-modal/auto-scanning-step.jsx

@@ -24,8 +24,23 @@ const PHASES = keyMirror({
     updatePeripheral: null
 });
 
-const ConnectionModalComponent = props => (
-    <Modal
+const ConnectionModalComponent = props => {
+    // ScanningStep allows the user to choose a peripheral from a list.
+    // AutoScanningStep connects to the first peripheral found.
+    // Also, AutoScanningStep adds "prescan" and "pressbutton" phases before the actual scan.
+    // When useExternalPeripheralList is true, force the use of AutoScanningStep:
+    // - We want to automatically connect to the first peripheral "found" since it's actually the one selected by the
+    //   user from the external list.
+    // - We want to show the "prescan" phase to inform the user before the external list appears.
+    // - The "pressbutton" phase doesn't hurt: it might be hidden behind the external list (especially with Android
+    //   CDM) or it might help the user to keep the peripheral device awake.
+    // TODO: does forcing AutoScanningStep mean we can eliminate the `USER_PICKED_PERIPHERAL` message?
+    const ScanningStepContainer = (
+        (props.useAutoScan || props.useExternalPeripheralList) ?
+            AutoScanningStep :
+            ScanningStep
+    );
+    return (<Modal
         className={styles.modalContent}
         contentLabel={props.name}
         headerClassName={styles.header}
@@ -35,27 +50,30 @@ const ConnectionModalComponent = props => (
         onRequestClose={props.onCancel}
     >
         <Box className={styles.body}>
-            {props.phase === PHASES.scanning && !props.useAutoScan && <ScanningStep {...props} />}
-            {props.phase === PHASES.scanning && props.useAutoScan && <AutoScanningStep {...props} />}
+            {props.phase === PHASES.scanning && <ScanningStepContainer {...props} />}
             {props.phase === PHASES.connecting && <ConnectingStep {...props} />}
             {props.phase === PHASES.connected && <ConnectedStep {...props} />}
             {props.phase === PHASES.error && <ErrorStep {...props} />}
             {props.phase === PHASES.unavailable && <UnavailableStep {...props} />}
             {props.phase === PHASES.updatePeripheral && <UpdatePeripheralStep {...props} />}
         </Box>
-    </Modal>
-);
+    </Modal>);
+};
 
 ConnectionModalComponent.propTypes = {
     connectingMessage: PropTypes.node.isRequired,
+    connectionIconURL: PropTypes.string,
     connectionSmallIconURL: PropTypes.string,
     connectionTipIconURL: PropTypes.string,
     name: PropTypes.node,
     onCancel: PropTypes.func.isRequired,
     onHelp: PropTypes.func.isRequired,
     phase: PropTypes.oneOf(Object.keys(PHASES)).isRequired,
+    prescanMessage: PropTypes.node,
+    scanBeginMessage: PropTypes.node,
     title: PropTypes.string.isRequired,
-    useAutoScan: PropTypes.bool.isRequired
+    useAutoScan: PropTypes.bool.isRequired,
+    useExternalPeripheralList: PropTypes.bool
 };
 
 ConnectionModalComponent.defaultProps = {

packages/scratch-gui/src/components/connection-modal/connection-modal.jsx

@@ -6,7 +6,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: 'transparent';
+    background-color: transparent;
     display: flex;
     justify-content: center;
     align-items: center;