@mfcc64/ytms 13.0.0 → 15.0.0

package/package.json

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

package/script.mjs

@@ -44,6 +44,9 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
         mid_color:  { def:0xdcdcdc, min:0, max:0xffffff },
         interval:   { def:  1, min:  1, max:  4 },
         bar_scale:  { def:  0, min:  0, max:  4 },
+        line_mode:  { def:  0, min:  0, max:  2 },
+        line_width: { def:  1, min:  1, max:  3 },
+        line_color: { def:0xffffff, min:0, max:0xffffff },
         transparent:{ def:  1, min:  0, max:  1 },
         visible:    { def: document.location.hostname != "www.youtube.com" ? 1 : 0,
                                min:  0, max:  1 },
@@ -117,8 +120,8 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
                 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:"), " Hz-scale axis, microphone support, YT Music support, scale options to " +
-                    "reduce CPU usage, custom color, custom range, peak color, bar scale, presets."),
+                e("li", e("b", "New Features:"), " Custom color, custom range," +
+                    " peak color, bar scale, presets, line visualizer."),
                 e("li", e("a", {href: "https://github.com/mfcc64/youtube-musical-spectrum#settings"}, {target: "_blank"}, "Read more..."))
               ),
               e("p",
@@ -149,7 +152,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 = 10;
+    const message_version = 11;
     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);
@@ -388,7 +391,7 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
 
             function bar_scale_sqrt(color) {
                 for (let k = 3; k < color.length; k += 4)
-                    color[k] = Math.sqrt(color[k]);
+                    color[k] = 0.5 * Math.sqrt(color[k]);
             }
 
             function bar_scale_db(color, range) {
@@ -505,12 +508,115 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
             }
         }
 
+        function create_child_select_line_mode(title, name) {
+            var tr = get_menu_table_tr();
+            set_common_tr_style(tr);
+            var td = document.createElement("td");
+            set_common_left_td_style(td);
+            td.textContent = title;
+            tr.appendChild(td);
+            td = document.createElement("td");
+            td.colSpan = 3;
+            var child = child_menu[name] = document.createElement("select");
+            child.style.cursor = "pointer";
+            child.style.width = "100%";
+            var select_opt = [ "Off", "Static", "Mid Color", "Average", "Spectrum" ];
+            for (var k = 0; k < select_opt.length; k++) {
+                var opt = document.createElement("option");
+                opt.textContent = select_opt[k];
+                opt.value = k;
+                child.appendChild(opt);
+            }
+            child.value = get_opt("line_mode");
+            td.appendChild(child);
+            tr.appendChild(td);
+            child.onchange = () => {};
+        }
+        create_child_select_line_mode("Line Mode", "line_mode");
+        create_child_range_menu("Line Width", "line_width");
+        create_child_color_menu("Line Color", "line_color");
+
+        const line_visualizer = new class {
+            color = null;
+            is_set = false;
+            c4 = new Uint32Array(1);
+            c = new Uint8ClampedArray(this.c4.buffer);
+
+            get_color(color) {
+                if (child_menu.line_mode.value == "0")
+                    return;
+
+                if (this.color?.length != color.length)
+                    this.color = new Float32Array(color.length);
+
+                if (this.is_set)
+                    return;
+
+                this.color.set(color);
+                this.is_set = true;
+            }
+
+            render(p) {
+                if (child_menu.line_mode.value == "0")
+                    return;
+
+                const ctx = p.canvas_ctx, w = p.canvas.width;
+
+                this.color = this.color ?? new Float32Array(4 * w);
+                this.is_set || this.color.fill(0);
+
+                switch (child_menu.line_mode.value) {
+                    case "1": {
+                        ctx.strokeStyle = child_menu.line_color.value;
+                    } break;
+                    case "2": {
+                        ctx.strokeStyle = child_menu.mid_color.value;
+                    } break;
+                    case "3": {
+                        const c_sum = [ 0, 0, 0 ];
+                        for (let k = 0; k < w; k++)
+                            for (let m = 0; m < 3; m++)
+                                c_sum[m] += Math.max(0, this.color[4*k + m]) ** 2;
+                        for (let m = 0; m < 3; m++)
+                            this.c[2-m] = Math.sqrt(c_sum[m] / w) * 255.5;
+                        ctx.strokeStyle = "#" + this.c4[0].toString(16).padStart(6, "0");
+                    } break;
+                    case "4": {
+                        const gradient = ctx.createLinearGradient(0, 0, w, 0);
+                        for (let k = 0; k < w; k++) {
+                            for (let m = 0; m < 3; m++)
+                                this.c[2-m] = this.color[4*k + m] * 255.5;
+                            gradient.addColorStop((k+0.5) / w, "#" + this.c4[0].toString(16).padStart(6, "0"));
+                        }
+                        ctx.strokeStyle = gradient;
+                    } break;
+                    default:
+                        console.warn("Invalid line mode");
+                        return;
+                }
+
+                ctx.lineWidth = child_menu.line_width.value;
+                const translate = h => p.bar_h * (1 - h);
+
+                ctx.beginPath();
+                ctx.moveTo(-1, translate(this.color[3]));
+                for (let x = 0; x < w; x++)
+                    ctx.lineTo(x + 0.5, translate(this.color[4*x + 3]));
+                ctx.lineTo(w + 1, translate(this.color[4*w - 1]));
+                ctx.stroke();
+                this.is_set = false;
+            }
+        };
+
         cqt.actual_render_callback = function(color) {
             transform_color(color);
-            detect_peak(color);
             bar_scale_func?.(color);
+            line_visualizer.get_color(color);
+            detect_peak(color);
         }
 
+        cqt.post_render_callback = p => line_visualizer.render(p);
+
         function create_child_checkbox_menu(title, name, callback) {
             var tr = get_menu_table_tr();
             set_common_tr_style(tr);
@@ -714,4 +820,5 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
     create_menu();
     document.body.appendChild(cqt);
     document.body.appendChild(af_links);
+    dispatchEvent(new CustomEvent("youtube-musical-spectrum-is-available"));
 })().catch(e => console.error(e));