Use small stage lib

Author: Samq64

addons/fps/userscript.js

@@ -1,4 +1,7 @@
-export default async function ({ addon, global, cons, msg }) {
+import addSmallStageClass from "../../libraries/common/cs/small-stage.js";
+
+export default async function ({ addon, console, msg }) {
+
   await new Promise((resolve) => {
     if (addon.tab.traps.vm.editingTarget) return resolve();
     addon.tab.traps.vm.runtime.once("PROJECT_LOADED", resolve);
@@ -9,20 +12,8 @@ export default async function ({ addon, global, cons, msg }) {
   let fpsCounterElement = document.createElement("span");
   fpsCounterElement.className = "fps-counter";
 
-  function updateVisibility() {
-    if (addon.tab.redux && addon.tab.redux.state.scratchGui.stageSize.stageSize === "small") {
-      fpsCounterElement.style.display = "none";
-    } else {
-      addon.tab.displayNoneWhileDisabled(fpsCounterElement, { display: "flex" });
-    }
-  }
-
-  updateVisibility();
-
-  addon.tab.redux.addEventListener("statechanged", ({ detail }) => {
-    if (detail.action.type !== "scratch-gui/StageSize/SET_STAGE_SIZE") return;
-    updateVisibility();
-  });
+  addon.tab.displayNoneWhileDisabled(fpsCounterElement);
+  addSmallStageClass();
 
   const renderTimes = [];
   var fps = "?";
@@ -46,7 +37,6 @@ export default async function ({ addon, global, cons, msg }) {
       markAsSeen: true,
       reduxEvents: ["scratch-gui/mode/SET_PLAYER", "fontsLoaded/SET_FONTS_LOADED", "scratch-gui/locales/SELECT_LOCALE"],
     });
-    console.log("Hai :D");
     addon.tab.appendToSharedSpace({ space: "afterStopButton", element: fpsCounterElement, order: 3 });
   }
 }

addons/fps/userstyle.css

@@ -3,13 +3,13 @@
   font-weight: bold;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   white-space: nowrap;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  -ms-flex-align: center;
-  align-items: center;
   padding: 0.25rem;
   user-select: none;
   color: #0fbd8c;
   display: flex;
   align-items: center;
 }
+
+.sa-small-stage .fps-counter {
+  display: none;
+}