Merge pull request #1 from TurboWarp/develop

merge with parent

Author: Titanium2099

.github/workflows/node.js.yml

@@ -9,9 +9,11 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
+      with:
+        persist-credentials: false
     - name: Install Node.js
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af
       with:
         node-version: 20
         cache: npm

package-lock.json

@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@microbit/microbit-universal-hex": "0.2.2",
+    "@turbowarp/jszip": "^3.11.1",
     "@turbowarp/nanolog": "^0.2.0",
     "@turbowarp/scratch-l10n": "^3.1001.0-202401241456-994097a5",
     "@turbowarp/scratch-storage": "^0.0.202403251715",

package.json

@@ -101,6 +101,13 @@ export const setPaused = (_paused) => {
   if (didChange) {
     paused = _paused;
     eventTarget.dispatchEvent(new CustomEvent("change"));
+
+    // TW: events for extensions
+    if (paused) {
+      vm.runtime.emit("RUNTIME_PAUSED");
+    } else {
+      vm.runtime.emit("RUNTIME_UNPAUSED");
+    }
   }
 
   // Don't check didChange as new threads could've started that we need to pause.

src/addons/addons/debugger/module.js

@@ -1 +1 @@
-{"commit":"0d357b5"}
+{"commit":"c237cfa"}

src/addons/generated/upstream-meta.json

@@ -361,8 +361,6 @@ const SoundEditor = props => (
                 {formatDuration(props.playhead, props.trimStart, props.trimEnd, props.duration)}
             </div>
             <div className={styles.advancedInfo}>
-                {props.sampleRate}
-                {'Hz '}
                 {props.isStereo ? (
                     <FormattedMessage
                         defaultMessage="Stereo"
@@ -405,7 +403,6 @@ SoundEditor.propTypes = {
     isStereo: PropTypes.bool.isRequired,
     duration: PropTypes.number.isRequired,
     size: PropTypes.number.isRequired,
-    sampleRate: PropTypes.number.isRequired,
     canPaste: PropTypes.bool.isRequired,
     canRedo: PropTypes.bool.isRequired,
     canUndo: PropTypes.bool.isRequired,

src/components/sound-editor/sound-editor.jsx

@@ -2,7 +2,7 @@
 @import "../../css/filters.css";
 
 .modal-content {
-    max-width: 550px;
+    max-width: 600px;
     margin-top: 50px;
 }
 
@@ -96,25 +96,34 @@
     font-size: 2em;
 }
 
-.delete-button {
+.restore-point-buttons {
+    margin-left: auto;
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+}
+
+.restore-point-button {
     appearance: none;
     background: none;
     border: none;
     border-radius: 100%;
     width: 2rem;
     height: 2rem;
-    margin-left: auto;
     display: flex;
     align-items: center;
     justify-content: center;
 }
-.delete-button img {
+.restore-point-button[disabled] {
+    opacity: 0.5;
+}
+.restore-point-button img {
     display: block;
     width: 75%;
     height: 75%;
     filter: $filter-icon-gray;
 }
-.delete-button:hover {
+.restore-point-button:not([disabled]):hover {
     background-color: $ui-black-transparent;
 }
 

src/components/tw-restore-point-modal/export.svg

@@ -166,7 +166,9 @@ const RestorePointModal = props => (
                             <RestorePoint
                                 key={restorePoint.id}
                                 onClickDelete={props.onClickDelete}
+                                onClickExport={props.onClickExport}
                                 onClickLoad={props.onClickLoad}
+                                isExporting={props.isExporting(restorePoint.id)}
                                 {...restorePoint}
                             />
                         ))}
@@ -221,7 +223,9 @@ RestorePointModal.propTypes = {
     onClickCreate: PropTypes.func.isRequired,
     onClickDelete: PropTypes.func.isRequired,
     onClickDeleteAll: PropTypes.func.isRequired,
+    onClickExport: PropTypes.func.isRequired,
     onClickLoad: PropTypes.func.isRequired,
+    isExporting: PropTypes.func.isRequired,
     isLoading: PropTypes.bool.isRequired,
     totalSize: PropTypes.number.isRequired,
     restorePoints: PropTypes.arrayOf(PropTypes.shape({})),

src/components/tw-restore-point-modal/restore-point-modal.css

@@ -6,6 +6,7 @@ import styles from './restore-point-modal.css';
 import {formatBytes} from '../../lib/tw-bytes-utils';
 import RestorePointAPI from '../../lib/tw-restore-point-api';
 import log from '../../lib/log';
+import exportIcon from './export.svg';
 import deleteIcon from './delete.svg';
 
 // Browser support is not perfect yet
@@ -16,6 +17,7 @@ class RestorePoint extends React.Component {
         super(props);
         bindAll(this, [
             'handleClickDelete',
+            'handleClickExport',
             'handleClickLoad'
         ]);
         this.state = {
@@ -69,6 +71,11 @@ class RestorePoint extends React.Component {
         this.props.onClickDelete(this.props.id);
     }
 
+    handleClickExport (e) {
+        e.stopPropagation();
+        this.props.onClickExport(this.props.id);
+    }
+
     handleClickLoad () {
         this.props.onClickLoad(this.props.id);
     }
@@ -129,16 +136,31 @@ class RestorePoint extends React.Component {
                     </div>
                 </div>
 
-                <button
-                    className={styles.deleteButton}
-                    onClick={this.handleClickDelete}
-                >
-                    <img
-                        src={deleteIcon}
-                        alt="Delete"
-                        draggable={false}
-                    />
-                </button>
+                <div className={styles.restorePointButtons}>
+                    <button
+                        className={styles.restorePointButton}
+                        onClick={this.handleClickExport}
+                        disabled={this.props.isExporting}
+                    >
+                        <img
+                            src={exportIcon}
+                            alt="Export"
+                            draggable={false}
+                        />
+                    </button>
+
+                    <button
+                        className={styles.restorePointButton}
+                        onClick={this.handleClickDelete}
+                        disabled={this.props.isExporting}
+                    >
+                        <img
+                            src={deleteIcon}
+                            alt="Delete"
+                            draggable={false}
+                        />
+                    </button>
+                </div>
             </div>
         );
     }
@@ -151,7 +173,9 @@ RestorePoint.propTypes = {
     projectSize: PropTypes.number.isRequired,
     thumbnailSize: PropTypes.number.isRequired,
     assets: PropTypes.shape({}).isRequired, // Record<string, number>
+    isExporting: PropTypes.bool.isRequired,
     onClickDelete: PropTypes.func.isRequired,
+    onClickExport: PropTypes.func.isRequired,
     onClickLoad: PropTypes.func.isRequired
 };