Move some settings to global

SevenTV · Oct 1, 2024 · af0d36f · af0d36f
1 parent 1cb5042
commit af0d36f
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 108 deletions.
diff --git a/src/directive/TextPaintDirective.ts b/src/directive/TextPaintDirective.ts
@@ -31,7 +31,7 @@ export function updateElementStyles(el: PaintedElement, paintID: string | null):
 		};
 	}
 
-	if (hasPaint && (!paintID || el.getAttribute(ATTR_SEVENTV_PAINT_ID) !== paintID)) {
+	if (hasPaint && newPaint) {
 		const backup = el.__seventv_backup_style;
 		el.style.backgroundImage = backup?.backgroundImage ?? "";
 		el.style.filter = backup?.filter ?? "";

diff --git a/src/site/global/Global.vue b/src/site/global/Global.vue
@@ -1,6 +1,9 @@
 <template>
 	<Tooltip />
 	<FloatContext />
+	<Transition name="settings-menu" appear>
+		<SettingsMenu v-if="settingsMenuCtx.open" />
+	</Transition>
 </template>
 
 <script setup lang="ts">
@@ -9,24 +12,35 @@ import { useConfig, useSettings } from "@/composable/useSettings";
 import useUpdater from "@/composable/useUpdater";
 import { useWorker } from "@/composable/useWorker";
 import FloatContext from "./FloatContext.vue";
+import { dataSettings, globalSettings } from "./GlobalSettings";
 import Tooltip from "./Tooltip.vue";
+import { useSettingsMenu } from "@/app/settings/Settings";
+import SettingsMenu from "@/app/settings/SettingsMenu.vue";
+
+const settingsMenuCtx = useSettingsMenu();
 
 const { register } = useSettings();
-register([
-	{
-		key: "app.version",
-		type: "NONE",
-		label: "App Version",
-		defaultValue: void 0 as never,
-	},
-	{
-		key: "app.7tv.token",
-		type: "NONE",
-		label: "7TV Bearer Token",
-		expires: 0,
-		defaultValue: "",
+
+register(dataSettings);
+register(globalSettings);
+
+const html = document.documentElement.classList;
+const body = document.body.classList;
+const useTransparency = useConfig("ui.transparent_backgrounds");
+
+watch(
+	useTransparency,
+	() => {
+		if (useTransparency.value) {
+			html.add("seventv-transparent");
+			body.add("seventv-transparent");
+		} else {
+			html.remove("seventv-transparent");
+			body.remove("seventv-transparent");
+		}
 	},
-]);
+	{ immediate: true },
+);
 
 const updater = useUpdater();
 const version = useConfig("app.version");

diff --git a/src/site/global/GlobalSettings.ts b/src/site/global/GlobalSettings.ts
@@ -0,0 +1,76 @@
+import { declareConfig, useConfig } from "@/composable/useSettings";
+
+export const dataSettings = [
+	declareConfig("app.version", "NONE", {
+		label: "App Version",
+		defaultValue: void 0 as never,
+	}),
+	declareConfig("app.7tv.token", "NONE", {
+		label: "7TV Bearer Token",
+		defaultValue: "",
+		serialize: false,
+	}),
+	declareConfig("ui.emote_menu.favorites", "NONE", {
+		label: "Emote menu favourites",
+		defaultValue: new Set(),
+	}),
+	declareConfig("ui.emote_menu.usage", "NONE", {
+		label: "Emote menu usage",
+		defaultValue: new Set(),
+		serialize: false,
+	}),
+	declareConfig("ui.emote_menu.collapsed_sets", "NONE", {
+		label: "Emote menu collapsed sets",
+		defaultValue: new Set(),
+		serialize: false,
+	}),
+];
+
+export const globalSettings = [
+	declareConfig("ui.transparent_backgrounds", "TOGGLE", {
+		path: ["Appearance", "Interface"],
+		label: "Use UI transparency",
+		hint: "If checked some backgrounds will be transparent and blurred. This may affect performance",
+		defaultValue: true,
+	}),
+	declareConfig("ui.emote_menu.default_tab", "DROPDOWN", {
+		path: ["Appearance", "Interface"],
+		label: "Emote Menu: Default Emote Tab",
+		hint: "Select default tab when opening emote menu",
+		options: [
+			["Favorite", "FAVORITE"],
+			["7TV", "7TV"],
+			["FFZ", "FFZ"],
+			["BTTV", "BTTV"],
+			["Platform", "PLATFORM"],
+			["Emoji", "EMOJI"],
+		],
+		defaultValue: "7TV",
+	}),
+	declareConfig<boolean>("ui.emote_menu.most_used", "TOGGLE", {
+		path: ["Appearance", "Interface"],
+		label: "Emote Menu: Most Used Emotes",
+		hint: "Whether or not to display the emotes you type the most in the emote menu (Temporarily disabled due to performance issues)",
+		disabledIf: () => true,
+		defaultValue: true,
+	}),
+	declareConfig<boolean>("vanity.nametag_paints", "TOGGLE", {
+		path: ["Appearance", "Vanity"],
+		label: "Nametag Paints",
+		hint: "Whether or not to display nametag paints",
+		defaultValue: true,
+	}),
+	declareConfig<boolean>("vanity.7tv_Badges", "TOGGLE", {
+		path: ["Appearance", "Vanity"],
+		label: "7TV Badges",
+		hint: "Whether or not to display 7TV Badges",
+		defaultValue: true,
+	}),
+	declareConfig<boolean>("vanity.paints_drop_shadows", "TOGGLE", {
+		path: ["Appearance", "Vanity"],
+		label: "Drop shadows on paints",
+		hint: "Wheather or not to display drop shadows on paints (Requires a refresh)",
+		disabledIf: () => !useConfig("vanity.nametag_paints").value,
+		defaultValue: true,
+	}),
+];
diff --git a/src/site/kick.com/modules/chat/ChatMessage.vue b/src/site/kick.com/modules/chat/ChatMessage.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, reactive, watch } from "vue";
+import { nextTick, reactive, watch } from "vue";
 import { ref } from "vue";
 import { onUnmounted } from "vue";
 import { useEventListener } from "@vueuse/core";

diff --git a/src/site/kick.com/modules/settings/SettingsModule.vue b/src/site/kick.com/modules/settings/SettingsModule.vue
@@ -1,6 +1,4 @@
 <template>
-	<SettingsMenu v-if="ctx.open" />
-
 	<template v-if="chatSettingsPopup">
 		<SettingsChatHook :el="chatSettingsPopup" @open-settings="ctx.open = true" />
 	</template>
@@ -12,7 +10,6 @@ import { useEventListener } from "@vueuse/core";
 import { declareModule } from "@/composable/useModule";
 import SettingsChatHook from "./SettingsChatHook.vue";
 import { useSettingsMenu } from "@/app/settings/Settings";
-import SettingsMenu from "@/app/settings/SettingsMenu.vue";
 
 declareModule<"KICK">("settings", {
 	name: "Settings",

diff --git a/src/site/twitch.tv/TwitchSite.vue b/src/site/twitch.tv/TwitchSite.vue
@@ -8,14 +8,14 @@
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent, onMounted, provide, ref, watch } from "vue";
+import { defineAsyncComponent, onMounted, provide, ref } from "vue";
 import { useStore } from "@/store/main";
 import { SITE_CURRENT_PLATFORM, SITE_NAV_PATHNAME } from "@/common/Constant";
 import { useComponentHook } from "@/common/ReactHooks";
 import { useActor } from "@/composable/useActor";
 import { useFrankerFaceZ } from "@/composable/useFrankerFaceZ";
 import { getModule } from "@/composable/useModule";
-import { synchronizeFrankerFaceZ, useConfig, useSettings } from "@/composable/useSettings";
+import { synchronizeFrankerFaceZ, useSettings } from "@/composable/useSettings";
 import { useUserAgent } from "@/composable/useUserAgent";
 import type { TwModuleID } from "@/types/tw.module";
 
@@ -26,7 +26,6 @@ const actor = useActor();
 const ua = useUserAgent();
 const ffz = useFrankerFaceZ();
 
-const useTransparency = useConfig("ui.transparent_backgrounds");
 ua.preferredFormat = store.avifSupported ? "AVIF" : "WEBP";
 store.setPreferredImageFormat(ua.preferredFormat);
 store.setPlatform("TWITCH", ["7TV", "FFZ", "BTTV"], ffz.active ? ["FFZ"] : []);
@@ -90,16 +89,6 @@ useComponentHook<Twitch.RouterComponent>(
 	},
 );
 
-const rootClasses = document.documentElement.classList;
-
-watch(
-	useTransparency,
-	() => {
-		useTransparency.value ? rootClasses.add("seventv-transparent") : rootClasses.remove("seventv-transparent");
-	},
-	{ immediate: true },
-);
-
 const settings = useSettings();
 function onModuleUpdate(mod: TwModuleID, config: SevenTV.SettingNode[], inst: InstanceType<ComponentFactory>) {
 	const modInst = getModule(mod);

diff --git a/src/site/twitch.tv/modules/chat/ChatModule.vue b/src/site/twitch.tv/modules/chat/ChatModule.vue
@@ -494,30 +494,11 @@ export const config = [
 		},
 		defaultValue: 10,
 	}),
-	declareConfig<boolean>("vanity.nametag_paints", "TOGGLE", {
-		path: ["Appearance", "Vanity"],
-		label: "Nametag Paints",
-		hint: "Whether or not to display nametag paints",
-		defaultValue: true,
-	}),
-	declareConfig<boolean>("vanity.7tv_Badges", "TOGGLE", {
-		path: ["Appearance", "Vanity"],
-		label: "7TV Badges",
-		hint: "Whether or not to display 7TV Badges",
-		defaultValue: true,
-	}),
 	declareConfig("chat.hide_bits_balance", "TOGGLE", {
 		label: "Hide Bits From Community Points Button",
 		hint: "Hide the bits balance from the community points button under the chatbox",
 		path: ["Chat", "Style"],
 		defaultValue: false,
 	}),
-	declareConfig<boolean>("vanity.paints_drop_shadows", "TOGGLE", {
-		path: ["Appearance", "Vanity"],
-		label: "Drop shadows on paints",
-		hint: "Wheather or not to display drop shadows on paints (Requires a refresh)",
-		disabledIf: () => !useConfig("vanity.nametag_paints").value,
-		defaultValue: true,
-	}),
 ];
 </script>
diff --git a/src/site/twitch.tv/modules/emote-menu/EmoteMenuModule.vue b/src/site/twitch.tv/modules/emote-menu/EmoteMenuModule.vue
@@ -71,7 +71,7 @@ const doButtonUpdate = debounceFn((nodes: Element[]) => {
 
 watch(
 	placement,
-	(v) => {
+	() => {
 		for (const n of Object.values(chatInputController.instances).map((i) => i.domNodes)) {
 			doButtonUpdate(Object.values(n));
 		}
@@ -84,20 +84,6 @@ markAsReady();
 
 <script lang="ts">
 export const config = [
-	declareConfig("ui.emote_menu.default_tab", "DROPDOWN", {
-		path: ["Appearance", "Interface"],
-		label: "Emote Menu: Default Emote Tab",
-		hint: "Select default tab when opening emote menu",
-		options: [
-			["Favorite", "FAVORITE"],
-			["7TV", "7TV"],
-			["FFZ", "FFZ"],
-			["BTTV", "BTTV"],
-			["Platform", "PLATFORM"],
-			["Emoji", "EMOJI"],
-		],
-		defaultValue: "7TV",
-	}),
 	declareConfig("ui.emote_menu_search", "TOGGLE", {
 		path: ["Appearance", "Interface"],
 		label: "Emote Menu: Live Input Search",
@@ -115,30 +101,6 @@ export const config = [
 		],
 		defaultValue: "regular",
 	}),
-	declareConfig<boolean>("ui.emote_menu.most_used", "TOGGLE", {
-		path: ["Appearance", "Interface"],
-		label: "Emote Menu: Most Used Emotes",
-		hint: "Whether or not to display the emotes you type the most in the emote menu (Temporarily disabled due to performance issues)",
-		disabledIf: () => true,
-		defaultValue: true,
-	}),
-	declareConfig<Set<string>>("ui.emote_menu.favorites", "NONE", {
-		path: ["", ""],
-		label: "",
-		defaultValue: new Set(),
-	}),
-	declareConfig<Map<string, number>>("ui.emote_menu.usage", "NONE", {
-		path: ["", ""],
-		label: "",
-		defaultValue: new Map(),
-		serialize: false,
-	}),
-	declareConfig<Set<string>>("ui.emote_menu.collapsed_sets", "NONE", {
-		path: ["", ""],
-		label: "",
-		defaultValue: new Set(),
-		serialize: false,
-	}),
 ];
 </script>
 

diff --git a/src/site/twitch.tv/modules/settings/SettingsModule.vue b/src/site/twitch.tv/modules/settings/SettingsModule.vue
@@ -1,17 +1,11 @@
 <template>
-	<Transition name="settings-menu" appear>
-		<SettingsMenu v-if="ctx.open" />
-	</Transition>
-
 	<SettingsMenuButton @toggle="ctx.open = !ctx.open" />
 </template>
 
 <script setup lang="ts">
 import { declareModule } from "@/composable/useModule";
-import { useSettingsMenu } from "@/app/settings/Settings";
 import SettingsMenuButton from "./SettingsMenuButton.vue";
-import SettingsMenu from "../../../../app/settings/SettingsMenu.vue";
-import { declareConfig } from "@/composable/useSettings";
+import { useSettingsMenu } from "@/app/settings/Settings";
 
 const { markAsReady } = declareModule("settings", {
 	name: "Settings",
@@ -23,17 +17,6 @@ const ctx = useSettingsMenu();
 markAsReady();
 </script>
 
-<script lang="ts">
-export const config = [
-	declareConfig("ui.transparent_backgrounds", "TOGGLE", {
-		path: ["Appearance", "Interface"],
-		label: "Use UI transparency",
-		hint: "If checked some backgrounds will be transparent and blurred. This may affect performance",
-		defaultValue: true,
-	}),
-];
-</script>
-
 <style scoped lang="scss">
 .settings-menu-enter-active,
 .settings-menu-leave-active {