chore: build

dist/BetterYTM.css

@@ -1133,6 +1133,9 @@ hr {
 }
 
 .bytm-generic-btn {
+  --bytm-generic-btn-width: 36px;
+  --bytm-generic-btn-height: 36px;
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1141,8 +1144,10 @@ hr {
   cursor: pointer;
   margin-left: 8px;
 
-  width: 36px;
-  height: 36px;
+  min-width: var(--bytm-generic-btn-width);
+  max-width: var(--bytm-generic-btn-width);
+  min-height: var(--bytm-generic-btn-height);
+  max-height: var(--bytm-generic-btn-height);
 
   border: 1px solid transparent;
   border-radius: 100%;
@@ -1489,6 +1494,11 @@ ytmusic-player#player #bezel {
   margin-bottom: 15px;
 }
 
+#bytm-auto-like-channels-add-new {
+  padding: 4px 15px;
+  margin-top: 20px;
+}
+
 .bytm-auto-like-channel-row:hover {
   background-color: var(--bytm-menu-bg-highlight);
 }
@@ -1498,6 +1508,19 @@ ytmusic-player#player #bezel {
   --toggle-width: 36px !important;
 }
 
+.bytm-auto-like-channel-name-label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.bytm-auto-like-channel-id {
+  cursor: text;
+  font-size: 1.1rem;
+  color: #aaa;
+  margin-left: 10px;
+}
+
 /* #region queue buttons */
 
 #side-panel ytmusic-player-queue-item .song-info.ytmusic-player-queue-item {

dist/BetterYTM.user.js

@@ -17,7 +17,7 @@
 // @license           AGPL-3.0-only
 // @author            Sv443
 // @copyright         Sv443 (https://github.com/Sv443)
-// @icon              https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/images/logo/logo_48.png
+// @icon              https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/images/logo/logo_48.png
 // @match             https://music.youtube.com/*
 // @match             https://www.youtube.com/*
 // @run-at            document-start
@@ -35,44 +35,44 @@
 // @grant             GM.openInTab
 // @grant             unsafeWindow
 // @noframes
-// @resource          css-bundle              https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/dist/BetterYTM.css
-// @resource          css-above_queue_btns    https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/style/aboveQueueBtns.css
-// @resource          css-anchor_improvements https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/style/anchorImprovements.css
-// @resource          css-fix_hdr             https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/style/fixHDR.css
-// @resource          css-fix_spacing         https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/style/fixSpacing.css
-// @resource          css-vol_slider_size     https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/style/volSliderSize.css
-// @resource          doc-changelog           https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/changelog.md
-// @resource          icon-advanced_mode      https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/icons/plus_circle_small.svg
-// @resource          icon-arrow_down         https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/icons/arrow_down.svg
-// @resource          icon-clear_list         https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/icons/clear_list.svg
-// @resource          icon-delete             https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/icons/delete.svg
-// @resource          icon-error              https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/icons/error.svg
-// @resource          icon-experimental       https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/icons/beaker_small.svg
-// @resource          icon-globe              https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/icons/globe.svg
-// @resource          icon-globe_small        https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/icons/globe_small.svg
-// @resource          icon-help               https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/icons/help.svg
-// @resource          icon-image_filled       https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/icons/image_filled.svg
-// @resource          icon-image              https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/icons/image.svg
-// @resource          icon-link               https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/icons/link.svg
-// @resource          icon-lyrics             https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/icons/lyrics.svg
-// @resource          icon-reload             https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/icons/refresh.svg
-// @resource          icon-skip_to            https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/icons/skip_to.svg
-// @resource          icon-spinner            https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/icons/spinner.svg
-// @resource          img-logo                https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/images/logo/logo_48.png
-// @resource          img-close               https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/images/close.png
-// @resource          img-discord             https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/images/external/discord.png
-// @resource          img-github              https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/images/external/github.png
-// @resource          img-greasyfork          https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/images/external/greasyfork.png
-// @resource          img-openuserjs          https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/images/external/openuserjs.png
-// @resource          trans-de_DE             https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/translations/de_DE.json
-// @resource          trans-en_US             https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/translations/en_US.json
-// @resource          trans-en_UK             https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/translations/en_UK.json
-// @resource          trans-es_ES             https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/translations/es_ES.json
-// @resource          trans-fr_FR             https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/translations/fr_FR.json
-// @resource          trans-hi_IN             https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/translations/hi_IN.json
-// @resource          trans-ja_JA             https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/translations/ja_JA.json
-// @resource          trans-pt_BR             https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/translations/pt_BR.json
-// @resource          trans-zh_CN             https://raw.githubusercontent.com/Sv443/BetterYTM/cbb5d399/assets/translations/zh_CN.json
+// @resource          css-bundle              https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/dist/BetterYTM.css
+// @resource          css-above_queue_btns    https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/style/aboveQueueBtns.css
+// @resource          css-anchor_improvements https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/style/anchorImprovements.css
+// @resource          css-fix_hdr             https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/style/fixHDR.css
+// @resource          css-fix_spacing         https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/style/fixSpacing.css
+// @resource          css-vol_slider_size     https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/style/volSliderSize.css
+// @resource          doc-changelog           https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/changelog.md
+// @resource          icon-advanced_mode      https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/icons/plus_circle_small.svg
+// @resource          icon-arrow_down         https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/icons/arrow_down.svg
+// @resource          icon-clear_list         https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/icons/clear_list.svg
+// @resource          icon-delete             https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/icons/delete.svg
+// @resource          icon-error              https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/icons/error.svg
+// @resource          icon-experimental       https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/icons/beaker_small.svg
+// @resource          icon-globe              https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/icons/globe.svg
+// @resource          icon-globe_small        https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/icons/globe_small.svg
+// @resource          icon-help               https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/icons/help.svg
+// @resource          icon-image_filled       https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/icons/image_filled.svg
+// @resource          icon-image              https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/icons/image.svg
+// @resource          icon-link               https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/icons/link.svg
+// @resource          icon-lyrics             https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/icons/lyrics.svg
+// @resource          icon-reload             https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/icons/refresh.svg
+// @resource          icon-skip_to            https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/icons/skip_to.svg
+// @resource          icon-spinner            https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/icons/spinner.svg
+// @resource          img-logo                https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/images/logo/logo_48.png
+// @resource          img-close               https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/images/close.png
+// @resource          img-discord             https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/images/external/discord.png
+// @resource          img-github              https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/images/external/github.png
+// @resource          img-greasyfork          https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/images/external/greasyfork.png
+// @resource          img-openuserjs          https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/images/external/openuserjs.png
+// @resource          trans-de_DE             https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/translations/de_DE.json
+// @resource          trans-en_US             https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/translations/en_US.json
+// @resource          trans-en_UK             https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/translations/en_UK.json
+// @resource          trans-es_ES             https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/translations/es_ES.json
+// @resource          trans-fr_FR             https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/translations/fr_FR.json
+// @resource          trans-hi_IN             https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/translations/hi_IN.json
+// @resource          trans-ja_JA             https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/translations/ja_JA.json
+// @resource          trans-pt_BR             https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/translations/pt_BR.json
+// @resource          trans-zh_CN             https://raw.githubusercontent.com/Sv443/BetterYTM/c3012ba0/assets/translations/zh_CN.json
 // @require           https://cdn.jsdelivr.net/npm/@sv443-network/[email protected]/dist/index.global.js
 // @require           https://cdn.jsdelivr.net/npm/[email protected]/dist/fuse.basic.js
 // @require           https://cdn.jsdelivr.net/npm/[email protected]/lib/marked.umd.js
@@ -185,6 +185,7 @@ var LogLevel;
 /**
  * Intents (permissions) BYTM has to grant your plugin for it to be able to access certain features.
  * TODO: this feature is unfinished, but you should still specify the intents your plugin needs.
+ * Never request more permissions than you need, as this is a bad practice and can lead to your plugin being rejected.
  */
 var PluginIntent;
 (function (PluginIntent) {
@@ -201,7 +202,7 @@ var PluginIntent;
 })(PluginIntent || (PluginIntent = {}));const modeRaw = "development";
 const branchRaw = "develop";
 const hostRaw = "github";
-const buildNumberRaw = "cbb5d399";
+const buildNumberRaw = "c3012ba0";
 /** The mode in which the script was built (production or development) */
 const mode = (modeRaw.match(/^#{{.+}}$/) ? "production" : modeRaw);
 /** The branch to use in various URLs that point to the GitHub repo */
@@ -557,9 +558,10 @@ class BytmDialog extends NanoEmitter {
             return bgElem;
         });
     }
-    /** Clears all dialog contents (unmounts them from the DOM) in preparation for a new rendering call */
+    /** Closes the dialog and clears all its contents (unmounts elements from the DOM) in preparation for a new rendering call */
     unmount() {
         var _a;
+        this.close();
         this.dialogMounted = false;
         const clearSelectors = [
             `#bytm-${this.id}-dialog-bg`,
@@ -1084,20 +1086,23 @@ function createToggleInput(_a) {
 }let autoLikeChannelsDialog = null;
 /** Creates and/or returns the import dialog */
 function getAutoLikeChannelsDialog() {
-    if (!autoLikeChannelsDialog) {
-        autoLikeChannelsDialog = new BytmDialog({
-            id: "auto-like-channels",
-            width: 500,
-            height: 700,
-            closeBtnEnabled: true,
-            closeOnBgClick: true,
-            closeOnEscPress: true,
-            small: true,
-            renderHeader: renderHeader$6,
-            renderBody: renderBody$6,
-        });
-    }
-    return autoLikeChannelsDialog;
+    return __awaiter(this, void 0, void 0, function* () {
+        if (!autoLikeChannelsDialog) {
+            yield autoLikeChannelsStore.loadData();
+            autoLikeChannelsDialog = new BytmDialog({
+                id: "auto-like-channels",
+                width: 700,
+                height: 600,
+                closeBtnEnabled: true,
+                closeOnBgClick: true,
+                closeOnEscPress: true,
+                small: true,
+                renderHeader: renderHeader$6,
+                renderBody: renderBody$6,
+            });
+        }
+        return autoLikeChannelsDialog;
+    });
 }
 function renderHeader$6() {
     return __awaiter(this, void 0, void 0, function* () {
@@ -1116,15 +1121,47 @@ function renderBody$6() {
         descriptionEl.classList.add("bytm-auto-like-channels-desc");
         descriptionEl.textContent = t("auto_like_channels_dialog_desc"); // TODO
         contElem.appendChild(descriptionEl);
+        const addNewEl = document.createElement("div");
+        addNewEl.id = "bytm-auto-like-channels-add-new";
+        addNewEl.role = "button";
+        addNewEl.tabIndex = 0;
+        addNewEl.textContent = `+ ${t("add_new")}`;
+        addNewEl.classList.add("bytm-link");
+        onInteraction(addNewEl, () => __awaiter(this, void 0, void 0, function* () {
+            const id = prompt(t("add_auto_like_channel_id_prompt")); // TODO
+            if (!id)
+                return;
+            if (autoLikeChannelsStore.getData().channels.some((ch) => ch.id === id))
+                return alert(t("add_auto_like_channel_already_exists")); // TODO
+            const name = prompt(t("add_auto_like_channel_name_prompt")); // TODO
+            if (!name)
+                return;
+            yield autoLikeChannelsStore.setData({
+                channels: [
+                    ...autoLikeChannelsStore.getData().channels,
+                    { id, name, enabled: true },
+                ],
+            });
+            const unsub = autoLikeChannelsDialog === null || autoLikeChannelsDialog === void 0 ? void 0 : autoLikeChannelsDialog.on("clear", () => __awaiter(this, void 0, void 0, function* () {
+                unsub === null || unsub === void 0 ? void 0 : unsub();
+                yield (autoLikeChannelsDialog === null || autoLikeChannelsDialog === void 0 ? void 0 : autoLikeChannelsDialog.open());
+            }));
+            autoLikeChannelsDialog === null || autoLikeChannelsDialog === void 0 ? void 0 : autoLikeChannelsDialog.unmount();
+        }));
+        contElem.appendChild(addNewEl);
         const channelListCont = document.createElement("div");
         channelListCont.id = "bytm-auto-like-channels-list";
-        const removeChannel = (id) => UserUtils.debounce(() => autoLikeChannelsStore.setData({
+        const removeChannel = (id) => autoLikeChannelsStore.setData({
             channels: autoLikeChannelsStore.getData().channels.filter((ch) => ch.id !== id),
-        }), 250, "falling");
+        });
         const setChannelEnabled = (id, enabled) => UserUtils.debounce(() => autoLikeChannelsStore.setData({
-            channels: autoLikeChannelsStore.getData().channels.map((ch) => ch.id === id ? Object.assign(Object.assign({}, ch), { enabled }) : ch),
-        }), 250, "falling");
-        for (const { name, id, enabled } of autoLikeChannelsStore.getData().channels) {
+            channels: autoLikeChannelsStore.getData().channels
+                .map((ch) => ch.id === id ? Object.assign(Object.assign({}, ch), { enabled }) : ch),
+        }), 250, "rising");
+        const sortedChannels = autoLikeChannelsStore
+            .getData().channels
+            .sort((a, b) => a.name.localeCompare(b.name));
+        for (const { name, id, enabled } of sortedChannels) {
             const rowElem = document.createElement("div");
             rowElem.classList.add("bytm-auto-like-channel-row");
             const leftCont = document.createElement("div");
@@ -1132,6 +1169,7 @@ function renderBody$6() {
             const nameLabelEl = document.createElement("label");
             nameLabelEl.ariaLabel = nameLabelEl.title = name;
             nameLabelEl.htmlFor = `bytm-auto-like-channel-list-toggle-${id}`;
+            nameLabelEl.classList.add("bytm-auto-like-channel-name-label");
             const nameElem = document.createElement("a");
             nameElem.classList.add("bytm-auto-like-channel-name", "bytm-link");
             nameElem.ariaLabel = nameElem.textContent = name;
@@ -1139,7 +1177,11 @@ function renderBody$6() {
             nameElem.target = "_blank";
             nameElem.rel = "noopener noreferrer";
             nameElem.tabIndex = 0;
+            const idElem = document.createElement("span");
+            idElem.classList.add("bytm-auto-like-channel-id");
+            idElem.textContent = idElem.title = id;
             nameLabelEl.appendChild(nameElem);
+            nameLabelEl.appendChild(idElem);
             const toggleElem = yield createToggleInput({
                 id: `bytm-auto-like-channel-list-toggle-${id}`,
                 labelPos: "off",
@@ -3695,7 +3737,6 @@ function initAutoLikeChannels() {
     return __awaiter(this, void 0, void 0, function* () {
         try {
             canCompress$1 = yield compressionSupported();
-            yield autoLikeChannelsStore.loadData();
             if (getDomain() === "ytm") {
                 let timeout;
                 // TODO:FIXME: needs actual fix instead of timeout
@@ -4862,7 +4903,7 @@ const featInfo = {
     openAutoLikeChannelsDialog: {
         type: "button",
         category: "input",
-        click: () => getAutoLikeChannelsDialog().open(),
+        click: () => getAutoLikeChannelsDialog().then(d => d.open()),
     },
     //#region lyrics
     geniusLyrics: {
@@ -5189,19 +5230,19 @@ function setGlobalProp(key, value) {
     win.BYTM[key] = value;
 }
 /** Emits an event on the BYTM interface */
-function emitInterface(type, ...data) {
+function emitInterface(type, ...detail) {
     var _a;
-    getUnsafeWindow().dispatchEvent(new CustomEvent(type, { detail: (_a = data === null || data === void 0 ? void 0 : data[0]) !== null && _a !== void 0 ? _a : undefined }));
+    getUnsafeWindow().dispatchEvent(new CustomEvent(type, { detail: (_a = detail === null || detail === void 0 ? void 0 : detail[0]) !== null && _a !== void 0 ? _a : undefined }));
     //@ts-ignore
-    emitOnPlugins(type, undefined, ...data);
-    log(`Emitted interface event '${type}'${data && data.length > 0 ? " with data:" : ""}`, ...data);
+    emitOnPlugins(type, undefined, ...detail);
+    log(`Emitted interface event '${type}'${detail && detail.length > 0 ? " with data:" : ""}`, ...detail);
 }
 //#region register plugins
-/** Plugins that are queued up for registration */
+/** Map of plugin ID and plugins that are queued up for registration */
 const pluginsQueued = new Map();
-/** Registered plugins including their event listener instance */
+/** Map of plugin ID and all registered plugins */
 const pluginsRegistered = new Map();
-/** Auth tokens for plugins that have been registered */
+/** Map of plugin ID to auth token for plugins that have been registered */
 const pluginTokens = new Map();
 /** Initializes plugins that have been registered already. Needs to be run after `bytm:ready`! */
 function initPlugins() {
@@ -5224,11 +5265,13 @@ function getPluginKey(plugin) {
 }
 /** Converts a PluginDef object (full definition) into a PluginInfo object (restricted definition) or undefined, if undefined is passed */
 function pluginDefToInfo(plugin) {
-    return plugin && {
-        name: plugin.plugin.name,
-        namespace: plugin.plugin.namespace,
-        version: plugin.plugin.version,
-    };
+    return plugin
+        ? {
+            name: plugin.plugin.name,
+            namespace: plugin.plugin.namespace,
+            version: plugin.plugin.version,
+        }
+        : undefined;
 }
 /** Checks whether two plugins are the same, given their resolvable definition objects */
 function sameDef(def1, def2) {
@@ -5249,9 +5292,11 @@ function getPluginInfo(...args) {
     var _a;
     if (resolveToken(args[0]) === undefined)
         return undefined;
-    return pluginDefToInfo((_a = pluginsRegistered.get(args.length === 2
-        ? `${args[2]}/${args[1]}`
-        : getPluginKey(args[1]))) === null || _a === void 0 ? void 0 : _a.def);
+    return pluginDefToInfo((_a = pluginsRegistered.get(typeof args[1] === "string" && typeof args[2] === "undefined"
+        ? args[1]
+        : args.length === 2
+            ? `${args[2]}/${args[1]}`
+            : getPluginKey(args[1]))) === null || _a === void 0 ? void 0 : _a.def);
 }
 /** Validates the passed PluginDef object and returns an array of errors - returns undefined if there were no errors - never returns an empty array */
 function validatePluginDef(pluginDef) {