Fix: missing avatar

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.3.04",
+	"version": "0.3.05",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",

src/lib/components/Browse/Sections/ItemCarousel.svelte

@@ -5,6 +5,7 @@
 	import { category_list } from '$lib/stores/channelStore'
 	import { getNumberInThousands } from '$lib/utils'
 	import { onMount } from 'svelte'
+	import Avatar from '$lib/components/Global/Avatar.svelte'
 
 	export let channel: any = {}
 
@@ -67,7 +68,7 @@
 			<div class="flex flex-row items-center gap-2">
 				<div class="avatar">
 					<div class="w-14 mask {channel?.planTier > 0 ? 'mask-hexagon' : 'mask-squircle'}">
-						<img class="w-14" loading="lazy" src={channel.avatar} alt="user avatar" />
+						<Avatar avatar={channel.avatar} username={channel.username} className="w-14" />
 					</div>
 				</div>
 				<div class="w-4/5 flex gap-1">

src/lib/components/Browse/Sections/ItemChannel.svelte

@@ -4,6 +4,7 @@
 	import IconDrawerVerification from '$lib/assets/icons/drawer/IconDrawerVerification.svelte'
 	import { category_list } from '$lib/stores/channelStore'
 	import { getNumberInThousands } from '$lib/utils'
+	import Avatar from '$lib/components/Global/Avatar.svelte'
 
 	export let channel: any = {}
 
@@ -62,7 +63,7 @@
 	<div class="flex flex-row gap-2 max-w-[25rem]">
 		<div class="avatar">
 			<div class="w-12 mask {channel?.planTier > 0 ? 'mask-hexagon' : 'mask-squircle'}">
-				<img class="w-12" loading="lazy" src={channel.avatar} alt="user avatar" />
+				<Avatar avatar={channel.avatar} username={channel.username} className="w-12" />
 			</div>
 		</div>
 		<div class="flex items-center gap-1">

src/lib/components/Browse/Sections/ItemTable.svelte

@@ -5,6 +5,7 @@
 	import { category_list } from '$lib/stores/channelStore'
 	import IconDrawerVerification from '$lib/assets/icons/drawer/IconDrawerVerification.svelte'
 	import { getNumberInThousands } from '$lib/utils'
+	import Avatar from '$lib/components/Global/Avatar.svelte'
 	export let channel: any = {}
 </script>
 
@@ -15,7 +16,7 @@
 		<div class="flex items-center space-x-2 pl-3">
 			<div class="avatar">
 				<div class="w-12 mask {channel.planTier > 0 ? 'mask-hexagon' : 'mask-squircle'}">
-					<img class="w-12" loading="lazy" src={channel.avatar} alt="user avatar" />
+					<Avatar avatar={channel.avatar} username={channel.username} className="w-12" />
 				</div>
 			</div>
 			<div>

src/lib/components/Browse/Sections/ItemUser.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import IconDrawerVerification from '$lib/assets/icons/drawer/IconDrawerVerification.svelte'
+	import Avatar from '$lib/components/Global/Avatar.svelte'
 	import { category_list } from '$lib/stores/channelStore'
 
 	export let user: any = {}
@@ -9,7 +10,7 @@
 	<div class="text-center space-y-3 w-[200px]">
 		<div class="avatar">
 			<div class="w-36 mask {user?.planTier > 0 ? 'mask-hexagon' : 'mask-squircle'}">
-				<img class="w-36" loading="lazy" src={user.avatar} alt="user avatar" />
+				<Avatar avatar={user.avatar} username={user.username} className="w-36" />
 			</div>
 		</div>
 		<div class="tooltip w-full flex gap-1 justify-center" data-tip="@{user.username}">

src/lib/components/Channel/Chat/DropdownViewChannel.svelte

@@ -10,6 +10,7 @@
 	import { createEffect } from '$lib/utils'
 	import IconDrawerVerification from '$lib/assets/icons/drawer/IconDrawerVerification.svelte'
 	import IconShare from '$lib/assets/icons/channel/IconShare.svelte'
+	import Avatar from '$lib/components/Global/Avatar.svelte'
 
 	export let channel: any = undefined,
 		showEditChannelDrawer: boolean = false
@@ -156,7 +157,7 @@
 				<div class="flex flex-wrap gap-2">
 					<div class="avatar">
 						<div class="w-12 mask {channel.planTier > 0 ? 'mask-hexagon' : 'mask-squircle'}">
-							<img class="w-12" loading="lazy" src={channel?.avatar} alt="user avatar" />
+							<Avatar avatar={channel.avatar} username={channel.username} className="w-12" />
 						</div>
 					</div>
 					<div>

src/lib/components/Channel/Stream/VideoItem.svelte

@@ -44,7 +44,8 @@
 		formattedTime: string = '00:00:00',
 		isHoverVideo: boolean = false,
 		iframeUrl: string = '',
-		isListenBtnShown: boolean = true
+		isListenBtnShown: boolean = true,
+		imgElement: HTMLImageElement
 
 	// WHIP/WHEP variables that determine if stream is coming in
 	$: isScreenLive = false
@@ -415,9 +416,12 @@
 	on:click={unmuteTracks}>
 	<div class="bg-base-200 relative w-full h-full rounded-md">
 		<img
+			bind:this={imgElement}
 			loading="lazy"
 			src={video.avatar}
 			alt="user avatar"
+			on:error={() =>
+				(imgElement.src = `https://ui-avatars.com/api/?name=${video.username}&background=random`)}
 			class="absolute inset-0 w-24 md:w-24 mask {video.planTier > 0
 				? 'mask-hexagon'
 				: 'mask-squircle'} object-cover m-auto" />

src/lib/components/Global/Avatar.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	export let avatar, username, className
+	let imgElement: HTMLImageElement
+</script>
+
+<img
+	bind:this={imgElement}
+	class={className}
+	loading="lazy"
+	src={avatar}
+	alt="user avatar"
+	on:error={() =>
+		(imgElement.src = `https://ui-avatars.com/api/?name=${username}&background=random`)} />

src/lib/components/Global/DrawerMain.svelte

@@ -33,6 +33,7 @@
 	import IconSocialTikTok from '$lib/assets/icons/social/IconSocialTikTok.svelte'
 	import IconSocialTwitch from '$lib/assets/icons/social/IconSocialTwitch.svelte'
 	import IconDrawerMerch from '$lib/assets/icons/drawer/IconDrawerMerch.svelte'
+	import Avatar from '$lib/components/Global/Avatar.svelte'
 
 	export var nav_drawer: HTMLInputElement
 
@@ -99,7 +100,10 @@
 									0
 										? 'mask-hexagon'
 										: 'mask-squircle'}">
-									<img class="w-24" loading="lazy" src={currentUser.avatar} alt="user avatar" />
+									<Avatar
+										avatar={currentUser.avatar}
+										username={currentUser.username}
+										className="w-24" />
 								</div>
 							</div>
 						</div>

src/lib/components/Profile/Elements/FollowItem.svelte

@@ -3,6 +3,7 @@
 	import { del, get, put } from '$lib/api'
 	import IconMore from '$lib/assets/icons/IconMore.svelte'
 	import IconDrawerVerification from '$lib/assets/icons/drawer/IconDrawerVerification.svelte'
+	import Avatar from '$lib/components/Global/Avatar.svelte'
 	import { follower_count, following_count } from '$lib/stores/profileStore'
 	export let followItem: any
 
@@ -40,7 +41,7 @@
 	<div class="flex">
 		<div class="avatar">
 			<div class="w-16 mask {followItem.planTier > 0 ? 'mask-hexagon' : 'mask-squircle'}">
-				<img class="w-16" loading="lazy" src={followItem.avatar} alt="user avatar" />
+				<Avatar avatar={followItem.avatar} username={followItem.username} className="w-16" />
 			</div>
 		</div>
 

src/lib/components/Profile/TopSection.svelte

@@ -10,6 +10,7 @@
 	import DialogSponsor from '../Channel/Chat/DialogSponsor.svelte'
 	import { is_sponsor_dialog_open } from '$lib/stores/channelStore'
 	import IconChatSponsor from '$lib/assets/icons/chat/IconChatSponsor.svelte'
+	import Avatar from '$lib/components/Global/Avatar.svelte'
 
 	export let profile: any,
 		showDrawer = false,
@@ -66,7 +67,7 @@
 							class="mask {profile.planTier > 0
 								? 'mask-hexagon'
 								: 'mask-squircle'} h-auto align-middle max-w-150-px">
-							<img loading="lazy" src={profile.avatar} alt="user avatar" class="!w-32 !h-32" />
+							<Avatar avatar={profile.avatar} username={profile.username} className="!w-32 !h-32" />
 						</div>
 					</div>
 				</div>

src/lib/components/Search/ItemSearchChannel.svelte

@@ -3,6 +3,7 @@
 	import IconDrawerVerification from '$lib/assets/icons/drawer/IconDrawerVerification.svelte'
 	import { category_list } from '$lib/stores/channelStore'
 	import { timeSince } from '$lib/utils'
+	import Avatar from '$lib/components/Global/Avatar.svelte'
 
 	export let item: any
 </script>
@@ -53,7 +54,7 @@
 			<div class="flex items-center">
 				<div class="avatar">
 					<div class="w-12 mask {item?.planTier > 0 ? 'mask-hexagon' : 'mask-squircle'}">
-						<img class="w-12" loading="lazy" src={item.avatar} alt="user avatar" />
+						<Avatar avatar={item.avatar} username={item.username} className="w-12" />
 					</div>
 				</div>
 				<a class="ml-2 link link-hover flex gap-1" href="/{item.username}"

src/lib/components/Search/ItemSearchUser.svelte

@@ -2,6 +2,7 @@
 	import IconDrawerVerification from '$lib/assets/icons/drawer/IconDrawerVerification.svelte'
 	import { category_list } from '$lib/stores/channelStore'
 	import Favicon from '$lib/components/Profile/Favicon.svelte'
+	import Avatar from '$lib/components/Global/Avatar.svelte'
 
 	export let item: any
 </script>
@@ -11,7 +12,7 @@
 		<div class="max-w-md">
 			<div class="avatar">
 				<div class="w-32 mask {item?.planTier > 0 ? 'mask-hexagon' : 'mask-squircle'}">
-					<img class="w-32" loading="lazy" src={item.avatar} alt="user avatar" />
+					<Avatar avatar={item.avatar} username={item.username} className="w-32" />
 				</div>
 			</div>
 		</div>