ref: random fixes

contributing.md

@@ -1554,7 +1554,7 @@ Functions marked with 🔒 need to be passed a per-session and per-plugin authen
 >     In addition, there are these props:
 >     - `onToggle: (state: boolean, evt: MouseEvent | KeyboardEvent) => void` - Function to call when the button is interacted with
 >     - `toggleInitialState?: boolean` - The initial value of the toggle button (optional, defaults to false)
->     - `togglePredicate?: (event: MouseEvent | KeyboardEvent) => boolean` - Gets called every toggle attempt to determine if the state should swap and `onToggle` should be called
+>     - `togglePredicate?: (evt: MouseEvent | KeyboardEvent) => boolean` - Gets called every toggle attempt to determine if the state should swap and `onToggle` should be called
 > 
 > <details><summary><b>Example <i>(click to expand)</i></b></summary>
 > 

src/components/longButton.ts

@@ -1,4 +1,4 @@
-import { onInteraction, resourceToHTMLString } from "../utils/index.js";
+import { onInteraction, resourceAsString } from "../utils/index.js";
 import { createRipple } from "./ripple.js";
 import type { ResourceKey } from "../types.js";
 
@@ -13,10 +13,11 @@ type LongBtnOptions = {
   ripple?: boolean;
 } & (
   | {
-    /** Resource key for the button icon */
+    /** Resource key for the button icon, added as inline SVG */
     resourceName: (ResourceKey & `icon-${string}`) | "_";
   }
   | {
+    /** URL to the button icon - SVG will not be added inline this way, but as an <img>! */
     src: string;
   }
 ) & (
@@ -26,7 +27,7 @@ type LongBtnOptions = {
   }
   | {
     /** Callback function to execute when the button is clicked */
-    onClick: (event: MouseEvent | KeyboardEvent) => void;
+    onClick: (evt: MouseEvent | KeyboardEvent) => void;
   }
   | {
     /** Whether the button can be toggled on and off */
@@ -34,9 +35,9 @@ type LongBtnOptions = {
     /** Initial state of the button if `toggle` is `true` - defaults to `false` */
     toggleInitialState?: boolean;
     /** Callback function to execute when the button is toggled */
-    onToggle: (enabled: boolean, event: MouseEvent | KeyboardEvent) => void;
+    onToggle: (enabled: boolean, evt: MouseEvent | KeyboardEvent) => void;
     /** Predicate function to determine if the button should be toggled on click */
-    togglePredicate?: (event: MouseEvent | KeyboardEvent) => boolean;
+    togglePredicate?: (evt: MouseEvent | KeyboardEvent) => boolean;
   }
 );
 
@@ -75,12 +76,10 @@ export async function createLongBtn({
   }
 
   onInteraction(btnElem, (evt) => {
-    if("onClick" in rest && rest.onClick)
+    if("onClick" in rest)
       rest.onClick(evt);
-    if("toggle" in rest && rest.toggle && "onToggle" in rest && rest.onToggle) {
-      if((rest.togglePredicate ?? (() => true))(evt))
-        rest.onToggle(btnElem.classList.toggle("toggled"), evt);
-    }
+    if("toggle" in rest && rest.toggle && (rest.togglePredicate ?? (() => true))(evt))
+      rest.onToggle(btnElem.classList.toggle("toggled"), evt);
   });
 
   btnElem.classList.add("bytm-generic-btn", "long");
@@ -93,7 +92,7 @@ export async function createLongBtn({
   if("src" in rest)
     (imgElem as HTMLImageElement).src = rest.src;
   else
-    imgElem.innerHTML = await resourceToHTMLString(rest.resourceName as "_") ?? "";
+    imgElem.innerHTML = await resourceAsString(rest.resourceName as "_") ?? "";
 
   const txtElem = document.createElement("span");
   txtElem.classList.add("bytm-generic-long-btn-txt", "bytm-no-select");

src/components/toast.ts

@@ -1,5 +1,5 @@
 import { pauseFor } from "@sv443-network/userutils";
-import { info, resourceToHTMLString } from "../utils/index.js";
+import { info, resourceAsString } from "../utils/index.js";
 import { getFeature } from "../config.js";
 import type { ResourceKey } from "../types.js";
 import "./toast.css";
@@ -51,7 +51,7 @@ export async function showIconToast({
   else {
     const toastIcon = document.createElement("div");
     toastIcon.classList.add("bytm-toast-icon");
-    const iconHtml = await resourceToHTMLString(rest.icon);
+    const iconHtml = await resourceAsString(rest.icon);
     if(iconHtml)
       toastIcon.innerHTML = iconHtml;
     toastWrapper.appendChild(toastIcon);

src/dialogs/featHelp.ts

@@ -1,4 +1,4 @@
-import { resourceToHTMLString, t } from "../utils/index.js";
+import { resourceAsString, t } from "../utils/index.js";
 import { BytmDialog } from "../components/index.js";
 import { featInfo } from "../features/index.js";
 import type { FeatureKey } from "../types.js";
@@ -37,7 +37,7 @@ export async function getFeatHelpDialog({
 
 async function renderHeader() {
   const headerEl = document.createElement("div");
-  const helpIconSvg = await resourceToHTMLString("icon-help");
+  const helpIconSvg = await resourceAsString("icon-help");
   if(helpIconSvg)
     headerEl.innerHTML = helpIconSvg;
 

src/features/index.ts

@@ -1,4 +1,4 @@
-import { getPreferredLocale, getResourceUrl, resourceToHTMLString, t, tp } from "../utils/index.js";
+import { getPreferredLocale, getResourceUrl, resourceAsString, t, tp } from "../utils/index.js";
 import { clearLyricsCache, getLyricsCache } from "./lyricsCache.js";
 import { doVersionCheck } from "./versionCheck.js";
 import { getFeature, promptResetConfig } from "../config.js";
@@ -27,7 +27,7 @@ interface SelectOption<TValue = number | string> {
 
 /** Creates an HTML string for the given adornment properties */
 const getAdornHtml = async (className: string, title: string, resource: ResourceKey, extraParams?: string) =>
-  `<span class="${className} bytm-adorn-icon" title="${title}" aria-label="${title}"${extraParams ? " " + extraParams : ""}>${await resourceToHTMLString(resource) ?? ""}</span>`;
+  `<span class="${className} bytm-adorn-icon" title="${title}" aria-label="${title}"${extraParams ? " " + extraParams : ""}>${await resourceAsString(resource) ?? ""}</span>`;
 
 /** Combines multiple async functions or promises that resolve with an adornment HTML string into a single string */
 const combineAdornments = (
@@ -49,7 +49,7 @@ const combineAdornments = (
 const adornments = {
   advanced: async () => getAdornHtml("bytm-advanced-mode-icon", t("advanced_mode"), "icon-advanced_mode"),
   experimental: async () => getAdornHtml("bytm-experimental-icon", t("experimental_feature"), "icon-experimental"),
-  globe: async () => await resourceToHTMLString("icon-globe_small") ?? "",
+  globe: async () => await resourceAsString("icon-globe_small") ?? "",
   alert: async (title: string) => getAdornHtml("bytm-warning-icon", title, "icon-error", "role=\"alert\""),
   reloadRequired: async () => getFeature("advancedMode") ? getAdornHtml("bytm-reload-icon", t("feature_requires_reload"), "icon-reload") : undefined,
 } satisfies Record<string, (...args: any[]) => Promise<string | undefined>>;

src/features/input.ts

@@ -1,5 +1,5 @@
 import { DataStore, clamp, compress, decompress } from "@sv443-network/userutils";
-import { error, getVideoTime, info, log, warn, getVideoSelector, getDomain, compressionSupported, t, clearNode, resourceToHTMLString, getCurrentChannelId, currentMediaType } from "../utils/index.js";
+import { error, getVideoTime, info, log, warn, getVideoSelector, getDomain, compressionSupported, t, clearNode, resourceAsString, getCurrentChannelId, currentMediaType } from "../utils/index.js";
 import type { AutoLikeData, Domain } from "../types.js";
 import { disableBeforeUnload } from "./behavior.js";
 import { siteEvents } from "../siteEvents.js";
@@ -354,7 +354,7 @@ async function addAutoLikeToggleBtn(siblingEl: HTMLElement, channelId: string, c
         const chanId = buttonEl.dataset.channelId ?? channelId;
 
         const imgEl = buttonEl.querySelector<HTMLElement>(".bytm-generic-btn-img");
-        const imgHtml = await resourceToHTMLString(`icon-auto_like${toggled ? "_enabled" : ""}`);
+        const imgHtml = await resourceAsString(`icon-auto_like${toggled ? "_enabled" : ""}`);
         if(imgEl && imgHtml)
           imgEl.innerHTML = imgHtml;
 

src/features/volume.ts

@@ -1,6 +1,6 @@
 import { addParent, type Stringifiable } from "@sv443-network/userutils";
 import { getFeature } from "../config.js";
-import { addStyleFromResource, error, log, resourceToHTMLString, t, waitVideoElementReady } from "../utils/index.js";
+import { addStyleFromResource, error, log, resourceAsString, t, waitVideoElementReady } from "../utils/index.js";
 import { siteEvents } from "../siteEvents.js";
 import { featInfo } from "./index.js";
 import "./volume.css";
@@ -74,7 +74,7 @@ async function addVolumeSliderLabel(sliderElem: HTMLInputElement, sliderContaine
 
   const volShared = getFeature("volumeSharedBetweenTabs");
   if(volShared) {
-    const linkIconHtml = await resourceToHTMLString("icon-link");
+    const linkIconHtml = await resourceAsString("icon-link");
     if(linkIconHtml) {
       const linkIconElem = document.createElement("div");
       linkIconElem.id = "bytm-vol-slider-shared";

src/menu/menu_old.ts

@@ -2,7 +2,7 @@ import { compress, debounce, isScrollable, type Stringifiable } from "@sv443-net
 import { defaultData, formatVersion, getFeature, getFeatures, migrations, setFeatures } from "../config.js";
 import { buildNumber, compressionFormat, host, mode, scriptInfo } from "../constants.js";
 import { featInfo, disableBeforeUnload } from "../features/index.js";
-import { error, getResourceUrl, info, log, resourceToHTMLString, getLocale, hasKey, initTranslations, setLocale, t, arrayWithSeparators, tp, type TrKey, onInteraction, getDomain, copyToClipboard, warn, compressionSupported, tryToDecompressAndParse } from "../utils/index.js";
+import { error, getResourceUrl, info, log, resourceAsString, getLocale, hasKey, initTranslations, setLocale, t, arrayWithSeparators, tp, type TrKey, onInteraction, getDomain, copyToClipboard, warn, compressionSupported, tryToDecompressAndParse } from "../utils/index.js";
 import { emitSiteEvent, siteEvents } from "../siteEvents.js";
 import { getChangelogDialog, getFeatHelpDialog } from "../dialogs/index.js";
 import type { FeatureCategory, FeatureKey, FeatureConfig, HotkeyObj, FeatureInfo } from "../types.js";
@@ -432,7 +432,7 @@ async function mountCfgMenu() {
         const helpTextVal: string | undefined = hasHelpTextFunc && featInfo[featKey as keyof typeof featInfo]!.helpText();
 
         if(hasKey(`feature_helptext_${featKey}`) || (helpTextVal && hasKey(helpTextVal))) {
-          const helpElemImgHtml = await resourceToHTMLString("icon-help");
+          const helpElemImgHtml = await resourceAsString("icon-help");
           if(helpElemImgHtml) {
             helpElem = document.createElement("div");
             helpElem.classList.add("bytm-ftitem-help-btn", "bytm-generic-btn");

src/utils/misc.ts

@@ -215,8 +215,8 @@ export function getPreferredLocale(): TrLocale {
   return "en_US";
 }
 
-/** Returns the content behind the passed resource identifier to be assigned to an element's innerHTML property */
-export async function resourceToHTMLString(resource: ResourceKey | "_") {
+/** Returns the content behind the passed resource identifier as a string, for example to be assigned to an element's innerHTML property */
+export async function resourceAsString(resource: ResourceKey | "_") {
   try {
     const resourceUrl = await getResourceUrl(resource);
     if(!resourceUrl)