Merge branch 'dev' into feature/kick

.env.dev

@@ -1,7 +1,7 @@
 NODE_ENV=development
-VITE_APP_SITE="http://localhost:4200"
-VITE_APP_API="http://localhost:3100/v3"
-VITE_APP_API_GQL="http://localhost:3000/v3/gql"
-VITE_APP_API_EVENTS="ws://localhost:3700/v3"
-VITE_APP_API_EGVAULT="http://localhost:3444/v1"
-VITE_APP_HOST="http://localhost:8080"
+VITE_APP_SITE="https://7tv.app"
+VITE_APP_API="https://7tv.io/v3"
+VITE_APP_API_GQL="https://7tv.io/v3/gql"
+VITE_APP_API_EVENTS="wss://events.7tv.io/v3"
+VITE_APP_API_EGVAULT="https://egvault.7tv.io/v1"
+VITE_APP_HOST="https://extension.7tv.gg"

.old.env.dev

@@ -0,0 +1,7 @@
+NODE_ENV=development
+VITE_APP_SITE="http://localhost:4200"
+VITE_APP_API="http://localhost:3100/v3"
+VITE_APP_API_GQL="http://localhost:3000/v3/gql"
+VITE_APP_API_EVENTS="ws://localhost:3700/v3"
+VITE_APP_API_EGVAULT="http://localhost:3444/v1"
+VITE_APP_HOST="http://localhost:8080"

CHANGELOG-nightly.md

@@ -1,3 +1,21 @@
+### 3.1.1 3000
+
+-   Added support for animated FFZ emotes
+-   Added option to hide whispers
+-   Added tooltip to error messages in /search
+
+### 3.1.1.2100
+
+-   Fixed an issue where certain hooks would not work properly
+
+### 3.1.1.2000
+
+-   Added option to hide 7TV badges from chat
+-   Added option to hide bits from community button
+-   Fixed an issue where twitch emotes were displayed larger after hovering over them
+-   Fixed an issue causing VOD messages to display two timestamps
+-   Fixed an issue where the chat would keep rendering emotes of the previous channel
+
 ### 3.1.0.3000
 
 -   Fixed video player stats not showing

package.json

@@ -4,7 +4,7 @@
 	"description": "Improve your viewing experience on Twitch & YouTube with new features, emotes, vanity and performance.",
 	"private": true,
 	"version": "3.1.1",
-	"dev_version": "1.0",
+	"dev_version": "3.0",
 	"scripts": {
 		"start": "NODE_ENV=dev yarn build:dev && NODE_ENV=dev vite --mode dev",
 		"build:section:app": "vite build --config vite.config.mts",

src/app/chat/UserTag.vue

@@ -79,6 +79,7 @@ const ctx = useChannelContext();
 const properties = useChatProperties(ctx);
 const cosmetics = useCosmetics(props.user.id);
 const shouldRenderPaint = useConfig("vanity.nametag_paints");
+const shouldRender7tvBadges = useConfig("vanity.7tv_Badges");
 const betterUserCardEnabled = useConfig("chat.user_card");
 const twitchBadges = ref<Twitch.ChatBadge[]>([]);
 const twitchBadgeSets = toRef(properties, "twitchBadgeSets");
@@ -133,7 +134,7 @@ const stop = watch(
 		}
 
 		paint.value = shouldRenderPaint.value && paints && paints.size ? paints.values().next().value : null;
-		activeBadges.value = [...badges.values()];
+		activeBadges.value = shouldRender7tvBadges.value && badges && badges.size ? [...badges.values()] : [];
 	},
 	{ immediate: true },
 );

src/common/Image.ts

@@ -1,7 +1,7 @@
 import { useUserAgent } from "@/composable/useUserAgent";
 
 const layout = {
-	PLATFORM: [1, 2, 3],
+	PLATFORM: [1, 2, 4],
 	"7TV": [1, 2, 3, 4],
 	FFZ: [1, 2, 4],
 	BTTV: [1, 2, 4],

src/common/ReactHooks.ts

@@ -306,6 +306,9 @@ export function defineComponentHook<C extends ReactExtended.WritableComponent>(
 				if (options.functionHooks) {
 					for (const [k, f] of Object.entries(options.functionHooks)) {
 						defineFunctionHook(proto, k as keyof C, f);
+						for (const instance of instances) {
+							defineFunctionHook(instance, k as keyof C, f);
+						}
 					}
 				}
 
@@ -413,6 +416,9 @@ export function useComponentHook<C extends ReactExtended.WritableComponent>(
 				if (hook.cls) {
 					unsetPropertyHook(hook.cls.prototype, k as keyof C);
 				}
+				for (const instance of hook.instances) {
+					unsetPropertyHook(instance.component, k as keyof C);
+				}
 			}
 		}
 		unhookComponent(hook);

src/common/Transform.ts

@@ -68,10 +68,6 @@ export function convertTwitchEmote(
 					name: "2.0",
 					format: "PNG",
 				},
-				{
-					name: "3.0",
-					format: "PNG",
-				},
 				{
 					name: "4.0",
 					format: "PNG",
@@ -236,13 +232,22 @@ export function convertFFZEmote(data: FFZ.Emote): SevenTV.Emote {
 		listed: true,
 		owner: null,
 		host: {
-			url: "//cdn.frankerfacez.com/emote/" + data.id,
-			files: Object.keys(data.urls).map((key) => {
-				return {
-					name: key,
-					format: "PNG",
-				};
-			}),
+			url: data.animated
+				? "//cdn.frankerfacez.com/emote/" + data.id + "/animated"
+				: "//cdn.frankerfacez.com/emote/" + data.id,
+			files: data.animated
+				? Object.keys(data.animated).map((key) => {
+						return {
+							name: key,
+							format: "WEBP",
+						};
+				  })
+				: Object.keys(data.urls).map((key) => {
+						return {
+							name: key,
+							format: "PNG",
+						};
+				  }),
 		},
 	};
 }

src/composable/chat/useChatEmotes.ts

@@ -32,7 +32,7 @@ export function useChatEmotes(ctx: ChannelContext) {
 		m.set(ctx, x);
 	}
 
-	function resetProviders() {
+	function reset() {
 		if (!x) return;
 
 		for (const k in x.providers) {
@@ -42,6 +42,12 @@ export function useChatEmotes(ctx: ChannelContext) {
 				delete x.providers[k as SevenTV.Provider][k2];
 			}
 		}
+
+		for (const k in x.active) {
+			const ae = x.active[k];
+			if (ae.provider === "EMOJI") continue;
+			delete x.active[k];
+		}
 	}
 
 	function byProvider(provider: SevenTV.Provider) {
@@ -75,7 +81,7 @@ export function useChatEmotes(ctx: ChannelContext) {
 		sets: x.sets,
 		emojis: x.emojis,
 		providers: x.providers,
-		resetProviders,
+		reset,
 		byProvider,
 		find,
 	});

src/composable/useActor.ts

@@ -10,6 +10,7 @@ class ActorContext {
 	user: SevenTV.User | null = null;
 	sub: SubscriptionResponse | null = null;
 	token = useConfig<string>("app.7tv.token") as unknown as string;
+	editAnySet = false;
 
 	platform: Platform | null = null;
 	platformUserID: string | null = null;

src/composable/useSetMutation.ts

@@ -48,7 +48,8 @@ export function useSetMutation(setID?: string): SetMutation {
 	const canEditIfLoggedIn = computed(() => {
 		if (!actor.user) return false;
 		if (ctx.id == actor.platformUserID) return true;
-		return (ctx.user?.editors ?? []).some((e) => e.id == actor.user?.id);
+		if ((ctx.user?.editors ?? []).some((e) => e.id == actor.user?.id)) return true;
+		return actor.editAnySet;
 	});
 
 	const canEditSet = computed(() => {

src/composable/useTooltip.ts

@@ -22,7 +22,7 @@ export function useTooltip(content?: string | Component, props?: Record<string,
 		if (!el) return;
 
 		// Set the content, this is necessary to calculate the tooltip's positioning
-		if (content) {
+		if (content !== undefined) {
 			tooltip.content = typeof content === "string" ? content : markRaw(content);
 			tooltip.contentProps = props ?? {};
 		}

src/site/twitch.tv/modules/chat-vod/ChatVod.vue

@@ -111,6 +111,8 @@ definePropertyHook(props.controller.component, "props", {
 		} else {
 			ctx.actor.roles.delete("MODERATOR");
 		}
+
+		properties.showTimestamps = false;
 	},
 });
 

src/site/twitch.tv/modules/chat/ChatController.vue

@@ -328,7 +328,7 @@ watch(
 		messages.clear();
 		scroller.unpause();
 
-		nextTick(() => emotes.resetProviders());
+		nextTick(emotes.reset);
 	},
 	{ immediate: true },
 );

src/site/twitch.tv/modules/chat/ChatModule.vue

@@ -78,6 +78,22 @@ const chatEvents = useComponentHook<Twitch.ChatEventComponent>({
 	predicate: (n) => n.onClearChatEvent,
 });
 
+const hideBitsBalance = useConfig<boolean>("chat.hide_bits_balance");
+useComponentHook<Twitch.ChatCommunityPointsButtonComponent>(
+	{
+		childSelector: ".community-points-summary",
+		predicate: (el) => el.shouldShowBitsBalance,
+	},
+	{
+		functionHooks: {
+			shouldShowBitsBalance(this, old) {
+				if (hideBitsBalance.value) return false;
+				return old.call(this);
+			},
+		},
+	},
+);
+
 const isHookable = ref(false);
 const isHookableDbc = refDebounced(isHookable, 200);
 
@@ -478,5 +494,17 @@ export const config = [
 		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,
+	}),
 ];
 </script>

src/site/twitch.tv/modules/chat/components/tray/ChatTray.ts

@@ -181,7 +181,7 @@ export function useTrayRef(options: Twitch.CustomTrayOptions, modifier: boolean
 		$$typeof: REACT_ELEMENT_SYMBOL,
 		key: "body",
 		ref: (e: TrayRef) => (bodyRef.value = e),
-		type: "seventv-vue-component",
+		type: "seventv-tray-container-body",
 		props: {},
 	};
 

src/site/twitch.tv/modules/chat/components/tray/Tray.vue

@@ -19,6 +19,7 @@ const props = withDefaults(
 		messageHandler?: (v: string) => void;
 		placeholder?: string;
 		modifier?: boolean;
+		floating?: boolean;
 	}>(),
 	{
 		modifier: false,

src/site/twitch.tv/modules/custom-commands/Commands/Dashboard.vue

@@ -4,6 +4,7 @@
 		placeholder="Search again..."
 		:input-value-override="search"
 		disable-commands
+		floating
 		:message-handler="(m) => (search = m)"
 	>
 		<EnableTray :search="search" :mut="mut" name="body" @close="showTray = false" />
@@ -16,6 +17,8 @@
 import { nextTick, onMounted, onUnmounted, ref } from "vue";
 import { refAutoReset } from "@vueuse/core";
 import { SEVENTV_EMOTE_ID, SEVENTV_EMOTE_LINK } from "@/common/Constant";
+import { SevenTVRoles } from "@/common/Roles";
+import { useActor } from "@/composable/useActor";
 import { useSetMutation } from "@/composable/useSetMutation";
 import EnableTray from "./components/EnableTray.vue";
 import { useSettingsMenu } from "@/app/settings/Settings";
@@ -203,18 +206,37 @@ const commandAlias: Twitch.ChatCommand = {
 	group: "7TV",
 };
 
+const actor = useActor();
+const perms = [SevenTVRoles.ADMIN, SevenTVRoles.MODERATOR] as string[];
+
+const commandEditAnySet: Twitch.ChatCommand = {
+	name: "letmemamageemoteset",
+	description: "<Mod> Lets you edit any 7TV emote set",
+	helpText: "",
+	permissionLevel: 0,
+	handler: () => {
+		actor.editAnySet = true;
+	},
+	group: "7TV",
+	get hidden() {
+		return actor.editAnySet || mut.canEditSet || !actor.user?.roles?.some((v) => perms.includes(v));
+	},
+};
+
 onMounted(() => {
 	props.add(commandSearch);
 	props.add(commandEnable);
 	props.add(commandDisable);
 	props.add(commandAlias);
+	props.add(commandEditAnySet);
 });
 
 onUnmounted(() => {
 	props.remove(commandSearch);
 	props.remove(commandEnable);
 	props.remove(commandDisable);
 	props.remove(commandAlias);
+	props.remove(commandEditAnySet);
 });
 </script>
 

src/site/twitch.tv/modules/custom-commands/Commands/components/EnableTray.vue

@@ -8,7 +8,7 @@
 				<div class="header-button" :disabled="page === 1" @click="page--"><text> &lt; </text></div>
 				<div class="header-button" :disabled="page === maxPage" @click="page++"><text> &gt; </text></div>
 			</div>
-			<span class="text" :class="notice.type">
+			<span v-tooltip:top="notice.tooltip" class="text" :class="notice.type">
 				{{ notice.type === "none" ? search : notice.message }}
 			</span>
 			<Alias v-if="mut.canEditSet" :alias="alias" :invalid="invalidAlias" @update:alias="alias = $event" />
@@ -62,6 +62,7 @@ import Alias from "@/app/chat/EmoteAliasButton.vue";
 import { useSettingsMenu } from "@/app/settings/Settings";
 import UiScrollable from "@/ui/UiScrollable.vue";
 import { useQuery } from "@vue/apollo-composable";
+import { GraphQLError } from "graphql";
 
 const props = defineProps<{
 	search: string;
@@ -78,7 +79,7 @@ const exactMatch = ref(false);
 const page = ref(1);
 const maxPage = computed(() => (result.value ? Math.ceil(result.value?.emotes.count / pageSize.value) : 1));
 
-type Notice = { type: "error" | "info" | "none"; message: string };
+type Notice = { type: "error" | "info" | "none"; message: string; tooltip?: string };
 
 const notice = refAutoReset<Notice>({ type: "none", message: "" }, 3000);
 const alias = ref("");
@@ -135,30 +136,30 @@ const onEmoteClick = (e: MouseEvent, emote: SevenTV.Emote) => {
 
 	if (!props.mut.canEditSet) {
 		navigator.clipboard.writeText(`https://7tv.app/emotes/${emote.id}`);
-		notice.value = { type: "info", message: "Copied" };
+		notice.value = { type: "info", message: "Copied", tooltip: "Emote link copied to clipboard" };
 		return;
 	}
 
 	if (isEnabled(emote)) {
-		props.mut.remove(emote.id).catch(() => {
-			notice.value = { type: "error", message: "Error" };
+		props.mut.remove(emote.id).catch((err: GraphQLError) => {
+			notice.value = { type: "error", message: "Error", tooltip: err.message };
 		});
 		return;
 	}
 
 	if (invalidAlias.value) {
-		notice.value = { type: "error", message: "Invalid alias" };
+		notice.value = { type: "error", message: "Invalid alias", tooltip: "The alias contains illegal characters" };
 		return;
 	}
 
 	if (isConflict(emote)) {
-		notice.value = { type: "error", message: "Name conflict" };
+		notice.value = { type: "error", message: "Name conflict", tooltip: "The emote name is already in use" };
 		return;
 	}
 
 	const name = alias.value !== "" ? alias.value : emote.name;
-	props.mut.add(emote.id, name).catch(() => {
-		notice.value = { type: "error", message: "Error" };
+	props.mut.add(emote.id, name).catch((err: GraphQLError) => {
+		notice.value = { type: "error", message: "Error", tooltip: err.message };
 	});
 	alias.value = "";
 };