@mfcc64/ytms 20.0.0 → 21.0.0

package/package.json

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

package/script.mjs

@@ -19,10 +19,10 @@
 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));
+    const get_asset = (name) => String(new URL(`../ytms-assets@2.0.0/${name}`, import.meta.url));
     const axis_list = [
-        "",
-        get_asset("axis-hz-1920x32.png")
+        [ "", get_asset("axis-1920x32-flip.png") ],
+        [ get_asset("axis-hz-1920x32.png"), get_asset("axis-hz-1920x32-flip.png") ]
     ];
 
     const defaults = {
@@ -40,7 +40,7 @@ import {ShowCQTElement} from "../../showcqt-element@3/showcqt-element.mjs";
         bar_scale:  { def:  0, min:  0, max:  4 },
         base_note:  { def: 16, min: 16, max:100 },
         semitones:  { def:120, min: 36, max:120 },
-        scroll:     { def:  0, min:  0, max:  1 },
+        scroll:     { def:  0, min:  0, max:  3 },
         left_color: { def:0xdcb900, min:0, max:0xffffff },
         mid_color:  { def:0xdcdcdc, min:0, max:0xffffff },
         right_color:{ def:0x00b9dc, min:0, max:0xffffff },
@@ -91,56 +91,6 @@ import {ShowCQTElement} from "../../showcqt-element@3/showcqt-element.mjs";
         element.style.zIndex = z_index;
     }
 
-    const icon_16 = get_asset("icon-16.png");
-    const af_links = document.createElement("div");
-    set_fixed_style(af_links, 10000001);
-    af_links.style.padding = "8px";
-    af_links.style.border = "thin solid white";
-    af_links.style.backgroundColor = "#000000DD";
-    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)";
-    af_links.style.opacity = 1;
-    {
-        const e = (name, ...args) => {
-            const v = document.createElement(name);
-            for (const arg of args)
-                if (typeof arg == "object" && !(arg instanceof Node))
-                    v.setAttribute(...Object.entries(arg)[0])
-                else
-                    v.append(arg);
-            return v;
-        };
-        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", {style: "text-align: right;"},
-              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://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")
-            )
-        );
-    }
-
-    let af_links_timeout = false;
-    setTimeout(() => {
-        af_links.style.opacity = "";
-        af_links_timeout = true,
-        update_af_links();
-    }, 15000);
-
-    function update_af_links() {
-        af_links.style.display = !af_links_timeout || (child_menu.visible?.checked ?? true) ? "block" : "none";
-    }
-
     const cqt = new ShowCQTElement();
     let svideos = [];
     if (document.location.hostname == "soundcloud.com") {
@@ -165,6 +115,10 @@ import {ShowCQTElement} from "../../showcqt-element@3/showcqt-element.mjs";
     }
 
     set_fixed_style(cqt, 9999999);
+    cqt.style.setProperty("user-select", "none");
+    cqt.style.setProperty("-webkit-user-select", "none");
+    cqt.style.transformOrigin = "bottom left";
+
     let stop_count = 0;
     const videos = document.getElementsByTagName("video");
     const require_refresh = ["open.spotify.com", "soundcloud.com"].indexOf(document.location.hostname) < 0;
@@ -194,16 +148,13 @@ import {ShowCQTElement} from "../../showcqt-element@3/showcqt-element.mjs";
             #main-panel { align-items: flex-start !important; }
             #player { margin-top: 0 !important; }`;
         document.head.appendChild(style);
-        af_links.style.zIndex = 11;
         cqt.style.zIndex = 10;
 
         function update_cqt_bottom() {
             if (document.fullscreenElement) {
                 document.body.style.setProperty("--ytms-cqt-bottom", "0px");
-                af_links.style.visibility = "hidden";
             } else {
                 document.body.style.setProperty("--ytms-cqt-bottom", "var(--ytmusic-player-bar-height, 0px)");
-                af_links.style.visibility = "visible";
             }
         }
 
@@ -213,7 +164,6 @@ import {ShowCQTElement} from "../../showcqt-element@3/showcqt-element.mjs";
 
     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() {
@@ -234,7 +184,6 @@ import {ShowCQTElement} from "../../showcqt-element@3/showcqt-element.mjs";
 
     function soundcloud_layout() {
         cqt.style.zIndex = 1000;
-        af_links.style.zIndex = 1001;
         document.body.style.setProperty("--ytms-cqt-bottom", "var(--play-controls-height, 0px)");
     }
 
@@ -257,6 +206,12 @@ import {ShowCQTElement} from "../../showcqt-element@3/showcqt-element.mjs";
     coord_line_h.style.pointerEvents = coord_line_v.style.pointerEvents = "none";
     coord_line_h.style.display = coord_line_v.style.display = "none";
 
+    function update_axis() {
+        if (!child_menu.axis || !child_menu.scroll)
+            return;
+        cqt.dataset.axis = axis_list[child_menu.axis.value][+(child_menu.scroll.value > 1)];
+    }
+
     function update_cqt_layout(child) {
         if (!child_menu.height || !child_menu.scroll || !child_menu.base_note || !child_menu.semitones)
             return;
@@ -273,24 +228,37 @@ import {ShowCQTElement} from "../../showcqt-element@3/showcqt-element.mjs";
         const vleft = -base / width;
         const vwidth = 120 / width;
 
-        if (child_menu.scroll.value == "0") {
+        if (child_menu.scroll.value % 2 == 0) {
             cqt.style.height = `calc(${ child_menu.height.value / 100} * (100% - var(--ytms-cqt-bottom, 0px)))`;
             cqt.style.width = vwidth * 100 + "%";
             cqt.style.left = vleft * 100 + "%";
-            cqt.style.bottom = "var(--ytms-cqt-bottom, 0px)";
-            cqt.style.transform = "";
+
+            if (child_menu.scroll.value == 0) {
+                cqt.style.bottom = "var(--ytms-cqt-bottom, 0px)";
+                cqt.style.transform = "";
+            } else {
+                cqt.style.bottom = "100%";
+                cqt.style.transform = "scale(1, -1)";
+            }
         } else {
             cqt.style.height = child_menu.height.value + "vw";
             cqt.style.width = `calc(${vwidth} * (100vh - var(--ytms-cqt-bottom, 0px)))`;
-            cqt.style.left = "100vw";
             cqt.style.bottom = `calc(var(--ytms-cqt-bottom, 0px) + ${vleft} * (100vh - var(--ytms-cqt-bottom, 0px)))`;
-            cqt.style.transform = "rotate(-90deg)";
-            cqt.style.transformOrigin = "bottom left";
+
+            if (child_menu.scroll.value == 1) {
+                cqt.style.left = "100vw";
+                cqt.style.transform = "rotate(-90deg)";
+            } else {
+                cqt.style.left = "0";
+                cqt.style.transform = "rotate(-90deg) scale(1, -1)";
+            }
         }
+
+        update_axis();
     }
 
     child_menu.axis = { value: get_opt("axis") };
-    child_menu.axis.onchange = function() { cqt.dataset.axis = axis_list[child_menu.axis.value]; };
+    child_menu.axis.onchange = update_axis;
     cqt.shadowRoot.getElementById("axis").addEventListener("click", function() {
         child_menu.axis.value = (child_menu.axis.value + 1) % axis_list.length;
         child_menu.axis.onchange();
@@ -315,6 +283,8 @@ import {ShowCQTElement} from "../../showcqt-element@3/showcqt-element.mjs";
         var menu_div = document.createElement("div");
         var menu_table = document.createElement("div");
         set_fixed_style(menu_div, 10000001);
+        menu_div.lang = "en";
+        menu_div.dir = "ltr";
         menu_div.style.left = "0px";
         menu_div.style.top = "0px";
         menu_div.style.padding = "8px";
@@ -582,7 +552,7 @@ import {ShowCQTElement} from "../../showcqt-element@3/showcqt-element.mjs";
             child.onchange();
         }
 
-        create_child_select_menu("Scroll", "scroll", [ "Vertical", "Horizontal" ], update_cqt_layout);
+        create_child_select_menu("Scroll", "scroll", [ "Vertical", "Horizontal", "Flip Vertical", "Flip Horizontal" ], update_cqt_layout);
 
         function detect_peak(color) {
             if (color_int[3] == 0xffffff)
@@ -787,7 +757,6 @@ import {ShowCQTElement} from "../../showcqt-element@3/showcqt-element.mjs";
                 coord_line_h.style.display = coord_line_v.style.display = "none";
                 cqt.render_clear();
             }
-            update_af_links();
         });
 
         function create_child_select_presets() {
@@ -971,6 +940,5 @@ import {ShowCQTElement} from "../../showcqt-element@3/showcqt-element.mjs";
     document.body.appendChild(cqt);
     document.body.appendChild(coord_line_h);
     document.body.appendChild(coord_line_v);
-    document.body.appendChild(af_links);
     dispatchEvent(new CustomEvent("youtube-musical-spectrum-is-available"));
 })().catch(e => console.error(e));