helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

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

Browse source
This commit is contained in:
Michel Heusschen 2023-02-12 05:36:26 +01:00 • committed by GitHub
parent 6b3892987a
commit 53fb3a36f7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 55 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

83
web/src/lib/components/asset-viewer/photo-viewer.svelte
View file

@ -1,39 +1,21 @@
<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 Keydown from 'svelte-keydown';
import { copyImageToClipboard } from 'copy-image-clipboard';
import {
notificationController,
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;
});
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
},
@ -51,42 +33,51 @@
}
};
const handleKeypress = async (keyEvent: CustomEvent<string>) => {
if (keyEvent.detail == 'Control-c' || keyEvent.detail == 'Meta-c') {
const handleKeypress = async ({ metaKey, ctrlKey, key }: KeyboardEvent) => {
if ((metaKey || ctrlKey) && key === 'c') {
await doCopy();
}
};
export const doCopy = async () => {
await copyImageToClipboard(assetData);
notificationController.show({
type: NotificationType.Info,
message: 'Copied image to clipboard.',
timeout: 3000
});
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'
}
});
}
};
</script>
<Keydown on:combo={handleKeypress} />
<svelte:window on:copyImage={async () => await doCopy()} />
<svelte:window on:keydown={handleKeypress} on:copyImage={doCopy} />
<div
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>