make current channel value reactive

package.json

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

src/compute-settings.ts

@@ -4,10 +4,10 @@ import { plr } from './player';
 export const computeSettings = (doNotChangeSpeed: boolean): Cfg => {
 	const settings = {
 		...config.value.global,
-		...config.channel.value,
+		...config.channel.get(),
 	};
-	const isChannelSpeed = 'speed' in config.channel.value;
-	const isChannelCustomSpeed = 'customSpeed' in config.channel.value;
+	const isChannelSpeed = 'speed' in config.channel.get();
+	const isChannelCustomSpeed = 'customSpeed' in config.channel.get();
 	if (doNotChangeSpeed) {
 		settings.speed = plr.speedNormal;
 		delete settings.customSpeed;

src/config/current-channel.ts

@@ -1,8 +1,8 @@
 import { value } from './value';
 
-export const channel: Ref<Cfg> & { set: (username: string) => void } = {
-	value: null,
-	set(username: string) {
-		this.value = value.channels[username] ||= {};
+export const channel = {
+	username: '',
+	get() {
+		return (value.channels[this.username] ||= {});
 	},
 };

src/index.ts

@@ -18,16 +18,10 @@ const onPageChange = async () => {
 	if (location.pathname !== '/watch') return;
 
 	const aboveTheFold = await untilAppear(get.aboveTheFold);
-	const channelUsername =
+	config.channel.username =
 		(await untilAppear(get.channelUsernameElementGetter(aboveTheFold))).href ||
 		'';
 
-	const updateChannelConfig = () => {
-		config.channel.set(channelUsername);
-	};
-
-	updateChannelConfig();
-
 	await plr.set(await untilAppear(get.plr));
 
 	applySettings(
@@ -37,9 +31,9 @@ const onPageChange = async () => {
 	);
 
 	if (menu.value.element) {
-		menu.controls.updateThisChannel(config.channel.value);
+		menu.controls.updateThisChannel(config.channel.get());
 	} else {
-		await menu.init(updateChannelConfig);
+		await menu.init();
 	}
 };
 
@@ -84,15 +78,14 @@ document.addEventListener(
 		} else if (e.code === 'Space') {
 			e.stopPropagation();
 			e.preventDefault();
-			const customSpeedValue = config.channel.value
-				? config.channel.value.customSpeed ||
-					(!config.channel.value.speed && config.value.global.customSpeed)
+			const channelCfg = config.channel.get();
+			const customSpeedValue = channelCfg
+				? channelCfg.customSpeed ||
+					(!channelCfg.speed && config.value.global.customSpeed)
 				: config.value.global.customSpeed;
 			if (customSpeedValue) return valueSetters.customSpeed(customSpeedValue);
 			restoreFocusAfter(() => {
-				valueSetters[SPEED](
-					(config.channel.value || config.value.global)[SPEED]
-				);
+				valueSetters[SPEED]((channelCfg || config.value.global)[SPEED]);
 			});
 		}
 	},

src/menu/init.ts

@@ -36,11 +36,11 @@ const controlCheckboxDiv = (
 	return cont;
 };
 
-export const init = async (updateChannelConfig: () => void) => {
+export const init = async () => {
 	const sections = div({ className: PREFIX + 'sections' });
 	sections.append(
 		section(SECTION_GLOBAL, text.GLOBAL, config.value.global),
-		section(SECTION_LOCAL, text.LOCAL, config.channel.value)
+		section(SECTION_LOCAL, text.LOCAL, config.channel.get())
 	);
 
 	const controlStatus = div();
@@ -62,7 +62,6 @@ export const init = async (updateChannelConfig: () => void) => {
 		withOnClick(button(text.IMPORT), async () => {
 			try {
 				config.save(await navigator.clipboard.readText());
-				updateChannelConfig();
 			} catch (e) {
 				updateControlStatus('Import: ' + e.message);
 				return;