Proxy static google content

materialious/src/lib/ChannelThumbnail.svelte

@@ -2,7 +2,7 @@
 	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import type { Channel } from './Api/model';
-	import { cleanNumber, getBestThumbnail, truncate } from './misc';
+	import { cleanNumber, getBestThumbnail, proxyGoogleImage, truncate } from './misc';
 
 	export let channel: Channel;
 
@@ -12,7 +12,7 @@
 
 	onMount(() => {
 		img = new Image();
-		img.src = getBestThumbnail(channel.authorThumbnails) || '';
+		img.src = proxyGoogleImage(getBestThumbnail(channel.authorThumbnails)) || '';
 
 		img.onload = () => {
 			loading = false;

materialious/src/lib/Comment.svelte

@@ -2,7 +2,7 @@
 	import { _ } from 'svelte-i18n';
 	import { getComments } from './Api';
 	import { type Comment, type Comments } from './Api/model';
-	import { getBestThumbnail, numberWithCommas } from './misc';
+	import { getBestThumbnail, numberWithCommas, proxyGoogleImage } from './misc';
 
 	export let comment: Comment;
 	export let videoId: string;
@@ -33,7 +33,7 @@
 <div class="comment">
 	<img
 		class="circle small"
-		src={getBestThumbnail(comment.authorThumbnails)}
+		src={proxyGoogleImage(getBestThumbnail(comment.authorThumbnails))}
 		alt="comment profile"
 	/>
 	<div>

materialious/src/lib/misc.ts

@@ -170,6 +170,10 @@ export function proxyVideoUrl(source: string): string {
 	return rawSrc.toString();
 }
 
+export function proxyGoogleImage(source: string): string {
+	return `${get(instanceStore)}/ggpht${new URL(source).pathname}`;
+}
+
 export function unsafeRandomItem(array: any[]): any {
 	return array[Math.floor(Math.random() * array.length)];
 }
@@ -206,14 +210,14 @@ export function getBestThumbnail(
 	images: Image[] | null,
 	maxWidthDimension: number = 480,
 	maxHeightDimension = 360
-): string | null {
+): string {
 	if (images && images.length > 0) {
 		images = images.filter(
 			(image) => image.width < maxWidthDimension && image.height < maxHeightDimension
 		);
 
 		if (images.length === 0) {
-			return null;
+			return '';
 		}
 
 		images.sort((a, b) => {
@@ -222,7 +226,7 @@ export function getBestThumbnail(
 
 		return images[0].url;
 	} else {
-		return null;
+		return '';
 	}
 }
 

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

@@ -4,7 +4,7 @@
 	import PageLoading from '$lib/PageLoading.svelte';
 	import PlaylistThumbnail from '$lib/PlaylistThumbnail.svelte';
 	import Thumbnail from '$lib/Thumbnail.svelte';
-	import { cleanNumber, getBestThumbnail } from '$lib/misc';
+	import { cleanNumber, getBestThumbnail, proxyGoogleImage } from '$lib/misc';
 	import { activePageStore, authStore } from '$lib/store';
 	import { Capacitor } from '@capacitor/core';
 	import { onMount } from 'svelte';
@@ -85,7 +85,7 @@
 		<img
 			style="margin-right: 1em;"
 			class="circle extra m l"
-			src={getBestThumbnail(data.channel.authorThumbnails)}
+			src={proxyGoogleImage(getBestThumbnail(data.channel.authorThumbnails))}
 			alt="Channel profile"
 		/>
 

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

@@ -20,6 +20,7 @@
 		getBestThumbnail,
 		letterCase,
 		numberWithCommas,
+		proxyGoogleImage,
 		unsafeRandomItem
 	} from '$lib/misc';
 	import type { PlayerEvents } from '$lib/player';
@@ -422,7 +423,7 @@
 						<nav>
 							<img
 								class="circle large"
-								src={getBestThumbnail(data.video.authorThumbnails)}
+								src={proxyGoogleImage(getBestThumbnail(data.video.authorThumbnails))}
 								alt="Channel profile"
 							/>
 							<div>