dev/add detail viewer to album (#358)

* Rename asset viewer folder

* Refactor AssetViewer to be able to user with different component

* Refactor AssetViewer to be able to user with different component

* Added viewer for album and sharing

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

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { session } from '$app/stores';
+	import { fade } from 'svelte/transition';
+
+	import { createEventDispatcher, onMount } from 'svelte';
+	import LoadingSpinner from '../shared-components/loading-spinner.svelte';
+	import { api, AssetResponseDto } from '@api';
+
+	export let assetId: string;
+	export let deviceId: string;
+
+	let assetInfo: AssetResponseDto;
+
+	const dispatch = createEventDispatcher();
+
+	onMount(async () => {
+		if ($session.user) {
+			const { data } = await api.assetApi.getAssetById(assetId);
+			assetInfo = data;
+		}
+	});
+
+	const loadAssetData = async () => {
+		if ($session.user) {
+			try {
+				const { data } = await api.assetApi.serveFile(
+					assetInfo.deviceAssetId,
+					deviceId,
+					false,
+					true,
+					{
+						responseType: 'blob'
+					}
+				);
+
+				if (!(data instanceof Blob)) {
+					return;
+				}
+
+				const assetData = URL.createObjectURL(data);
+				return assetData;
+			} catch (e) {}
+		}
+	};
+</script>
+
+<div
+	transition:fade={{ duration: 150 }}
+	class="flex place-items-center place-content-center h-full select-none"
+>
+	{#if assetInfo}
+		{#await loadAssetData()}
+			<LoadingSpinner />
+		{:then assetData}
+			<img
+				transition:fade={{ duration: 150 }}
+				src={assetData}
+				alt={assetId}
+				class="object-contain h-full transition-all"
+				loading="lazy"
+			/>
+		{/await}
+	{/if}
+</div>