turn config/channel into a module & introduce refs

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "yt-defaulter",
 	"author": "GooseOb",
-	"version": "1.11.17",
+	"version": "1.11.18",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/GooseOb/YT-Defaulter.git"

src/compute-settings.ts

@@ -10,7 +10,7 @@ import { speedNormal } from './player';
  * 4. Global speed
  */
 export const computeSettings = (doUseNormalSpeed: boolean): config.Cfg => {
-	const channel = config.channel.get();
+	const channel = config.channel();
 	const settings = {
 		...config.value.global,
 		...channel,

src/config/current-channel.ts

@@ -1,9 +1,6 @@
+import { ref } from '../utils/ref';
 import { value } from './value';
 
-export const channel = {
-	username: '',
-	get() {
-		value.channels[this.username] ||= {};
-		return value.channels[this.username];
-	},
-};
+export const username = ref('');
+
+export const channel = () => (value.channels[username.val] ||= {});

src/listeners/video-page.ts

@@ -8,7 +8,7 @@ import * as menu from '../menu';
 export const onVideoPage = async () => {
 	const aboveTheFold = await untilAppear(get.aboveTheFold);
 
-	config.channel.username =
+	config.username.val =
 		(await untilAppear(get.channelUsernameElementGetter(aboveTheFold))).href ||
 		'';
 

src/menu/controls.ts

@@ -35,7 +35,7 @@ export const flags = {
 } satisfies Record<FlagName, HTMLInputElement>;
 
 export const updateThisChannel = () => {
-	updateValuesIn(sections.thisChannel, config.channel.get());
+	updateValuesIn(sections.thisChannel, config.channel());
 };
 
 export const updateValues = (cfg: ScriptCfg) => {

src/menu/init.ts

@@ -40,7 +40,7 @@ export const init = () => {
 	const sections = div({ className: PREFIX + 'sections' });
 	sections.append(
 		section(SECTION_GLOBAL, text.GLOBAL, config.value.global),
-		section(SECTION_LOCAL, text.LOCAL, config.channel.get())
+		section(SECTION_LOCAL, text.LOCAL, config.channel())
 	);
 
 	const controlStatus = div();

src/menu/section.ts

@@ -4,7 +4,7 @@ import { withControlListeners, withHint } from '../utils/with';
 import { getControlCreators } from './get-controls-creators';
 import { validateVolume } from './validate-volume';
 import { Hint } from '../hint';
-import { setFirstFocusable } from './value';
+import { firstFocusable } from './value';
 import { getElCreator } from '../utils';
 import { speedNormal } from '../player';
 import * as controls from './controls';
@@ -52,7 +52,7 @@ export const section = (
 		values: ['2', '1.75', '1.5', '1.25', speedNormal, '0.75', '0.5', '0.25'],
 		getText: (val) => val,
 	});
-	if (sectionId === SECTION_GLOBAL) setFirstFocusable(speedSelect.elem);
+	if (sectionId === SECTION_GLOBAL) firstFocusable.val = speedSelect.elem;
 
 	const sectionElement = div({ role: 'group' });
 	sectionElement.setAttribute('aria-labelledby', sectionId);

src/menu/value.ts

@@ -1,4 +1,5 @@
 import { debounce } from '../utils';
+import { ref } from '../utils/ref';
 import { close, listenForClose } from './close';
 
 export const set = (el: HTMLDivElement, btnEl: HTMLButtonElement) => {
@@ -16,18 +17,15 @@ export const adjustWidth = () => {
 };
 
 type Focusable = { focus(): void };
-let firstFocusable = null as Focusable;
-export const setFirstFocusable = (el: Focusable) => {
-	firstFocusable = el;
-};
+export const firstFocusable = ref<Focusable>(null);
 
 export const toggle = debounce(() => {
 	isOpen = !isOpen;
 	if (isOpen) {
 		fixPosition();
 		element.style.visibility = 'visible';
 		listenForClose();
-		firstFocusable.focus();
+		firstFocusable.val.focus();
 	} else {
 		close();
 	}

src/utils/ref.ts

@@ -0,0 +1 @@
+export const ref = <T>(val: T) => ({ val });