feat(web): remove duplicate asset calls (#1764)

* feat(web): remove duplicate asset calls

* use source element instead of video.src

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

@@ -304,7 +304,7 @@
 						on:onVideoEnded={() => (shouldPlayMotionPhoto = false)}
 					/>
 				{:else}
-					<PhotoViewer {publicSharedKey} assetId={asset.id} on:close={closeViewer} />
+					<PhotoViewer {publicSharedKey} {asset} on:close={closeViewer} />
 				{/if}
 			{:else}
 				<VideoViewer {publicSharedKey} assetId={asset.id} on:close={closeViewer} />

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

@@ -10,22 +10,14 @@
 		NotificationType
 	} from '../shared-components/notification/notification';
 
-	export let assetId: string;
+	export let asset: AssetResponseDto;
 	export let publicSharedKey = '';
 
-	let assetInfo: AssetResponseDto;
 	let assetData: string;
 
 	let copyImageToClipboard: (src: string) => Promise<Blob>;
 
 	onMount(async () => {
-		const { data } = await api.assetApi.getAssetById(assetId, {
-			params: {
-				key: publicSharedKey
-			}
-		});
-		assetInfo = data;
-
 		//Import hack :( see https://github.com/vadimkorr/svelte-carousel/issues/27#issuecomment-851022295
 		const module = await import('copy-image-clipboard');
 		copyImageToClipboard = module.copyImageToClipboard;
@@ -33,7 +25,7 @@
 
 	const loadAssetData = async () => {
 		try {
-			const { data } = await api.assetApi.serveFile(assetInfo.id, false, true, {
+			const { data } = await api.assetApi.serveFile(asset.id, false, true, {
 				params: {
 					key: publicSharedKey
 				},
@@ -75,18 +67,15 @@
 	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"
-				draggable="false"
-			/>
-		{/await}
-	{/if}
+	{#await loadAssetData()}
+		<LoadingSpinner />
+	{:then assetData}
+		<img
+			transition:fade={{ duration: 150 }}
+			src={assetData}
+			alt={asset.id}
+			class="object-contain h-full transition-all"
+			draggable="false"
+		/>
+	{/await}
 </div>

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

@@ -1,40 +1,17 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
-
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { createEventDispatcher } from 'svelte';
 	import LoadingSpinner from '../shared-components/loading-spinner.svelte';
-	import { api, AssetResponseDto, getFileUrl } from '@api';
+	import { getFileUrl } from '@api';
 
 	export let assetId: string;
 	export let publicSharedKey = '';
-	let asset: AssetResponseDto;
 
 	let isVideoLoading = true;
-	let videoUrl: string;
 	const dispatch = createEventDispatcher();
 
-	onMount(async () => {
-		const { data: assetInfo } = await api.assetApi.getAssetById(assetId, {
-			params: {
-				key: publicSharedKey
-			}
-		});
-
-		await loadVideoData(assetInfo);
-
-		asset = assetInfo;
-	});
-
-	const loadVideoData = async (assetInfo: AssetResponseDto) => {
-		isVideoLoading = true;
-
-		videoUrl = getFileUrl(assetInfo.id, false, true, publicSharedKey);
-
-		return assetInfo;
-	};
-
-	const handleCanPlay = (ev: Event) => {
-		const playerNode = ev.target as HTMLVideoElement;
+	const handleCanPlay = (ev: Event & { currentTarget: HTMLVideoElement }) => {
+		const playerNode = ev.currentTarget;
 
 		playerNode.muted = true;
 		playerNode.play();
@@ -48,21 +25,19 @@
 	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"
-			on:canplay={handleCanPlay}
-			on:ended={() => dispatch('onVideoEnded')}
-		>
-			<source src={videoUrl} type="video/mp4" />
-			<track kind="captions" />
-		</video>
-
-		{#if isVideoLoading}
-			<div class="absolute flex place-items-center place-content-center">
-				<LoadingSpinner />
-			</div>
-		{/if}
+	<video
+		controls
+		class="h-full object-contain"
+		on:canplay={handleCanPlay}
+		on:ended={() => dispatch('onVideoEnded')}
+	>
+		<source src={getFileUrl(assetId, false, true, publicSharedKey)} type="video/mp4" />
+		<track kind="captions" />
+	</video>
+
+	{#if isVideoLoading}
+		<div class="absolute flex place-items-center place-content-center">
+			<LoadingSpinner />
+		</div>
 	{/if}
 </div>