From e9f5adba7bd0938727c90cc1e12c81981c33e102 Mon Sep 17 00:00:00 2001
From: albertlast <mathiaspapealbert@hotmail.com>
Date: Sun, 21 May 2023 08:57:04 +0200
Subject: [PATCH] Added only render YouTubeVideoEmbed in the view port

add dependency svelte-inview
redource the load time massiv depends of the amount video released by the channels
---
 package.json                     |  1 +
 src/lib/YouTubeVideoEmbed.svelte | 66 ++++++++++++++++++++------------
 2 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/package.json b/package.json
index 78b3ca8..f09c81e 100644
--- a/package.json
+++ b/package.json
@@ -81,6 +81,7 @@
 		"env-cmd": "^10.1.0",
 		"luxon": "^3.3.0",
 		"redis": "^4.6.6",
+		"svelte-inview": "^4.0.0",
 		"zod": "^3.21.4"
 	},
 	"license": "MIT",
diff --git a/src/lib/YouTubeVideoEmbed.svelte b/src/lib/YouTubeVideoEmbed.svelte
index 85b0d75..b017558 100644
--- a/src/lib/YouTubeVideoEmbed.svelte
+++ b/src/lib/YouTubeVideoEmbed.svelte
@@ -2,41 +2,57 @@
 	import { page } from '$app/stores';
 	import { formatNumberCompact, formatDuration, formatRelativeDate } from '$lib/utils';
 	import ViewCount from '$lib/ViewCount.svelte';
+	import { inview } from 'svelte-inview';
+	import type { ObserverEventDetails, Options } from 'svelte-inview';
 	import type { YouTubeVideoAPIResponse } from './server/YouTubeAPI';
 
 	export let locale: string;
 	export let active: boolean;
 	export let video: YouTubeVideoAPIResponse;
+
+	let isInView: boolean;
+	const options: Options = {
+		rootMargin: '50px',
+		unobserveOnEnter: true,
+	};
+
+	const handleChange = ({ detail }: CustomEvent<ObserverEventDetails>) => {
+		isInView = detail.inView;
+	};
 </script>
 
 <a
+	use:inview={options}
+	on:inview_change={handleChange}
 	href={`/list/${$page.params.id}/watch/${video.videoId}`}
 	class:variant-filled-primary={active}
 	class="card card-hover block cursor-pointer rounded-lg">
-	<div class="relative p-1">
-		<img
-			loading="lazy"
-			class="aspect-video w-full rounded-lg"
-			src={video.thumbnails.low}
-			alt={video.title} />
-		<!-- TODO: use icon library -->
-		<p class="absolute bottom-1 left-1 rounded-md bg-black bg-opacity-60 px-1.5 py-0.5 text-xs">
-			{formatNumberCompact(video.likes, locale)} 👍
-		</p>
-		<p class="absolute bottom-1 right-1 rounded-md bg-black bg-opacity-60 px-1.5 py-0.5">
-			{formatDuration(video.duration)}
-		</p>
-	</div>
-	<div class="m-2">
-		<p class="font-bold">{video.channelTitle}</p>
-		<div
-			class:dark:text-gray-400={!active}
-			class:light:text-gray-200={!active}
-			class="flex justify-between">
-			<ViewCount {locale} viewCount={video.viewCount} />
-			<span>{formatRelativeDate(video.publishedAt, locale)}</span>
+	{#if isInView}
+		<div class="relative p-1">
+			<img
+				loading="lazy"
+				class="aspect-video w-full rounded-lg"
+				src={video.thumbnails.low}
+				alt={video.title} />
+			<!-- TODO: use icon library -->
+			<p class="absolute bottom-1 left-1 rounded-md bg-black bg-opacity-60 px-1.5 py-0.5 text-xs">
+				{formatNumberCompact(video.likes, locale)} 👍
+			</p>
+			<p class="absolute bottom-1 right-1 rounded-md bg-black bg-opacity-60 px-1.5 py-0.5">
+				{formatDuration(video.duration)}
+			</p>
+		</div>
+		<div class="m-2">
+			<p class="font-bold">{video.channelTitle}</p>
+			<div
+				class:dark:text-gray-400={!active}
+				class:light:text-gray-200={!active}
+				class="flex justify-between">
+				<ViewCount {locale} viewCount={video.viewCount} />
+				<span>{formatRelativeDate(video.publishedAt, locale)}</span>
+			</div>
+			<!-- TODO: something better than ellipses... -->
+			<p class="my-2 line-clamp-2 break-words">{video.title}</p>
 		</div>
-		<!-- TODO: something better than ellipses... -->
-		<p class="my-2 line-clamp-2 break-words">{video.title}</p>
-	</div>
+	{/if}
 </a>