feat: separate config options for queue btns

src/config.ts

@@ -1,10 +1,23 @@
-import { ConfigManager } from "@sv443-network/userutils";
+import { ConfigManager, ConfigManagerOptions } from "@sv443-network/userutils";
 import { featInfo } from "./features/index";
 import { FeatureConfig } from "./types";
 import { info, log } from "./utils";
 
 /** If this number is incremented, the features object data will be migrated to the new format */
-const formatVersion = 1;
+const formatVersion = 2;
+
+const migrations: ConfigManagerOptions<typeof defaultConfig>["migrations"] = {
+  // 1 -> 2
+  2: (oldData: Record<string, unknown>) => {
+    const queueBtnsEnabled = Boolean(oldData.queueButtons);
+    delete oldData.queueButtons;
+    return {
+      ...oldData,
+      deleteFromQueueButton: queueBtnsEnabled,
+      lyricsQueueButton: queueBtnsEnabled,
+    };
+  },
+};
 
 export const defaultConfig = (Object.keys(featInfo) as (keyof typeof featInfo)[])
   .reduce<Partial<FeatureConfig>>((acc, key) => {
@@ -16,6 +29,7 @@ const cfgMgr = new ConfigManager({
   id: "bytm-config",
   formatVersion,
   defaultConfig,
+  migrations,
 });
 
 /** Initializes the ConfigManager instance and loads persistent data into memory */

src/features/index.ts

@@ -59,9 +59,8 @@ export const featInfo = {
     category: "layout",
     default: true,
   },
-  // TODO(v1.1): Make each button configurable
-  queueButtons: {
-    desc: "Add buttons to each song in the queue to quickly open their lyrics or remove them from the queue",
+  deleteFromQueueButton: {
+    desc: "Add a button to each song in the queue to quickly remove it",
     type: "toggle",
     category: "layout",
     default: true,
@@ -122,4 +121,10 @@ export const featInfo = {
     category: "lyrics",
     default: true,
   },
+  lyricsQueueButton: {
+    desc: "Add a button to each song in the queue to quickly open its lyrics page",
+    type: "toggle",
+    category: "lyrics",
+    default: true,
+  }
 } as const;

src/features/layout.ts

@@ -317,8 +317,11 @@ async function addQueueButtons(queueItem: HTMLElement) {
   const deleteIconUrl = await getResourceUrl("delete");
 
   //#SECTION lyrics btn
-  const lyricsBtnElem = await createLyricsBtn(undefined, false);
-  {
+  let lyricsBtnElem: HTMLAnchorElement | undefined;
+
+  if(features.lyricsQueueButton) {
+    lyricsBtnElem = await createLyricsBtn(undefined, false);
+
     lyricsBtnElem.title = "Open this song's lyrics in a new tab";
     lyricsBtnElem.style.display = "inline-flex";
     lyricsBtnElem.style.visibility = "initial";
@@ -329,13 +332,13 @@ async function addQueueButtons(queueItem: HTMLElement) {
 
       const songInfo = queueItem.querySelector<HTMLElement>(".song-info");
       if(!songInfo)
-        return false;
+        return;
 
       const [songEl, artistEl] = songInfo.querySelectorAll<HTMLElement>("yt-formatted-string");
       const song = songEl?.innerText;
       const artist = artistEl?.innerText;
       if(!song || !artist)
-        return false;
+        return;
 
       let lyricsUrl: string | undefined;
 
@@ -350,7 +353,7 @@ async function addQueueButtons(queueItem: HTMLElement) {
       if(cachedLyricsUrl)
         lyricsUrl = cachedLyricsUrl;
       else if(!songInfo.hasAttribute("data-bytm-loading")) {
-        const imgEl = lyricsBtnElem.querySelector("img") as HTMLImageElement;
+        const imgEl = lyricsBtnElem!.querySelector("img") as HTMLImageElement;
         if(!cachedLyricsUrl) {
           songInfo.setAttribute("data-bytm-loading", "");
 
@@ -385,8 +388,10 @@ async function addQueueButtons(queueItem: HTMLElement) {
   }
 
   //#SECTION delete from queue btn
-  const deleteBtnElem = document.createElement("a");
-  {
+  let deleteBtnElem: HTMLAnchorElement | undefined;
+
+  if(features.deleteFromQueueButton) {
+    deleteBtnElem = document.createElement("a");
     Object.assign(deleteBtnElem, {
       title: "Remove this song from the queue",
       className: "ytmusic-player-bar bytm-delete-from-queue bytm-generic-btn",
@@ -436,13 +441,11 @@ async function addQueueButtons(queueItem: HTMLElement) {
 
   //#SECTION append elements to DOM
 
-  queueBtnsCont.appendChild(lyricsBtnElem);
-  queueBtnsCont.appendChild(deleteBtnElem);
+  lyricsBtnElem && queueBtnsCont.appendChild(lyricsBtnElem);
+  deleteBtnElem && queueBtnsCont.appendChild(deleteBtnElem);
 
   queueItem.querySelector<HTMLElement>(".song-info")?.appendChild(queueBtnsCont);
   queueItem.classList.add("bytm-has-queue-btns");
-
-  return true;
 }
 
 //#MARKER better clickable stuff

src/features/menu/menu_old.ts

@@ -48,7 +48,7 @@ export async function addMenu() {
   titleElem.id = "bytm-menu-title";
   titleElem.role = "heading";
   titleElem.ariaLevel = "1";
-  titleElem.innerText = `${scriptInfo.name} Configuration`;
+  titleElem.innerText = `${scriptInfo.name} - Configuration`;
 
   const linksCont = document.createElement("div");
   linksCont.id = "bytm-menu-linkscont";

src/index.ts

@@ -112,7 +112,7 @@ async function onDomLoad() {
       if(features.geniusLyrics)
         addMediaCtrlLyricsBtn();
 
-      if(features.queueButtons)
+      if(features.deleteFromQueueButton || features.lyricsQueueButton)
         initQueueButtons();
 
       if(features.anchorImprovements)

src/types.ts

@@ -37,14 +37,14 @@ export interface FeatureConfig {
   volumeSliderStep: number;
   /** Show a BetterYTM watermark under the YTM logo */
   watermarkEnabled: boolean;
-  /** Add buttons while hovering over a song in a queue to quickly remove it or open its lyrics */
-  queueButtons: boolean;
+  /** Add a button to each song in the queue to quickly remove it */
+  deleteFromQueueButton: boolean;
   /** After how many milliseconds to close permanent toasts */
   closeToastsTimeout: number;
 
   //#SECTION lyrics
   /** Add a button to the media controls to open the current song's lyrics on genius.com in a new tab */
   geniusLyrics: boolean;
-  // /** Add a button to each song in the queue to allow for quickly pre-opening lyrics pages of upcoming songs */
-  // geniusLyricsInQueue: boolean;
+  /** Add a button to each song in the queue to quickly open its lyrics page */
+  lyricsQueueButton: boolean;
 }