Overhauled thumbnail section process

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, truncate } from './misc';
+	import { cleanNumber, getBestThumbnail, truncate } from './misc';
 
 	export let channel: Channel;
 
@@ -12,7 +12,7 @@
 
 	onMount(() => {
 		img = new Image();
-		img.src = channel.authorThumbnails[0].url;
+		img.src = 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 { numberWithCommas } from './misc';
+	import { getBestThumbnail, numberWithCommas } from './misc';
 
 	export let comment: Comment;
 	export let videoId: string;
@@ -21,7 +21,11 @@
 </script>
 
 <div class="comment">
-	<img class="circle small" src={comment.authorThumbnails[1].url} alt="comment profile" />
+	<img
+		class="circle small"
+		src={getBestThumbnail(comment.authorThumbnails)}
+		alt="comment profile"
+	/>
 	<div>
 		<div class="row">
 			<p>

materialious/src/lib/Player.svelte

@@ -17,7 +17,7 @@
 		sponsorBlockUrlStore
 	} from '../store';
 	import type { VideoPlay } from './Api/model';
-	import { proxyVideoUrl, videoLength, type PhasedDescription } from './misc';
+	import { getBestThumbnail, proxyVideoUrl, videoLength, type PhasedDescription } from './misc';
 	import { getDynamicTheme } from './theme';
 
 	export let data: { video: VideoPlay; content: PhasedDescription; playlistId: string | null };
@@ -230,7 +230,8 @@
 >
 	<media-provider>
 		{#if !audioMode}
-			<media-poster class="vds-poster" src={data.video.videoThumbnails[0].url}></media-poster>
+			<media-poster class="vds-poster" src={getBestThumbnail(data.video.videoThumbnails)}
+			></media-poster>
 		{/if}
 	</media-provider>
 	<media-audio-layout></media-audio-layout>

materialious/src/lib/PlaylistThumbnail.svelte

@@ -2,7 +2,7 @@
 	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import type { Playlist } from './Api/model';
-	import { truncate } from './misc';
+	import { getBestThumbnail, truncate } from './misc';
 
 	export let playlist: Playlist;
 	export let disabled: boolean = false;
@@ -17,7 +17,7 @@
 	onMount(() => {
 		img = new Image();
 		if (playlist.videos.length > 0) {
-			img.src = playlist.videos[0].videoThumbnails[4].url;
+			img.src = getBestThumbnail(playlist.videos[0].videoThumbnails) || '';
 		} else if (playlist.playlistThumbnail) {
 			img.src = playlist.playlistThumbnail;
 		} else {

materialious/src/lib/Thumbnail.svelte

@@ -12,7 +12,7 @@
 	} from '../store';
 	import { getDeArrow, getThumbnail, getVideo } from './Api';
 	import type { Notification, PlaylistPageVideo, Video, VideoBase, VideoPlay } from './Api/model';
-	import { cleanNumber, proxyVideoUrl, videoLength } from './misc';
+	import { cleanNumber, getBestThumbnail, proxyVideoUrl, videoLength } from './misc';
 	import type { PlayerEvents } from './player';
 
 	export let video: VideoBase | Video | Notification | PlaylistPageVideo;
@@ -54,7 +54,7 @@
 	}
 
 	onMount(async () => {
-		let imageSrc = video.videoThumbnails[4].url;
+		let imageSrc = getBestThumbnail(video.videoThumbnails);
 
 		if (get(deArrowEnabledStore)) {
 			let locatedThumbnail = false;

materialious/src/lib/misc.ts

@@ -3,6 +3,7 @@ import { page } from '$app/stores';
 import humanNumber from 'human-number';
 import type { PeerOptions } from 'peerjs';
 import { get } from 'svelte/store';
+import type { Image } from './Api/model';
 
 export function truncate(value: string, maxLength: number = 50): string {
 	return value.length > maxLength ? `${value.substring(0, maxLength)}...` : value;
@@ -133,3 +134,15 @@ export function peerJsOptions(): PeerOptions {
 		port: Number(import.meta.env.VITE_DEFAULT_PEERJS_PORT) || 443
 	};
 }
+
+export function getBestThumbnail(images: Image[] | null): string | null {
+	if (images && images.length > 0) {
+		images.sort((a, b) => {
+			return (b.width * b.height) - (a.width * a.height);
+		});
+
+		return images[0].url;
+	} else {
+		return null;
+	}
+}

materialious/src/routes/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 } from '$lib/misc';
+	import { cleanNumber, getBestThumbnail } from '$lib/misc';
 	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import InfiniteLoading, { type InfiniteEvent } from 'svelte-infinite-loading';
@@ -84,7 +84,7 @@
 		<img
 			style="margin-right: 1em;"
 			class="circle extra m l"
-			src={data.channel.authorThumbnails[5].url}
+			src={getBestThumbnail(data.channel.authorThumbnails)}
 			alt="Channel profile"
 		/>
 		<div>

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

@@ -13,7 +13,7 @@
 	import Comment from '$lib/Comment.svelte';
 	import Player from '$lib/Player.svelte';
 	import Thumbnail from '$lib/Thumbnail.svelte';
-	import { cleanNumber, numberWithCommas, unsafeRandomItem } from '$lib/misc';
+	import { cleanNumber, getBestThumbnail, numberWithCommas, unsafeRandomItem } from '$lib/misc';
 	import type { PlayerEvents } from '$lib/player';
 	import type { DataConnection } from 'peerjs';
 	import { onDestroy, onMount } from 'svelte';
@@ -379,7 +379,7 @@
 						<nav>
 							<img
 								class="circle large"
-								src={data.video.authorThumbnails[2].url}
+								src={getBestThumbnail(data.video.authorThumbnails)}
 								alt="Channel profile"
 							/>
 							<div>