Feat/cleanup

CHANGELOG-nightly.md

@@ -1,14 +1,19 @@
 ### 3.1.2.1000
 
--   Implement support for the new Kick site
-
+-   **Implement support for the new Kick site:**
+    -   Chat emotes
+    -   Emote menu
+    -   Emote auto-completion
+    -   Cosmetics
+    -   7TV settings
 -   Added option to settings to hide Stories from the sidebar
 -   Fixed settings to hide recommended channels and viewers also watch channels
 -   Fixed an issue where history navigation is accidentally triggered during IME composition
 -   Added option to highlight messages of specific usernames
 -   Added option to highlight messages based on badges
 -   Added button to user card to toggle highlighting for a users messages
 -   Added mod icon for warning users to chat mod icons and user card
+-   Added an option to limit the drop shadows on paints
 
 ### 3.1.1.3000
 

src/app/chat/UserTag.vue

@@ -22,7 +22,15 @@
 				type="twitch"
 				@click="handleClick($event)"
 			/>
-			<Badge v-for="badge of activeBadges" :key="badge.id" :badge="badge" :alt="badge.data.tooltip" type="app" />
+			<template v-if="shouldRender7tvBadges">
+				<Badge
+					v-for="badge of activeBadges"
+					:key="badge.id"
+					:badge="badge"
+					:alt="badge.data.tooltip"
+					type="app"
+				/>
+			</template>
 		</span>
 
 		<!-- Message Author -->
@@ -31,7 +39,7 @@
 			class="seventv-chat-user-username"
 			@click="handleClick($event)"
 		>
-			<span v-cosmetic-paint="paint ? paint.id : null">
+			<span v-cosmetic-paint="shouldRenderPaint && paint ? paint.id : null">
 				<span v-if="asMention">@</span>
 				<span>{{ user.displayName }}</span>
 				<span v-if="user.intl"> ({{ user.username }})</span>
@@ -146,8 +154,8 @@ const stop = watch(
 			return;
 		}
 
-		paint.value = shouldRenderPaint.value && paints && paints.size ? paints.values().next().value : null;
-		activeBadges.value = shouldRender7tvBadges.value && badges && badges.size ? [...badges.values()] : [];
+		paint.value = paints && paints.size ? paints.values().next().value : null;
+		activeBadges.value = badges && badges.size ? [...badges.values()] : [];
 	},
 	{ immediate: true },
 );

src/assets/style/global.scss

@@ -89,3 +89,13 @@ body[theme="light"] {
 	-webkit-background-clip: text !important;
 	font-weight: 700;
 }
+
+:root.seventv-alternating-chat-lines {
+	.seventv-chat-observer > div:nth-child(even) {
+		background-color: var(--seventv-chat-alternate-background-color);
+	}
+
+	.seventv-chat-list .seventv-message:nth-child(even) {
+		background-color: var(--seventv-chat-alternate-background-color);
+	}
+}

src/composable/useCosmetics.ts

@@ -1,4 +1,4 @@
-import { Ref, reactive, ref, toRef } from "vue";
+import { Ref, reactive, ref, toRef, watch } from "vue";
 import { until, useTimeout } from "@vueuse/core";
 import { DecimalToStringRGBA } from "@/common/Color";
 import { log } from "@/common/Logger";
@@ -24,7 +24,13 @@ const data = reactive({
 
 	staticallyAssigned: {} as Record<string, Record<string, never> | undefined>,
 });
-const dropShadowRender = useConfig("vanity.paints_drop_shadows");
+const dropShadowRender = useConfig<0 | 1 | 2>("vanity.paints_drop_shadows");
+
+watch(dropShadowRender, () =>
+	Object.values(data.cosmetics)
+		.filter((c) => c.kind === "PAINT")
+		.forEach((c) => updatePaintStyle(c as SevenTV.Cosmetic<"PAINT">)),
+);
 
 class CosmeticMap<T extends SevenTV.CosmeticKind> extends Map<string, SevenTV.Cosmetic<T>> {
 	private providers = new Set<SevenTV.Provider>();
@@ -63,16 +69,18 @@ db.ready().then(async () => {
 	useLiveQuery(
 		() => db.cosmetics.toArray(),
 		(result) => {
-			data.cosmetics = {};
+			const temp = {} as typeof data.cosmetics;
 
 			for (const cos of result) {
-				if (data.cosmetics[cos.id]) continue;
-				data.cosmetics[cos.id] = reactive(cos);
+				if (temp[cos.id]) continue;
+				temp[cos.id] = reactive(cos);
 
 				if (cos.kind === "PAINT") {
 					updatePaintStyle(cos as SevenTV.Cosmetic<"PAINT">);
 				}
 			}
+
+			data.cosmetics = temp;
 		},
 	);
 
@@ -386,11 +394,14 @@ export function updatePaintStyle(paint: SevenTV.Cosmetic<"PAINT">, remove = fals
 
 	const gradients = paint.data.gradients.map((g) => createGradientFromPaint(g));
 	const filter = (() => {
-		if (!paint.data.shadows || dropShadowRender.value === false) {
+		if (!paint.data.shadows || dropShadowRender.value == 0) {
 			return "";
 		}
 
-		return paint.data.shadows.map((v) => createFilterDropshadow(v)).join(" ");
+		return paint.data.shadows
+			.slice(0, dropShadowRender.value == 2 ? 1 : undefined)
+			.map((v) => createFilterDropshadow(v))
+			.join(" ");
 	})();
 
 	const selector = `.seventv-paint[data-seventv-paint-id="${paint.id}"]`;

src/directive/TextPaintDirective.ts

@@ -16,11 +16,26 @@ export const TextPaintDirective = {
 	},
 } as Directive<HTMLElement, string | null>;
 
-export function updateElementStyles(el: HTMLElement, paintID: string | null): void {
-	if (!paintID || (el.hasAttribute(ATTR_SEVENTV_PAINT_ID) && el.getAttribute(ATTR_SEVENTV_PAINT_ID) !== paintID)) {
-		el.style.backgroundImage = "";
-		el.style.filter = "";
-		el.style.color = "";
+type PaintedElement = HTMLElement & {
+	__seventv_backup_style?: { backgroundImage: string; filter: string; color: string };
+};
+export function updateElementStyles(el: PaintedElement, paintID: string | null): void {
+	const hasPaint = el.hasAttribute(ATTR_SEVENTV_PAINT_ID);
+	const newPaint = hasPaint && paintID !== el.getAttribute(ATTR_SEVENTV_PAINT_ID);
+
+	if (!hasPaint) {
+		el.__seventv_backup_style = {
+			backgroundImage: el.style.backgroundImage,
+			filter: el.style.filter,
+			color: el.style.color,
+		};
+	}
+
+	if (hasPaint && newPaint) {
+		const backup = el.__seventv_backup_style;
+		el.style.backgroundImage = backup?.backgroundImage ?? "";
+		el.style.filter = backup?.filter ?? "";
+		el.style.color = backup?.color ?? "";
 
 		el.classList.remove("seventv-painted-content");
 		el.removeAttribute(ATTR_SEVENTV_TEXT);

src/site/global/Changelog.vue

@@ -128,7 +128,7 @@ function updateMediaHref(value: string): string {
 		display: grid;
 		row-gap: 0.5rem;
 		list-style: square;
-		margin: 0.25rem 0.5rem;
+		margin: 0.5rem 1rem;
 	}
 
 	:deep(li) {

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,17 @@ 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 updater = useUpdater();
 const version = useConfig("app.version");

src/site/global/GlobalSettings.ts

@@ -0,0 +1,141 @@
+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",
+		effect(v) {
+			document.documentElement.classList.toggle("seventv-transparent", v);
+			document.body.classList.toggle("seventv-transparent", v);
+		},
+		defaultValue: true,
+	}),
+	declareConfig("chat.alternating_background", "TOGGLE", {
+		label: "settings.chat_alternating_background.label",
+		hint: "settings.chat_alternating_background.hint",
+		path: ["Chat", ""],
+		defaultValue: false,
+		effect(v) {
+			document.documentElement.classList.toggle("seventv-alternating-chat-lines", v);
+		},
+	}),
+	declareConfig<string>("chat.alternating_background_color", "COLOR", {
+		path: ["Chat", "Style"],
+		label: "Alternating Background Color",
+		hint: "Configure the color of alternating background (~6% opacity)",
+		disabledIf: () => !useConfig("chat.alternating_background").value,
+		effect(v) {
+			document.documentElement.style.setProperty("--seventv-chat-alternate-background-color", `${v}0f`);
+		},
+		defaultValue: "#808080",
+	}),
+	declareConfig("general.blur_unlisted_emotes", "TOGGLE", {
+		path: ["General", ""],
+		label: "Hide Unlisted Emotes",
+		hint: "If checked, emotes which have not yet been approved for listing on 7tv.app will be blurred",
+		defaultValue: false,
+	}),
+	declareConfig<number>("chat.emote_margin", "SLIDER", {
+		path: ["Chat", "Style"],
+		label: "Emote Spacing",
+		hint: "Choose the margin around emotes in chat. Negative values lets them overlap and keep the chatlines inline. 0 Makes the emotes not overlap at all",
+		options: {
+			min: -1,
+			max: 1,
+			step: 0.1,
+			unit: "rem",
+		},
+		defaultValue: -0.5,
+		effect(v) {
+			document.documentElement.style.setProperty("--seventv-emote-margin", `${v}rem`);
+		},
+	}),
+	declareConfig<number>("chat.emote_scale", "SLIDER", {
+		path: ["Chat", "Style"],
+		label: "Emote Scale",
+		ffz_key: "chat.emotes.2x",
+		ffz_transform(v: unknown) {
+			return typeof v === "number" && v > 0 ? 2 : 1;
+		},
+		hint: "Change how large emotes should be in chat, as a multiple of their original size.",
+		options: {
+			min: 0.25,
+			max: 3,
+			step: 0.25,
+			unit: "x",
+		},
+		defaultValue: 1,
+	}),
+	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<number>("vanity.paints_drop_shadows", "DROPDOWN", {
+		path: ["Appearance", "Vanity"],
+		label: "Drop shadows on paints",
+		options: [
+			["None", 0],
+			["One", 2],
+			["All", 1],
+		],
+		hint: "Wheather or not to display drop shadows on paints (Requires a refresh)",
+		disabledIf: () => !useConfig("vanity.nametag_paints").value,
+		defaultValue: 1,
+	}),
+];