Feat: [UEPR-165] merge native into develop with platform

packages/scratch-gui/.npmignore

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

packages/scratch-gui/package.json

@@ -92,6 +92,7 @@
     "react-tabs": "2.3.1",
     "react-tooltip": "4.5.1",
     "react-virtualized": "9.22.6",
+    "react-visibility-sensor": "5.0.2",
     "redux-throttle": "0.1.1",
     "scratch-audio": "2.0.92",
     "scratch-blocks": "1.1.206",
@@ -102,6 +103,7 @@
     "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"
   },
@@ -141,9 +143,8 @@
     "html-webpack-plugin": "5.6.3",
     "jest": "21.2.1",
     "jest-junit": "7.0.0",
+    "mkdirp": "1.0.3",
     "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",

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

@@ -18,6 +18,8 @@ import closeIcon from './icon--close.svg';
 import {translateVideo} from '../../lib/libraries/decks/translate-video.js';
 import {translateImage} from '../../lib/libraries/decks/translate-image.js';
 
+import {PLATFORM} from '../../lib/platform.js';
+
 const CardHeader = ({onCloseCards, onShrinkExpandCards, onShowAll, totalSteps, step, expanded}) => (
     <div className={expanded ? styles.headerButtons : classNames(styles.headerButtons, styles.headerButtonsHidden)}>
         <div
@@ -149,25 +151,25 @@ 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, platform}) => (<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={platform === PLATFORM.ANDROID ? `file:///android_asset/www${image}` : image}
+        />
+    </div>
+</Fragment>
 );
 
 ImageStep.propTypes = {
     image: PropTypes.string.isRequired,
-    title: PropTypes.node.isRequired
+    title: PropTypes.node.isRequired,
+    platform: PropTypes.string
 };
 
 const NextPrevButtons = ({isRtl, onNextStep, onPrevStep, expanded}) => (
@@ -218,7 +220,7 @@ CardHeader.propTypes = {
     totalSteps: PropTypes.number
 };
 
-const PreviewsStep = ({deckIds, content, onActivateDeckFactory, onShowAll}) => (
+const PreviewsStep = ({deckIds, content, onActivateDeckFactory, onShowAll, platform}) => (
     <Fragment>
         <div className={styles.stepTitle}>
             <FormattedMessage
@@ -237,7 +239,7 @@ const PreviewsStep = ({deckIds, content, onActivateDeckFactory, onShowAll}) => (
                     <img
                         className={styles.deckImage}
                         draggable={false}
-                        src={content[id].img}
+                        src={platform === PLATFORM.ANDROID ? `file:///android_asset/www${content[id].img}` : content[id].img}
                     />
                     <div className={styles.deckName}>{content[id].name}</div>
                 </div>
@@ -273,7 +275,8 @@ PreviewsStep.propTypes = {
     }).isRequired,
     deckIds: PropTypes.arrayOf(PropTypes.string).isRequired,
     onActivateDeckFactory: PropTypes.func.isRequired,
-    onShowAll: PropTypes.func.isRequired
+    onShowAll: PropTypes.func.isRequired,
+    platform: PropTypes.string
 };
 
 const Cards = props => {
@@ -295,6 +298,7 @@ const Cards = props => {
         showVideos,
         step,
         expanded,
+        platform,
         ...posProps
     } = props;
     let {x, y} = posProps;
@@ -358,10 +362,11 @@ const Cards = props => {
                                     deckIds={steps[step].deckIds}
                                     onActivateDeckFactory={onActivateDeckFactory}
                                     onShowAll={onShowAll}
+                                    platform={platform}
                                 />
                             ) : (
                                 steps[step].video ? (
-                                    showVideos ? (
+                                    (platform === PLATFORM.WEB || platform === PLATFORM.ANDROID) && showVideos ? (
                                         <VideoStep
                                             dragging={dragging}
                                             expanded={expanded}
@@ -371,12 +376,14 @@ const Cards = props => {
                                         <ImageStep
                                             image={content[activeDeckId].img}
                                             title={content[activeDeckId].name}
+                                            platform={platform}
                                         />
                                     )
                                 ) : (
                                     <ImageStep
                                         image={translateImage(steps[step].image, locale)}
                                         title={steps[step].title}
+                                        platform={platform}
                                     />
                                 )
                             )}
@@ -423,6 +430,7 @@ Cards.propTypes = {
     onShrinkExpandCards: PropTypes.func.isRequired,
     onStartDrag: PropTypes.func,
     showVideos: PropTypes.bool,
+    platform: PropTypes.string,
     step: PropTypes.number.isRequired,
     x: PropTypes.number,
     y: PropTypes.number

packages/scratch-gui/src/components/connection-modal/auto-scanning-step.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/connection-modal.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 = {