Dynamically fetch user avatars.

Author: CephalonCosmic

components/members/MemberCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="`w-2/3 md:w-1/3 lg:w-1/4 2xl:w-1/5 p-4 flex unity-button rounded-2xl border-[1px] m-0.5 ${isLive ? 'saturate-100' : 'saturate-80 dark:saturate-70'} ${isLive ? 'brightness-100' : 'brightness-90 dark:brightness-70'} transition-all hover:saturate-100 hover:brightness-[110%]`" :style="borderStyle" :title="member.id">
-    <img class="rounded-lg h-12" :src="`/img/creators/${member.id}.webp`" :alt="member.name">
+    <img class="rounded-lg h-12" :src="status == 'error' ? `/img/creators/${member.id}.webp` : avatar" :alt="member.name">
     <div class="px-4">
       <span :style="`color: ${faction.color}`" class="font-medium text-shadow-sm not-dark:brightness-80">{{ member.name }}</span>
       &nbsp;
@@ -22,12 +22,12 @@
 
   import type { Member } from "~/types/Member";
   import type { Factions } from "~/types/Factions";
+  import type { SocialsString } from "~/types/Socials";
 
   import SocialGlyph from "~/components/members/SocialGlyph.vue";
 
   import members from '~/assets/members.json';
   import factions from '~/assets/factions.json';
-  import type {SocialsString} from "~/types/Socials";
 
   const props = defineProps({
     id: String,
@@ -37,6 +37,11 @@
   const member = ref((members as Array<Member>).find(member => member.id == props.id)!);
   const faction = ref((factions as Factions)[member.value.faction])
 
+  const { status, data: fetch_avatar } = await useLazyFetch(`/api/fetch_avatar?id=${props.id}`);
+  const avatar = ref(fetch_avatar)
+
+  watch(fetch_avatar, newAvatar => avatar.value = newAvatar)
+
   //borderStyle: !!this.live ? `background: linear-gradient(var(--text-buttons), var(--text-buttons)) padding-box, linear-gradient(to right, var(--bg-live) 0%, ${faction.color} 70%) border-box; border-width: 1px; border-style: solid; border-color: transparent;` : `border-color: ${faction.color}`
   const borderStyle = ref(`border-color: ${faction.value.color};`)
 </script>

pages/index.vue

@@ -48,9 +48,7 @@ const members = ref(membersData.filter(a => !a.faction.startsWith('unity_team'))
 const { status, data: check_live } = await useLazyFetch('/api/check_live')
 const live = ref(check_live)
 
-watch(check_live, (newLive) => {
-  live.value = newLive
-})
+watch(check_live, newLive => live.value = newLive)
 
 function sortGroup(group, member) {
   switch (member.faction) {

server/api/check_live.ts

@@ -1,4 +1,3 @@
-import fs from 'fs';
 import TwitchAuth from '../utils/TwitchAuth';
 import TwitchRest from '../utils/TwitchRest';
 

server/api/fetch_avatar.ts

@@ -0,0 +1,26 @@
+import TwitchAuth from "~/server/utils/TwitchAuth";
+import TwitchRest from "~/server/utils/TwitchRest";
+
+const auth = new TwitchAuth()
+
+export default defineEventHandler(async event => {
+    const query = getQuery(event)
+
+    if (query['id'] == null) {
+        event.node.res.statusCode = 400
+        return "Invalid ID"
+    }
+
+    const url = `https://api.twitch.tv/helix/users?login=${query.id}`
+    const response = await TwitchRest.get(url);
+
+    if (!!response) {
+        if (response.data.length == 0) {
+            event.node.res.statusCode = 400
+            return `Twitch did not return anything for "${query.id}"`
+        }
+
+        event.node.res.statusCode = 200
+        return response.data[0].profile_image_url
+    }
+})