Merge pull request #1541 from Materialious/update/1.16.14

Update/1.16.14

materialious/android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "us.materialio.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 230
-        versionName "1.16.13"
+        versionCode 231
+        versionName "1.16.14"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

materialious/electron/materialious.metainfo.xml

@@ -72,7 +72,11 @@
   <releases>    
 
     
-    <release version="1.16.13" date="2026-3-07">
+    
+    <release version="1.16.14" date="2026-3-08">
+      <url>https://github.com/Materialious/Materialious/releases/tag/1.16.14</url>
+    </release>
+<release version="1.16.13" date="2026-3-07">
       <url>https://github.com/Materialious/Materialious/releases/tag/1.16.13</url>
     </release>
 <release version="1.16.12" date="2026-3-06">

materialious/electron/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "Materialious",
-	"version": "1.16.13",
+	"version": "1.16.14",
 	"description": "Modern material design for YouTube and Invidious.",
 	"author": {
 		"name": "Ward Pearce",

materialious/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "materialious",
-	"version": "1.16.13",
+	"version": "1.16.14",
 	"private": true,
 	"scripts": {
 		"dev": "npm run patch:github && vite dev",

materialious/src/lib/api/invidious/channel.ts

@@ -12,7 +12,7 @@ export async function getChannelInvidious(
 	const respJson = await resp.json();
 
 	if (resp.ok) {
-		associateAvatar(channelId, respJson.authorBanners);
+		await associateAvatar(channelId, respJson.authorThumbnails);
 	}
 
 	return respJson;

materialious/src/lib/api/invidious/video.ts

@@ -25,7 +25,7 @@ export async function getVideoInvidious(
 	const respJson = await resp.json();
 
 	if (resp.ok) {
-		associateAvatar(respJson.authorId, respJson.authorThumbnails);
+		await associateAvatar(respJson.authorId, respJson.authorThumbnails);
 	}
 
 	return respJson;

materialious/src/lib/api/youtubejs/channel.ts

@@ -24,9 +24,10 @@ export async function getChannelYTjs(channelId: string): Promise<ChannelPage> {
 		innerResults.header.content?.is(YTNodes.PageHeaderView)
 	) {
 		authorBanners = innerResults.header.content.banner?.image ?? [];
-		associateAvatar(channelId, authorBanners);
 	}
 
+	if (innerResults.metadata.avatar) await associateAvatar(channelId, innerResults.metadata.avatar);
+
 	const description = innerResults.metadata.description ?? '';
 
 	return {

materialious/src/lib/api/youtubejs/video.ts

@@ -151,7 +151,7 @@ export async function getVideoYTjs(videoId: string): Promise<VideoPlay> {
 		const channel = await innertube.getChannel(video.basic_info.channel_id);
 		authorThumbnails = channel.metadata.avatar as Image[];
 
-		associateAvatar(video.basic_info.channel_id, authorThumbnails);
+		await associateAvatar(video.basic_info.channel_id, authorThumbnails);
 	} else {
 		authorThumbnails = [];
 	}

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/lib/thumbnail.ts

@@ -2,24 +2,19 @@ import type { Image } from './api/model';
 import { localDb } from './dexie';
 import { getBestThumbnail } from './images';
 
-const updateDebounce: Record<string, ReturnType<typeof setTimeout>> = {};
 let isInitial = false;
 
 export async function associateAvatar(channelId: string, avatars: Image[]) {
 	if (avatars.length === 0) return;
 
-	if ('channelId' in updateDebounce) clearTimeout(updateDebounce[channelId]);
-
-	updateDebounce[channelId] = setTimeout(() => {
-		localDb.channelAvatars.put(
-			{
-				channelId: channelId,
-				avatarUrl: getBestThumbnail(avatars),
-				updated: new Date()
-			},
-			{ channelId: channelId }
-		);
-	}, 100);
+	await localDb.channelAvatars.put(
+		{
+			channelId: channelId,
+			avatarUrl: getBestThumbnail(avatars),
+			updated: new Date()
+		},
+		{ channelId: channelId }
+	);
 
 	if (isInitial) {
 		isInitial = true;

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}

update_versions.py

@@ -3,7 +3,7 @@ import os
 import re
 from datetime import datetime
 
-LATEST_VERSION = "1.16.13"
+LATEST_VERSION = "1.16.14"
 RELEASE_DATE = datetime.now().strftime("%Y-%-m-%d")  # Format: YYYY-M-D
 
 WORKING_DIR = os.path.join(os.path.dirname(os.path.realpath(__file__)), "materialious")