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}
+			alt={asset.id}
 			class="object-contain h-full transition-all"
-				loading="lazy"
 			draggable="false"
 		/>
 	{/await}
-	{/if}
 </div>

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

@@ -1,40 +1,17 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
-
+	import { createEventDispatcher } from 'svelte';
-	import { createEventDispatcher, onMount } 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 handleCanPlay = (ev: Event & { currentTarget: HTMLVideoElement }) => {
-		const { data: assetInfo } = await api.assetApi.getAssetById(assetId, {
+		const playerNode = ev.currentTarget;
-			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;
 
 		playerNode.muted = true;
 		playerNode.play();
@@ -48,14 +25,13 @@
 	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" />
+		<source src={getFileUrl(assetId, false, true, publicSharedKey)} type="video/mp4" />
 		<track kind="captions" />
 	</video>
 
@@ -64,5 +40,4 @@
 			<LoadingSpinner />
 		</div>
 	{/if}
-	{/if}
 </div>