@mfcc64/ytms 17.0.0 → 18.1.0

package/package.json

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

package/script.mjs

@@ -16,7 +16,7 @@
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
  */
 
-import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
+import {ShowCQTElement, AutoResumeAudioContext} from "../../showcqt-element@2/showcqt-element.mjs";
 
 (async function(){
     const get_asset = (name) => String(new URL(`../ytms-assets@1.0.0/${name}`, import.meta.url));
@@ -34,23 +34,24 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
         speed:      { def:  2, min:  1, max: 12 },
         mic:        { def:  0, min:  0, max: 30 },
         mic_pan:    { def:  0, min:-10, max: 10 },
+        interval:   { def:  1, min:  1, max:  4 },
         scale_x:    { def:100, min: 30, max:100 },
         scale_y:    { def:100, min: 30, max:100 },
+        bar_scale:  { def:  0, min:  0, max:  4 },
         base_note:  { def: 16, min: 16, max:100 },
         semitones:  { def:120, min: 36, max:120 },
-        peak_color: { def:0xffffff, min:0, max:0xffffff },
+        scroll:     { def:  0, min:  0, max:  1 },
         left_color: { def:0xdcb900, min:0, max:0xffffff },
-        right_color:{ def:0x00b9dc, min:0, max:0xffffff },
         mid_color:  { def:0xdcdcdc, min:0, max:0xffffff },
+        right_color:{ def:0x00b9dc, min:0, max:0xffffff },
         saturation: { def:  0, min:  0, max: 30 },
         hue:        { def:  0, min:-18, max: 19 },
         hue_range:  { def: 18, min:-36, max: 36 },
-        interval:   { def:  1, min:  1, max:  4 },
-        bar_scale:  { def:  0, min:  0, max:  4 },
         line_mode:  { def:  0, min:  0, max:  4 },
         line_width: { def:  1, min:  1, max:  3 },
         line_color: { def:0xffffff, min:0, max:0xffffff },
-        scroll:     { def:  0, min:  0, max:  1 },
+        peak_range: { def:  72, min:  0, max:120 },
+        peak_color: { def:0xffffff, min:0, max:0xffffff },
         coord_color:{ def:0x000000, min:0, max:0xffffff },
         transparent:{ def:  1, min:  0, max:  1 },
         visible:    { def: document.location.hostname != "www.youtube.com" ? 1 : 0,
@@ -126,7 +127,7 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
                 e("li", "If you want to change the axis, click it."),
                 e("li", "If you want to make your change persistent, click ", e("b", "Set as Default Settings"), " button."),
                 e("li", e("b", "New Features:"), " Custom color, custom range," +
-                    " peak color, bar scale, line visualizer, hue rotation, more color presets, horizontal scroll, coordinate line."),
+                    " peak color, bar scale, line visualizer, hue rotation, more color presets, horizontal scroll, coordinate line, peak range."),
                 e("li", e("a", {href: "https://github.com/mfcc64/youtube-musical-spectrum#settings"}, {target: "_blank"}, "Read more..."))
               ),
               e("p",
@@ -156,7 +157,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 = 13;
+    const message_version = 14;
     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);
@@ -166,23 +167,30 @@ 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();
+        ShowCQTElement.global_audio_context = new AutoResumeAudioContext();
+        const old = AudioContext.prototype.createMediaElementSource;
+        AudioContext.prototype.createMediaElementSource = function(media) {
+            const retval = old.call(this, media);
+            if (this != ShowCQTElement.global_audio_context) {
+                console.warn("audio can't connect to showcqt-element");
                 return retval;
-            };
-        });
+            }
+            retval.connect(cqt.audio_input);
+            svideos.push(media);
+            return retval;
+        };
+
+        window.AudioContext = function() {
+            return ShowCQTElement.global_audio_context;
+        };
+
+        Object.setPrototypeOf(window.AudioContext, AutoResumeAudioContext);
+        window.AudioContext.prototype = AutoResumeAudioContext.prototype;
     }
 
-    const cqt = new ShowCQTElement();
+    var cqt = new ShowCQTElement();
     set_fixed_style(cqt, 9999999);
     let stop_count = 0;
     const videos = document.getElementsByTagName("video");
@@ -254,7 +262,6 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
     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)");
     }
 
@@ -614,19 +621,18 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
             child.onchange();
         }
 
-        create_child_color_menu("Peak Color", "peak_color", child => color_int[3] = color2number(child.value));
+        create_child_select_menu("Scroll", "scroll", [ "Vertical", "Horizontal" ], update_cqt_layout);
 
         function detect_peak(color) {
             if (color_int[3] == 0xffffff)
                 return;
 
-            for (let k = 4; k < color.length - 4; k += 4) {
+            const range = child_menu.peak_range.value / 120 * color.length;
+            for (let k = 4; k + 2 < range && k < color.length - 4; k += 4) {
                 if (color[k+3] <= color[k-1] || color[k+3] < color[k+7])
                     continue;
 
-                const alpha = (1 - (k+2) / color.length) ** 2 - 0.16;
-                if (alpha <= 0)
-                    break;
+                const alpha = Math.cos(0.5 * Math.PI * (k+2) / range) ** 2;
 
                 for (let m = 0; m < 3; m++)
                     color[k+m] = Math.min(color[k+m], 1) * (1 - alpha + peak_color[m] * alpha);
@@ -794,14 +800,8 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
             tr.appendChild(td);
         }
 
-        create_child_select_menu("Scroll", "scroll", [ "Vertical", "Horizontal" ], update_cqt_layout);
-        create_child_checkbox_menu("Transparent", "transparent", (child) => cqt.dataset.opacity = child.checked ? "transparent" : "opaque");
-        create_child_checkbox_menu("Visible", "visible", (child) => {
-            cqt.style.display = child.checked ? "block" : "none";
-            if (!child.checked)
-                coord_line_h.style.display = coord_line_v.style.display = "none";
-            update_af_links();
-        });
+        create_child_range_menu("Peak Range", "peak_range");
+        create_child_color_menu("Peak Color", "peak_color", child => color_int[3] = color2number(child.value));
 
         function cqt_coord_line_leave(ev) {
             coord_line_h.style.display = coord_line_v.style.display = "none";
@@ -825,6 +825,14 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
             }
         });
 
+        create_child_checkbox_menu("Transparent", "transparent", (child) => cqt.dataset.opacity = child.checked ? "transparent" : "opaque");
+        create_child_checkbox_menu("Visible", "visible", (child) => {
+            cqt.style.display = child.checked ? "block" : "none";
+            if (!child.checked)
+                coord_line_h.style.display = coord_line_v.style.display = "none";
+            update_af_links();
+        });
+
         function create_child_select_presets() {
             const presets = [
                 { title: "-- Choose Preset --" },
@@ -955,8 +963,8 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
             setTimeout(function(){ child.value = "Reset Default Settings"; }, 300);
         });
 
-        menu_div.attachShadow({mode: "open"});
-        menu_div.shadowRoot.appendChild(menu_table);
+        (document.location.hostname == "open.spotify.com" ? menu_div.attachShadow({mode: "open"}) : menu_div)
+            .appendChild(menu_table);
         menu.onclick = function() {
             menu_is_hidden = !menu_is_hidden;
             if (menu_is_hidden)