diff --git a/features/features.json b/features/features.json index b1099b01..eeb9b06a 100644 --- a/features/features.json +++ b/features/features.json @@ -1,4 +1,9 @@ [ + { + "version": 2, + "id": "project-miniplayer", + "versionAdded": "v3.8.0" + }, { "version": 2, "id": "project-descriptions", diff --git a/features/project-miniplayer/data.json b/features/project-miniplayer/data.json new file mode 100644 index 00000000..160cffed --- /dev/null +++ b/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/*" }] +} diff --git a/features/project-miniplayer/script.js b/features/project-miniplayer/script.js new file mode 100644 index 00000000..45a89b62 --- /dev/null +++ b/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) + }) +} diff --git a/features/project-miniplayer/style.css b/features/project-miniplayer/style.css new file mode 100644 index 00000000..203751d5 --- /dev/null +++ b/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; +} \ No newline at end of file