3.1.0 Emote management & Bug fixes (#1042)

Co-authored-by: Troy Benson <[email protected]> Co-authored-by: Lennart <[email protected]> Co-authored-by: Philip <[email protected]> Co-authored-by: pimothyxd <[email protected]> Co-authored-by: Adam Irlik <[email protected]> Co-authored-by: loczek <[email protected]> Co-authored-by: John Friend <[email protected]> Co-authored-by: John <[email protected]> Co-authored-by: Junsu Park <[email protected]> Co-authored-by: ByteZ1337 <[email protected]> Co-authored-by: Nikolai Ammosov <[email protected]>
SevenTV · Jun 13, 2024 · 51549be · 51549be
1 parent a98e365
commit 51549be
Show file tree

Hide file tree

Showing 101 changed files with 3,601 additions and 643 deletions.
diff --git a/.github/workflows/ci.md b/.github/workflows/ci.md
@@ -0,0 +1,35 @@
+# Jobs
+
+## Build job (`ci`)
+
+- Builds the chrome extension with `yarn build:prod` and firefox extension with `[email protected] MV2=true yarn build:prod`
+- Both builds get zipped
+- For chrome: Create CRX from zip with action `cardinalby/webext-buildtools-chrome-crx-action@v2` and private key `secrets.WEB_EXTENSION_CRX`
+- For Firefox: Create XPI from zip with action `kewisch/action-web-ext@v1`
+- CRX and XPI files uploaded as artifact `installable`
+- Chrome zip and Firefox zip uploaded as artifact `build`
+- Both manifest jsons uploaded as artifact `manifest`
+
+## Release job (`release`)
+
+- Creates Github releases and tags
+
+## Side loading deploy job (`deploy`)
+
+- Builds with `yarn build-hosted:prod`
+- Uploads to Cloudflare R2 with action `shallwefootball/s3-upload-action@master`
+  - Endpoint: `secrets.R2_API_ENDPOINT`
+  - Access Key: `secrets.R2_API_AK`
+  - Secret Key: `secrets.R2_API_SECRET`
+  - Bucket: `7tv-extension`
+
+## Push job (`push`)
+
+- Upload zip file (not crx) to chrome web store (cws) with npm package `chrome-webstore-upload-cli`
+  - Extension id: `ammjkodgmmoknidbanneddgankgfejfh`
+  - Client id, client secret, refresh token in `secrets.CWS`
+- Sign XPI file with action `kewisch/action-web-ext@v1`
+  - API key: `secrets.AMO_API_KEY`
+  - API secret: `secrets.AMO_API_SECRET`
+  - upload signed XPI as artifact `installable`
+- Update Github release
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -21,6 +21,11 @@ on:
                     - stable
                 default: nightly
 
+            stage-host:
+                type: boolean
+                default: false
+                description: "Use stage-host"
+
             store-upload:
                 type: boolean
                 default: false
@@ -78,8 +83,9 @@ jobs:
 
             - name: Build App
               env:
-                  BRANCH: ${{ (inputs.branch == 'nightly' || env.IS_MASTER_COMMIT == 'true') && 'nightly' || inputs.branch == 'stable' && '' }}
-                  EXTENSION_ID_MOZ: ${{ (inputs.branch == 'stable') && env.EXTENSION_ID_AMO || ((inputs.branch == 'nightly' || env.IS_MASTER_COMMIT == 'true') && env.NIGHTLY_EXTENSION_ID_AMO) }}
+                  BRANCH: ${{ (inputs.branch != 'stable' && 'nightly') || '' }}
+                  EXTENSION_ID_MOZ: ${{ (inputs.branch == 'stable' && env.EXTENSION_ID_AMO) || env.NIGHTLY_EXTENSION_ID_AMO }}
+
               run: |
                   OUT_DIR=mv3 yarn build:prod
                   OUT_DIR=mv2 MOZILLA_ID=${{ env.EXTENSION_ID_MOZ }} MV2=true yarn build:prod
@@ -255,7 +261,8 @@ jobs:
 
             - name: Build (Hosted)
               env:
-                  BRANCH: ${{ (inputs.branch == 'nightly' || env.IS_MASTER_COMMIT == 'true') && 'nightly' || inputs.branch == 'stable' && '' }}
+                  BRANCH: ${{ (inputs.branch != 'stable' && 'nightly') || '' }}
+                  MANIFEST_NAME: ${{ (inputs.stage-host && 'Stage') || ''}}
               run: |
                   yarn build-hosted:prod
 
@@ -310,7 +317,7 @@ jobs:
               continue-on-error: true
               env:
                   CREDENTIALS: ${{ secrets.CWS }}
-                  EXTENSION_ID: ${{ (inputs.branch == 'stable') && env.EXTENSION_ID_CWS || ((inputs.branch == 'nightly' || env.IS_MASTER_COMMIT == 'true') && env.NIGHTLY_EXTENSION_ID_CWS) }}
+                  EXTENSION_ID: ${{ (inputs.branch == 'stable' && env.EXTENSION_ID_CWS) || env.NIGHTLY_EXTENSION_ID_CWS }}
               run: |
                   echo "${{ env.CREDENTIALS }}" >> c
 

diff --git a/CHANGELOG-nightly.md b/CHANGELOG-nightly.md
@@ -1,8 +1,45 @@
-### Untitled Version
+### 3.1.0.1000
 
-**The changes listed here are not assigned to an official release**.
+-   Added rich embeds for 7TV emotes.
+-   Added custom commands /search, /add, /remove and /rename to manage 7TV emotes.
+-   Added /song that uses the AudD api to recognize songs. (Requires an api token from [AudD](https://audd.io/))
+-   Added /refresh to reload emotes.
+-   Added /nuke to moderate multiple messages at once. Can be enabled in the settings.
+-   Fixed native chat width.
+-   Make all setting pages searchable.
+
+### 3.0.17.1000
 
 -   Reinstated animated avatars
+-   Fixed an issue where links would include a period at the end
+-   Added an option to hide the channel point balance button under the chat input box
+-   Updated background of the current emote tab selection
+-   Fixed an issue where suspicious users were not highlighted and clips not being displayed in chat
+-   Fixed an issue which caused timestamps to count beyond 24 hours
+-   Fixed an issue which caused scrolling to not work while scrolling through a category
+-   Fixed an issue where lowercase cheers were displayed as text
+-   Added an option to hide the community challenge contributions in the chat
+-   Fixed extension not working on twitch for some users (React 18 support)
+-   Fixed an issue where chat messages (like announcements) did not use the channel accent color
+-   Fixed an issue where an emote with a long alias would cause the alias to go outside of the tooltip
+-   Added an option to hide timestamps in vods
+-   Fixed an issue which sometimes caused chat badges to not appear
+-   Fixed an issue that caused replies in threads to not appear
+-   Fixed an issue where replies in threads could not be selected
+-   Fixed an issue where switching the selected emote-set would not be detected
+-   Fixed an issue where the emote menu button did not appear on Kick
+-   Fixed an issue which sometimes caused old messages to not appear
+-   Sort emotes alphabetically with tab auto-completion on Kick
+-   Removed option to hide the React button on Twitch
+-   Added emote support for introduction & watch streak messages.
+-   Fixed an issue that caused suspicious user highlights to not persist
+-   Fixed an issue that caused returning users to not be highlighted
+-   Added an option to show raider highlights
+-   Added an option to show returning user highlights
+-   Fixed an issue that caused international names to not always display logins
+-   Fixed an issue that caused Twitch VODs to not load emotes
+-   Fixed an issue that caused emote names in emote cards to overflow
+-   Fixed an issue that caused certain words to not display in chat
 
 ### 3.0.16.1000
 
@@ -15,13 +52,12 @@
 -   Fixed emote tile width in emote menu
 -   Fixed "hidden subscription status" message in the User Card
 -   Fixed extraneous emote menu blank space when "Live Input Search" was enabled
+-   Fixed an issue where leaderboard would not hide when "Hide leaderboard" was enabled
 -   Fixed an issue with deleting messages using mod icons
 -   Fixed an issue where the extension menu displayed incorrectly in Chromium-based browsers
 
 ### 3.0.15.1000
 
-**The changes listed here are not assigned to an official release**.
-
 -   Added a backup tab to the settings menu for importing & exporting settings
 -   Added an option to select the default Emote Menu tab
 -   Added artist attribution to the emote card

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,46 @@
+### 3.1.0
+
+-   Added rich embeds for 7TV emotes.
+-   Added custom commands /search, /add, /remove and /rename to manage 7TV emotes.
+-   Added /song that uses the AudD api to recognize songs. (Requires an api token from [AudD](https://audd.io/))
+-   Added /refresh to reload emotes.
+-   Added /nuke to moderate multiple messages at once. Can be enabled in the settings.
+-   Fixed native chat width.
+-   Make all setting pages searchable.
+
+### 3.0.17
+
+-   Reinstated animated avatars
+-   Fixed an issue where links would include a period at the end
+-   Added an option to hide the channel point balance button under the chat input box
+-   Updated background of the current emote tab selection
+-   Fixed an issue where suspicious users were not highlighted and clips not being displayed in chat
+-   Fixed an issue which caused timestamps to count beyond 24 hours
+-   Fixed an issue which caused scrolling to not work while scrolling through a category
+-   Fixed an issue where lowercase cheers were displayed as text
+-   Added an option to hide the community challenge contributions in the chat
+-   Fixed extension not working on twitch for some users (React 18 support)
+-   Fixed an issue where chat messages (like announcements) did not use the channel accent color
+-   Fixed an issue where an emote with a long alias would cause the alias to go outside of the tooltip
+-   Added an option to hide timestamps in vods
+-   Fixed an issue which sometimes caused chat badges to not appear
+-   Fixed an issue that caused replies in threads to not appear
+-   Fixed an issue where replies in threads could not be selected
+-   Fixed an issue where switching the selected emote-set would not be detected
+-   Fixed an issue where the emote menu button did not appear on Kick
+-   Fixed an issue which sometimes caused old messages to not appear
+-   Sort emotes alphabetically with tab auto-completion on Kick
+-   Removed option to hide the React button on Twitch
+-   Added emote support for introduction & watch streak messages.
+-   Fixed an issue that caused suspicious user highlights to not persist
+-   Fixed an issue that caused returning users to not be highlighted
+-   Added an option to show raider highlights
+-   Added an option to show returning user highlights
+-   Fixed an issue that caused international names to not always display logins
+-   Fixed an issue that caused Twitch VODs to not load emotes
+-   Fixed an issue that caused emote names in emote cards to overflow
+-   Fixed an issue that caused certain words to not display in chat
+
 ### 3.0.16
 
 -   Added an option to select alternating background color for chat messages

diff --git a/package.json b/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.16",
+	"version": "3.1.0",
 	"dev_version": "1.0",
 	"scripts": {
 		"start": "NODE_ENV=dev yarn build:dev && NODE_ENV=dev vite --mode dev",
@@ -35,7 +35,7 @@
 		"vue": "^3.3.4"
 	},
 	"devDependencies": {
-		"@apollo/client": "^3.8.1",
+		"@apollo/client": "^3.9.1",
 		"@floating-ui/dom": "^1.5.1",
 		"@intlify/unplugin-vue-i18n": "^1.5.0",
 		"@trivago/prettier-plugin-sort-imports": "^4.2.0",

diff --git a/src/apollo/apollo.ts b/src/apollo/apollo.ts
@@ -1,13 +1,32 @@
-import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client/core";
+import { decodeJWT } from "@/common/Jwt";
+import { useConfig } from "@/composable/useSettings";
+import { ApolloClient, ApolloLink, InMemoryCache, createHttpLink } from "@apollo/client/core";
 
 export const httpLink = createHttpLink({
 	uri: import.meta.env.VITE_APP_API_GQL,
 	credentials: "include",
 });
 
+const token = useConfig<string>("app.7tv.token");
+const authLink = new ApolloLink((op, next) => {
+	const jwt = decodeJWT(token.value);
+	if (!jwt || jwt.exp * 1000 < Date.now()) {
+		token.value = "";
+		return next(op);
+	}
+	op.setContext({
+		headers: {
+			Authorization: `Bearer ${token.value}`,
+		},
+	});
+	return next(op);
+});
+
+const link = ApolloLink.from([authLink, httpLink]);
+
 const cache = new InMemoryCache();
 
 export const apolloClient = new ApolloClient({
-	link: httpLink,
+	link,
 	cache,
 });
diff --git a/src/app/chat/Badge.vue b/src/app/chat/Badge.vue
@@ -50,5 +50,7 @@ if (isApp(props.badge)) {
 .seventv-chat-badge {
 	display: inline-block;
 	vertical-align: baseline;
+	min-width: 1.8rem;
+	min-height: 1.8rem;
 }
 </style>
diff --git a/src/app/chat/ChatData.vue b/src/app/chat/ChatData.vue
@@ -112,16 +112,28 @@ function onEmoteSetUpdated(ev: WorkletEvent<"emote_set_updated">) {
 
 		delete emotes.active[o.name];
 		emotes.active[n.name] = aer.value;
+
+		if (emotes.sets[id]) {
+			const i = set.emotes.findIndex((e) => e.id === n.id);
+			if (i !== -1) set.emotes.splice(i, 1, aer.value);
+		}
 	}
 
 	// Handle removed emotes
 	for (let i = 0; i < emotes_removed.length; i++) {
 		const emote = emotes_removed[i];
-		const e = emotes.active[emote.name];
+		const e = emotes.find((ae) => ae.id === emote.id, true);
 		if (!e || e.id !== emote.id) continue;
 
 		emotes_removed[i].data = e.data;
-		delete emotes.active[emote.name];
+		emotes_removed[i].name = e.name;
+
+		delete emotes.active[e.name];
+		if (emotes.sets[id]) {
+			const i = set.emotes.findIndex((e) => e.id === emote.id);
+			if (i !== -1) set.emotes.splice(i, 1);
+		}
+
 		if (emotes.sets[id]) {
 			const i = set.emotes.findIndex((e) => e.id === emote.id);
 			if (i !== -1) set.emotes.splice(i, 1);

diff --git a/src/app/chat/Emote.vue b/src/app/chat/Emote.vue
@@ -1,5 +1,13 @@
 <template>
-	<div ref="boxRef" class="seventv-emote-box">
+	<div
+		ref="boxRef"
+		class="seventv-emote-box"
+		:class="{ 'with-border': withBorder }"
+		:ratio="determineRatio(emote)"
+		@mouseenter="onShowTooltip"
+		@mouseleave="hide()"
+		@click="(ev: MouseEvent) => [onShowEmoteCard(ev), emit('emote-click', ev, emote)]"
+	>
 		<img
 			v-if="!emote.unicode && emote.data && emote.data.host"
 			class="seventv-chat-emote"
@@ -9,9 +17,6 @@
 			loading="lazy"
 			decoding="async"
 			@load="onImageLoad"
-			@mouseenter="onShowTooltip"
-			@mouseleave="hide()"
-			@click="(ev: MouseEvent) => [onShowEmoteCard(ev), emit('emote-click', ev, emote)]"
 		/>
 		<SingleEmoji
 			v-else-if="!unload && emote.id"
@@ -53,8 +58,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { onBeforeUnmount, ref } from "vue";
 import { imageHostToSrcset } from "@/common/Image";
+import { determineRatio } from "@/common/Image";
 import { useConfig } from "@/composable/useSettings";
 import { useTooltip } from "@/composable/useTooltip";
 import EmoteCard from "@/site/global/components/EmoteCard.vue";
@@ -71,8 +77,9 @@ const props = withDefaults(
 		overlaid?: Record<string, SevenTV.ActiveEmote> | undefined;
 		unload?: boolean;
 		scale?: number;
+		withBorder?: boolean;
 	}>(),
-	{ unload: false, scale: 1 },
+	{ unload: false, scale: 1, withBorder: false },
 );
 
 const emit = defineEmits<{
@@ -135,6 +142,8 @@ const { show, hide } = useTooltip(EmoteTooltip, {
 	width: baseWidth,
 	height: baseHeight,
 });
+
+onBeforeUnmount(hide);
 </script>
 
 <style scoped lang="scss">
@@ -143,6 +152,41 @@ const { show, hide } = useTooltip(EmoteTooltip, {
 	overflow: clip;
 }
 
+.with-border {
+	background: hsla(0deg, 0%, 50%, 6%);
+	border-radius: 0.25rem;
+	height: 4em;
+	margin: 0.25em;
+	cursor: pointer;
+
+	&:hover {
+		background: hsla(0deg, 0%, 50%, 32%);
+	}
+
+	&[zero-width="true"] {
+		border: 0.1rem solid rgb(220, 170, 50);
+	}
+
+	// The extra width is to compensate for the spacing
+	// between the emotes so they tile correctly.
+
+	&[ratio="1"] {
+		width: 4em;
+	}
+
+	&[ratio="2"] {
+		width: calc(4em * 1.5 + 0.25em);
+	}
+
+	&[ratio="3"] {
+		width: calc(4em * 2 + 0.5em);
+	}
+
+	&[ratio="4"] {
+		width: calc(4em * 3 + 1em);
+	}
+}
+
 svg.seventv-emoji {
 	width: 2rem;
 	height: 2rem;