Merge pull request #825 from Masaabu/project-miniplayer

Add feature "project-miniplayer"

Author: rgantzos

features/features.json

@@ -1,4 +1,9 @@
 [
+  {
+    "version": 2,
+    "id": "project-miniplayer",
+    "versionAdded": "v3.8.0"
+  },
   {
     "version": 2,
     "id": "project-descriptions",

features/project-miniplayer/data.json

@@ -0,0 +1,17 @@
+{
+  "title": "Project Miniplayer",
+  "description": "Scroll down on the project page and you will automatically see the project miniplayer.",
+  "credits": [
+    { "username": "Masaabu-YT", "url": "https://scratch.mit.edu/users/Masaabu-YT/" }
+  ],
+  "type": ["Website"],
+  "tags": ["New", "Featured"],
+  "dynamic": true,
+  "options": [
+    { "id": "position-right", "name": "Place the player to the right.", "type": 1 },
+    { "id": "position-bottom", "name": "Place the player to the bottom.", "type": 1 },
+    { "id": "opacity", "name": "Player Transparency (0% - 90%)", "type": 2 }
+  ],
+  "scripts": [{ "file": "script.js", "runOn": "/projects/*" }],
+  "styles": [{ "file": "style.css", "runOn": "/projects/*" }]
+}

features/project-miniplayer/script.js

@@ -0,0 +1,66 @@
+export default async function ({ feature, console }) {
+    const miniplayerElement = document.createElement('div');
+    miniplayerElement.className = 'ste-project-miniplayer';
+    document.body.appendChild(miniplayerElement);
+    await ScratchTools.waitForElement("div.guiPlayer")
+    const guiPlayer = document.getElementsByClassName("guiPlayer")[0]
+    const projectHeader = document.querySelector('.description-block');
+    const title = projectHeader.closest('.flex-row.project-notes');
+
+    function updateSetting (key, value) {
+        switch (key) {
+            case 'position-right':{
+                if (value===true) {
+                    miniplayerElement.style.right = '0'
+                    miniplayerElement.style.left = ''
+                } else {
+                    miniplayerElement.style.right = ''
+                    miniplayerElement.style.left = '0'
+                }
+                break;
+            }
+            case 'position-bottom':{
+                if (value===true) {
+                    miniplayerElement.style.bottom = '0'
+                    miniplayerElement.style.top = ''
+                } else {
+                    miniplayerElement.style.bottom = ''
+                    miniplayerElement.style.top = '0'
+                }
+                break;
+            }
+            case 'opacity': {
+                if (!value) {
+                    miniplayerElement.style.opacity = 1
+                } else if (value<=90) {
+                    miniplayerElement.style.opacity = 1-value/100
+                } else {
+                    miniplayerElement.style.opacity = 0.1
+                }
+                break;
+            }
+        
+            default:
+                break;
+        }
+    }
+
+    updateSetting('position-right', await feature.settings.get("position-right"));
+    updateSetting('position-bottom', await feature.settings.get("position-bottom"));
+    updateSetting('opacity', await feature.settings.get("opacity"));
+
+    window.addEventListener('scroll', () => {
+        if (window.scrollY > 700) {
+            miniplayerElement.style.display = 'block';
+            miniplayerElement.appendChild(guiPlayer);
+        } else {
+            miniplayerElement.style.display = 'none';
+            title.insertAdjacentElement('beforebegin', guiPlayer);
+
+        }
+    });
+
+    feature.settings.addEventListener("changed", function({ key, value }) {
+        updateSetting(key, value)
+    })
+}

features/project-miniplayer/style.css

@@ -0,0 +1,9 @@
+.ste-project-miniplayer {
+    position: fixed;
+    z-index: 100;
+    background-color: #000000aa;
+    padding: 5px;
+    border-radius: 10px;
+    max-width: 485px;
+    display: none;
+}