feat: better logging in queue btns

dist/BetterYTM.user.js

@@ -492,7 +492,7 @@ const scriptInfo = Object.freeze({
     name: GM.info.script.name,
     version: GM.info.script.version,
     namespace: GM.info.script.namespace,
-    lastCommit: "0dc0e6d", // assert as generic string instead of union
+    lastCommit: "4a165b6", // assert as generic string instead of union
 });
 
 
@@ -613,13 +613,13 @@ const featInfo = {
         type: "toggle",
         category: "layout",
         default: true,
+        visible: false,
     },
     queueButtons: {
-        desc: "TODO: Add buttons while hovering over a song in a queue to quickly remove it or open its lyrics",
+        desc: "Add buttons while hovering over a song in a queue to quickly remove it (TODO) or open its lyrics",
         type: "toggle",
         category: "layout",
         default: true,
-        visible: false,
     },
     //#SECTION lyrics
     geniusLyrics: {
@@ -886,15 +886,21 @@ function setVolSliderStep() {
 // TODO: account for the fact initially the elements might not exist, if the site was not opened directly with a video playing or via the /watch path
 function initQueueButtons() {
     _utils__WEBPACK_IMPORTED_MODULE_2__.siteEvents.on("queueChanged", (evt) => {
+        let amt = 0;
         for (const queueItm of (0,_utils__WEBPACK_IMPORTED_MODULE_2__.getEvtData)(evt).childNodes) {
-            if (!queueItm.classList.contains("bytm-has-queue-btns"))
+            if (!queueItm.classList.contains("bytm-has-queue-btns")) {
                 addQueueButtons(queueItm);
+                amt++;
+            }
         }
+        if (amt > 0)
+            (0,_utils__WEBPACK_IMPORTED_MODULE_2__.log)(`Added buttons to ${amt} new queue ${(0,_utils__WEBPACK_IMPORTED_MODULE_2__.autoPlural)("item", amt)}`);
     });
     const queueItems = document.querySelectorAll("#contents.ytmusic-player-queue > ytmusic-player-queue-item");
     if (queueItems.length === 0)
         return;
     queueItems.forEach(itm => addQueueButtons(itm));
+    (0,_utils__WEBPACK_IMPORTED_MODULE_2__.log)(`Added buttons to ${queueItems.length} existing queue items`);
 }
 /**
  * Adds the buttons to each item in the current song queue.
@@ -942,7 +948,6 @@ function addQueueButtons(queueItem) {
         queueBtnsCont.appendChild(lyricsBtnElem);
         songInfo.appendChild(queueBtnsCont);
         queueItem.classList.add("bytm-has-queue-btns");
-        (0,_utils__WEBPACK_IMPORTED_MODULE_2__.log)(`Added queue buttons for song '${artist} - ${song}'`, queueBtnsCont);
         return true;
     });
 }
@@ -1621,6 +1626,7 @@ function openMenu() {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   addGlobalStyle: function() { return /* binding */ addGlobalStyle; },
+/* harmony export */   autoPlural: function() { return /* binding */ autoPlural; },
 /* harmony export */   dbg: function() { return /* binding */ dbg; },
 /* harmony export */   error: function() { return /* binding */ error; },
 /* harmony export */   getAssetUrl: function() { return /* binding */ getAssetUrl; },
@@ -1791,6 +1797,16 @@ function openInNewTab(href) {
     // just to be safe
     setTimeout(() => openElem.remove(), 200);
 }
+/**
+ * Automatically appends an `s` to the passed `word`, if `num` is not equal to 1
+ * @param word A word in singular form, to auto-convert to plural
+ * @param num If this is an array, the amount of items is used
+ */
+function autoPlural(word, num) {
+    if (Array.isArray(num))
+        num = num.length;
+    return `${word}${num === 1 ? "" : "s"}`;
+}
 //#MARKER DOM
 /**
  * Inserts `afterNode` as a sibling just after the provided `beforeNode`
@@ -1841,7 +1857,7 @@ function initSiteEvents() {
             // the queue container always exists so it doesn't need the extra init function
             const queueObs = new MutationObserver(([{ addedNodes, removedNodes, target }]) => {
                 if (addedNodes.length > 0 || removedNodes.length > 0) {
-                    info("Detected queue change - added nodes:", addedNodes.length, "- removed nodes:", removedNodes.length);
+                    info(`Detected queue change - added nodes: ${[...addedNodes.values()].length} - removed nodes: ${[...removedNodes.values()].length}`);
                     siteEvents.fire("queueChanged", target);
                 }
             });

src/features/layout.ts

@@ -1,6 +1,6 @@
 import { scriptInfo, triesInterval, triesLimit } from "../constants";
 import { getFeatures } from "../config";
-import { addGlobalStyle, error, getAssetUrl, getEvtData, insertAfter, log, openInNewTab, siteEvents } from "../utils";
+import { addGlobalStyle, autoPlural, error, getAssetUrl, getEvtData, insertAfter, log, openInNewTab, siteEvents } from "../utils";
 import type { FeatureConfig } from "../types";
 import { openMenu } from "./menu/menu_old";
 import "./layout.css";
@@ -81,10 +81,15 @@ export function setVolSliderStep() {
 // TODO: account for the fact initially the elements might not exist, if the site was not opened directly with a video playing or via the /watch path
 export function initQueueButtons() {
   siteEvents.on("queueChanged", (evt) => {
+    let amt = 0;
     for(const queueItm of getEvtData<HTMLElement>(evt).childNodes as NodeListOf<HTMLElement>) {
-      if(!queueItm.classList.contains("bytm-has-queue-btns"))
+      if(!queueItm.classList.contains("bytm-has-queue-btns")) {
         addQueueButtons(queueItm);
+        amt++;
+      }
     }
+    if(amt > 0)
+      log(`Added buttons to ${amt} new queue ${autoPlural("item", amt)}`);
   });
 
   const queueItems = document.querySelectorAll("#contents.ytmusic-player-queue > ytmusic-player-queue-item");
@@ -92,6 +97,8 @@ export function initQueueButtons() {
     return;
 
   queueItems.forEach(itm => addQueueButtons(itm as HTMLElement));
+
+  log(`Added buttons to ${queueItems.length} existing queue items`);
 }
 
 /**
@@ -152,7 +159,6 @@ async function addQueueButtons(queueItem: HTMLElement) {
   songInfo.appendChild(queueBtnsCont);
   queueItem.classList.add("bytm-has-queue-btns");
 
-  log(`Added queue buttons for song '${artist} - ${song}'`, queueBtnsCont);
   return true;
 }
 

src/types.d.ts

@@ -7,6 +7,9 @@ export type LogLevel = 0 | 1;
 /** Which domain this script is currently running on */
 export type Domain = "yt" | "ytm";
 
+/** Feature category to be used in the menu for grouping features */
+export type FeatureCategory = "input" | "layout" | "lyrics";
+
 /** Feature configuration */
 export interface FeatureConfig {
   //#SECTION input

src/utils.ts

@@ -181,6 +181,17 @@ export function openInNewTab(href: string) {
   setTimeout(() => openElem.remove(), 200);
 }
 
+/**
+ * Automatically appends an `s` to the passed `word`, if `num` is not equal to 1
+ * @param word A word in singular form, to auto-convert to plural
+ * @param num If this is an array, the amount of items is used
+ */
+export function autoPlural(word: string, num: number | unknown[]) {
+  if(Array.isArray(num))
+    num = num.length;
+  return `${word}${num === 1 ? "" : "s"}`;
+}
+
 
 //#MARKER DOM
 
@@ -250,7 +261,7 @@ export async function initSiteEvents() {
     // the queue container always exists so it doesn't need the extra init function
     const queueObs = new MutationObserver(([ { addedNodes, removedNodes, target } ]) => {
       if(addedNodes.length > 0 || removedNodes.length > 0) {
-        info("Detected queue change - added nodes:", addedNodes.length, "- removed nodes:", removedNodes.length);
+        info(`Detected queue change - added nodes: ${[...addedNodes.values()].length} - removed nodes: ${[...removedNodes.values()].length}`);
         siteEvents.fire("queueChanged", target);
       }
     });