From 1076ac2b270dff6c6011c85cce70eb929dc8a99b Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Fri, 8 Mar 2024 02:24:19 +1300
Subject: [PATCH] Added image loaders

---
 materialious/src/lib/Thumbnail.svelte         | 40 +++++++++++++++----
 materialious/src/lib/misc.ts                  |  4 ++
 materialious/src/routes/+layout.js            |  1 -
 materialious/src/routes/+layout.svelte        |  2 -
 materialious/src/routes/+layout.ts            |  3 ++
 materialious/src/routes/+page.svelte          | 13 ++----
 materialious/src/routes/+page.ts              |  5 +++
 .../src/routes/watch/[slug]/+page.svelte      | 39 +++++++-----------
 materialious/src/routes/watch/[slug]/+page.ts |  5 +++
 9 files changed, 68 insertions(+), 44 deletions(-)
 delete mode 100644 materialious/src/routes/+layout.js
 create mode 100644 materialious/src/routes/+layout.ts
 create mode 100644 materialious/src/routes/+page.ts
 create mode 100644 materialious/src/routes/watch/[slug]/+page.ts

diff --git a/materialious/src/lib/Thumbnail.svelte b/materialious/src/lib/Thumbnail.svelte
index f39fab1d..9fe301d0 100644
--- a/materialious/src/lib/Thumbnail.svelte
+++ b/materialious/src/lib/Thumbnail.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import type { Video, VideoBase } from './Api/model';
 	import { truncate } from './misc';
 
@@ -11,6 +12,24 @@
 
 		return `${hours}:${minutes}:${seconds}`;
 	}
+
+	let loading = true;
+	let loaded = false;
+	let failed = false;
+
+	onMount(() => {
+		const img = new Image();
+		img.src = video.videoThumbnails[3].url;
+
+		img.onload = () => {
+			loading = false;
+			loaded = true;
+		};
+		img.onerror = () => {
+			loading = false;
+			failed = true;
+		};
+	});
 </script>
 
 <article class="no-padding transparent">
@@ -18,12 +37,19 @@
 		class="wave"
 		style="width: 100%; height: 155px; overflow: hidden;"
 		href={`/watch/${video.videoId}`}
-		><img
-			class="responsive"
-			style="object-fit: crop;"
-			src={video.videoThumbnails[3].url}
-			alt="Thumbnail for video"
-		/>
+	>
+		{#if loading}
+			<progress class="circle"></progress>
+		{:else if loaded}
+			<img
+				class="responsive"
+				style="object-fit: crop;"
+				src={video.videoThumbnails[3].url}
+				alt="Thumbnail for video"
+			/>
+		{:else}
+			<p>Failed to load image</p>
+		{/if}
 		{#if !('liveVideo' in video) || !video.liveVideo}
 			<div class="absolute right bottom small-margin black white-text small-text">
 				&nbsp;{videoLength(video.lengthSeconds)}&nbsp;
@@ -40,7 +66,7 @@
 	<div class="small-padding">
 		<nav>
 			<div class="max">
-				<div class="bold">{truncate(video.title)}</div>
+				<a href={`/watch/${video.videoId}`}><div class="bold">{truncate(video.title)}</div></a>
 				<div>
 					{video.author}{#if !('publishedText' in video)}
 						&nbsp;• {video.viewCountText}{/if}
diff --git a/materialious/src/lib/misc.ts b/materialious/src/lib/misc.ts
index 85ae2f27..e9fa7648 100644
--- a/materialious/src/lib/misc.ts
+++ b/materialious/src/lib/misc.ts
@@ -1,3 +1,7 @@
 export function truncate(value: string, maxLength: number = 50): string {
   return value.length > maxLength ? `${value.substring(0, maxLength)}...` : value;
+}
+
+export function numberWithCommas(number: number) {
+  return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }
\ No newline at end of file
diff --git a/materialious/src/routes/+layout.js b/materialious/src/routes/+layout.js
deleted file mode 100644
index a3d15781..00000000
--- a/materialious/src/routes/+layout.js
+++ /dev/null
@@ -1 +0,0 @@
-export const ssr = false;
diff --git a/materialious/src/routes/+layout.svelte b/materialious/src/routes/+layout.svelte
index 94514255..ce564974 100644
--- a/materialious/src/routes/+layout.svelte
+++ b/materialious/src/routes/+layout.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
 	import Logo from '$lib/Logo.svelte';
-	import 'beercss';
-	import 'material-dynamic-colors';
 
 	const pages = [
 		{
diff --git a/materialious/src/routes/+layout.ts b/materialious/src/routes/+layout.ts
new file mode 100644
index 00000000..6112c23f
--- /dev/null
+++ b/materialious/src/routes/+layout.ts
@@ -0,0 +1,3 @@
+import 'beercss/dist/cdn/beer.min.css';
+import 'material-dynamic-colors';
+
diff --git a/materialious/src/routes/+page.svelte b/materialious/src/routes/+page.svelte
index edb98715..95d5e829 100644
--- a/materialious/src/routes/+page.svelte
+++ b/materialious/src/routes/+page.svelte
@@ -1,22 +1,15 @@
 <script lang="ts">
-	import { getTrending } from '$lib/Api';
-	import type { Video } from '$lib/Api/model';
 	import PageLoading from '$lib/PageLoading.svelte';
 	import Thumbnail from '$lib/Thumbnail.svelte';
-	import { onMount } from 'svelte';
 
-	let trending: Video[];
-
-	onMount(async () => {
-		trending = await getTrending();
-	});
+	export let data;
 </script>
 
-{#if trending}
+{#if data.trending}
 	<div class="page right active">
 		<div class="space"></div>
 		<div class="grid">
-			{#each trending as video}
+			{#each data.trending as video}
 				<div class="s12 m6 l2">
 					<Thumbnail {video} />
 				</div>
diff --git a/materialious/src/routes/+page.ts b/materialious/src/routes/+page.ts
new file mode 100644
index 00000000..2af1817b
--- /dev/null
+++ b/materialious/src/routes/+page.ts
@@ -0,0 +1,5 @@
+import { getTrending } from '$lib/Api/index.js';
+
+export async function load({ params }) {
+  return { trending: await getTrending() };
+}
\ No newline at end of file
diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index 2b1daa92..e5c5ad15 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -1,30 +1,21 @@
 <script lang="ts">
-	import { page } from '$app/stores';
-	import { getVideo } from '$lib/Api';
-	import type { VideoPlay } from '$lib/Api/model';
-	import PageLoading from '$lib/PageLoading.svelte';
 	import Thumbnail from '$lib/Thumbnail.svelte';
-	import { onMount } from 'svelte';
+	import { numberWithCommas } from '$lib/misc.js';
 
-	let video: VideoPlay;
-
-	onMount(async () => {
-		video = await getVideo($page.params.slug);
-	});
+	export let data;
 </script>
 
-{#if video}
-	<div class="grid large-margin">
-		<div class="s12 m10 l10">
-			<h5>{video.title}</h5>
-			<p style="white-space: pre-line">{video.description}</p>
-		</div>
-		<div class="m4 l2">
-			{#each video.recommendedVideos as recommendedVideo}
-				<Thumbnail video={recommendedVideo} />
-			{/each}
-		</div>
+<div class="grid large-margin">
+	<div class="s12 m10 l10">
+		<h5>{data.video.title}</h5>
+		<article>
+			<p>{numberWithCommas(data.video.viewCount)} views • {data.video.publishedText}</p>
+			<p style="white-space: pre-line">{data.video.description}</p>
+		</article>
 	</div>
-{:else}
-	<PageLoading />
-{/if}
+	<div class="m4 l2">
+		{#each data.video.recommendedVideos as recommendedVideo}
+			<Thumbnail video={recommendedVideo} />
+		{/each}
+	</div>
+</div>
diff --git a/materialious/src/routes/watch/[slug]/+page.ts b/materialious/src/routes/watch/[slug]/+page.ts
new file mode 100644
index 00000000..cbaa1688
--- /dev/null
+++ b/materialious/src/routes/watch/[slug]/+page.ts
@@ -0,0 +1,5 @@
+import { getVideo } from '$lib/Api/index.js';
+
+export async function load({ params }) {
+  return { video: await getVideo(params.slug) };
+};