Feature - Implemented virtual scroll on web (#573)

This PR implemented a virtual scroll on the web, as seen in this article.

[Building the Google Photos Web UI](https://medium.com/google-design/google-photos-45b714dfbed1)

web/src/lib/components/asset-viewer/asser-viewer-nav-bar.svelte

@@ -18,7 +18,6 @@
 	</div>
 	<div class="text-white flex gap-2">
 		<CircleIconButton logo={CloudDownloadOutline} on:click={() => dispatch('download')} />
-		<!-- <CircleIconButton logo={DotsVertical} on:click={() => console.log('Options')} /> -->
 		<CircleIconButton logo={InformationOutline} on:click={() => dispatch('showDetail')} />
 	</div>
 </div>

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -52,12 +52,12 @@
 
 	const navigateAssetForward = (e?: Event) => {
 		e?.stopPropagation();
-		dispatch('navigate-forward');
+		dispatch('navigate-next');
 	};
 
 	const navigateAssetBackward = (e?: Event) => {
 		e?.stopPropagation();
-		dispatch('navigate-backward');
+		dispatch('navigate-previous');
 	};
 
 	const showDetailInfoHandler = () => {
@@ -66,7 +66,6 @@
 
 	const downloadFile = async () => {
 		try {
-			console.log(asset.exifInfo);
 			const imageName = asset.exifInfo?.imageName ? asset.exifInfo?.imageName : asset.id;
 			const imageExtension = asset.originalPath.split('.')[1];
 			const imageFileName = imageName + '.' + imageExtension;
@@ -130,7 +129,7 @@
 
 <section
 	id="immich-asset-viewer"
-	class="fixed h-screen w-screen top-0 overflow-y-hidden bg-black z-[999] grid grid-rows-[64px_1fr] grid-cols-4  "
+	class="fixed h-screen w-screen top-0 overflow-y-hidden bg-black z-[999] grid grid-rows-[64px_1fr] grid-cols-4"
 >
 	<div class="col-start-1 col-span-4 row-start-1 row-span-1 z-[1000] transition-transform">
 		<AsserViewerNavBar
@@ -207,6 +206,10 @@
 </section>
 
 <style>
+	#immich-asset-viewer {
+		contain: layout;
+	}
+
 	.navigation-button-hover {
 		background-color: rgb(107 114 128 / var(--tw-bg-opacity));
 		color: rgb(55 65 81 / var(--tw-text-opacity));

web/src/lib/components/asset-viewer/intersection-observer.svelte

@@ -1,28 +1,39 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { createEventDispatcher } from 'svelte';
 
 	export let once = false;
 	export let top = 0;
 	export let bottom = 0;
 	export let left = 0;
 	export let right = 0;
+	export let root: HTMLElement | null = null;
 
 	let intersecting = false;
 	let container: any;
+	const dispatch = createEventDispatcher();
 
 	onMount(() => {
 		if (typeof IntersectionObserver !== 'undefined') {
-			const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
-
+			const rootMargin = `${top}px ${right}px ${bottom}px ${left}px`;
 			const observer = new IntersectionObserver(
 				(entries) => {
 					intersecting = entries[0].isIntersecting;
+					if (!intersecting) {
+						dispatch('hidden', container);
+					}
+
 					if (intersecting && once) {
 						observer.unobserve(container);
 					}
+
+					if (intersecting) {
+						dispatch('intersected', container);
+					}
 				},
 				{
-					rootMargin
+					rootMargin,
+					root
 				}
 			);