Animated avatar in user card (#1112)

CHANGELOG-nightly.md

@@ -1,3 +1,7 @@
+### 3.1.5.2000
+
+-   Added animated avatars to 7TV user card
+
 ### 3.1.5.1000
 
 -   Entitlements like paints and badges should now better reflect what the user has equipped

CHANGELOG.md

@@ -1,3 +1,10 @@
+### 3.1.5
+
+-   Entitlements like paints and badges should now better reflect what the user has equipped
+-   Fixed an issue with entitlements on accounts with multiple connections
+-   Fixed an issue with causing animated avatars to not work
+-   Added animated avatars to 7TV user card
+
 ### 3.1.4
 
 -   Fixed an issue with avatars not loading

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.5",
-	"dev_version": "1.0",
+	"dev_version": "2.0",
 	"scripts": {
 		"start": "cross-env NODE_ENV=dev yarn build:dev && cross-env NODE_ENV=dev vite --mode dev",
 		"build:section:app": "vite build --config vite.config.mts",

src/app/chat/UserCard.vue

@@ -16,7 +16,8 @@
 					</div>
 
 					<div class="seventv-user-card-avatar">
-						<img v-if="data.targetUser.avatarURL" :src="data.targetUser.avatarURL" />
+						<img v-if="avatarURL" :src="avatarURL" />
+						<img v-else-if="data.targetUser.avatarURL" :src="data.targetUser.avatarURL" />
 					</div>
 					<div class="seventv-user-card-usertag-container">
 						<a :href="getProfileURL()" target="_blank" class="seventv-user-card-usertag">
@@ -123,7 +124,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, reactive, ref, watch, watchEffect } from "vue";
+import { computed, nextTick, onMounted, reactive, ref, watch, watchEffect } from "vue";
 import { useI18n } from "vue-i18n";
 import { storeToRefs } from "pinia";
 import { useStore } from "@/store/main";
@@ -137,6 +138,7 @@ import { useChatMessages } from "@/composable/chat/useChatMessages";
 import { useChatTools } from "@/composable/chat/useChatTools";
 import { useApollo } from "@/composable/useApollo";
 import { useCosmetics } from "@/composable/useCosmetics";
+import { getModuleRef } from "@/composable/useModule";
 import { TwTypeChatBanStatus, TwTypeModComment } from "@/assets/gql/tw.gql";
 import {
 	twitchUserCardMessagesQuery,
@@ -230,6 +232,14 @@ const data = reactive({
 	},
 });
 
+const avatarURL = computed(() => {
+	if (!data.targetUser.username) return;
+	const aMod = getModuleRef("avatars").value;
+	if (!aMod?.instance?.avatars) return;
+	const avatar = aMod.instance.avatars[data.targetUser.username] as SevenTV.Cosmetic<"AVATAR"> | undefined;
+	return avatar?.data.user.avatar_url;
+});
+
 function getActiveTimeline(): Record<string, ChatMessage[]> {
 	return data.timelines[data.activeTab];
 }
@@ -674,8 +684,10 @@ main.seventv-user-card-container {
 			display: grid;
 			align-content: center;
 			justify-content: center;
-			padding: 0.5rem;
+			padding: 1rem;
 			grid-area: avatar;
+			height: 8rem;
+			width: 8rem;
 
 			img {
 				clip-path: circle(50% at 50% 50%);

src/site/twitch.tv/modules/avatars/AvatarsModule.vue

@@ -249,6 +249,8 @@ onUnmounted(() => {
 	}
 });
 
+defineExpose({ avatars });
+
 markAsReady();
 </script>
 

src/types/app.d.ts

@@ -311,7 +311,7 @@ declare namespace SevenTV {
 
 	interface CosmeticAvatar {
 		id: ObjectID;
-		user: Pick<User, "id" | "username" | "display_name" | "connections">;
+		user: Pick<User, "id" | "username" | "display_name" | "connections" | "avatar_url">;
 		host: ImageHost;
 	}