ref: minor refactors

src/config.ts

@@ -5,7 +5,7 @@ import { emitSiteEvent } from "./siteEvents.js";
 import { compressionFormat } from "./constants.js";
 import { emitInterface } from "./interface.js";
 import { closeCfgMenu } from "./menu/menu_old.js";
-import type { FeatureConfig, FeatureKey, NumberLength } from "./types.js";
+import type { FeatureConfig, FeatureKey, NumberLengthFormat } from "./types.js";
 import { showPrompt } from "./dialogs/prompt.js";
 
 /** If this number is incremented, the features object data will be migrated to the new format */
@@ -111,7 +111,7 @@ export const migrations: DataMigrationsDict = {
   // 7 -> 8 (v2.1)
   8: (oldData: FeatureConfig) => {
     if("showVotesFormat" in oldData) {
-      oldData.numbersFormat = oldData.showVotesFormat as NumberLength;
+      oldData.numbersFormat = oldData.showVotesFormat as NumberLengthFormat;
       delete oldData.showVotesFormat;
     }
     return useDefaultConfig(oldData, [

src/dialogs/prompt.ts

@@ -64,7 +64,7 @@ class PromptDialog extends BytmDialog {
   }
 
   protected emitResolve(val: PromptDialogResolveVal) {
-    (this.events as PromptDialogEmitter).emit("resolve", val);
+    this.events.emit("resolve", val);
   }
 
   protected async renderHeader({ type }: PromptDialogRenderProps) {

src/features/index.ts

@@ -2,7 +2,7 @@ import { formatNumber, getLocale, getPreferredLocale, getResourceUrl, resourceAs
 import { clearLyricsCache, getLyricsCache } from "./lyricsCache.js";
 import { doVersionCheck } from "./versionCheck.js";
 import { getFeature, promptResetConfig } from "../config.js";
-import { FeatureInfo, type ColorLightness, type ResourceKey, type SiteSelection, type SiteSelectionOrNone } from "../types.js";
+import { FeatureInfo, type ColorLightnessPref, type ResourceKey, type SiteSelection, type SiteSelectionOrNone } from "../types.js";
 import { emitSiteEvent } from "../siteEvents.js";
 import langMapping from "../../assets/locales.json" with { type: "json" };
 import { getAutoLikeDialog, getPluginListDialog, showPrompt } from "../dialogs/index.js";
@@ -108,7 +108,7 @@ const options = {
       }];
     }, [] as SelectOption[])
     .sort((a, b) => a.label.localeCompare(b.label)),
-  colorLightness: (): SelectOption<ColorLightness>[] => [
+  colorLightness: (): SelectOption<ColorLightnessPref>[] => [
     { value: "darker", label: t("color_lightness_darker") },
     { value: "normal", label: t("color_lightness_normal") },
     { value: "lighter", label: t("color_lightness_lighter") },

src/features/volume.ts

@@ -1,6 +1,6 @@
 import { addParent, debounce, type Stringifiable } from "@sv443-network/userutils";
 import { getFeature } from "../config.js";
-import { addStyleFromResource, error, log, resourceAsString, setGlobalCssVar, setInnerHtml, t, waitVideoElementReady } from "../utils/index.js";
+import { addStyleFromResource, error, log, resourceAsString, setGlobalCssVar, setInnerHtml, t, waitVideoElementReady, warn } from "../utils/index.js";
 import { siteEvents } from "../siteEvents.js";
 import { featInfo } from "./index.js";
 import "./volume.css";
@@ -69,7 +69,7 @@ export async function initVolumeFeatures() {
 
 //#region scroll step
 
-/** Initializes the volume slider scroll step features */
+/** Initializes the volume slider scroll step feature */
 function initScrollStep(volSliderCont: HTMLDivElement, sliderElem: HTMLInputElement) {
   for(const evtName of ["wheel", "scroll", "mousewheel", "DOMMouseScroll"]) {
     volSliderCont.addEventListener(evtName, (e) => {
@@ -77,7 +77,10 @@ function initScrollStep(volSliderCont: HTMLDivElement, sliderElem: HTMLInputElem
       // cancels all the other events that would be fired
       e.stopImmediatePropagation();
 
-      const delta = (e as WheelEvent).deltaY ?? (e as CustomEvent<number | undefined>).detail ?? 1;
+      const delta = Number((e as WheelEvent).deltaY ?? (e as CustomEvent<number | undefined>).detail ?? 1);
+      if(isNaN(delta))
+        return warn("Invalid scroll delta:", delta);
+
       const volumeDir = -Math.sign(delta);
       const newVolume = String(Number(sliderElem.value) + (getFeature("volumeSliderScrollStep") * volumeDir));
 

src/types.ts

@@ -104,9 +104,9 @@ export type VideoVotesObj = {
   timestamp: number;
 };
 
-export type NumberLength = "short" | "long";
+export type NumberLengthFormat = "short" | "long";
 
-export type ColorLightness = "darker" | "normal" | "lighter";
+export type ColorLightnessPref = "darker" | "normal" | "lighter";
 
 //#region global
 
@@ -373,8 +373,10 @@ export type InterfaceFunctions = {
 
 //#region feature defs
 
+/** Feature identifier */
 export type FeatureKey = keyof FeatureConfig;
 
+/** Feature category identifier */
 export type FeatureCategory =
   | "layout"
   | "volume"
@@ -457,8 +459,8 @@ type FeatureFuncProps = (
 
 /**
  * The feature info object that contains all properties necessary to construct the config menu and the feature config object.  
- * All values are loosely typed so try to only use this with the `satisfies` keyword.  
- * Use `typeof featInfo` (from `src/features/index.ts`) instead for full type safety.
+ * All values are loosely typed so try to only use this via `const myObj = {} satisfies FeatureInfo;`  
+ * For full type safety, use `typeof featInfo` (from `src/features/index.ts`) instead.
  */
 export type FeatureInfo = Record<
   keyof FeatureConfig,
@@ -484,7 +486,7 @@ export type FeatureInfo = Record<
 
 //#region feature config
 
-/** Feature configuration */
+/** Feature configuration object, as saved in memory and persistent storage */
 export interface FeatureConfig {
   //#region layout
   /** Show a BetterYTM watermark under the YTM logo */
@@ -516,7 +518,7 @@ export interface FeatureConfig {
   /** Whether to show the like/dislike ratio on the currently playing song */
   showVotes: boolean;
   /** Which format to use for the like/dislike ratio on the currently playing song */
-  numbersFormat: NumberLength;
+  numbersFormat: NumberLengthFormat;
 
   //#region volume
   /** Add a percentage label to the volume slider */
@@ -613,7 +615,7 @@ export interface FeatureConfig {
   /** Whether to adjust styles so they look better when using the ThemeSong extension */
   themeSongIntegration: boolean;
   /** Lightness of the color used when ThemeSong is enabled */
-  themeSongLightness: ColorLightness;
+  themeSongLightness: ColorLightnessPref;
 
   //#region plugins
   /** Button that opens the plugin list dialog */

src/utils/misc.ts

@@ -1,7 +1,7 @@
 import { compress, decompress, fetchAdvanced, openInNewTab, pauseFor, randomId, randRange } from "@sv443-network/userutils";
 import { marked } from "marked";
 import { branch, compressionFormat, repo, sessionStorageAvailable } from "../constants.js";
-import { type Domain, type NumberLength, type ResourceKey, type StringGen } from "../types.js";
+import { type Domain, type NumberLengthFormat, type ResourceKey, type StringGen } from "../types.js";
 import { error, type TrLocale, warn, sendRequest, getLocale } from "./index.js";
 import { getFeature } from "../config.js";
 import langMapping from "../../assets/locales.json" with { type: "json" };
@@ -204,7 +204,7 @@ export async function consumeStringGen(strGen: StringGen): Promise<string> {
 }
 
 /** Formats a number based on the config or the passed {@linkcode notation} */
-export function formatNumber(num: number, notation?: NumberLength): string {
+export function formatNumber(num: number, notation?: NumberLengthFormat): string {
   return num.toLocaleString(
     getLocale().replace(/_/g, "-"),
     (notation ?? getFeature("numbersFormat")) === "short"