@mfcc64/ytms 12.1.2 → 13.0.0

package/package.json

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

package/script.mjs

@@ -43,7 +43,7 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
         right_color:{ def:0x00b9dc, min:0, max:0xffffff },
         mid_color:  { def:0xdcdcdc, min:0, max:0xffffff },
         interval:   { def:  1, min:  1, max:  4 },
-        codecs:     { def:  1, min:  0, max:  2 },
+        bar_scale:  { def:  0, min:  0, max:  4 },
         transparent:{ def:  1, min:  0, max:  1 },
         visible:    { def: document.location.hostname != "www.youtube.com" ? 1 : 0,
                                min:  0, max:  1 },
@@ -118,7 +118,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:"), " Hz-scale axis, microphone support, YT Music support, scale options to " +
-                    "reduce CPU usage, custom color, custom range, peak color."),
+                    "reduce CPU usage, custom color, custom range, peak color, bar scale, presets."),
                 e("li", e("a", {href: "https://github.com/mfcc64/youtube-musical-spectrum#settings"}, {target: "_blank"}, "Read more..."))
               ),
               e("p",
@@ -149,7 +149,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 = 9;
+    const message_version = 10;
     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);
@@ -351,7 +351,52 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
         create_child_range_menu("Interval", "interval", (child) => cqt.dataset.interval = child.value);
         create_child_range_menu("Scale X", "scale_x", (child) => cqt.dataset.scaleX = child.value);
         create_child_range_menu("Scale Y", "scale_y", (child) => cqt.dataset.scaleY = child.value);
-        create_child_select_codecs();
+
+        let bar_scale_func = null;
+        function create_child_select_bar_scale(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 = [ "Linear", "Sqrt", "Log (40 dB)", "Log (60 dB)", "Log (80 dB)" ];
+            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("bar_scale");
+            td.appendChild(child);
+            tr.appendChild(td);
+            child.onchange = function() {
+                switch (child.value) {
+                    case "1": bar_scale_func = bar_scale_sqrt; break;
+                    case "2": bar_scale_func = c => bar_scale_db(c, 2); break;
+                    case "3": bar_scale_func = c => bar_scale_db(c, 3); break;
+                    case "4": bar_scale_func = c => bar_scale_db(c, 4); break;
+                    default: bar_scale_func = null;
+                }
+            };
+            child.onchange();
+
+            function bar_scale_sqrt(color) {
+                for (let k = 3; k < color.length; k += 4)
+                    color[k] = Math.sqrt(color[k]);
+            }
+
+            function bar_scale_db(color, range) {
+                for (let k = 3; k < color.length; k += 4)
+                    color[k] = Math.max(0, (Math.log10(color[k]) + range) / range);
+            }
+        }
+        create_child_select_bar_scale("Bar Scale", "bar_scale");
 
         function update_range(child) {
             if (!child_menu.base_note || !child_menu.semitones)
@@ -463,48 +508,7 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
         cqt.actual_render_callback = function(color) {
             transform_color(color);
             detect_peak(color);
-        }
-
-        function create_child_select_codecs() {
-            var tr = get_menu_table_tr();
-            set_common_tr_style(tr);
-            var td = document.createElement("td");
-            set_common_left_td_style(td);
-            td.textContent = "Codecs";
-            tr.appendChild(td);
-            td = document.createElement("td");
-            td.colSpan = 2;
-            var child = child_menu["codecs"] = document.createElement("select");
-            child.style.cursor = "pointer";
-            child.style.width = "100%";
-            var select_opt = [ "All", "Block AV1", "Only H.264" ];
-            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("codecs");
-            td.appendChild(child);
-            tr.appendChild(td);
-            tr.appendChild(document.createElement("td"));
-            child.onchange = function() {};
-            const old_func = MediaSource.isTypeSupported;
-            MediaSource.isTypeSupported = function (mime_type) {
-                let rejected = [ "av01" ];
-                switch (child.value) {
-                    case "0": rejected = []; break;
-                    case "1": rejected = [ "av01" ]; break;
-                    case "2": rejected = [ "av01", "vp09", "vp9", "vp08", "vp8" ]; break;
-                }
-
-                for (const type of rejected) {
-                    if (String(mime_type).indexOf(type) >= 0)
-                        return false;
-                }
-
-                return old_func.call(this, mime_type);
-            }
+            bar_scale_func?.(color);
         }
 
         function create_child_checkbox_menu(title, name, callback) {
@@ -535,6 +539,82 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
             update_af_links();
         });
 
+        function create_child_select_presets() {
+            var tr = get_menu_table_tr();
+            set_common_tr_style(tr);
+            var td = document.createElement("td");
+            set_common_left_td_style(td);
+            td.textContent = "Presets";
+            tr.appendChild(td);
+            td = document.createElement("td");
+            td.colSpan = 3;
+            var child = document.createElement("select");
+            child.style.cursor = "pointer";
+            child.style.width = "100%";
+
+            const presets = {
+                none: { text: "-- Choose Preset --" },
+                color_default: { text: "Color: Default", command: set_color_default },
+                color_deep_blue: { text: "Color: Deep Blue", command: set_color_deep_blue },
+                color_mono_fire: { text: "Color: Mono Fire", command: set_color_mono_fire },
+                color_juicy_lemon: { text: "Color: Juicy Lemon", command: set_color_juicy_lemon },
+                color_rain_forest: { text: "Color: Rain Forest", command: set_color_rain_forest },
+                scale_960: { text: "Scale: 960", command: () => set_scale_preset(960) },
+                scale_1280: { text: "Scale: 1280", command: () => set_scale_preset(1280) }
+            };
+
+            for (const name of Object.keys(presets)) {
+                var opt = document.createElement("option");
+                opt.textContent = presets[name].text;
+                opt.value = name;
+                child.appendChild(opt);
+            }
+
+            child.onchange = function() {
+                presets[child.value]?.command?.();
+                child.value = "none";
+            };
+
+            td.appendChild(child);
+            tr.appendChild(td);
+
+            function set_color_preset(...args) {
+                child_menu.left_color.value = number2color(args[0]), child_menu.left_color.onchange();
+                child_menu.mid_color.value = number2color(args[1]), child_menu.mid_color.onchange();
+                child_menu.right_color.value = number2color(args[2]), child_menu.right_color.onchange();
+                child_menu.peak_color.value = number2color(args[3]), child_menu.peak_color.onchange();
+                child_menu.brightness.value = args[4], child_menu.brightness.onchange();
+            }
+
+            function set_color_default() {
+                set_color_preset(defaults.left_color.def, defaults.mid_color.def, defaults.right_color.def,
+                                 defaults.peak_color.def, defaults.brightness.def);
+            }
+
+            function set_color_deep_blue() {
+                set_color_preset(0x6400b9, 0x6464dc, 0x0064b9, 0x0000ff, 50);
+            }
+
+            function set_color_mono_fire() {
+                set_color_preset(0xb94a25, 0xdc582c, 0xb94a25, 0xff0000, 70);
+            }
+
+            function set_color_juicy_lemon() {
+                set_color_preset(0xff004a, 0xffff58, 0x00ff4a, 0xffffff, 33);
+            }
+
+            function set_color_rain_forest() {
+                set_color_preset(0x64b900, 0x64dc64, 0x00b964, 0x00ff00, 33);
+            }
+
+            function set_scale_preset(target) {
+                const scale = Math.max(30, Math.min(100, Math.round(target / window.innerWidth * 100)));
+                child_menu.scale_x.value = scale, child_menu.scale_x.onchange();
+                child_menu.scale_y.value = scale, child_menu.scale_y.onchange();
+            }
+        }
+        create_child_select_presets();
+
         current_tr = null;
         set_common_tr_style(get_menu_table_tr());
         current_tr = null;