ref: minor refactors all over the place

assets/spinner.svg

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="display:block;animation-play-state:paused">
-  <circle cx="50" cy="50" fill="none" stroke="#ffffff" stroke-width="6" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" transform="matrix(1,0,0,1,0,0)" style="animation-play-state:paused" ></circle><!-- generated by https://loading.io/ -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="display:block;">
+  <circle cx="50" cy="50" fill="none" stroke="#ffffff" stroke-width="6" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" transform="matrix(1,0,0,1,0,0)"></circle>  <!-- generated by https://loading.io/ -->
 </svg>

src/config.ts

@@ -53,5 +53,5 @@ export async function saveFeatures(featureConf: FeatureConfig) {
 /** Saves the default feature config synchronously to the in-memory cache and asynchronously to persistent storage */
 export async function setDefaultFeatures() {
   await cfgMgr.saveDefaultData();
-  info("Reset feature config to its default value");
+  info("Reset feature config to its default values");
 }

src/features/menu/menu_old.ts

@@ -72,7 +72,8 @@ export async function addMenu() {
   };
 
   addLink(await getResourceUrl("github"), scriptInfo.namespace, `Open ${scriptInfo.name} on GitHub`);
-  addLink(await getResourceUrl("greasyfork"), "https://greasyfork.org/TODO", `Open ${scriptInfo.name} on GreasyFork`);
+  // TODO:
+  // addLink(await getResourceUrl("greasyfork"), "https://greasyfork.org/en/users/184165-sv443", `Open ${scriptInfo.name} on GreasyFork`);
 
   const closeElem = document.createElement("img");
   closeElem.id = "bytm-menu-close";
@@ -313,11 +314,14 @@ export async function addMenu() {
 
   const resetElem = document.createElement("button");
   resetElem.classList.add("bytm-cfg-reset-btn", "bytm-btn");
-  resetElem.title = "Click to reset all settings to their default value";
+  resetElem.title = "Click to reset all settings to their default values";
   resetElem.innerText = "Reset";
   resetElem.addEventListener("click", async () => {
-    if(confirm("Do you really want to reset all settings to their default value?\nAfterwards the page will need to be reloaded to apply changes."))
+    if(confirm("Do you really want to reset all settings to their default values?\nThe page will be automatically reloaded.")) {
       await setDefaultFeatures();
+      closeMenu();
+      location.reload();
+    }
   });
 
   footerElem.appendChild(reloadElem);
@@ -358,11 +362,12 @@ export async function addMenu() {
 
 //#MARKER utilities
 
-export function closeMenu(e?: MouseEvent | KeyboardEvent) {
+/** Closes the menu if it is open. If a bubbling event is passed, its propagation will be prevented. */
+export function closeMenu(evt?: MouseEvent | KeyboardEvent) {
   if(!isMenuOpen)
     return;
   isMenuOpen = false;
-  e?.bubbles && e.stopPropagation();
+  evt?.bubbles && evt.stopPropagation();
 
   document.body.removeAttribute("no-y-overflow");
   const menuBg = document.querySelector("#bytm-menu-bg") as HTMLElement;
@@ -371,7 +376,7 @@ export function closeMenu(e?: MouseEvent | KeyboardEvent) {
   menuBg.style.display = "none";
 }
 
-// function that opens the menu, it should do the inverse of closeMenu()
+/** Opens the menu if it is closed */
 export function openMenu() {
   if(isMenuOpen)
     return;

src/tools/post-build.ts

@@ -39,26 +39,26 @@ type BuildStats = {
 
   const header = `\
 // ==UserScript==
-// @name            ${pkg.userscriptName}
-// @homepageURL     ${pkg.homepage}#readme
-// @namespace       ${pkg.homepage}
-// @version         ${pkg.version}
-// @description     ${pkg.description}
-// @description:de  ${pkg["description:de"]}
-// @license         ${pkg.license}
-// @author          ${pkg.author.name}
-// @copyright       ${pkg.author.name} (${pkg.author.url})
-// @icon            https://raw.githubusercontent.com/${repo}/${branch}/assets/icon/icon_48.png
-// @match           https://music.youtube.com/*
-// @match           https://www.youtube.com/*
-// @run-at          document-start
-// @downloadURL     ${scriptUrl}
-// @updateURL       ${scriptUrl}
-// @connect         api.sv443.net
-// @grant           GM.getValue
-// @grant           GM.setValue
-// @grant           GM.getResourceUrl
-// @grant           unsafeWindow
+// @name           ${pkg.userscriptName}
+// @homepageURL    ${pkg.homepage}#readme
+// @namespace      ${pkg.homepage}
+// @version        ${pkg.version}
+// @description    ${pkg.description}
+// @description:de ${pkg["description:de"]}
+// @license        ${pkg.license}
+// @author         ${pkg.author.name}
+// @copyright      ${pkg.author.name} (${pkg.author.url})
+// @icon           https://raw.githubusercontent.com/${repo}/${branch}/assets/icon/icon_48.png
+// @match          https://music.youtube.com/*
+// @match          https://www.youtube.com/*
+// @run-at         document-start
+// @downloadURL    ${scriptUrl}
+// @updateURL      ${scriptUrl}
+// @connect        api.sv443.net
+// @grant          GM.getValue
+// @grant          GM.setValue
+// @grant          GM.getResourceUrl
+// @grant          unsafeWindow
 // @noframes\
 ${resourcesDirectives ? "\n" + resourcesDirectives : ""}
 // ==/UserScript==
@@ -192,12 +192,18 @@ async function getResourceDirectives() {
     const resourcesFile = String(await readFile(join(assetFolderPath, "resources.json")));
     const resources = JSON.parse(resourcesFile) as Record<string, string>;
 
-    for(const [name, path] of Object.entries(resources))
-      directives.push(`// @resource        ${name} ${
+    let longestName = 0;
+    for(const name of Object.keys(resources))
+      longestName = Math.max(longestName, name.length);
+
+    for(const [name, path] of Object.entries(resources)) {
+      const bufferSpace = " ".repeat(longestName - name.length);
+      directives.push(`// @resource       ${name}${bufferSpace} ${
         path.match(/^https?:\/\//)
           ? path
           : `https://raw.githubusercontent.com/Sv443/BetterYTM/${branch}/assets/${path}`
       }`);
+    }
 
     return directives.join("\n");
   }