split the script into different files

build-config.ts

@@ -3,7 +3,9 @@ import type { BuildUserscriptConfig } from 'bun-build-userscript';
 
 const define: Record<string, string> = {};
 
-const rawArr = /declare const[^;]+?;/.exec(await readFile('index.ts', 'utf8'));
+const rawArr = /declare const[^;]+?;/.exec(
+	await readFile('constants.ts', 'utf8')
+);
 
 if (rawArr) {
 	const [raw] = rawArr;

cfg/index.ts

@@ -0,0 +1,2 @@
+export * from './update';
+export * from './save';

cfg/save.ts

@@ -0,0 +1,13 @@
+export const save = (cfg: DeepReadonly<ScriptCfg>) => {
+	const cfgCopy = { ...cfg };
+	const channelsCfgCopy = { ...cfg.channels };
+	outer: for (const key in channelsCfgCopy) {
+		const channelCfg = channelsCfgCopy[key];
+		if (channelCfg.subtitles) continue;
+		for (const cfgKey in channelCfg) if (cfgKey !== 'subtitles') continue outer;
+		delete channelsCfgCopy[key];
+	}
+	cfgCopy.channels = channelsCfgCopy;
+
+	localStorage[STORAGE_NAME] = JSON.stringify(cfgCopy);
+};

cfg/update.ts

@@ -0,0 +1,23 @@
+/**
+ *  @returns if the cfg was updated
+ */
+export const update = (cfg: ScriptCfg) => {
+	const doUpdate = cfg._v !== STORAGE_VERSION;
+	if (doUpdate) {
+		switch (cfg._v) {
+			case 2:
+				cfg.flags.standardMusicSpeed = false;
+				cfg._v = 3;
+			case 3:
+				cfg.global.quality = (cfg.global as any).qualityMax;
+				delete (cfg.global as any).qualityMax;
+				for (const key in cfg.channels) {
+					const currCfg = cfg.channels[key];
+					currCfg.quality = (currCfg as any).qualityMax;
+					delete (currCfg as any).qualityMax;
+				}
+				cfg._v = STORAGE_VERSION;
+		}
+	}
+	return doUpdate;
+};

constants.ts

@@ -0,0 +1,13 @@
+declare const STORAGE_NAME: 'YTDefaulter',
+	STORAGE_VERSION: 4,
+	SECTION_GLOBAL: 'global',
+	SECTION_LOCAL: 'thisChannel',
+	PREFIX: 'YTDef-',
+	MENU_ID: 'YTDef-menu',
+	BTN_ID: 'YTDef-btn',
+	SETTING_HINT_CLASS: 'YTDef-setting-hint',
+	SUBTITLES: 'subtitles',
+	SPEED: 'speed',
+	CUSTOM_SPEED: 'customSpeed',
+	QUALITY: 'quality',
+	VOLUME: 'volume';

elements-creators.ts

@@ -0,0 +1,36 @@
+import { getElCreator } from './utils/getElCreator';
+
+export const div = getElCreator('div');
+export const input = getElCreator('input');
+export const checkbox = <T extends Props<HTMLInputElement>>(
+	props?: DeepReadonly<T>
+) => input({ type: 'checkbox', ...props });
+export const option = getElCreator('option');
+const _label = getElCreator('label');
+export const labelEl = <T extends Props<HTMLLabelElement>>(
+	forId: string,
+	props?: DeepReadonly<T>
+) => {
+	const elem = _label(props);
+	elem.setAttribute('for', forId);
+	return elem;
+};
+export const selectEl = getElCreator('select');
+export const btnClass = 'yt-spec-button-shape-next';
+const btnClassFocused = btnClass + '--focused';
+const _button = getElCreator('button');
+export const button = <T extends Props<HTMLButtonElement>>(
+	textContent: string,
+	props?: DeepReadonly<T>
+) =>
+	_button({
+		textContent,
+		className: `${btnClass} ${btnClass}--tonal ${btnClass}--mono ${btnClass}--size-m`,
+		onfocus(this: HTMLButtonElement) {
+			this.classList.add(btnClassFocused);
+		},
+		onblur(this: HTMLButtonElement) {
+			this.classList.remove(btnClassFocused);
+		},
+		...props,
+	});

hint.ts

@@ -0,0 +1,19 @@
+import { div } from './elements-creators';
+
+export class Hint {
+	constructor(prefix: string, props?: DeepReadonly<Props<HTMLDivElement>>) {
+		this.element = div(props);
+		this.element.className ||= SETTING_HINT_CLASS;
+		this.prefix = prefix;
+		this.hide();
+	}
+	hide(): void {
+		this.element.style.display = 'none';
+	}
+	show(msg?: string): void {
+		this.element.style.display = 'block';
+		if (msg) this.element.textContent = this.prefix + msg;
+	}
+	private prefix: string;
+	element: HTMLDivElement;
+}