Improvements to channel author avatars

materialious/src/lib/components/AuthorAvatar.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { proxyGoogleImage } from '$lib/images';
+	import { avatarFromChannelId } from '$lib/thumbnail';
+	import { mergeAttrs } from 'melt';
+	import { Avatar } from 'melt/builders';
+	import { onMount } from 'svelte';
+
+	let { author, authorId }: { author: string; authorId: string } = $props();
+
+	let avatarSrc = $state('');
+	const avatar = new Avatar({
+		src: () => avatarSrc
+	});
+
+	onMount(() => {
+		avatarFromChannelId(authorId).then((src) => {
+			if (src) avatarSrc = proxyGoogleImage(src);
+		});
+	});
+</script>
+
+<img class="circle small" {...avatar.image} alt="Channel profile" />
+<button
+	class="secondary-container"
+	{...mergeAttrs(avatar.fallback, {
+		style: 'text-transform: uppercase;border-radius: 2.5rem !important;'
+	})}>{author[0]}</button
+>

materialious/src/lib/components/thumbnail/VideoThumbnail.svelte

@@ -19,8 +19,7 @@
 	import { queueGetWatchHistory } from '$lib/api/historyPool';
 	import { page } from '$app/state';
 	import { getDeArrow, getThumbnailDeArrow } from '$lib/api/dearrow';
-	import { avatarFromChannelId } from '$lib/thumbnail';
-	import { mergeAttrs } from 'melt';
+	import AuthorAvatar from '../AuthorAvatar.svelte';
 
 	interface Props {
 		video: VideoBase | Video | Notification | PlaylistPageVideo | VideoWatchHistory;
@@ -81,11 +80,6 @@
 		}
 	});
 
-	let authorAvatarSrc = $state('');
-	const authorAvatar = new Avatar({
-		src: () => authorAvatarSrc
-	});
-
 	let startedSideways = sideways === true;
 	function disableSideways() {
 		if (!startedSideways) return;
@@ -96,12 +90,6 @@
 	}
 
 	onMount(async () => {
-		if ('authorId' in video) {
-			avatarFromChannelId(video.authorId).then((url) => {
-				if (url) authorAvatarSrc = url;
-			});
-		}
-
 		// Check if sideways should be enabled or disabled.
 		disableSideways();
 
@@ -194,14 +182,8 @@
 			</a>
 
 			<nav>
-				{#if !sideways}
-					<img class="circle small" {...authorAvatar.image} alt="Channel profile" />
-					<button
-						class="secondary-container"
-						{...mergeAttrs(authorAvatar.fallback, {
-							style: 'text-transform: uppercase;border-radius: 2.5rem !important;'
-						})}>{video.author[0]}</button
-					>
+				{#if !sideways && 'authorId' in video}
+					<AuthorAvatar author={video.author} authorId={video.authorId} />
 				{/if}
 				<div>
 					{#if 'authorId' in video && video.authorId}

materialious/src/routes/(app)/channel/[slug]/+page.svelte

@@ -86,7 +86,7 @@
 	}
 
 	const banner = new Avatar({
-		src: proxyGoogleImage($channelCacheStore[page.params.slug].channel.authorBanners[0].url)
+		src: proxyGoogleImage($channelCacheStore[page.params.slug].channel.authorBanners[0]?.url ?? '')
 	});
 </script>
 

materialious/src/routes/(app)/subscriptions/manage/+page.svelte

@@ -4,6 +4,7 @@
 	import Fuse from 'fuse.js';
 	import { _ } from '$lib/i18n';
 	import NoResults from '$lib/components/NoResults.svelte';
+	import AuthorAvatar from '$lib/components/AuthorAvatar.svelte';
 
 	let { data } = $props();
 
@@ -49,6 +50,8 @@
 		{#each subscriptions as sub (sub.authorId)}
 			<article>
 				<nav>
+					<AuthorAvatar author={sub.author} authorId={sub.authorId} />
+
 					<a href={resolve(`/channel/[authorId]`, { authorId: sub.authorId })}
 						><h6>
 							{sub.author}