@mfcc64/ytms 16.0.0 → 17.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mfcc64/ytms",
-  "version": "16.0.0",
+  "version": "17.0.0",
   "description": "YouTube Musical Spectrum",
   "main": "script.mjs",
   "scripts": {

package/script.mjs

@@ -99,7 +99,7 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
     af_links.style.color = "#FFFFFF";
     af_links.style.fontSize = "10pt";
     af_links.style.right = "8px";
-    af_links.style.bottom = "8px";
+    af_links.style.bottom = "calc(var(--ytms-cqt-bottom, 0px) + 8px)";
     af_links.style.opacity = 1;
     {
         const e = (name, ...args) => {
@@ -119,7 +119,7 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
             e("div", {id: "message"},
               e("h3", "YouTube Musical Spectrum"),
               e("ul",
-                e("li", "By default, the visualization is visible on YT Music page but hidden on YouTube page."),
+                e("li", "By default, the visualization is visible on YT Music, Spotify, and SoundCloud but hidden on YouTube page."),
                 e("li", "Press ", e("b", "Ctrl+Alt+G"), " as a shortcut to show/hide visualization. This is equivalent to check/uncheck ", e("b", "Visible"), " setting."),
                 e("li", "Click the ", e("img", {alt: "YTMS"}, {src: icon_16}), " icon at the top left corner to open/close settings."),
                 e("li", "Press ", e("b", "Ctrl+Alt+H"), " to open/close settings and show/hide the ", e("img", {alt: "YTMS"}, {src: icon_16}), " icon."),
@@ -138,7 +138,6 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
               e("img", {alt: "YTMS"}, {src: icon_16}, {style: "curson: pointer;"}, {id: "open_message"}),
               " Support me on ",
               e("a", {href: "https://www.youtube.com/@mfcc64"}, {target: "_blank"}, "Youtube"), " ",
-              e("a", {href: "https://www.patreon.com/mfcc64"}, {target: "_blank"}, "Patreon"), " ",
               e("a", {href: "https://github.com/mfcc64"}, {target: "_blank"}, "GitHub"), " ",
               e("a", {href: "https://paypal.me/mfcc64"}, {target: "_blank"}, "PayPal"), " ",
               e("a", {href: "https://saweria.co/mfcc64"}, {target: "_blank"}, "Saweria")
@@ -157,7 +156,7 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
         af_links.style.display = !af_links_timeout || (child_menu.visible?.checked ?? true) ? "block" : "none";
     }
 
-    const message_version = 12;
+    const message_version = 13;
     af_links.shadowRoot.getElementById("message").style.display = get_opt("message_version") == message_version ? "none" : "block";
     af_links.shadowRoot.getElementById("close_message").addEventListener("click", function() {
         set_opt("message_version", message_version);
@@ -167,18 +166,36 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
         af_links.shadowRoot.getElementById("message").style.display = "block";
     });
 
+    const media_symbol = Symbol("media_symbol");
+    let svideos = [];
+    if (document.location.hostname == "soundcloud.com") {
+        await new Promise((res, rej) => {
+            const old = AudioContext.prototype.createMediaElementSource;
+            AudioContext.prototype.createMediaElementSource = function(media) {
+                const retval = old.call(this, media);
+                ShowCQTElement.global_audio_context = this;
+                svideos.push(media);
+                media[media_symbol] = retval;
+                res();
+                return retval;
+            };
+        });
+    }
+
     const cqt = new ShowCQTElement();
     set_fixed_style(cqt, 9999999);
     let stop_count = 0;
     const videos = document.getElementsByTagName("video");
-    let svideos = [];
+    const require_refresh = ["open.spotify.com", "soundcloud.com"].indexOf(document.location.hostname) < 0;
     cqt.render_callback = function() {
-        let need_refresh = (videos.length != svideos.length);
-        for (let k = 0; k < videos.length && !need_refresh; k++)
-            need_refresh = (videos[k] != svideos[k]);
-        if (need_refresh) {
-            this.dataset.inputs = "video";
-            svideos = Array.from(videos);
+        if (require_refresh) {
+            let need_refresh = (videos.length != svideos.length);
+            for (let k = 0; k < videos.length && !need_refresh; k++)
+                need_refresh = (videos[k] != svideos[k]);
+            if (need_refresh) {
+                this.dataset.inputs = "video";
+                svideos = Array.from(videos);
+            }
         }
 
         let state = 0;
@@ -197,7 +214,6 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
             #player { margin-top: 0 !important; }`;
         document.head.appendChild(style);
         af_links.style.zIndex = 11;
-        af_links.style.bottom = "calc(var(--ytmusic-player-bar-height, 0) + 8px)";
         cqt.style.zIndex = 10;
 
         function update_cqt_bottom() {
@@ -214,8 +230,39 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
         update_cqt_bottom();
     }
 
-    if (document.location.hostname == "music.youtube.com")
-        ytmusic_layout();
+    function spotify_layout() {
+        cqt.style.zIndex = 4;
+        af_links.style.zIndex = 5;
+        document.body.style.setProperty("--ytms-cqt-bottom", "88px"); // FIXME
+        const old_play = HTMLMediaElement.prototype.play;
+        HTMLMediaElement.prototype.play = async function() {
+            const ret = old_play.call(this);
+            if (this.isConnected || this instanceof HTMLAudioElement)
+                return ret;
+            for (const video of svideos)
+                if (this == video)
+                    return ret;
+
+            svideos.push(this);
+            const source = cqt.audio_context.createMediaElementSource(this);
+            source.connect(cqt.audio_input);
+            source.connect(cqt.audio_context.destination);
+            return ret;
+        };
+    }
+
+    function soundcloud_layout() {
+        cqt.style.zIndex = 1000;
+        af_links.style.zIndex = 1001;
+        svideos[0][media_symbol].connect(cqt.audio_input);
+        document.body.style.setProperty("--ytms-cqt-bottom", "var(--play-controls-height, 0px)");
+    }
+
+    switch (document.location.hostname) {
+        case "music.youtube.com": ytmusic_layout(); break;
+        case "open.spotify.com": spotify_layout(); break;
+        case "soundcloud.com": soundcloud_layout(); break;
+    }
 
     const coord_line_h = document.createElement("div");
     const coord_line_v = document.createElement("div");
@@ -304,6 +351,7 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
         menu_div.style.visibility = "hidden";
         menu_div.style.cursor = "default";
         menu_table.style.width = "860px";
+        menu_div.style.display = "block";
 
         var current_tr = null;
         var current_tr_count = 0;
@@ -907,7 +955,8 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
             setTimeout(function(){ child.value = "Reset Default Settings"; }, 300);
         });
 
-        menu_div.appendChild(menu_table);
+        menu_div.attachShadow({mode: "open"});
+        menu_div.shadowRoot.appendChild(menu_table);
         menu.onclick = function() {
             menu_is_hidden = !menu_is_hidden;
             if (menu_is_hidden)