New Extension: MIDI

development/homepage-template.ejs

@@ -258,21 +258,19 @@
         <div>TurboWarp Extension Gallery</div>
       </h1>
 
-      <p>Unlike custom extensions on other websites, these aren't limited by the extension sandbox, so they are a lot more powerful. All extensions are reviewed for safety.</p>
-      <p>
-        To use multiple of these extensions in TurboWarp, hover over the extension and press the button to copy its URL. Then go to the editor, open the extension chooser, then choose the "Custom Extension" option at the bottom, and enter the URL.
-      </p>
+      <p>This is the official extension gallery, where you can get extensions that aren't limited by the extension sandbox. All of the extensions here are reviewed for safety.</p>
+      <p>You can also find these extensions in TurboWarp's "Add Extension" menu.</p>
 
       <div class="infobox infobox-warning">
         <div class="infobox-title">These extensions are not compatible with Scratch.</div>
-        Projects that use these extensions can't be uploaded to the Scratch website.
-        They can, however, be used in <a href="https://packager.turbowarp.org/">the packager</a>.
+        Projects that use these extensions can't be opened in Scratch or uploaded to the Scratch website.
+        They can still be used in <a href="https://packager.turbowarp.org/">the TurboWarp packager</a>.
       </div>
 
       <div class="infobox">
         <div class="infobox-title">Some extensions may not work in TurboWarp Desktop.</div>
-        For compatibility, security, and offline support, each <a href="https://desktop.turbowarp.org/">TurboWarp Desktop</a> update contains an offline copy of these extensions from its release date, so some extensions may be outdated or missing.
-        Use the latest update for best results.
+        To make sure extensions work offline, each release of <a href="https://desktop.turbowarp.org/">TurboWarp Desktop</a> comes with a copy of these extensions as of its release date, so some extensions may be outdated or missing.
+        Update to the latest version for the best results.
       </div>
     </div>
 

extensions/Lily/Assets.js

@@ -362,8 +362,14 @@
       const assetType = this._typeIsBitmap(blob.type)
         ? runtime.storage.AssetType.ImageBitmap
         : runtime.storage.AssetType.ImageVector;
+
+      // Bitmap data format is not actually enforced, but setting it to something that isn't in scratch-parser's
+      // known format list will throw an error when someone tries to load the project.
+      // (https://github.com/scratchfoundation/scratch-parser/blob/665f05d739a202d565a4af70a201909393d456b2/lib/sb3_definitions.json#L51)
       const dataType =
-        blob.type === "image/svg+xml" ? "svg" : blob.type.split("/")[1];
+        blob.type === "image/svg+xml"
+          ? runtime.storage.DataFormat.SVG
+          : runtime.storage.DataFormat.PNG;
 
       const arrayBuffer = await new Promise((resolve, reject) => {
         const fr = new FileReader();

extensions/Lily/LooksPlus.js

@@ -33,6 +33,8 @@
     return util.runtime.getSpriteTargetByName(nameString);
   };
 
+  const renderer = Scratch.vm.runtime.renderer;
+
   class LooksPlus {
     getInfo() {
       return {
@@ -380,7 +382,7 @@
       const drawableID = target.drawableID;
       const layerOrder = target.getLayerOrder();
       const newLayer = args.LAYER - layerOrder;
-      target.renderer.setDrawableOrder(drawableID, newLayer, "sprite", true);
+      renderer.setDrawableOrder(drawableID, newLayer, "sprite", true);
     }
 
     spriteLayerNumber(args, util) {
@@ -442,7 +444,7 @@
 
     snapshotStage(args, util) {
       return new Promise((resolve) => {
-        Scratch.vm.runtime.renderer.requestSnapshot((uri) => {
+        renderer.requestSnapshot((uri) => {
           resolve(uri);
         });
       });
@@ -467,15 +469,18 @@
       const contentType = args.TYPE;
       const content = args.CONTENT;
       if (contentType === "SVG") {
-        Scratch.vm.runtime.renderer.updateSVGSkin(
-          costume.skinId,
-          Scratch.Cast.toString(content)
-        );
+        try {
+          renderer.updateSVGSkin(
+            costume.skinId,
+            Scratch.Cast.toString(content)
+          );
+          renderer._allSkins[costume.skinId].differsFromAsset = true;
+        } catch (e) {
+          console.error(e);
+        }
       } else {
         console.error("Options other than SVG are currently unavailable");
-        return;
       }
-      Scratch.vm.emitTargetsUpdate();
     }
 
     restoreCostumeContent(args, util) {
@@ -490,21 +495,30 @@
         return;
       }
 
-      //This is here to ensure no changes are made to bitmap costumes, as changes are irreversible
-      //Check will be removed when it's possible to edit bitmap skins
+      // This is here to ensure no changes are made to bitmap costumes, as changes are irreversible
+      // Check will be removed when it's possible to edit bitmap skins
       const format = costume.asset.assetType.runtimeFormat;
       if (format !== "svg") {
         console.error("Costume is not vector");
         return;
       }
 
-      const content = costume.asset.decodeText();
-      const rotationCenterX = costume.rotationCenterX;
-      const rotationCenterY = costume.rotationCenterY;
-      util.target.renderer.updateSVGSkin(costume.skinId, content, [
-        rotationCenterX,
-        rotationCenterY,
-      ]);
+      if (!renderer._allSkins[costume.skinId].differsFromAsset) {
+        return;
+      }
+
+      try {
+        const content = costume.asset.decodeText();
+        const rotationCenterX = costume.rotationCenterX;
+        const rotationCenterY = costume.rotationCenterY;
+        renderer.updateSVGSkin(costume.skinId, content, [
+          rotationCenterX,
+          rotationCenterY,
+        ]);
+        renderer._allSkins[costume.skinId].differsFromAsset = false;
+      } catch (e) {
+        console.error(e);
+      }
     }
 
     costumeContent(args, util) {

extensions/Lily/Skins.js

@@ -40,7 +40,7 @@
   const renderer = runtime.renderer;
   const Cast = Scratch.Cast;
 
-  var createdSkins = [];
+  var createdSkins = {};
 
   class Skins {
     constructor() {
@@ -371,9 +371,9 @@
 
     deleteAllSkins() {
       this._refreshTargets();
-      for (let i = 0; i < createdSkins.length; i++)
-        renderer.destroySkin(createdSkins[i]);
-      createdSkins = [];
+      for (const skinName in createdSkins)
+        renderer.destroySkin(createdSkins[skinName]);
+      createdSkins = {};
     }
 
     restoreTargets(args) {

extensions/Lily/Video.js

@@ -2,6 +2,7 @@
 // ID: lmsVideo
 // Description: Play videos from URLs.
 // By: LilyMakesThings <https://scratch.mit.edu/users/LilyMakesThings/>
+// By: SharkPool
 // License: MIT AND LGPL-3.0
 
 // Attribution is not required, but greatly appreciated.
@@ -14,6 +15,21 @@
   const renderer = vm.renderer;
   const Cast = Scratch.Cast;
 
+  // In some versions of Chrome, it seems that trying to render a <video> returns pure black
+  // if it's not in the DOM in a place the browser thinks is visible. That means we can't
+  // use display: none.
+  // See https://github.com/TurboWarp/scratch-render/issues/12
+  const elementContainer = document.createElement("div");
+  elementContainer.className = "tw-extensions-lily-videos-container";
+  elementContainer.style.pointerEvents = "none";
+  elementContainer.style.position = "absolute";
+  elementContainer.style.opacity = "0";
+  elementContainer.style.width = "0";
+  elementContainer.style.height = "0";
+  elementContainer.style.visibility = "hidden";
+  elementContainer.ariaHidden = "true";
+  document.body.appendChild(elementContainer);
+
   const BitmapSkin = runtime.renderer.exports.BitmapSkin;
   class VideoSkin extends BitmapSkin {
     constructor(id, renderer, videoName, videoSrc) {
@@ -49,6 +65,10 @@
       this.videoElement.src = videoSrc;
       this.videoElement.currentTime = 0;
 
+      // <video> must be in the DOM for it to render (see comments above)
+      elementContainer.appendChild(this.videoElement);
+      this.videoElement.tabIndex = -1;
+
       this.videoDirty = true;
 
       this.reuploadVideo();
@@ -105,6 +125,7 @@
     dispose() {
       super.dispose();
       this.videoElement.pause();
+      this.videoElement.remove();
     }
   }
 
@@ -239,6 +260,19 @@
               },
             },
           },
+          {
+            opcode: "getFrame",
+            blockType: Scratch.BlockType.REPORTER,
+            text: Scratch.translate(
+              "screenshot of video [NAME] at current time"
+            ),
+            arguments: {
+              NAME: {
+                type: Scratch.ArgumentType.STRING,
+                defaultValue: "my video",
+              },
+            },
+          },
           "---",
           {
             opcode: "pause",
@@ -293,6 +327,23 @@
               },
             },
           },
+          {
+            opcode: "setPlaybackRate",
+            blockType: Scratch.BlockType.COMMAND,
+            text: Scratch.translate(
+              "set playback rate of video [NAME] to [RATE]"
+            ),
+            arguments: {
+              NAME: {
+                type: Scratch.ArgumentType.STRING,
+                defaultValue: "my video",
+              },
+              RATE: {
+                type: Scratch.ArgumentType.NUMBER,
+                defaultValue: "2",
+              },
+            },
+          },
         ],
         menus: {
           targets: {
@@ -335,6 +386,10 @@
                 text: Scratch.translate("height"),
                 value: "height",
               },
+              {
+                text: Scratch.translate("playback rate"),
+                value: "playback rate",
+              },
             ],
           },
         },
@@ -461,11 +516,36 @@
           return videoSkin.size[0];
         case "height":
           return videoSkin.size[1];
+        case "playback rate":
+          return videoSkin.videoElement.playbackRate;
         default:
           return 0;
       }
     }
 
+    getFrame(args) {
+      const videoName = Cast.toString(args.NAME);
+      const videoSkin = this.videos[videoName];
+      if (!videoSkin) return "";
+
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        console.warn("2D rendering context not available");
+        return "";
+      }
+
+      const videoElement = videoSkin.videoElement;
+      if (videoElement.videoWidth === 0 || videoElement.videoHeight === 0) {
+        return "";
+      }
+
+      canvas.width = videoElement.videoWidth;
+      canvas.height = videoElement.videoHeight;
+      ctx.drawImage(videoElement, 0, 0);
+      return canvas.toDataURL();
+    }
+
     pause(args) {
       const videoName = Cast.toString(args.NAME);
       const videoSkin = this.videos[videoName];
@@ -496,11 +576,26 @@
 
     setVolume(args) {
       const videoName = Cast.toString(args.NAME);
+      const videoSkin = this.videos[videoName];
+      if (!videoSkin) return;
+
       const value = Cast.toNumber(args.VALUE);
+      videoSkin.videoElement.volume = Math.min(1, Math.max(0, value / 100));
+    }
+
+    setPlaybackRate(args) {
+      const videoName = Cast.toString(args.NAME);
       const videoSkin = this.videos[videoName];
       if (!videoSkin) return;
 
-      videoSkin.videoElement.volume = value / 100;
+      try {
+        const value = Cast.toNumber(args.RATE);
+        // Supposedly negative values will work in Safari but people probably shouldn't rely
+        // on that since others don't.
+        videoSkin.videoElement.playbackRate = Math.max(0, value);
+      } catch (e) {
+        console.warn(e);
+      }
     }
 
     /** @returns {VM.Target|undefined} */

extensions/Lily/lmsutils.js

@@ -1356,14 +1356,13 @@
 
     setSpriteSVG(args, util) {
       try {
-        Scratch.vm.runtime.renderer.updateSVGSkin(
-          util.target.sprite.costumes[args.INPUTA - 1].skinId,
-          args.INPUTB
-        );
+        const skinId = util.target.sprite.costumes[args.INPUTA - 1].skinId;
+        const renderer = Scratch.vm.runtime.renderer;
+        renderer.updateSVGSkin(skinId, Scratch.Cast.toString(args.INPUTB));
+        renderer._allSkins[skinId].differsFromAsset = true;
       } catch (error) {
-        return;
+        console.error(error);
       }
-      Scratch.vm.emitTargetsUpdate();
     }
 
     alertBlock(args) {