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/video-viewer.svelte

@@ -0,0 +1,81 @@
+<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;
+
+	let asset: AssetResponseDto;
+
+	const dispatch = createEventDispatcher();
+
+	let videoPlayerNode: HTMLVideoElement;
+	let isVideoLoading = true;
+
+	onMount(async () => {
+		if ($session.user) {
+			const { data: assetInfo } = await api.assetApi.getAssetById(assetId);
+
+			asset = assetInfo;
+
+			await loadVideoData();
+		}
+	});
+
+	const loadVideoData = async () => {
+		isVideoLoading = true;
+
+		if ($session.user) {
+			try {
+				const { data } = await api.assetApi.serveFile(
+					asset.deviceAssetId,
+					asset.deviceId,
+					false,
+					true,
+					{
+						responseType: 'blob'
+					}
+				);
+
+				if (!(data instanceof Blob)) {
+					return;
+				}
+
+				const videoData = URL.createObjectURL(data);
+				videoPlayerNode.src = videoData;
+
+				videoPlayerNode.load();
+
+				videoPlayerNode.oncanplay = () => {
+					videoPlayerNode.muted = true;
+					videoPlayerNode.play();
+					videoPlayerNode.muted = false;
+
+					isVideoLoading = false;
+				};
+
+				return videoData;
+			} catch (e) {}
+		}
+	};
+</script>
+
+<div
+	transition:fade={{ duration: 150 }}
+	class="flex place-items-center place-content-center h-full select-none"
+>
+	{#if asset}
+		<video controls class="h-full object-contain" bind:this={videoPlayerNode}>
+			<track kind="captions" />
+		</video>
+
+		{#if isVideoLoading}
+			<div class="absolute flex place-items-center place-content-center">
+				<LoadingSpinner />
+			</div>
+		{/if}
+	{/if}
+</div>