[WEB] View large images on web (#189)

* Added selection icon to thumbnail

* Added micro-interaction and video file indication

* Added page to add page

* Added image viewer

* navigate assets

* Added separate component for viewing the video file

* Added FFmpeg modules

* Added correct content-type header for serving image file

* Added loading spinner

web/src/lib/components/photos/photo_viewer.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { session } from '$app/stores';
+	import { serverEndpoint } from '$lib/constants';
+	import { fade } from 'svelte/transition';
+
+	import type { ImmichAsset } from '$lib/models/immich-asset';
+	import { createEventDispatcher, onMount } from 'svelte';
+	import LoadingSpinner from '../shared/loading-spinner.svelte';
+
+	export let assetId: string;
+	export let deviceId: string;
+	let assetInfo: ImmichAsset;
+
+	const dispatch = createEventDispatcher();
+
+	onMount(async () => {
+		if ($session.user) {
+			const res = await fetch(serverEndpoint + '/asset/assetById/' + assetId, {
+				headers: {
+					Authorization: 'bearer ' + $session.user.accessToken,
+				},
+			});
+			assetInfo = await res.json();
+		}
+	});
+
+	const loadAssetData = async () => {
+		const assetUrl = `/asset/file?aid=${assetInfo.deviceAssetId}&did=${deviceId}&isWeb=true`;
+		if ($session.user) {
+			const res = await fetch(serverEndpoint + assetUrl, {
+				method: 'GET',
+				headers: {
+					Authorization: 'bearer ' + $session.user.accessToken,
+				},
+			});
+
+			const assetData = URL.createObjectURL(await res.blob());
+
+			return assetData;
+		}
+	};
+</script>
+
+<div on:click={() => dispatch('close')} class="h-screen">
+	{#if assetInfo}
+		{#await loadAssetData()}
+			<div class="flex place-items-center place-content-center h-full">
+				<LoadingSpinner />
+			</div>
+		{:then assetData}
+			<div class="flex place-items-center place-content-center h-full">
+				<img
+					in:fade={{ duration: 200 }}
+					src={assetData}
+					alt={assetId}
+					class="object-cover h-full transition-all duration-100 z-0"
+					loading="lazy"
+				/>
+			</div>
+		{/await}
+	{/if}
+</div>