20 video conversion for web view (#200)

* Added job for video conversion every 1 minute

* Handle get video as mp4 on the web

* Auto play video on web on hovered

* Added video player

* Added animation and video duration to thumbnail player

* Fixed issue with video not playing on hover

* Added animation when loading thumbnail

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

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { session } from '$app/stores';
+	import { serverEndpoint } from '$lib/constants';
+	import { fade } from 'svelte/transition';
+
+	import type { ImmichAsset, ImmichExif } from '$lib/models/immich-asset';
+	import { createEventDispatcher, onMount } from 'svelte';
+	import LoadingSpinner from '../shared/loading-spinner.svelte';
+
+	export let assetId: string;
+
+	let asset: ImmichAsset;
+
+	const dispatch = createEventDispatcher();
+
+	let videoPlayerNode: HTMLVideoElement;
+	let isVideoLoading = true;
+
+	onMount(async () => {
+		if ($session.user) {
+			const res = await fetch(serverEndpoint + '/asset/assetById/' + assetId, {
+				headers: {
+					Authorization: 'bearer ' + $session.user.accessToken,
+				},
+			});
+			asset = await res.json();
+
+			await loadVideoData();
+		}
+	});
+
+	const loadVideoData = async () => {
+		isVideoLoading = true;
+		const videoUrl = `/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isWeb=true`;
+		if ($session.user) {
+			try {
+				const res = await fetch(serverEndpoint + videoUrl, {
+					method: 'GET',
+					headers: {
+						Authorization: 'bearer ' + $session.user.accessToken,
+					},
+				});
+
+				const videoData = URL.createObjectURL(await res.blob());
+				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 w-full h-full bg-black/50 flex place-items-center place-content-center">
+				<LoadingSpinner />
+			</div>
+		{/if}
+	{/if}
+</div>