From 0cb7eccb3cf1689577a537609b6b905831aa827e Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Thu, 23 Jan 2025 18:06:10 +1300
Subject: [PATCH] Thumbnail avatars can be disabled

---
 docs/SETTINGS.md                          |  6 ++++++
 materialious/src/lib/Settings.svelte      | 18 ++++++++++++++++++
 materialious/src/lib/Thumbnail.svelte     |  5 ++++-
 materialious/src/lib/externalSettings.ts  | 10 ++++++++--
 materialious/src/lib/i18n/locales/en.json |  1 +
 materialious/src/lib/store.ts             |  1 +
 6 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/docs/SETTINGS.md b/docs/SETTINGS.md
index 83942048..adf14f93 100644
--- a/docs/SETTINGS.md
+++ b/docs/SETTINGS.md
@@ -18,6 +18,7 @@ Materialious allows you to customize various settings by overwriting the default
       + [Auto expand comments](#auto-expand-comments)
       + [Auto expand description](#auto-expand-desc)
       + [Low bandwidth mode](#low-bandwidth-mode)
+      + [Display thumbnail avatars](#)
    * [Player](#player)
       + [Mini player](#mini-player)
       + [Autoplay video](#autoplay-video)
@@ -137,6 +138,11 @@ Avoids loading images.
 "lowBandwidthMode": true
 ```
 
+### Enable thumbnail avatars
+```json
+"displayThumbnailAvatars": true
+```
+
 ## Player
 
 ### Mini player
diff --git a/materialious/src/lib/Settings.svelte b/materialious/src/lib/Settings.svelte
index 0af63c00..6035650c 100644
--- a/materialious/src/lib/Settings.svelte
+++ b/materialious/src/lib/Settings.svelte
@@ -20,6 +20,7 @@
 		interfaceAmoledTheme,
 		interfaceAutoExpandComments,
 		interfaceAutoExpandDesc,
+		interfaceDisplayThumbnailAvatars,
 		interfaceForceCase,
 		interfaceLowBandwidthMode,
 		interfacePreviewVideoOnHoverStore,
@@ -236,6 +237,23 @@
 				</div>
 			{/if}
 
+			<div class="field no-margin">
+				<nav class="no-padding">
+					<div class="max">
+						<div>{$_('layout.displayThumbnailAvatars')}</div>
+					</div>
+					<label class="switch">
+						<input
+							type="checkbox"
+							bind:checked={$interfaceDisplayThumbnailAvatars}
+							on:click={() =>
+								interfaceDisplayThumbnailAvatars.set(!$interfaceDisplayThumbnailAvatars)}
+						/>
+						<span></span>
+					</label>
+				</nav>
+			</div>
+
 			<div class="field no-margin">
 				<nav class="no-padding">
 					<div class="max">
diff --git a/materialious/src/lib/Thumbnail.svelte b/materialious/src/lib/Thumbnail.svelte
index 5bab9bcc..a1ccee42 100644
--- a/materialious/src/lib/Thumbnail.svelte
+++ b/materialious/src/lib/Thumbnail.svelte
@@ -18,6 +18,7 @@
 		authStore,
 		deArrowEnabledStore,
 		deArrowTitlesOnly,
+		interfaceDisplayThumbnailAvatars,
 		interfaceLowBandwidthMode,
 		interfacePreviewVideoOnHoverStore,
 		playerProxyVideosStore,
@@ -86,6 +87,8 @@
 	}
 
 	async function loadAuthor() {
+		if (!get(interfaceDisplayThumbnailAvatars)) return;
+
 		try {
 			const channel = await getChannel(video.authorId, { priority: 'low' });
 			const img = new Image();
@@ -370,7 +373,7 @@
 		</div>
 
 		<div class="thumbnail-details video-title">
-			{#if !sideways && !$interfaceLowBandwidthMode}
+			{#if !sideways && !$interfaceLowBandwidthMode && $interfaceDisplayThumbnailAvatars}
 				<div style="margin-right: 1em;">
 					{#if authorImg}
 						<img src={authorImg.src} alt="Author" class="circle small" />
diff --git a/materialious/src/lib/externalSettings.ts b/materialious/src/lib/externalSettings.ts
index 34af2c7e..ea9b7c26 100644
--- a/materialious/src/lib/externalSettings.ts
+++ b/materialious/src/lib/externalSettings.ts
@@ -8,6 +8,7 @@ import {
 	interfaceAmoledTheme,
 	interfaceAutoExpandComments,
 	interfaceAutoExpandDesc,
+	interfaceDisplayThumbnailAvatars,
 	interfaceForceCase,
 	interfaceLowBandwidthMode,
 	interfacePreviewVideoOnHoverStore,
@@ -33,9 +34,9 @@ import {
 	synciousStore,
 	themeColorStore
 } from '$lib/store';
-import { get } from 'svelte/store';
+import { get, type Writable } from 'svelte/store';
 
-const persistedStores = [
+const persistedStores: { name: string, store: Writable<any>, type: 'string' | 'boolean' | 'array'; }[] = [
 	{
 		name: 'returnYTDislikesInstance',
 		store: returnYTDislikesInstanceStore,
@@ -195,6 +196,11 @@ const persistedStores = [
 		name: 'lowBandwidthMode',
 		store: interfaceLowBandwidthMode,
 		type: 'boolean'
+	},
+	{
+		name: 'displayThumbnailAvatars',
+		store: interfaceDisplayThumbnailAvatars,
+		type: 'boolean'
 	}
 ];
 
diff --git a/materialious/src/lib/i18n/locales/en.json b/materialious/src/lib/i18n/locales/en.json
index 9b2cb6ea..6825c2ee 100644
--- a/materialious/src/lib/i18n/locales/en.json
+++ b/materialious/src/lib/i18n/locales/en.json
@@ -104,6 +104,7 @@
 		"logout": "Logout",
 		"customize": "Customize",
 		"lowBandwidthMode": "Low bandwidth mode",
+		"displayThumbnailAvatars": "Display channel avatars on thumbnail (Slow)",
 		"theme": {
 			"theme": "Theme",
 			"darkMode": "Dark mode",
diff --git a/materialious/src/lib/store.ts b/materialious/src/lib/store.ts
index 55ac14c7..d974f450 100644
--- a/materialious/src/lib/store.ts
+++ b/materialious/src/lib/store.ts
@@ -65,6 +65,7 @@ export const interfaceAutoExpandComments: Writable<boolean> = persisted('autoExp
 export const interfaceAutoExpandDesc: Writable<boolean> = persisted('autoExpandDesc', false);
 export const interfaceAmoledTheme = persisted('amoledTheme', false);
 export const interfaceLowBandwidthMode = persisted('lowBandwidthMode', false);
+export const interfaceDisplayThumbnailAvatars = persisted('disableThumbnailAvatars', false);
 
 export const sponsorBlockStore = persisted('sponsorBlock', true);
 export const sponsorBlockUrlStore: Writable<string | null | undefined> = persisted(