From a9395348d6c1d18d45de6566a7091b63aa3509d3 Mon Sep 17 00:00:00 2001
From: GooseOb <gooose.ob@gmail.com>
Date: Mon, 6 Jan 2025 19:20:24 +0100
Subject: [PATCH] turn config/channel into a module & introduce refs

---
 package.json                  |  2 +-
 src/compute-settings.ts       |  2 +-
 src/config/current-channel.ts | 11 ++++-------
 src/listeners/video-page.ts   |  2 +-
 src/menu/controls.ts          |  2 +-
 src/menu/init.ts              |  2 +-
 src/menu/section.ts           |  4 ++--
 src/menu/value.ts             |  8 +++-----
 src/utils/ref.ts              |  1 +
 9 files changed, 15 insertions(+), 19 deletions(-)
 create mode 100644 src/utils/ref.ts

diff --git a/package.json b/package.json
index 9458922..33e8e63 100644
--- a/package.json
+++ b/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"
diff --git a/src/compute-settings.ts b/src/compute-settings.ts
index 8fa2eeb..868cba2 100644
--- a/src/compute-settings.ts
+++ b/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,
diff --git a/src/config/current-channel.ts b/src/config/current-channel.ts
index 3015e92..eb16d7e 100644
--- a/src/config/current-channel.ts
+++ b/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] ||= {});
diff --git a/src/listeners/video-page.ts b/src/listeners/video-page.ts
index 1ebb4ed..edbad30 100644
--- a/src/listeners/video-page.ts
+++ b/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 ||
 		'';
 
diff --git a/src/menu/controls.ts b/src/menu/controls.ts
index f3824fa..acd8897 100644
--- a/src/menu/controls.ts
+++ b/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) => {
diff --git a/src/menu/init.ts b/src/menu/init.ts
index 641c7d8..ad89285 100644
--- a/src/menu/init.ts
+++ b/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();
diff --git a/src/menu/section.ts b/src/menu/section.ts
index 19a0012..161544f 100644
--- a/src/menu/section.ts
+++ b/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);
diff --git a/src/menu/value.ts b/src/menu/value.ts
index a362def..ab52a85 100644
--- a/src/menu/value.ts
+++ b/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,10 +17,7 @@ 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;
@@ -27,7 +25,7 @@ export const toggle = debounce(() => {
 		fixPosition();
 		element.style.visibility = 'visible';
 		listenForClose();
-		firstFocusable.focus();
+		firstFocusable.val.focus();
 	} else {
 		close();
 	}
diff --git a/src/utils/ref.ts b/src/utils/ref.ts
new file mode 100644
index 0000000..fbdd635
--- /dev/null
+++ b/src/utils/ref.ts
@@ -0,0 +1 @@
+export const ref = <T>(val: T) => ({ val });