From 10d25271eea90f0f3805301d9e5b4b3242d9b03d Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Fri, 18 Oct 2024 11:40:14 +1300
Subject: [PATCH] Added low bandwidth mode

---
 docs/SETTINGS.md                              |  9 +++
 materialious/src/lib/ChannelThumbnail.svelte  | 30 +++++---
 materialious/src/lib/Comment.svelte           | 14 ++--
 materialious/src/lib/PlaylistThumbnail.svelte |  6 +-
 materialious/src/lib/Settings.svelte          | 59 +++++++++-----
 materialious/src/lib/Thumbnail.svelte         | 76 +++++++++++--------
 materialious/src/lib/externalSettings.ts      |  6 ++
 materialious/src/lib/i18n/locales/en.json     |  1 +
 materialious/src/lib/store.ts                 |  2 +-
 .../routes/(app)/channel/[slug]/+page.svelte  | 34 +++++----
 .../routes/(app)/watch/[slug]/+page.svelte    | 13 ++--
 11 files changed, 159 insertions(+), 91 deletions(-)

diff --git a/docs/SETTINGS.md b/docs/SETTINGS.md
index 891d02b6..83942048 100644
--- a/docs/SETTINGS.md
+++ b/docs/SETTINGS.md
@@ -17,6 +17,7 @@ Materialious allows you to customize various settings by overwriting the default
       + [Letter case for titles](#letter-case-for-titles)
       + [Auto expand comments](#auto-expand-comments)
       + [Auto expand description](#auto-expand-desc)
+      + [Low bandwidth mode](#low-bandwidth-mode)
    * [Player](#player)
       + [Mini player](#mini-player)
       + [Autoplay video](#autoplay-video)
@@ -128,6 +129,14 @@ Automatically expands video descriptions.
 "autoExpandDesc": true
 ```
 
+### Low bandwidth mode
+
+Avoids loading images.
+
+```json
+"lowBandwidthMode": true
+```
+
 ## Player
 
 ### Mini player
diff --git a/materialious/src/lib/ChannelThumbnail.svelte b/materialious/src/lib/ChannelThumbnail.svelte
index 10cc7a7b..d8fd59ec 100644
--- a/materialious/src/lib/ChannelThumbnail.svelte
+++ b/materialious/src/lib/ChannelThumbnail.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
+	import { get } from 'svelte/store';
 	import type { Channel } from './Api/model';
 	import { cleanNumber, getBestThumbnail, proxyGoogleImage, truncate } from './misc';
+	import { interfaceLowBandwidthMode } from './store';
 
 	export let channel: Channel;
 
 	let channelPfp: HTMLImageElement | undefined;
 
 	onMount(async () => {
+		if (get(interfaceLowBandwidthMode)) return;
+
 		const img = new Image();
 		img.src = proxyGoogleImage(getBestThumbnail(channel.authorThumbnails));
 
@@ -20,18 +24,20 @@
 
 <a href={`/channel/${channel.authorId}`} class="wave" style="min-width: 100%;min-height: 100%;">
 	<div class="padding">
-		<div class="center-align">
-			{#if !channelPfp}
-				<progress class="circle"></progress>
-			{:else}
-				<img
-					class="circle"
-					style="width: 90px;height: 90px;"
-					src={channelPfp.src}
-					alt={channel.author}
-				/>
-			{/if}
-		</div>
+		{#if !$interfaceLowBandwidthMode}
+			<div class="center-align">
+				{#if !channelPfp}
+					<progress class="circle"></progress>
+				{:else}
+					<img
+						class="circle"
+						style="width: 90px;height: 90px;"
+						src={channelPfp.src}
+						alt={channel.author}
+					/>
+				{/if}
+			</div>
+		{/if}
 		<h5 class="center-align">{truncate(channel.author, 14)}</h5>
 		<h6 style="margin-top: 0;" class="center-align grey-text medium-text">
 			{cleanNumber(channel.subCount)}
diff --git a/materialious/src/lib/Comment.svelte b/materialious/src/lib/Comment.svelte
index a99f3ec1..a17ea7be 100644
--- a/materialious/src/lib/Comment.svelte
+++ b/materialious/src/lib/Comment.svelte
@@ -3,6 +3,7 @@
 	import { getComments } from './Api';
 	import { type Comment, type Comments } from './Api/model';
 	import { getBestThumbnail, numberWithCommas, proxyGoogleImage } from './misc';
+	import { interfaceLowBandwidthMode } from './store';
 
 	export let comment: Comment;
 	export let videoId: string;
@@ -31,12 +32,13 @@
 </script>
 
 <div class="comment">
-	<img
-		class="circle small"
-		src={proxyGoogleImage(getBestThumbnail(comment.authorThumbnails))}
-		alt="comment profile"
-	/>
-
+	{#if !$interfaceLowBandwidthMode}
+		<img
+			class="circle small"
+			src={proxyGoogleImage(getBestThumbnail(comment.authorThumbnails))}
+			alt="comment profile"
+		/>
+	{/if}
 	<div>
 		<div class="row">
 			<a href={`/channel/${comment.authorId}`}>
diff --git a/materialious/src/lib/PlaylistThumbnail.svelte b/materialious/src/lib/PlaylistThumbnail.svelte
index b594d95f..1cf7395d 100644
--- a/materialious/src/lib/PlaylistThumbnail.svelte
+++ b/materialious/src/lib/PlaylistThumbnail.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
+	import { get } from 'svelte/store';
 	import type { Playlist } from './Api/model';
 	import { getBestThumbnail, letterCase, truncate } from './misc';
+	import { interfaceLowBandwidthMode } from './store';
 
 	export let playlist: Playlist;
 	export let disabled: boolean = false;
@@ -15,6 +17,8 @@
 	const playlistLink = `/playlist/${playlist.playlistId}`;
 
 	onMount(() => {
+		if (get(interfaceLowBandwidthMode)) return;
+
 		img = new Image();
 		if (playlist.videos.length > 0) {
 			img.src = getBestThumbnail(playlist.videos[0].videoThumbnails) || '';
@@ -42,7 +46,7 @@
 	style="width: 100%; overflow: hidden;min-height:100px;"
 	class="wave"
 >
-	{#if playlist.videoCount > 0}
+	{#if playlist.videoCount > 0 && !$interfaceLowBandwidthMode}
 		{#if loading}
 			<progress class="circle"></progress>
 		{:else if img.src !== ''}
diff --git a/materialious/src/lib/Settings.svelte b/materialious/src/lib/Settings.svelte
index 3ba0fe64..6c02ccb3 100644
--- a/materialious/src/lib/Settings.svelte
+++ b/materialious/src/lib/Settings.svelte
@@ -21,6 +21,7 @@
 		interfaceAutoExpandComments,
 		interfaceAutoExpandDesc,
 		interfaceForceCase,
+		interfaceLowBandwidthMode,
 		interfacePreviewVideoOnHoverStore,
 		interfaceRegionStore,
 		interfaceSearchSuggestionsStore,
@@ -177,6 +178,29 @@
 			</a>
 		</nav>
 		<div class="page padding" class:active={activeTab === 'interface'}>
+			{#if Capacitor.isNativePlatform()}
+				<form
+					on:submit|preventDefault={() => {
+						instanceStore.set(ensureNoTrailingSlash(invidiousInstance));
+						authStore.set(null);
+						goto('/', { replaceState: true });
+						ui('#dialog-settings');
+					}}
+				>
+					<nav>
+						<div class="field label border max">
+							<input bind:value={invidiousInstance} name="invidious-instance" type="text" />
+							<label for="invidious-instance">{$_('layout.instanceUrl')}</label>
+						</div>
+						<button class="square round">
+							<i>done</i>
+						</button>
+					</nav>
+				</form>
+			{/if}
+
+			<div class="margin"></div>
+
 			<button on:click={toggleDarkMode} class="no-margin">
 				{#if !$darkModeStore}
 					<i>dark_mode</i>
@@ -212,26 +236,21 @@
 				</div>
 			{/if}
 
-			{#if Capacitor.isNativePlatform()}
-				<form
-					on:submit|preventDefault={() => {
-						instanceStore.set(ensureNoTrailingSlash(invidiousInstance));
-						authStore.set(null);
-						goto('/', { replaceState: true });
-						ui('#dialog-settings');
-					}}
-				>
-					<nav>
-						<div class="field label border max">
-							<input bind:value={invidiousInstance} name="invidious-instance" type="text" />
-							<label for="invidious-instance">{$_('layout.instanceUrl')}</label>
-						</div>
-						<button class="square round">
-							<i>done</i>
-						</button>
-					</nav>
-				</form>
-			{/if}
+			<div class="field no-margin">
+				<nav class="no-padding">
+					<div class="max">
+						<div>{$_('layout.lowBandwidthMode')}</div>
+					</div>
+					<label class="switch">
+						<input
+							type="checkbox"
+							bind:checked={$interfaceLowBandwidthMode}
+							on:click={() => interfaceLowBandwidthMode.set(!$interfaceLowBandwidthMode)}
+						/>
+						<span></span>
+					</label>
+				</nav>
+			</div>
 
 			<div class="field no-margin">
 				<nav class="no-padding">
diff --git a/materialious/src/lib/Thumbnail.svelte b/materialious/src/lib/Thumbnail.svelte
index 75075432..4c408144 100644
--- a/materialious/src/lib/Thumbnail.svelte
+++ b/materialious/src/lib/Thumbnail.svelte
@@ -18,6 +18,7 @@
 		authStore,
 		deArrowEnabledStore,
 		deArrowTitlesOnly,
+		interfaceLowBandwidthMode,
 		interfacePreviewVideoOnHoverStore,
 		playerProxyVideosStore,
 		playerSavePlaybackPositionStore,
@@ -114,6 +115,8 @@
 			calcThumbnailPlaceholderHeight();
 		});
 
+		if (get(interfaceLowBandwidthMode)) return;
+
 		// Load author details in background.
 		if (!sideways) {
 			loadAuthor();
@@ -283,32 +286,37 @@
 				data-sveltekit-preload-data="off"
 				on:click={syncChangeVideo}
 			>
-				{#if loading}
-					<div class="secondary-container" style="width: 100%;height: {placeholderHeight}px;"></div>
-				{:else if loaded}
-					{#if showVideoPreview && videoPreview}
-						<div style="max-width: 100%; max-height: {imgHeight}px;">
-							<video
-								id="video-preview"
-								style="max-width: 100%; max-height: {imgHeight}px;"
-								autoplay
-								poster={img.src}
-								width="100%"
-								height="100%"
-								muted={videoPreviewMuted}
-								controls={false}
-								volume={videoPreviewVolume}
-								src={proxyVideos
-									? proxyVideoUrl(videoPreview.formatStreams[0].url)
-									: videoPreview.formatStreams[0].url}
-							>
-							</video>
-						</div>
+				{#if !$interfaceLowBandwidthMode}
+					{#if loading}
+						<div
+							class="secondary-container"
+							style="width: 100%;height: {placeholderHeight}px;"
+						></div>
+					{:else if loaded}
+						{#if showVideoPreview && videoPreview}
+							<div style="max-width: 100%; max-height: {imgHeight}px;">
+								<video
+									id="video-preview"
+									style="max-width: 100%; max-height: {imgHeight}px;"
+									autoplay
+									poster={img.src}
+									width="100%"
+									height="100%"
+									muted={videoPreviewMuted}
+									controls={false}
+									volume={videoPreviewVolume}
+									src={proxyVideos
+										? proxyVideoUrl(videoPreview.formatStreams[0].url)
+										: videoPreview.formatStreams[0].url}
+								>
+								</video>
+							</div>
+						{:else}
+							<img class="responsive" src={img.src} alt="Thumbnail for video" />
+						{/if}
 					{:else}
-						<img class="responsive" src={img.src} alt="Thumbnail for video" />
+						<p>{$_('thumbnail.failedToLoadImage')}</p>
 					{/if}
-				{:else}
-					<p>{$_('thumbnail.failedToLoadImage')}</p>
 				{/if}
 				{#if progress}
 					<progress
@@ -320,18 +328,24 @@
 				{/if}
 				{#if !('liveVideo' in video) || !video.liveVideo}
 					{#if video.lengthSeconds !== 0}
-						<div
-							class="absolute right bottom small-margin black white-text small-text thumbnail-corner"
-						>
-							&nbsp;{videoLength(video.lengthSeconds)}&nbsp;
-						</div>
+						{#if !$interfaceLowBandwidthMode}
+							<div
+								class="absolute right bottom small-margin black white-text small-text thumbnail-corner"
+							>
+								&nbsp;{videoLength(video.lengthSeconds)}&nbsp;
+							</div>
+						{:else}
+							<h3>{videoLength(video.lengthSeconds)}</h3>
+						{/if}
 					{/if}
-				{:else}
+				{:else if video.lengthSeconds !== 0}
 					<div
 						class="absolute right bottom small-margin red white-text small-text thumbnail-corner"
 					>
 						{$_('thumbnail.live')}
 					</div>
+				{:else}
+					<h3>{$_('thumbnail.live')}</h3>
 				{/if}
 			</a>
 			{#if showVideoPreview && videoPreview}
@@ -354,7 +368,7 @@
 		</div>
 
 		<div class="thumbnail-details video-title">
-			{#if !sideways}
+			{#if !sideways && !$interfaceLowBandwidthMode}
 				<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 418bc37e..34af2c7e 100644
--- a/materialious/src/lib/externalSettings.ts
+++ b/materialious/src/lib/externalSettings.ts
@@ -9,6 +9,7 @@ import {
 	interfaceAutoExpandComments,
 	interfaceAutoExpandDesc,
 	interfaceForceCase,
+	interfaceLowBandwidthMode,
 	interfacePreviewVideoOnHoverStore,
 	interfaceRegionStore,
 	interfaceSearchSuggestionsStore,
@@ -189,6 +190,11 @@ const persistedStores = [
 		name: 'showWarning',
 		store: showWarningStore,
 		type: 'boolean'
+	},
+	{
+		name: 'lowBandwidthMode',
+		store: interfaceLowBandwidthMode,
+		type: 'boolean'
 	}
 ];
 
diff --git a/materialious/src/lib/i18n/locales/en.json b/materialious/src/lib/i18n/locales/en.json
index d6ae6c96..d136f407 100644
--- a/materialious/src/lib/i18n/locales/en.json
+++ b/materialious/src/lib/i18n/locales/en.json
@@ -100,6 +100,7 @@
 		"login": "Login",
 		"logout": "Logout",
 		"customize": "Customize",
+		"lowBandwidthMode": "Low bandwidth mode",
 		"theme": {
 			"theme": "Theme",
 			"darkMode": "Dark mode",
diff --git a/materialious/src/lib/store.ts b/materialious/src/lib/store.ts
index 52547b3d..0159e252 100644
--- a/materialious/src/lib/store.ts
+++ b/materialious/src/lib/store.ts
@@ -64,7 +64,7 @@ export const interfaceForceCase: Writable<TitleCase> = persisted('forceCase', nu
 export const interfaceAutoExpandComments: Writable<boolean> = persisted('autoExpandComments', true);
 export const interfaceAutoExpandDesc: Writable<boolean> = persisted('autoExpandDesc', false);
 export const interfaceAmoledTheme = persisted('amoledTheme', false);
-
+export const interfaceLowBandwidthMode = persisted('lowBandwidthMode', false);
 
 export const sponsorBlockStore = persisted('sponsorBlock', true);
 export const sponsorBlockUrlStore: Writable<string | null | undefined> = persisted(
diff --git a/materialious/src/routes/(app)/channel/[slug]/+page.svelte b/materialious/src/routes/(app)/channel/[slug]/+page.svelte
index dcbe2cde..ec578faf 100644
--- a/materialious/src/routes/(app)/channel/[slug]/+page.svelte
+++ b/materialious/src/routes/(app)/channel/[slug]/+page.svelte
@@ -6,7 +6,7 @@
 	import PlaylistThumbnail from '$lib/PlaylistThumbnail.svelte';
 	import VideoList from '$lib/VideoList.svelte';
 	import { cleanNumber, getBestThumbnail, proxyGoogleImage } from '$lib/misc';
-	import { activePageStore, authStore } from '$lib/store';
+	import { activePageStore, authStore, interfaceLowBandwidthMode } from '$lib/store';
 	import { Clipboard } from '@capacitor/clipboard';
 	import { Capacitor } from '@capacitor/core';
 	import { onMount } from 'svelte';
@@ -64,10 +64,12 @@
 	onMount(async () => {
 		displayContent = await getChannelContent(data.channel.authorId, { type: 'videos' });
 
-		const channelPfpResp = await fetch(
-			proxyGoogleImage(getBestThumbnail(data.channel.authorThumbnails))
-		);
-		channelPfp = URL.createObjectURL(await channelPfpResp.blob());
+		if (!get(interfaceLowBandwidthMode)) {
+			const channelPfpResp = await fetch(
+				proxyGoogleImage(getBestThumbnail(data.channel.authorThumbnails))
+			);
+			channelPfp = URL.createObjectURL(await channelPfpResp.blob());
+		}
 
 		if (get(authStore)) {
 			isSubscribed = await amSubscribed(data.channel.authorId);
@@ -86,7 +88,7 @@
 </script>
 
 <div class="padding">
-	{#if data.channel.authorBanners.length > 0}
+	{#if data.channel.authorBanners.length > 0 && !$interfaceLowBandwidthMode}
 		<img
 			src={proxyGoogleImage(data.channel.authorBanners[0].url)}
 			width="100%"
@@ -94,15 +96,17 @@
 		/>
 	{/if}
 	<div class="description">
-		{#if channelPfp}
-			<img
-				style="margin-right: 1em;"
-				class="circle extra m l"
-				src={channelPfp}
-				alt="Channel profile"
-			/>
-		{:else}
-			<progress style="padding: 15px;" class="circle"></progress>
+		{#if !$interfaceLowBandwidthMode}
+			{#if channelPfp}
+				<img
+					style="margin-right: 1em;"
+					class="circle extra m l"
+					src={channelPfp}
+					alt="Channel profile"
+				/>
+			{:else}
+				<progress style="padding: 15px;" class="circle"></progress>
+			{/if}
 		{/if}
 
 		<div>
diff --git a/materialious/src/routes/(app)/watch/[slug]/+page.svelte b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
index e96d31e2..2bfca96d 100644
--- a/materialious/src/routes/(app)/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
@@ -30,6 +30,7 @@
 		authStore,
 		interfaceAutoExpandComments,
 		interfaceAutoExpandDesc,
+		interfaceLowBandwidthMode,
 		miniPlayerSrcStore,
 		playerAutoplayNextByDefaultStore,
 		playerListenByDefaultStore,
@@ -487,11 +488,13 @@
 				<nav>
 					<a href={`/channel/${data.video.authorId}`}>
 						<nav>
-							<img
-								class="circle large"
-								src={proxyGoogleImage(getBestThumbnail(data.video.authorThumbnails))}
-								alt="Channel profile"
-							/>
+							{#if !$interfaceLowBandwidthMode}
+								<img
+									class="circle large"
+									src={proxyGoogleImage(getBestThumbnail(data.video.authorThumbnails))}
+									alt="Channel profile"
+								/>
+							{/if}
 							<div>
 								<p style="margin: 0;" class="bold">{truncate(data.video.author, 16)}</p>
 								<p style="margin: 0;">{data.video.subCountText}</p>