@mfcc64/ytms 10.2.0 → 10.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/script.mjs +45 -32
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mfcc64/ytms",
3
- "version": "10.2.0",
3
+ "version": "10.2.2",
4
4
  "description": "YouTube Musical Spectrum",
5
5
  "main": "script.mjs",
6
6
  "scripts": {
package/script.mjs CHANGED
@@ -90,38 +90,51 @@ import {ShowCQTElement} from "../../showcqt-element@2/showcqt-element.mjs";
90
90
  af_links.style.right = "8px";
91
91
  af_links.style.bottom = "8px";
92
92
  af_links.style.opacity = 1;
93
- af_links.attachShadow({mode: "open"}).innerHTML =
94
- `<style>
95
- :host { opacity: 0; max-width: 700px; }
96
- :host(:hover) { opacity: 1; }
97
- img { vertical-align: middle; }
98
- </style>
99
- <div id="message">
100
- <h3>YouTube Musical Spectrum</h3>
101
- <ul>
102
- <li>Click the <img alt="YTMS" src="${icon_16}"/> icon at the top left corner to open/close settings.</li>
103
- <li>Press <b>Ctrl+Alt+H</b> to open/close settings and show/hide the <img alt="YTMS" src="${icon_16}"/> icon.</li>
104
- <li>Press <b>Ctrl+Alt+G</b> as a shortcut to show/hide visualization.</li>
105
- <li>If you want to change the axis, click it.</li>
106
- <li>If you want to make your change persistent, click <b>Set as Default Settings</b> button.</li>
107
- <li><b>New Features:</b> Hz-scale axis, microphone support, YT Music support, scale options to
108
- reduce CPU usage, custom color.</li>
109
- <li><a href="https://github.com/mfcc64/youtube-musical-spectrum#settings" target="_blank">Read more...</a></li>
110
- </ul>
111
- <p>
112
- <button id="close_message" style="cursor: pointer;">Close</button>
113
- (Click the <img alt="YTMS" src="${icon_16}"/> icon below to reopen again)
114
- </p>
115
- </div>
116
- <div style="text-align: right;">
117
- <img alt="YTMS" src="${icon_16}" style="cursor: pointer;" id="open_message"/>
118
- Support me on
119
- <a href="https://www.youtube.com/@mfcc64" target="_blank">YouTube</a>
120
- <a href="https://www.patreon.com/mfcc64" target="_blank">Patreon</a>
121
- <a href="https://github.com/mfcc64" target="_blank">GitHub</a>
122
- <a href="https://paypal.me/mfcc64" target="_blank">PayPal</a>
123
- <a href="https://saweria.co/mfcc64" target="_blank">Saweria</a>
124
- </div>`;
93
+ af_links.style.display = "none";
94
+ {
95
+ const e = (name, ...args) => {
96
+ const v = document.createElement(name);
97
+ for (const arg of args)
98
+ if (typeof arg == "object" && !(arg instanceof Object.getPrototypeOf(HTMLDivElement)))
99
+ v.setAttribute(...Object.entries(arg)[0])
100
+ else
101
+ v.append(arg);
102
+ return v;
103
+ };
104
+ af_links.attachShadow({mode: "open"}).append(
105
+ e("style",
106
+ `:host { opacity: 0; max-width: 700px; }
107
+ :host(:hover) { opacity: 1; }
108
+ img { vertical-align: middle; }`),
109
+ e("div", {id: "message"},
110
+ e("h3", "YouTube Musical Spectrum"),
111
+ e("ul",
112
+ e("li", "Click the, ", e("img", {alt: "YTMS"}, {src: icon_16}), " icon at the top left corner to open/close settings."),
113
+ e("li", "Press ", e("b", "Ctrl+Alt+H"), " to open/close settings and show/hide the ", e("img", {alt: "YTMS"}, {src: icon_16}), " icon."),
114
+ e("li", "Press ", e("b", "Ctrl+Alt+G"), " as a shortcut to show/hide visualization."),
115
+ e("li", "If you want to change the axis, click it."),
116
+ e("li", "If you want to make your change persistent, click ", e("b", "Set as Default Settings"), " button."),
117
+ e("li", e("b", "New Features:"), " Hz-scale axis, microphone support, YT Music support, scale options to " +
118
+ "reduce CPU usage, custom color."),
119
+ e("li", e("a", {href: "https://github.com/mfcc64/youtube-musical-spectrum#settings"}, {target: "_blank"}, "Read more..."))
120
+ ),
121
+ e("p",
122
+ e("button", {id: "close_message"}, {style: "cursor: pointer;"}, "Close"),
123
+ " (Click the ", e("img", {alt: "YTMS"}, {src: icon_16}), " icon below to reopen again)"
124
+ )
125
+ ),
126
+ e("div", {style: "text-align: right;"},
127
+ e("img", {alt: "YTMS"}, {src: icon_16}, {style: "curson: pointer;"}, {id: "open_message"}),
128
+ " Support me on ",
129
+ e("a", {href: "https://www.youtube.com/@mfcc64"}, {target: "_blank"}, "Youtube"), " ",
130
+ e("a", {href: "https://www.patreon.com/mfcc64"}, {target: "_blank"}, "Patreon"), " ",
131
+ e("a", {href: "https://github.com/mfcc64"}, {target: "_blank"}, "GitHub"), " ",
132
+ e("a", {href: "https://paypal.me/mfcc64"}, {target: "_blank"}, "PayPal"), " ",
133
+ e("a", {href: "https://saweria.co/mfcc64"}, {target: "_blank"}, "Saweria")
134
+ )
135
+ );
136
+ }
137
+
125
138
  setTimeout(() => af_links.style.opacity = "", 15000);
126
139
 
127
140
  const message_version = 7;