3.1.2 (#1095)

Co-authored-by: ChrisScreams <[email protected]> Co-authored-by: pimothyxd <[email protected]> Co-authored-by: FrantaBOT <[email protected]> Co-authored-by: moath alayel <[email protected]> Co-authored-by: Troy Benson <[email protected]> Co-authored-by: FrantaBOT <[email protected]> Co-authored-by: Kon <[email protected]> Co-authored-by: dizmay <[email protected]>
SevenTV · Oct 9, 2024 · 64fe972 · 64fe972
1 parent cc924cb
commit 64fe972
Show file tree

Hide file tree

Showing 95 changed files with 2,735 additions and 1,123 deletions.
diff --git a/.env.dev b/.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"
diff --git a/.old.env.dev b/.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"
diff --git a/CHANGELOG-nightly.md b/CHANGELOG-nightly.md
@@ -1,3 +1,55 @@
+### 3.1.2.4000
+
+-   Fixed a bug that could cause issues when clicking an emoji in chat
+-   Fixed an issue with emote sets not switching on channel switch
+-   Fixed an issue with making users unable to chat
+-   Fixed an issue with certain settings not saving
+
+### 3.1.2.3000
+
+-   Added an option to expand sidebar on twitch when hovering
+-   Fixed mentions not being clickable when colored mentions are turned off
+-   Added link to creators 7TV profile to emote cards of 7TV emotes
+
+### 3.1.2.2000
+
+-   Fixed some settings on kick
+-   Added more drop shadow settings
+
+### 3.1.2.1000
+
+-   **Implement support for the new Kick site:**
+    -   Chat emotes
+    -   Emote menu
+    -   Emote auto-completion
+    -   Cosmetics
+-   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
+
+-   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

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,26 @@
+### 3.1.2
+
+-   **Implement support for the new Kick site:**
+    -   Chat emotes
+    -   Emote menu
+    -   Emote auto-completion
+    -   Cosmetics
+    -   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
+-   Added more drop shadow settings
+-   Added link to creators 7TV profile to emote cards of 7TV emotes
+-   Fixed a bug that could cause issues when clicking an emoji in chat
+-   Fixed an issue with emote sets not switching on channel switch
+-   Fixed an issue with making users unable to chat
+-   Added an option to expand sidebar on twitch when hovering
+
 ### 3.1.1
 
 -   Fixed video player stats not showing

diff --git a/locale/en_US.yaml b/locale/en_US.yaml
@@ -21,7 +21,10 @@ user_card:
     previously_subscription_length: Previously subscribed for {length} months
     hidden_subscription_status: Status hidden
     native: Open Native User Card
+    highlight: Highlight messages of this user
+    stop_highlight: Stop highlighting of this user
     no_messages: "{user} has not chatted here"
+    no_warnings: "{user} has not been warned before"
     no_timeouts: "{user} hasn't been timed out before"
     no_bans: "{user} hasn't been banned before"
     no_comments: "No mod comments have been written for {user}"
@@ -30,6 +33,7 @@ user_card:
     unban_button: Unban
     mod_button: Mod
     unmod_button: Unmod
+    warn_button: Warn
 
 # Emote Menu
 # This interface allows the user to pick from available emotes

diff --git a/package.json b/package.json
@@ -3,8 +3,8 @@
 	"displayName": "7TV",
 	"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",
+	"version": "3.1.2",
+	"dev_version": "4.0",
 	"scripts": {
 		"start": "NODE_ENV=dev yarn build:dev && NODE_ENV=dev vite --mode dev",
 		"build:section:app": "vite build --config vite.config.mts",

diff --git a/src/app/chat/Badge.vue b/src/app/chat/Badge.vue
@@ -6,6 +6,7 @@
 			:alt="alt"
 			:style="{
 				backgroundColor,
+				borderRadius,
 			}"
 			@mouseenter="show(imgRef)"
 			@mouseleave="hide()"
@@ -20,16 +21,19 @@ import BadgeTooltip from "./BadgeTooltip.vue";
 
 const props = defineProps<{
 	alt: string;
-	type: "twitch" | "app";
-	badge: Twitch.ChatBadge | SevenTV.Cosmetic<"BADGE">;
+	type: "twitch" | "picture" | "app";
+	badge: Twitch.ChatBadge | Twitch.SharedChat | SevenTV.Cosmetic<"BADGE">;
 }>();
 
 const backgroundColor = ref("");
+const borderRadius = ref("");
 const srcset = {
 	twitch: (badge: Twitch.ChatBadge) => `${badge.image1x} 1x, ${badge.image2x} 2x, ${badge.image4x} 4x`,
+	picture: (badge: Twitch.SharedChat) =>
+		`${badge.profileImageURL.slice(0, -9)}28x28.png 1.6x, ${badge.profileImageURL.slice(0, -9)}70x70.png 3.8x`,
 	app: (badge: SevenTV.Cosmetic<"BADGE">) =>
 		badge.data.host.files.map((fi, i) => `https:${badge.data.host.url}/${fi.name} ${i + 1}x`).join(", "),
-}[props.type](props.badge as SevenTV.Cosmetic<"BADGE"> & Twitch.ChatBadge);
+}[props.type](props.badge as SevenTV.Cosmetic<"BADGE"> & Twitch.SharedChat & Twitch.ChatBadge);
 
 const imgRef = ref<HTMLElement>();
 
@@ -44,6 +48,10 @@ function isApp(badge: typeof props.badge): badge is SevenTV.Cosmetic<"BADGE"> {
 if (isApp(props.badge)) {
 	backgroundColor.value = props.badge.data.backgroundColor ?? "";
 }
+
+if (typeof props.badge == "string") {
+	borderRadius.value = "25%";
+}
 </script>
 
 <style scoped lang="scss">

diff --git a/src/app/chat/Emote.vue b/src/app/chat/Emote.vue
@@ -21,7 +21,6 @@
 		<SingleEmoji
 			v-else-if="!unload && emote.id"
 			:id="emote.id"
-			ref="boxRef"
 			:alt="emote.name"
 			class="seventv-chat-emote seventv-emoji"
 			:style="{ width: `${scale * 2}rem`, height: `${scale * 2}rem` }"

diff --git a/src/app/chat/MessageTokenMention.vue b/src/app/chat/MessageTokenMention.vue
@@ -1,28 +1,23 @@
 <template>
 	<span class="mention-token">
-		<span v-if="shouldRenderColoredMentions" :style="{ color: token.content.user?.color }">
-			<UserTag
-				:user="
-					token.content.user ?? {
-						id: uuid(),
-						username: tag.toLowerCase(),
-						displayName: tag,
-						color: '',
-					}
-				"
-				:as-mention="asMention"
-				:hide-badges="true"
-			/>
-		</span>
-		<span v-else>
-			{{ token.content.displayText }}
-		</span>
+		<UserTag
+			:user="
+				token.content.user ?? {
+					id: uuid(),
+					username: tag.toLowerCase(),
+					displayName: tag,
+					color: '',
+				}
+			"
+			is-mention
+			:hide-at="!hasAt"
+			hide-badges
+		/>
 	</span>
 </template>
 
 <script setup lang="ts">
 import type { ChatMessage, MentionToken } from "@/common/chat/ChatMessage";
-import { useConfig } from "@/composable/useSettings";
 import UserTag from "./UserTag.vue";
 import { v4 as uuid } from "uuid";
 
@@ -31,10 +26,8 @@ const props = defineProps<{
 	msg?: ChatMessage;
 }>();
 
-const shouldRenderColoredMentions = useConfig("chat.colored_mentions");
-
-const asMention = props.token.content.displayText.charAt(0) === "@";
-const tag = asMention ? props.token.content.displayText.slice(1) : props.token.content.displayText;
+const hasAt = props.token.content.displayText.charAt(0) === "@";
+const tag = hasAt ? props.token.content.displayText.slice(1) : props.token.content.displayText;
 </script>
 
 <style scoped lang="scss">

diff --git a/src/app/chat/UserCard.vue b/src/app/chat/UserCard.vue
@@ -5,6 +5,12 @@
 				<!--Identity (avatar, nametag, badges) -->
 				<div ref="dragHandle" class="seventv-user-card-identity">
 					<div class="seventv-user-card-menuactions">
+						<BellSlashIcon
+							v-if="data.targetUser.username in chatHighlights.getAllUsernameHighlights()"
+							v-tooltip="t('user_card.stop_highlight')"
+							@click="highlightUserMessages"
+						/>
+						<BellIcon v-else v-tooltip="t('user_card.highlight')" @click="highlightUserMessages" />
 						<LogoTwitch v-tooltip="t('user_card.native')" @click="openNativeCard" />
 						<CloseIcon class="close-button" @click="emit('close')" />
 					</div>
@@ -96,6 +102,7 @@
 					v-if="ctx.actor.roles.has('MODERATOR')"
 					:active-tab="data.activeTab"
 					:message-count="data.count.messages"
+					:warning-count="data.count.warnings"
 					:ban-count="data.count.bans"
 					:timeout-count="data.count.timeouts"
 					:comment-count="data.count.comments"
@@ -125,6 +132,7 @@ import { convertTwitchMessage } from "@/common/Transform";
 import { convertTwitchBadge } from "@/common/Transform";
 import { ChatMessage, ChatUser } from "@/common/chat/ChatMessage";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
+import { useChatHighlights } from "@/composable/chat/useChatHighlights";
 import { useChatMessages } from "@/composable/chat/useChatMessages";
 import { useChatTools } from "@/composable/chat/useChatTools";
 import { useApollo } from "@/composable/useApollo";
@@ -135,6 +143,8 @@ import {
 	twitchUserCardModLogsQuery,
 	twitchUserCardQuery,
 } from "@/assets/gql/tw.user-card.gql";
+import BellIcon from "@/assets/svg/icons/BellIcon.vue";
+import BellSlashIcon from "@/assets/svg/icons/BellSlashIcon.vue";
 import CakeIcon from "@/assets/svg/icons/CakeIcon.vue";
 import CloseIcon from "@/assets/svg/icons/CloseIcon.vue";
 import HeartIcon from "@/assets/svg/icons/HeartIcon.vue";
@@ -165,6 +175,7 @@ const messages = useChatMessages(ctx);
 const { identity } = storeToRefs(useStore());
 const cosmetics = useCosmetics(props.target.id);
 const tools = useChatTools(ctx);
+const chatHighlights = useChatHighlights(ctx);
 
 const apollo = useApollo();
 const { t } = useI18n();
@@ -205,12 +216,14 @@ const data = reactive({
 	messageCursors: new WeakMap<ChatMessage, string>(),
 	timelines: {
 		messages: {} as Record<string, ChatMessage[]>,
+		warnings: {} as Record<string, ChatMessage[]>,
 		bans: {} as Record<string, ChatMessage[]>,
 		timeouts: {} as Record<string, ChatMessage[]>,
 		comments: {} as Record<string, ChatMessage[]>,
 	} as Record<UserCardTabName, Record<string, ChatMessage[]>>,
 	count: {
 		messages: 0,
+		warnings: 0,
 		bans: 0,
 		timeouts: 0,
 		comments: 0,
@@ -267,6 +280,7 @@ async function fetchModeratorData(): Promise<void> {
 	if (!resp || resp.errors?.length || !resp.data.channelUser) return;
 
 	data.count.messages = resp.data.viewerCardModLogs.messages.count ?? 0;
+	data.count.warnings = resp.data.viewerCardModLogs.warnings.count ?? 0;
 	data.count.bans = resp.data.viewerCardModLogs.bans.count ?? 0;
 	data.count.timeouts = resp.data.viewerCardModLogs.timeouts.count ?? 0;
 	data.count.comments = resp.data.viewerCardModLogs.comments.edges.length ?? 0;
@@ -275,11 +289,13 @@ async function fetchModeratorData(): Promise<void> {
 
 	const timeouts = resp.data.viewerCardModLogs.timeouts.edges;
 	const bans = resp.data.viewerCardModLogs.bans.edges;
+	const warnings = resp.data.viewerCardModLogs.warnings.edges;
 
-	// Add timeouts and bans to the timeline
+	// Add warnings, timeouts and bans to the timeline
 	for (const [tabName, a] of [
 		["timeouts", timeouts] as [UserCardTabName, typeof timeouts],
 		["bans", bans] as [UserCardTabName, typeof bans],
+		["warnings", warnings] as [UserCardTabName, typeof warnings],
 	]) {
 		const result = [] as ChatMessage[];
 
@@ -388,6 +404,31 @@ function openNativeCard(ev: MouseEvent): void {
 	emit("close");
 }
 
+function highlightUserMessages(): void {
+	if (!data.targetUser.username) return;
+	let ok = false;
+	if (data.targetUser.username in chatHighlights.getAllUsernameHighlights()) {
+		chatHighlights.remove(data.targetUser.username);
+		ok = true;
+	} else {
+		chatHighlights.define(
+			data.targetUser.username,
+			{
+				pattern: data.targetUser.username,
+				label: "Messages by " + data.targetUser.username,
+				color: "#8803fc",
+				flashTitle: false,
+				username: true,
+			},
+			true,
+		);
+		ok = true;
+	}
+
+	if (!ok) return;
+	chatHighlights.save();
+}
+
 function getProfileURL(): string {
 	return window.location.origin + "/" + props.target.username;
 }
@@ -507,7 +548,7 @@ onMounted(async () => {
 </script>
 
 <style scoped lang="scss">
-$card-width: 32rem;
+$card-width: 37rem;
 $card-height: 48rem;
 
 main.seventv-user-card-container {
@@ -587,6 +628,7 @@ main.seventv-user-card-container {
 		right: 0.5rem;
 		top: 0.5rem;
 		height: 2rem;
+		width: 8rem;
 		display: flex;
 		column-gap: 0.25rem;
 
@@ -683,7 +725,7 @@ main.seventv-user-card-container {
 			// grid: position each badge next to the other on the same row, wrapping if necessary
 			display: flex;
 			flex-wrap: wrap;
-			max-width: 18rem;
+			max-width: 22rem;
 			gap: 0.5rem;
 			align-self: start;
 			z-index: 1;