site/kick.com: authentication, emotes & cosmetics

.env.dev

@@ -1,4 +1,5 @@
 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_REST_OLD="http://localhost:3100/v2"

.env.production

@@ -1,7 +1,9 @@
 NODE_ENV=production
+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_REST_OLD="https://7tv.io/v2"
 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"
+

.eslintrc.cjs

@@ -29,6 +29,7 @@ module.exports = {
 		"vue/valid-template-root": "off",
 		"vue/multi-word-component-names": "off",
 		"vue/require-default-prop": "off",
+		"vue/no-dupe-keys": "off",
 		"@typescript-eslint/no-non-null-assertion": "off",
 	},
 	globals: {

CHANGELOG-nightly.md

@@ -3,6 +3,11 @@
 **The changes listed here are not assigned to an official release**.
 
 -   Added new feature: Paint Tool ([subscribers only](https://7tv.app/store))
+-   Added support for more features on [kick.com](https://kick.com/)
+    -   Authentication / Channel Linking
+    -   Channel Emotes
+    -   Emote Menu
+    -   7TV Paints & Badges
 -   Fixed an issue which caused mod icons to be invisible
 -   Fixed an issue which sometimes caused channel emote sets to disappear
 -   Fixed an issue which caused stylesheets to be duplicated when running in hosted mode

locale/en_US.yaml

@@ -141,3 +141,11 @@ onboarding:
     button_done: Done
     button_join: Join
     button_review: Review
+
+site:
+    kick:
+        connect_button_channel: Connect {CHANNEL}
+        connect_button_site: Connect 7TV...
+        connect_popup_idle: Are you sure you'd like to link your current kick.com account ({ACTOR}) with 7TV?
+        connect_popup_connecting: Please wait for up to 10 seconds...
+        connect_popup_done: Your channel has been successfully connected to 7TV! Use the 7tv.app website to start adding emotes

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.0.8",
-	"dev_version": "3.1",
+	"dev_version": "3.31",
 	"scripts": {
 		"start": "NODE_ENV=dev yarn build:dev && NODE_ENV=dev vite --mode dev",
 		"build:section:app": "vite build --config vite.config.ts",
@@ -29,26 +29,26 @@
 		"script:compile-emoji": "tsc -p script/script.tsconfig.json --outDir dist/ && node dist/compile-emojis.js"
 	},
 	"dependencies": {
-		"vue": "^3.3.2"
+		"vue": "^3.3.4"
 	},
 	"devDependencies": {
 		"@apollo/client": "^3.7.14",
 		"@floating-ui/dom": "^1.2.8",
-		"@intlify/unplugin-vue-i18n": "^0.10.0",
+		"@intlify/unplugin-vue-i18n": "^0.11.0",
 		"@trivago/prettier-plugin-sort-imports": "^4.1.1",
-		"@types/chrome": "^0.0.236",
+		"@types/chrome": "^0.0.237",
 		"@types/dompurify": "^3.0.2",
 		"@types/fs-extra": "^11.0.1",
 		"@types/marked": "^5.0.0",
-		"@types/node": "^20.2.1",
+		"@types/node": "^20.2.5",
 		"@types/sharedworker": "^0.0.96",
 		"@types/ua-parser-js": "^0.7.36",
 		"@types/uuid": "^9.0.1",
-		"@typescript-eslint/eslint-plugin": "^5.59.5",
-		"@typescript-eslint/parser": "^5.59.5",
+		"@typescript-eslint/eslint-plugin": "^5.59.7",
+		"@typescript-eslint/parser": "^5.59.7",
 		"@vitejs/plugin-vue": "^4.2.3",
-		"@vue/apollo-composable": "^4.0.0-beta.4",
-		"@vue/compiler-sfc": "^3.3.2",
+		"@vue/apollo-composable": "^4.0.0-beta.5",
+		"@vue/compiler-sfc": "^3.3.4",
 		"@vue/eslint-config-prettier": "^7.1.0",
 		"@vue/eslint-config-typescript": "^11.0.3",
 		"@vueuse/core": "^10.1.2",
@@ -58,33 +58,33 @@
 		"date-fns": "^2.30.0",
 		"dexie": "^3.2.3",
 		"dompurify": "^3.0.3",
-		"eslint": "^8.40.0",
+		"eslint": "^8.41.0",
 		"eslint-plugin-prettier": "^4.2.1",
-		"eslint-plugin-vue": "^9.13.0",
+		"eslint-plugin-vue": "^9.14.1",
 		"graphql": "^16.6.0",
-		"marked": "^5.0.2",
+		"marked": "^5.0.3",
 		"nanoid": "^4.0.2",
 		"npm-run-all": "^4.1.5",
 		"pinia": "^2.1.3",
 		"postcss-html": "^1.5.0",
 		"postcss-scss": "^4.0.6",
 		"prettier": "^2.8.8",
 		"sass": "^1.62.1",
-		"stylelint": "^15.6.1",
+		"stylelint": "^15.6.2",
 		"stylelint-config-html": "^1.1.0",
 		"stylelint-config-standard": "^33.0.0",
 		"stylelint-config-standard-scss": "^9.0.0",
 		"stylelint-config-standard-vue": "^1.0.0",
 		"stylelint-scss": "^5.0.0",
-		"terser": "^5.17.3",
+		"terser": "^5.17.6",
 		"tldts": "^6.0.5",
 		"typescript": "^5.0.4",
 		"ua-parser-js": "^1.0.35",
 		"uuid": "^9.0.0",
-		"vite": "^4.3.6",
+		"vite": "^4.3.9",
 		"vite-plugin-chrome-extension": "^0.0.7",
 		"vue-i18n": "9.2.2",
-		"vue-router": "4.2.0",
+		"vue-router": "4.2.1",
 		"vue-tsc": "^1.6.5",
 		"webextension-polyfill-ts": "^0.26.0"
 	}

src/app/chat/Badge.vue

@@ -49,8 +49,6 @@ if (isApp(props.badge)) {
 <style scoped lang="scss">
 .seventv-chat-badge {
 	display: inline-block;
-	height: 1.8rem;
-	width: 1.8rem;
 	vertical-align: baseline;
 }
 </style>

src/site/twitch.tv/modules/chat/ChatData.vue → src/app/chat/ChatData.vue

@@ -1,6 +1,7 @@
 <template />
 <script setup lang="ts">
 import { onUnmounted, ref, toRef } from "vue";
+import { useStore } from "@/store/main";
 import { ChatMessage } from "@/common/chat/ChatMessage";
 import { db } from "@/db/idb";
 import { useChannelContext } from "@/composable/channel/useChannelContext";
@@ -16,6 +17,7 @@ const ctx = useChannelContext();
 const channelID = toRef(ctx, "id");
 const messages = useChatMessages(ctx);
 const emotes = useChatEmotes(ctx);
+const { providers } = useStore();
 
 // query the channel's emote set bindings
 const channelSets = useLiveQuery(
@@ -49,6 +51,7 @@ useLiveQuery(
 		if (!sets) return;
 
 		for (const set of sets) {
+			if (!set.provider || !providers.has(set.provider)) continue;
 			const provider = (set.provider ?? "UNKNOWN") as SevenTV.Provider;
 
 			if (!emotes.providers[provider]) emotes.providers[provider] = {};
@@ -183,11 +186,11 @@ function onActiveSetUpdated(
 }
 
 function onTwitchEmoteSetData(ev: WorkletEvent<"twitch_emote_set_data">) {
-	if (!emotes.providers.TWITCH) {
-		emotes.providers.TWITCH = {};
+	if (!emotes.providers.PLATFORM) {
+		emotes.providers.PLATFORM = {};
 	}
 
-	emotes.providers.TWITCH[ev.detail.id] = ev.detail;
+	emotes.providers.PLATFORM[ev.detail.id] = ev.detail;
 }
 
 target.addEventListener("emote_set_updated", onEmoteSetUpdated);

src/app/chat/EmoteTooltip.vue

@@ -139,25 +139,25 @@ if (props.emote.data?.owner?.style?.color) {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	max-width: 21em;
-	padding: 0.5em 1.15em;
+	max-width: 21rem;
+	padding: 0.5rem 1.15rem;
 }
 
 .seventv-tooltip-compact {
 	background-color: rgba(0, 0, 0, 0.65%);
 
 	@at-root .seventv-transparent & {
-		backdrop-filter: blur(0.25em);
+		backdrop-filter: blur(0.25rem);
 	}
 
-	border-radius: 0.33em;
+	border-radius: 0.33rem;
 	padding: 0.25em;
 }
 
 .emote-name {
 	font-size: 1.5rem;
 	font-weight: 300;
-	max-width: 21em;
+	max-width: 21rem;
 	word-break: break-all;
 	float: left;
 }