@mfcc64/ytms 10.2.2 → 11.0.0

package/package.json

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

package/script.mjs

@@ -43,7 +43,8 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
         interval:   { def:  1, min:  1, max:  4 },
         codecs:     { def:  1, min:  0, max:  2 },
         transparent:{ def:  1, min:  0, max:  1 },
-        visible:    { def:  1, min:  0, max:  1 },
+        visible:    { def: document.location.hostname == "music.youtube.com" ? 1 : 0,
+                               min:  0, max:  1 },
         axis:       { def:  0, min:  0, max: axis_list.length - 1 }
     };
 
@@ -90,12 +91,11 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
     af_links.style.right = "8px";
     af_links.style.bottom = "8px";
     af_links.style.opacity = 1;
-    af_links.style.display = "none";
     {
         const e = (name, ...args) => {
             const v = document.createElement(name);
             for (const arg of args)
-                if (typeof arg == "object" && !(arg instanceof Object.getPrototypeOf(HTMLDivElement)))
+                if (typeof arg == "object" && !(arg instanceof Node))
                     v.setAttribute(...Object.entries(arg)[0])
                 else
                     v.append(arg);
@@ -109,9 +109,10 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
             e("div", {id: "message"},
               e("h3", "YouTube Musical Spectrum"),
               e("ul",
-                e("li", "Click the, ", e("img", {alt: "YTMS"}, {src: icon_16}), " icon at the top left corner to open/close settings."),
+                e("li", "By default, the visualization is visible on YT Music page but hidden on YouTube page."),
+                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", "Press ", e("b", "Ctrl+Alt+G"), " as a shortcut to show/hide visualization."),
+                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", "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:"), " Hz-scale axis, microphone support, YT Music support, scale options to " +
@@ -135,9 +136,18 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
         );
     }
 
-    setTimeout(() => af_links.style.opacity = "", 15000);
+    let af_links_timeout = false;
+    setTimeout(() => {
+        af_links.style.opacity = "";
+        af_links_timeout = true,
+        update_af_links();
+    }, 15000);
 
-    const message_version = 7;
+    function update_af_links() {
+        af_links.style.display = !af_links_timeout || (child_menu.visible?.checked ?? true) ? "block" : "none";
+    }
+
+    const message_version = 8;
     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);
@@ -473,7 +483,10 @@ 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) => af_links.style.display = cqt.style.display = child.checked ? "block" : "none");
+        create_child_checkbox_menu("Visible", "visible", (child) => {
+            cqt.style.display = child.checked ? "block" : "none";
+            update_af_links();
+        });
 
         current_tr = null;
         set_common_tr_style(get_menu_table_tr());