feat: add new settings & update readme

README.md

@@ -1,9 +1,13 @@
-# BetterYTM
-Userscript that improves [YouTube Music](https://music.youtube.com/)
+<div style="text-align: center;" align="center">
 
+<h1><img src="./resources/icon/icon.png" /><br>BetterYTM</h1>
+
+Configurable layout and UX improvements for YouTube Music
+
+</div>
 <br>
 
-## Features:
+### Features:
 - Input:
     - Use arrow keys to skip forward or backward by 10 seconds
     - Switch between YouTube and YouTube Music on a video by pressing a hotkey (F9 by default)
@@ -18,7 +22,9 @@ Userscript that improves [YouTube Music](https://music.youtube.com/)
 <br>
 
 To toggle features on or off, install the userscript, then click the "BetterYTM" text under the logo to open the settings menu.  
-Note that the page needs to be reloaded for the changes to take effect.
+Note that the page needs to be reloaded for the changes to take effect.  
+  
+My work relies on donations, so if you like this userscript please consider [supporting me ❤️](https://github.com/sponsors/Sv443)
 
 <br><br>
 

package.json

@@ -1,8 +1,8 @@
 {
   "name": "betterytm",
   "version": "1.0.0",
-  "description": "Configurable Layout and UX improvements for YouTube Music",
-  "description:de": "Konfigurierbare Layout- und UX-Verbesserungen für YouTube Music",
+  "description": "Configurable layout and UX improvements for YouTube Music",
+  "description:de": "Konfigurierbares Layout und UX-Verbesserungen für YouTube Music",
   "homepage": "https://github.com/Sv443/BetterYTM",
   "main": "./src/BetterYTM.user.ts",
   "type": "module",

src/BetterYTM.user.ts

@@ -3,7 +3,7 @@ import { dbg, info } from "./constants";
 import { getDomain } from "./utils";
 import {
   // layout
-  addMediaCtrlGeniusBtn, addQueueGeniusBtns, addWatermark,
+  addMediaCtrlGeniusBtn, addQueueButtons, addWatermark,
   preInitLayout, removeUpgradeTab, setVolSliderSize,
   setVolSliderStep,
   // lyrics
@@ -54,8 +54,8 @@ import {
         if(features.geniusLyrics)
           await addMediaCtrlGeniusBtn();
 
-        if(features.lyricsButtonsOnSongQueue)
-          await addQueueGeniusBtns();
+        if(features.queueButtons)
+          await addQueueButtons();
 
         if(typeof features.volumeSliderSize === "number")
           setVolSliderSize();

src/features/index.ts

@@ -5,49 +5,85 @@ export * from "./menu";
 
 /** Contains all possible features with their default values and other config */
 export const featInfo = {
-  arrowKeySupport: { // category: input
+  //#SECTION input
+  arrowKeySupport: {
     desc: "Arrow keys skip forwards and backwards by 10 seconds",
     type: "toggle",
+    category: "input",
     default: true,
   },
-  removeUpgradeTab: { // category: layout
-    desc: "Remove the \"Upgrade\" / YT Music Premium tab",
-    type: "toggle",
-    default: true,
-  },
-  switchBetweenSites: { // category: input
+  switchBetweenSites: {
     desc: "Add F9 as a hotkey to switch between the YT and YTM sites on a video / song",
     type: "toggle",
+    category: "input",
     default: true,
   },
-  geniusLyrics: { // category: lyrics
-    desc: "Add a button to the media controls to open the current song's lyrics on genius.com in a new tab",
-    type: "toggle",
-    default: true,
+  switchSitesHotkey: {
+    desc: "Which hotkey needs to be pressed to switch sites?",
+    type: "hotkey",
+    category: "input",
+    default: {
+      key: "F9",
+      shift: false,
+      ctrl: false,
+      meta: false,
+    },
   },
-  lyricsButtonsOnSongQueue: { // category: lyrics
-    desc: "TODO: Add a lyrics button to each song in the queue (\"up next\" tab)",
+
+  //#SECTION layout
+  removeUpgradeTab: {
+    desc: "Remove the \"Upgrade\" / YT Music Premium tab",
     type: "toggle",
+    category: "layout",
     default: true,
   },
-  volumeSliderSize: { // category: layout
+  volumeSliderSize: {
     desc: "The width of the volume slider in pixels",
     type: "number",
+    category: "layout",
     min: 10,
     max: 1000,
     step: 5,
     default: 160,
   },
-  volumeSliderStep: { // category: layout
+  volumeSliderStep: {
     desc: "Volume slider sensitivity - the smaller this number, the finer the volume control",
     type: "slider",
+    category: "layout",
     min: 1,
     max: 20,
     default: 2,
   },
-  watermarkEnabled: { // category: layout
+  watermarkEnabled: {
     desc: "Show a BetterYTM watermark under the YTM logo",
     type: "toggle",
+    category: "layout",
+    default: true,
+  },
+  anchorAroundThumbnail: {
+    desc: "TODO: Make it so middle clicking a song to open in a new tab is easier",
+    type: "toggle",
+    category: "layout",
+    default: true,
+  },
+  queueButtons: {
+    desc: "TODO: Add buttons while hovering over a song in a queue to quickly remove it or open its lyrics",
+    type: "toggle",
+    category: "layout",
+    default: true,
+  },
+  dismissPopup: {
+    desc: "TODO: Automatically dismisses the \"are you still there\" popup",
+    type: "toggle",
+    category: "layout",
+    default: true,
+  },
+
+  //#SECTION lyrics
+  geniusLyrics: {
+    desc: "Add a button to the media controls to open the current song's lyrics on genius.com in a new tab",
+    type: "toggle",
+    category: "lyrics",
     default: true,
   },
 };

src/features/layout.ts

@@ -100,3 +100,9 @@ export function setVolSliderStep() {
 
   sliderElem.setAttribute("step", String(features.volumeSliderStep));
 }
+
+//#MARKER queue buttons
+
+export function addQueueButtons() {
+  void "TODO";
+}

src/features/lyrics.ts

@@ -117,13 +117,6 @@ export async function addMediaCtrlGeniusBtn(): Promise<unknown> {
   obs.observe(songTitleElem, { attributes: true, attributeFilter: [ "title" ] });
 }
 
-
-/** Adds genius lyrics buttons to the song queue */
-export async function addQueueGeniusBtns()
-{
-  // TODO:
-}
-
 /** Returns the genius.com lyrics site URL for the current song */
 export async function getCurrentGeniusUrl() {
   try {

src/features/menu.ts

@@ -89,8 +89,9 @@ export async function addMenu() {
   featuresCont.style.flexDirection = "column";
 
   /** Gets called whenever the feature config is changed */
-  const confChanged = async (key: keyof typeof defaultFeatures, initialVal: number | boolean, newVal: number | boolean) => {
-    dbg && console.info(`BetterYTM: Feature config changed, key '${key}' from value '${initialVal}' to '${newVal}'`);
+  const confChanged = async (key: keyof typeof defaultFeatures, initialVal: number | boolean | Record<string, unknown>, newVal: number | boolean | Record<string, unknown>) => {
+    const fmt = (val: unknown) => typeof val === "object" ? JSON.stringify(val) : String(val);
+    dbg && console.info(`BetterYTM: Feature config changed, key '${key}' from value '${fmt(initialVal)}' to '${fmt(newVal)}'`);
 
     const featConf = { ...await getFeatures() };
 
@@ -302,6 +303,7 @@ export async function addMenu() {
   background-color: rgba(0, 0, 0, 0.6);
 }
 
+/* TODO:FIXME: needs better positioning (vw and vh === "big no no") */
 #betterytm-menu {
   display: inline-block;
   position: fixed;

src/types.d.ts

@@ -3,20 +3,36 @@ export type Domain = "yt" | "ytm";
 
 /** Feature configuration */
 export interface FeatureConfig {
+  //#SECTION input
   /** Arrow keys skip forwards and backwards by 10 seconds */
   arrowKeySupport: boolean;
-  /** Remove the \"Upgrade\" / YT Music Premium tab */
-  removeUpgradeTab: boolean;
   /** Add F9 as a hotkey to switch between the YT and YTM sites on a video / song */
   switchBetweenSites: boolean;
-  /** Add a button to the media controls to open the current song's lyrics on genius.com in a new tab */
-  geniusLyrics: boolean;
-  /** TODO: Add a lyrics button to each song in the queue (\"up next\" tab) */
-  lyricsButtonsOnSongQueue: boolean;
+  /** TODO: The hotkey that needs to be pressed to initiate the site switch */
+  switchSitesHotkey: {
+    key: string;
+    shift: boolean;
+    ctrl: boolean;
+    meta: boolean;
+  };
+
+  //#SECTION layout
+  /** Remove the \"Upgrade\" / YT Music Premium tab */
+  removeUpgradeTab: boolean;
   /** The width of the volume slider in pixels */
   volumeSliderSize: number;
   /** Volume slider sensitivity - the smaller this number, the finer the volume control */
   volumeSliderStep: number;
   /** Show a BetterYTM watermark under the YTM logo */
   watermarkEnabled: boolean;
+  /** TODO: Add an <a>nchor around song thumbnails */
+  anchorAroundThumbnail: boolean;
+  /** TODO: Add buttons while hovering over a song in a queue to quickly remove it or open its lyrics */
+  queueButtons: boolean;
+  /** TODO: Automatically dismisses the "are you still there" popup */
+  dismissPopup: boolean;
+
+  //#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;
 }