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