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

This reverts commit 53fb3a36f7.
2024-09-21 18:47:22 +00:00 · 2023-02-13 16:27:15 -06:00 · 2023-02-13 16:27:15 -06:00 · db67093391
commit db67093391
parent 318fba6c97
5 changed files with 105 additions and 55 deletions
--- a/web/package-lock.json
+++ b/web/package-lock.json
@ -18,6 +18,7 @@
 				"luxon": "^3.1.1",
 				"rxjs": "^7.8.0",
 				"socket.io-client": "^4.5.1",
+				"svelte-keydown": "^0.5.0",
 				"svelte-material-icons": "^2.0.2"
 			},
 			"devDependencies": {
@ -54,6 +55,7 @@
 				"svelte": "^3.44.0",
 				"svelte-check": "^2.7.1",
 				"svelte-jester": "^2.3.2",
+				"svelte-keydown": "^0.5.0",
 				"svelte-preprocess": "^4.10.7",
 				"tailwindcss": "^3.0.24",
 				"tslib": "^2.3.1",
@ -10599,6 +10601,12 @@
 				"svelte": ">= 3"
 			}
 		},
+		"node_modules/svelte-keydown": {
+			"version": "0.5.0",
+			"resolved": "https://registry.npmjs.org/svelte-keydown/-/svelte-keydown-0.5.0.tgz",
+			"integrity": "sha512-DgY6AYlKbBocSvjC3kUeNPcStJQOTOCxAGG9ymVHzJdsQ1hRJuB8pcnB4UFH8uH3bAPdYyXXa3LwenLDL41eqQ==",
+			"dev": true
+		},
 		"node_modules/svelte-material-icons": {
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/svelte-material-icons/-/svelte-material-icons-2.0.4.tgz",
@ -19039,6 +19047,12 @@
 			"dev": true,
 			"requires": {}
 		},
+		"svelte-keydown": {
+			"version": "0.5.0",
+			"resolved": "https://registry.npmjs.org/svelte-keydown/-/svelte-keydown-0.5.0.tgz",
+			"integrity": "sha512-DgY6AYlKbBocSvjC3kUeNPcStJQOTOCxAGG9ymVHzJdsQ1hRJuB8pcnB4UFH8uH3bAPdYyXXa3LwenLDL41eqQ==",
+			"dev": true
+		},
 		"svelte-material-icons": {
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/svelte-material-icons/-/svelte-material-icons-2.0.4.tgz",
--- a/web/package.json
+++ b/web/package.json
@ -52,6 +52,7 @@
 		"svelte": "^3.44.0",
 		"svelte-check": "^2.7.1",
 		"svelte-jester": "^2.3.2",
+		"svelte-keydown": "^0.5.0",
 		"svelte-preprocess": "^4.10.7",
 		"tailwindcss": "^3.0.24",
 		"tslib": "^2.3.1",
@ -69,6 +70,7 @@
 		"luxon": "^3.1.1",
 		"rxjs": "^7.8.0",
 		"socket.io-client": "^4.5.1",
+		"svelte-keydown": "^0.5.0",
 		"svelte-material-icons": "^2.0.2"
 	}
 }
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/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} />
--- a/web/src/lib/components/asset-viewer/photo-viewer.svelte
+++ b/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>
--- a/web/src/lib/components/asset-viewer/video-viewer.svelte
+++ b/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>