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

<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>