@mfcc64/ytms 18.2.1 → 20.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mfcc64/ytms",
-  "version": "18.2.1",
+  "version": "20.0.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, AutoResumeAudioContext} from "../../showcqt-element@2/showcqt-element.mjs";
+import {ShowCQTElement} from "../../showcqt-element@3/showcqt-element.mjs";
 
 (async function(){
     const get_asset = (name) => String(new URL(`../ytms-assets@1.0.0/${name}`, import.meta.url));
@@ -97,7 +97,7 @@ import {ShowCQTElement, AutoResumeAudioContext} from "../../showcqt-element@2/sh
     af_links.style.padding = "8px";
     af_links.style.border = "thin solid white";
     af_links.style.backgroundColor = "#000000DD";
-    af_links.style.color = "#FFFFFF";
+    af_links.style.color = "#dddddd";
     af_links.style.fontSize = "10pt";
     af_links.style.right = "8px";
     af_links.style.bottom = "calc(var(--ytms-cqt-bottom, 0px) + 8px)";
@@ -115,30 +115,14 @@ import {ShowCQTElement, AutoResumeAudioContext} from "../../showcqt-element@2/sh
         af_links.attachShadow({mode: "open"}).append(
             e("style",
               `:host { opacity: 0; max-width: 700px; }
+              a, a:visited { color: #ffffff; font-weight: bold; }
+              a:hover { color: #ffffa0; }
               :host(:hover) { opacity: 1; }
               img { vertical-align: middle; }`),
-            e("div", {id: "message"},
-              e("h3", "YouTube Musical Spectrum"),
-              e("ul",
-                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."),
-                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 range."),
-                e("li", e("a", {href: "https://github.com/mfcc64/youtube-musical-spectrum#settings"}, {target: "_blank"}, "Read more..."))
-              ),
-              e("p",
-                e("button", {id: "close_message"}, {style: "cursor: pointer;"}, "Close"),
-                " (Click the ", e("img", {alt: "YTMS"}, {src: icon_16}), " icon below to reopen again)"
-              )
-            ),
             e("div", {style: "text-align: right;"},
-              e("img", {alt: "YTMS"}, {src: icon_16}, {style: "curson: pointer;"}, {id: "open_message"}),
+              e("img", {alt: "YTMS"}, {src: icon_16}, {style: "curson: pointer;"}),
               " Support me on ",
-              e("a", {href: "https://www.youtube.com/@mfcc64"}, {target: "_blank"}, "Youtube"), " ",
+              e("a", {href: "https://www.youtube.com/@mfcc64"}, {target: "_blank"}, "YouTube"), " ",
               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,23 +141,13 @@ import {ShowCQTElement, AutoResumeAudioContext} from "../../showcqt-element@2/sh
         af_links.style.display = !af_links_timeout || (child_menu.visible?.checked ?? true) ? "block" : "none";
     }
 
-    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);
-        af_links.shadowRoot.getElementById("message").style.display = "none";
-    });
-    af_links.shadowRoot.getElementById("open_message").addEventListener("click", function() {
-        af_links.shadowRoot.getElementById("message").style.display = "block";
-    });
-
+    const cqt = new ShowCQTElement();
     let svideos = [];
     if (document.location.hostname == "soundcloud.com") {
-        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) {
+            if (this != cqt.audio_context) {
                 console.warn("audio can't connect to showcqt-element");
                 return retval;
             }
@@ -183,14 +157,13 @@ import {ShowCQTElement, AutoResumeAudioContext} from "../../showcqt-element@2/sh
         };
 
         window.AudioContext = function() {
-            return ShowCQTElement.global_audio_context;
+            return cqt.audio_context;
         };
 
-        Object.setPrototypeOf(window.AudioContext, AutoResumeAudioContext);
-        window.AudioContext.prototype = AutoResumeAudioContext.prototype;
+        Object.setPrototypeOf(window.AudioContext, cqt.audio_context.constructor);
+        window.AudioContext.prototype = cqt.audio_context.constructor.prototype;
     }
 
-    var cqt = new ShowCQTElement();
     set_fixed_style(cqt, 9999999);
     let stop_count = 0;
     const videos = document.getElementsByTagName("video");
@@ -810,8 +783,10 @@ import {ShowCQTElement, AutoResumeAudioContext} from "../../showcqt-element@2/sh
         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)
+            if (!child.checked) {
                 coord_line_h.style.display = coord_line_v.style.display = "none";
+                cqt.render_clear();
+            }
             update_af_links();
         });
 
@@ -944,6 +919,12 @@ import {ShowCQTElement, AutoResumeAudioContext} from "../../showcqt-element@2/sh
 
         menu_div.appendChild(menu_table);
         menu.onclick = function() {
+            if (menu_is_hidden && !child_menu.visible.checked) {
+                child_menu.visible.checked = true;
+                child_menu.visible.onchange();
+                return;
+            }
+
             menu_is_hidden = !menu_is_hidden;
             if (menu_is_hidden)
                 menu_div.style.visibility = "hidden";
@@ -951,6 +932,11 @@ import {ShowCQTElement, AutoResumeAudioContext} from "../../showcqt-element@2/sh
                 menu_div.style.visibility = "visible";
         };
 
+        cqt.addEventListener("dblclick", () => {
+            child_menu.visible.checked = false;
+            child_menu.visible.onchange();
+        });
+
         var hide_menu = !!(get_opt("hide_menu") * 1);
         menu.style.visibility = hide_menu ? "hidden" : "visible";
         document.body.insertBefore(menu_div, document.body.firstChild);