Revert "feat(web): avoid duplicate call + small refactor (#1731)" (#1750)

This reverts commit 53fb3a36f7.

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

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

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

@@ -1,21 +1,39 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
+
+	import { onMount } from 'svelte';
 	import LoadingSpinner from '../shared-components/loading-spinner.svelte';
 	import { api, AssetResponseDto } from '@api';
-	import { copyImageToClipboard } from 'copy-image-clipboard';
+	import Keydown from 'svelte-keydown';
 	import {
 		notificationController,
 		NotificationType
 	} from '../shared-components/notification/notification';
 
-	export let asset: AssetResponseDto;
+	export let assetId: string;
 	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;
+	});
+
 	const loadAssetData = async () => {
 		try {
-			const { data } = await api.assetApi.serveFile(asset.id, false, true, {
+			const { data } = await api.assetApi.serveFile(assetInfo.id, false, true, {
 				params: {
 					key: publicSharedKey
 				},
@@ -33,51 +51,42 @@
 		}
 	};
 
-	const handleKeypress = async ({ metaKey, ctrlKey, key }: KeyboardEvent) => {
-		if ((metaKey || ctrlKey) && key === 'c') {
+	const handleKeypress = async (keyEvent: CustomEvent<string>) => {
+		if (keyEvent.detail == 'Control-c' || keyEvent.detail == 'Meta-c') {
 			await doCopy();
 		}
 	};
 
 	export const doCopy = async () => {
-		try {
-			await copyImageToClipboard(assetData);
-			notificationController.show({
-				type: NotificationType.Info,
-				message: 'Copied image to clipboard.',
-				timeout: 3000
-			});
-		} catch (err) {
-			console.error(err);
-			notificationController.show({
-				type: NotificationType.Error,
-				message: 'Copying image to clipboard failed. Click here to learn more.',
-				timeout: 5000,
-				action: {
-					type: 'link',
-					target:
-						'https://github.com/LuanEdCosta/copy-image-clipboard#enable-clipboard-api-features-in-firefox'
-				}
-			});
-		}
+		await copyImageToClipboard(assetData);
+		notificationController.show({
+			type: NotificationType.Info,
+			message: 'Copied image to clipboard.',
+			timeout: 3000
+		});
 	};
 </script>
 
-<svelte:window on:keydown={handleKeypress} on:copyImage={doCopy} />
+<Keydown on:combo={handleKeypress} />
+
+<svelte:window on:copyImage={async () => await doCopy()} />
 
 <div
 	transition:fade={{ duration: 150 }}
 	class="flex place-items-center place-content-center h-full select-none"
 >
-	{#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}
+	{#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}
 </div>

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

@@ -1,17 +1,40 @@
 <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 { getFileUrl } from '@api';
+	import { api, AssetResponseDto, getFileUrl } from '@api';
 
 	export let assetId: string;
 	export let publicSharedKey = '';
+	let asset: AssetResponseDto;
 
 	let isVideoLoading = true;
+	let videoUrl: string;
 	const dispatch = createEventDispatcher();
 
-	const handleCanPlay = (ev: Event & { currentTarget: HTMLVideoElement }) => {
-		const playerNode = ev.currentTarget;
+	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;
 
 		playerNode.muted = true;
 		playerNode.play();
@@ -25,19 +48,21 @@
 	transition:fade={{ duration: 150 }}
 	class="flex place-items-center place-content-center h-full select-none"
 >
-	<video
-		controls
-		class="h-full object-contain"
-		src={getFileUrl(assetId, false, true, publicSharedKey)}
-		on:canplay={handleCanPlay}
-		on:ended={() => dispatch('onVideoEnded')}
-	>
-		<track kind="captions" />
-	</video>
+	{#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 isVideoLoading}
+			<div class="absolute flex place-items-center place-content-center">
+				<LoadingSpinner />
+			</div>
+		{/if}
 	{/if}
 </div>