player-thumb: Use background-image instead of an <img> element (ScratchAddons#8657)

* player-thumb: Use background-image

* Don't override some of scratch3to2's styles

* Darken setting

* Format code

* Mark setting as new

* Adjust setting, rename CSS var

* Move styles to individual selectors

* Consistently use top/left

* Update addons/player-thumb/scratch3to2.css

Co-authored-by: Maximouse <brestl1c@outlook.com>

---------

Co-authored-by: Samq64 <Samq64@users.noreply.github.com>
Co-authored-by: Maximouse <brestl1c@outlook.com>

Author: Samq64

addons/addons.json

@@ -66,6 +66,7 @@
   "editor-sounds",
   "transparent-orphans",
   "gamepad",
+  "remove-curved-stage-border",
   "fix-pasted-scripts",
   "better-img-uploads",
   "ctrl-click-run-scripts",
@@ -186,7 +187,6 @@
   "editor-stage-left",
   "editor-buttons-reverse-order",
   "fullscreen",
-  "remove-curved-stage-border",
   "columns",
   "editor-compact",
   "editor-theme3"

addons/fullscreen/removeBorder.css

@@ -1,25 +1,21 @@
 .sa-fullscreen [class*="stage_full-screen"],
 .sa-fullscreen [class*="stage_green-flag-overlay-wrapper"],
-.sa-fullscreen .sa-project-thumb {
+.sa-fullscreen .sa-loader-background {
   border: 0 !important;
   border-radius: 0 !important;
 }
 
 [class*="stage_stage-overlays_"][class*="stage_full-screen_"],
-.sa-fullscreen .sa-project-thumb {
+.sa-fullscreen [class*="stage_green-flag-overlay-wrapper_"] {
   top: 0;
   left: 0;
 }
 
-.sa-fullscreen .sa-project-thumb {
+.sa-fullscreen [class*="stage_green-flag-overlay-wrapper_"] {
+  width: 100%;
   height: 100%;
 }
 
-.sa-fullscreen .sa-project-thumb.loading {
-  top: 0;
-  height: min(100%, 100vw * 0.75);
-}
-
 .sa-fullscreen .sa-loader-background {
   top: 2.75rem;
   height: min(100% - 2.75rem, 100vw * 0.75);

addons/player-thumb/addon.json

@@ -31,6 +31,22 @@
       "runAtComplete": false
     }
   ],
+  "settings": [
+    {
+      "name": "Darken thumbnail (%)",
+      "id": "darken",
+      "type": "integer",
+      "min": 10,
+      "max": 90,
+      "default": 25
+    }
+  ],
+  "dynamicEnable": true,
+  "dynamicDisable": true,
   "versionAdded": "1.40.0",
+  "latestUpdate": {
+    "version": "1.45.0",
+    "newSettings": ["darken"]
+  },
   "tags": ["community", "theme", "projectPage"]
 }

addons/player-thumb/scratch3to2.css

@@ -1,12 +1,8 @@
 :root:not(.sa-editor) [class*="stage-wrapper_stage-wrapper"] {
   position: relative;
 }
-:root:not(.sa-editor) .sa-loader-background,
-:root:not(.sa-editor) .sa-project-thumb {
+:root:not(.sa-editor) .sa-loader-background {
   border-radius: 0;
-}
-:root:not(.sa-editor) .sa-loader-background,
-:root:not(.sa-editor) .sa-project-thumb.loading {
-  top: 38px;
-  height: calc(100% - 39px);
+  top: 40px;
+  height: calc(100% - 41px);
 }

addons/player-thumb/userscript.js

@@ -2,47 +2,27 @@ export default async function ({ addon, console }) {
   if (addon.tab.editorMode === "editor") return;
 
   const projectId = location.pathname.split("/")[2];
-  const thumb = document.createElement("img");
-  thumb.src = `https://uploads.scratch.mit.edu/get_image/project/${projectId}_480x360.png`;
-  thumb.classList = "sa-project-thumb loading";
-  thumb.draggable = false;
+  document.documentElement.style.setProperty(
+    "--sa-player-thumb-src",
+    `url(https://uploads.scratch.mit.edu/get_image/project/${projectId}_480x360.png)`
+  );
 
   const stageWrapper = await addon.tab.waitForElement('div[class*="stage-wrapper_stage-wrapper_"]');
   addon.tab.redux.initialize();
-
-  // It's possible this runs after the project loads even without dynamic enable
-  if (addon.tab.redux.state?.scratchGui?.projectState?.loadingState === "SHOWING_WITH_ID") return;
-  // Second check in case of a URL change
-  if (addon.tab.editorMode === "editor") return;
-
-  const alerts = document.querySelector(".project-info-alerts");
   const controls = stageWrapper.querySelector('div[class^="controls_controls-container_"]');
+  // Ensure the project has not already loaded when disabling the controls
+  if (addon.tab.redux.state?.scratchGui?.projectState?.loadingState === "SHOWING_WITH_ID") return;
   controls.classList.add("sa-controls-disabled");
-
   const loaderBackground = stageWrapper.querySelector('[class*="loader_background_"]');
-  stageWrapper.insertBefore(thumb, loaderBackground);
-  alerts.style.display = "none";
   loaderBackground.classList.add("sa-loader-background");
 
   addon.tab.addEventListener("urlChange", () => {
     loaderBackground.classList.add("sa-loader-background");
   });
 
-  function handleStateChange(e) {
+  addon.tab.redux.addEventListener("statechanged", (e) => {
     if (e.detail.action.type === "scratch-gui/project-changed/SET_PROJECT_CHANGED") {
-      // Move the thumbnail after the project loads
-      thumb.classList.remove("loading");
       controls.classList.remove("sa-controls-disabled");
-      const stage = document.querySelector('div[class*="stage_stage"]');
-      const greenFlagOverlay = stage.querySelector('[class*="stage_green-flag-overlay-wrapper_"]');
-      stage.insertBefore(thumb, greenFlagOverlay);
-      alerts.style.display = "flex";
-    }
-    if (e.detail.action.type === "scratch-gui/vm-status/SET_STARTED_STATE") {
-      thumb.remove();
-      addon.tab.redux.removeEventListener("statechanged", handleStateChange);
     }
-  }
-
-  addon.tab.redux.addEventListener("statechanged", handleStateChange);
+  });
 }

addons/player-thumb/userstyle.css

@@ -1,56 +1,47 @@
-.sa-project-thumb {
-  display: inline;
-  position: absolute;
-  background-color: var(--darkWww-page, #fcfcfc);
-  aspect-ratio: 4 / 3;
-}
-
+body [class*="stage_green-flag-overlay-wrapper_"],
 .sa-loader-background {
-  background-color: rgba(0, 0, 0, 0.25);
-  z-index: 4999;
+  background-image: linear-gradient(rgba(0, 0, 0, calc(var(--playerThumb-darken) / 100))), var(--sa-player-thumb-src);
+  background-position: center;
+  background-size: cover;
 }
 
-:root:not(.sa-editor) .sa-controls-disabled > img {
+:root:not(.sa-editor) .sa-controls-disabled > img,
+.sa-fullscreen .sa-controls-disabled > img {
   pointer-events: none;
   opacity: 0.5;
 }
 
-:root:not(.sa-editor) .sa-project-thumb {
+:root:not(.sa-editor) [class*="stage_green-flag-overlay-wrapper_"] {
   top: 1px;
   left: 1px;
+  width: calc(100% - 2px);
   height: calc(100% - 2px);
   border-radius: calc(0.5rem - 1px);
 }
 
 :root:not(.sa-editor) .sa-loader-background {
-  border-radius: calc(0.5rem - 1px);
-}
-
-:root:not(.sa-editor) .sa-loader-background,
-:root:not(.sa-editor) .sa-project-thumb.loading {
   top: calc(2.75rem + 1px);
+  left: 1px;
+  width: calc(100% - 2px);
   height: calc(100% - 2.75rem - 2px);
+  border-radius: calc(0.5rem - 1px);
 }
 
-.sa-fullscreen .sa-project-thumb {
+.sa-fullscreen [class*="stage_green-flag-overlay-wrapper_"] {
   top: 3px;
   left: 3px;
   height: calc(100% - 6px);
+  width: calc(100% - 6px);
   border-radius: calc(0.5rem - 3px);
 }
 
-.sa-fullscreen .sa-project-thumb.loading {
-  top: 6px;
-  left: auto;
-  height: min(100% - 12px, 100vw * 0.75);
-}
-
 .sa-fullscreen .sa-loader-background {
   top: calc(2.75rem + 6px);
   left: auto;
   width: auto;
   height: min(100% - 2.75rem - 12px, 100vw * 0.75);
   aspect-ratio: 4 / 3;
+  border-radius: calc(0.5rem - 3px);
 }
 
 .sa-fullscreen [class*="loader_block-animation_"],

addons/remove-curved-stage-border/remove-borders.css

@@ -1,7 +1,4 @@
 [class*="stage_stage"],
-body [class*="stage_green-flag-overlay-wrapper"],
-/* Override player-thumb */
-:root:not(.sa-editor) div[class*="loader_background_"],
-.sa-project-thumb {
-  border-radius: 0rem;
+[class*="stage_green-flag-overlay-wrapper"] {
+  border-radius: 0rem !important;
 }

addons/scratch3to2/project.css

@@ -342,7 +342,8 @@
   border: 1px solid #d0d1d2;
 }
 :root:not(.sa-editor) [class*="stage_green-flag-overlay-wrapper_"] {
-  margin: 1px;
+  top: 1px;
+  left: 1px;
   width: calc(100% - 2px);
   height: calc(100% - 2px);
   border-radius: 0;