Merge branch 'master' into feat/block-chat-phrases

CHANGELOG-nightly.md

@@ -2,12 +2,17 @@
 
 **The changes listed here are not assigned to an official release**.
 
+-   No unreleased changes yet.
+
+### Version 3.0.8.1000
+
 -   Enabled AVIF images on Firefox >= 113 by default
 -   Added sub duration & account creation date in the User Card
 -   Added a button to open an emote's full page from the emote card
 -   Fixed an issue where clicking the upper drag region in the User Card opened the user's channel
 -   Fixed user card content overflowing due to long messages
 -   Fixed chat scroller being visible in the viewer list
+-   Tentatively fixed an issue which caused the sidebar to crash occasionally
 
 ### Version 3.0.7.1000
 

CHANGELOG.md

@@ -1,3 +1,13 @@
+### Version 3.0.8
+
+-   Enabled AVIF images on Firefox >= 113 by default
+-   Added sub duration & account creation date in the User Card
+-   Added a button to open an emote's full page from the emote card
+-   Fixed an issue where clicking the upper drag region in the User Card opened the user's channel
+-   Fixed user card content overflowing due to long messages
+-   Fixed chat scroller being visible in the viewer list
+-   Tentatively fixed an issue which caused the sidebar to crash occasionally
+
 ### Version 3.0.7
 
 -   Added a new User Card

index.html

@@ -24,6 +24,6 @@
 			>
 		</noscript>
 		<div id="app"></div>
-		<script type="module" src="src/options/options.ts"></script>
+		<script type="module" src="src/app/options/options.ts"></script>
 	</body>
 </html>

package.json

@@ -3,7 +3,7 @@
 	"displayName": "7TV",
 	"description": "Improve your viewing experience on Twitch & YouTube with new features, emotes, vanity and performance.",
 	"private": true,
-	"version": "3.0.7",
+	"version": "3.0.8",
 	"dev_version": "3.0",
 	"scripts": {
 		"start": "NODE_ENV=dev yarn build:dev && NODE_ENV=dev vite --mode dev",
@@ -36,11 +36,11 @@
 		"@floating-ui/dom": "^1.2.8",
 		"@intlify/unplugin-vue-i18n": "^0.10.0",
 		"@trivago/prettier-plugin-sort-imports": "^4.1.1",
-		"@types/chrome": "^0.0.235",
+		"@types/chrome": "^0.0.236",
 		"@types/dompurify": "^3.0.2",
 		"@types/fs-extra": "^11.0.1",
-		"@types/marked": "^4.3.0",
-		"@types/node": "^20.1.4",
+		"@types/marked": "^5.0.0",
+		"@types/node": "^20.2.1",
 		"@types/sharedworker": "^0.0.96",
 		"@types/ua-parser-js": "^0.7.36",
 		"@types/uuid": "^9.0.1",
@@ -65,7 +65,7 @@
 		"marked": "^5.0.2",
 		"nanoid": "^4.0.2",
 		"npm-run-all": "^4.1.5",
-		"pinia": "^2.0.36",
+		"pinia": "^2.1.3",
 		"postcss-html": "^1.5.0",
 		"postcss-scss": "^4.0.6",
 		"prettier": "^2.8.8",

src/app/chat/Chat.vue

@@ -0,0 +1,7 @@
+<template>
+	<div />
+</template>
+
+<script setup lang="ts">
+void 0;
+</script>

src/site/twitch.tv/modules/chat/components/message/Emote.vue → src/app/chat/Emote.vue

@@ -58,8 +58,8 @@ import { imageHostToSrcset } from "@/common/Image";
 import { useConfig } from "@/composable/useSettings";
 import { useTooltip } from "@/composable/useTooltip";
 import EmoteCard from "@/site/global/components/EmoteCard.vue";
-import EmoteTooltip from "@/site/twitch.tv/modules/chat/components/message/EmoteTooltip.vue";
 import SingleEmoji from "@/assets/svg/emoji/SingleEmoji.vue";
+import EmoteTooltip from "./EmoteTooltip.vue";
 import UiFloating from "@/ui/UiFloating.vue";
 import { autoPlacement, shift } from "@floating-ui/dom";
 

src/site/twitch.tv/modules/chat/components/message/parts/Mention.vue → src/app/chat/MessageTokenMention.vue

@@ -23,7 +23,7 @@
 <script setup lang="ts">
 import type { ChatMessage, MentionToken } from "@/common/chat/ChatMessage";
 import { useConfig } from "@/composable/useSettings";
-import UserTag from "@/site/twitch.tv/modules/chat/components/user/UserTag.vue";
+import UserTag from "./UserTag.vue";
 import { v4 as uuid } from "uuid";
 
 const props = defineProps<{

src/site/twitch.tv/modules/chat/components/user/UserCard.vue → src/app/chat/UserCard.vue

@@ -134,8 +134,8 @@ import UserCardMod from "./UserCardMod.vue";
 import UserCardTabs from "./UserCardTabs.vue";
 import type { UserCardTabName } from "./UserCardTabs.vue";
 import UserTag from "./UserTag.vue";
+import BasicSystemMessage from "./msg/BasicSystemMessage.vue";
 import UiScrollable from "@/ui/UiScrollable.vue";
-import BasicSystemMessage from "../types/BasicSystemMessage.vue";
 import formatDate from "date-fns/fp/format";
 
 const props = defineProps<{

src/site/twitch.tv/modules/chat/components/user/UserCardMessageList.vue → src/app/chat/UserCardMessageList.vue

@@ -69,9 +69,9 @@ import { useApollo } from "@/composable/useApollo";
 import { TwTypeModComment } from "@/assets/gql/tw.gql";
 import { twitchUserCardCreateModCommentMut } from "@/assets/gql/tw.user-card.gql";
 import type { UserCardTabName } from "./UserCardTabs.vue";
+import UserMessage from "./UserMessage.vue";
+import NormalMessage from "./msg/0.NormalMessage.vue";
 import UiScrollable from "@/ui/UiScrollable.vue";
-import UserMessage from "../message/UserMessage.vue";
-import NormalMessage from "../types/0.NormalMessage.vue";
 
 const props = defineProps<{
 	activeTab: UserCardTabName;

src/site/twitch.tv/modules/chat/components/message/UserMessage.vue → src/app/chat/UserMessage.vue

@@ -100,13 +100,12 @@ import { useChatTools } from "@/composable/chat/useChatTools";
 import { useCosmetics } from "@/composable/useCosmetics";
 import { useConfig } from "@/composable/useSettings";
 import type { TimestampFormatKey } from "@/site/twitch.tv/modules/chat/ChatModule.vue";
-import Emote from "@/site/twitch.tv/modules/chat/components/message/Emote.vue";
-import UserTag from "@/site/twitch.tv/modules/chat/components/user/UserTag.vue";
+import Emote from "./Emote.vue";
+import MessageTokenLink from "./MessageTokenLink.vue";
+import MessageTokenMention from "./MessageTokenMention.vue";
 import RichEmbed from "./RichEmbed.vue";
 import UserMessageButtons from "./UserMessageButtons.vue";
-import Link from "./parts/Link.vue";
-import Mention from "./parts/Mention.vue";
-import ModIcons from "../mod/ModIcons.vue";
+import UserTag from "./UserTag.vue";
 import intlFormat from "date-fns/fp/intlFormat";
 
 const props = withDefaults(
@@ -220,9 +219,9 @@ if (props.msg.historical) {
 
 function getToken(token: AnyToken): AnyInstanceType {
 	if (IsMentionToken(token)) {
-		return Mention;
+		return MessageTokenMention;
 	} else if (IsLinkToken(token)) {
-		return Link;
+		return MessageTokenLink;
 	}
 }
 

src/site/twitch.tv/modules/chat/components/message/UserMessageButtons.vue → src/app/chat/UserMessageButtons.vue

@@ -55,14 +55,14 @@ import { useTimeoutFn } from "@vueuse/shared";
 import type { ChatMessage } from "@/common/chat/ChatMessage";
 import { useFloatScreen } from "@/composable/useFloatContext";
 import { useConfig } from "@/composable/useSettings";
-import UserTag from "@/site/twitch.tv/modules/chat/components/user/UserTag.vue";
+import { useTray } from "@/site/twitch.tv/modules/chat/components/tray/ChatTray";
 import CopyIcon from "@/assets/svg/icons/CopyIcon.vue";
 import PinIcon from "@/assets/svg/icons/PinIcon.vue";
 import ReplyIcon from "@/assets/svg/icons/ReplyIcon.vue";
 import TwChatReply from "@/assets/svg/twitch/TwChatReply.vue";
+import UserTag from "@/app/chat/UserTag.vue";
 import UiConfirmPrompt from "@/ui/UiConfirmPrompt.vue";
 import UiCopiedMessageToast from "@/ui/UiCopiedMessageToast.vue";
-import { useTray } from "../tray/ChatTray";
 import { shift } from "@floating-ui/dom";
 
 const props = defineProps<{

src/site/twitch.tv/modules/chat/components/types/EmoteSetUpdateMessage.vue → src/app/chat/msg/EmoteSetUpdateMessage.vue

@@ -77,8 +77,8 @@ import type { ChatUser } from "@/common/chat/ChatMessage";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
 import { useChatMessages } from "@/composable/chat/useChatMessages";
 import Logo from "@/assets/svg/logos/Logo.vue";
-import Emote from "../message/Emote.vue";
-import UserTag from "../user/UserTag.vue";
+import Emote from "../Emote.vue";
+import UserTag from "../UserTag.vue";
 
 const props = defineProps<{
 	appUser: SevenTV.User;
@@ -106,26 +106,28 @@ const user =
 .seventv-emote-set-update-message-container {
 	display: inline-block;
 	font-size: 1.25rem;
-	padding: 0.25em 0.5rem;
+	padding: 0.5em 0.5rem;
 	width: 100%;
 	background-color: rgba(41, 181, 246, 5%);
-	border-right: 0.1rem solid var(--seventv-primary);
-	border-left: 0.1rem solid var(--seventv-primary);
-	outline: 0.1rem solid var(--seventv-primary);
+	border-right: 0.5rem solid var(--seventv-primary);
+	border-left: 0.5rem solid var(--seventv-primary);
 
 	.seventv-logo {
 		vertical-align: middle;
-		font-size: 2.5rem;
+		font-size: 3rem;
 		color: var(--seventv-primary);
 		margin-right: 0.25em;
 	}
 
 	.seventv-author {
 		font-weight: 700;
+		font-size: 1.5rem;
 		margin-right: 0.25em;
 	}
 
 	.seventv-change-detail {
+		font-size: 1.5rem;
+
 		.referenced-emote {
 			display: inline-grid;
 			gap: 0.5em;

src/options/options.ts → src/app/options/options.ts

@@ -1,11 +1,11 @@
 import { createApp } from "vue";
 import { createHead } from "@vueuse/head";
 import { SITE_ASSETS_URL } from "@/common/Constant";
+import Options from "@/app/options/Options.vue";
+import { router } from "@/app/options/router/router";
 import { TooltipDirective } from "@/directive/TooltipDirective";
 import "@/i18n";
 import { setupI18n } from "@/i18n";
-import Options from "@/options/Options.vue";
-import { router } from "@/options/router/router";
 
 const app = createApp(Options);
 const head = createHead({

src/options/views/Compat/Compat.vue → src/app/options/views/Compat/Compat.vue

@@ -56,7 +56,7 @@
 
 <script setup lang="ts">
 import { inject, reactive, ref, watch } from "vue";
-import { OPTIONS_CONTEXT_KEY } from "@/options/keys";
+import { OPTIONS_CONTEXT_KEY } from "@/app/options/keys";
 import UiButton from "@/ui/UiButton.vue";
 import UiScrollable from "@/ui/UiScrollable.vue";
 

src/composable/channel/useChannelContext.ts

@@ -1,4 +1,4 @@
-import { inject, provide, reactive, toRaw } from "vue";
+import { inject, onMounted, onUnmounted, provide, reactive, toRaw } from "vue";
 import { useStore } from "@/store/main";
 import { log } from "@/common/Logger";
 import { WorkletEvent, useWorker } from "../useWorker";
@@ -9,22 +9,39 @@ const { sendMessage, target } = useWorker();
 
 export type ChannelRole = "BROADCASTER" | "EDITOR" | "MODERATOR" | "VIP" | "SUBSCRIBER" | "FOLLOWER";
 
-export class ChannelContext {
+export class ChannelContext implements CurrentChannel {
 	platform: Platform = "UNKNOWN";
 	id = "";
 	username = "";
 	displayName = "";
-	user: SevenTV.User | null = null;
+	user?: SevenTV.User;
 	loaded = false;
+	active = false;
+	count = 0;
 
 	actor = {
 		roles: new Set<ChannelRole>(),
 	};
 
+	get base(): CurrentChannel {
+		return {
+			id: this.id,
+			username: this.username,
+			displayName: this.displayName,
+			active: this.active,
+		};
+	}
+
 	setCurrentChannel(channel: CurrentChannel): boolean {
+		// Notify the worker about this new channel we are on
+		sendMessage("STATE", {
+			channel: toRaw(this.base),
+		});
+
 		if (this.id === channel.id) {
 			this.username = channel.username;
 			this.displayName = channel.displayName;
+			this.active = channel.active;
 
 			return false;
 		}
@@ -34,6 +51,7 @@ export class ChannelContext {
 		this.id = channel.id;
 		this.username = channel.username;
 		this.displayName = channel.displayName;
+		this.active = channel.active;
 
 		m.set(channel.id, this);
 		m.delete(oldID);
@@ -42,37 +60,40 @@ export class ChannelContext {
 		return true;
 	}
 
+	leave(): void {
+		this.active = false;
+
+		sendMessage("STATE", {
+			channel: toRaw(this.base),
+		});
+	}
+
 	fetch(): void {
 		// Listen for worker confirmation of channel fetch
 		const onLoaded = (ev: WorkletEvent<"channel_fetched">) => {
 			if (this.id !== ev.detail.id) return;
 
 			this.loaded = true;
-			this.user = ev.detail.user ?? null;
+			this.user = ev.detail.user;
 
 			log.info("Channel loaded:", this.id);
 			target.removeEventListener("channel_fetched", onLoaded);
 		};
 		target.addEventListener("channel_fetched", onLoaded);
-
-		// Notify the worker about this new channel we are on
-		sendMessage("STATE", {
-			channel: toRaw({
-				id: this.id,
-				username: this.username,
-				displayName: this.displayName,
-			}),
-		});
 	}
 }
 
 const m = new Map<string, ChannelContext>();
 
-export function useChannelContext(channelID?: string): ChannelContext {
+/**
+ * @param channelID the ID of the current channel to use for the context
+ * @param track if true, the mount state of the component will control the channel's activeness
+ */
+export function useChannelContext(channelID?: string, track = false): ChannelContext {
 	let ctx = inject<ChannelContext | null>(CHANNEL_CTX, null);
 	if (!ctx) {
 		ctx = (channelID ? m.get(channelID) : null) ?? reactive<ChannelContext>(new ChannelContext());
-		if (channelID) ctx.setCurrentChannel({ id: channelID ?? "", username: "", displayName: "" });
+		if (channelID) ctx.setCurrentChannel({ id: channelID ?? "", username: "", displayName: "", active: true });
 
 		const store = useStore();
 		ctx.platform = store.platform;
@@ -81,5 +102,22 @@ export function useChannelContext(channelID?: string): ChannelContext {
 		if (channelID) m.set(channelID, ctx);
 	}
 
+	if (track) {
+		onMounted(() => {
+			if (!ctx) return;
+
+			ctx.count++;
+		});
+
+		onUnmounted(() => {
+			if (!ctx || !ctx.count) return;
+
+			ctx.count--;
+			if (ctx.count > 0) return;
+
+			ctx.leave();
+		});
+	}
+
 	return ctx;
 }