Thumbnail avatars can be disabled

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

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">

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" />

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'
 	}
 ];
 

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",

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(