self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-25 10:43:13 +02:00
Code Issues Releases Activity

feat(web): only show copy image when supported (#1776)

Browse Source
This commit is contained in:
Michel Heusschen 2023-02-17 17:41:52 +01:00 committed by GitHub
parent 575154fdea
commit bf6f94f69f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 33 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/package-lock.json generated
View File

@ -16,7 +16,6 @@
"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": {
@ -53,7 +52,6 @@
"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",
@ -10586,12 +10584,6 @@
"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",
@ -19022,12 +19014,6 @@
"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",

2
web/package.json
View File

@ -52,7 +52,6 @@
"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,7 +68,6 @@
"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"
}
}

8
web/src/lib/components/asset-viewer/asset-viewer.svelte
View File

@ -39,12 +39,18 @@
let addToSharedAlbum = true;
let shouldPlayMotionPhoto = false;
let shouldShowDownloadButton = sharedLink ? sharedLink.allowDownload : true;
let canCopyImagesToClipboard: boolean;
const onKeyboardPress = (keyInfo: KeyboardEvent) => handleKeyboardPress(keyInfo.key);
onMount(async () => {
document.addEventListener('keydown', onKeyboardPress);
getAllAlbums();
// Import hack :( see https://github.com/vadimkorr/svelte-carousel/issues/27#issuecomment-851022295
// TODO: Move to regular import once the package correctly supports ESM.
const module = await import('copy-image-clipboard');
canCopyImagesToClipboard = module.canCopyImagesToClipboard();
});
onDestroy(() => {
@ -253,7 +259,7 @@
<AssetViewerNavBar
{asset}
isMotionPhotoPlaying={shouldPlayMotionPhoto}
showCopyButton={asset.type === AssetTypeEnum.Image}
showCopyButton={canCopyImagesToClipboard && asset.type === AssetTypeEnum.Image}
showMotionPlayButton={!!asset.livePhotoVideoId}
showDownloadButton={shouldShowDownloadButton}
on:goBack={closeViewer}

41
web/src/lib/components/asset-viewer/photo-viewer.svelte
View File

@ -1,10 +1,8 @@
<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 {
notificationController,
NotificationType
@ -16,11 +14,14 @@
let assetData: string;
let copyImageToClipboard: (src: string) => Promise<Blob>;
let canCopyImagesToClipboard: () => boolean;
onMount(async () => {
//Import hack :( see https://github.com/vadimkorr/svelte-carousel/issues/27#issuecomment-851022295
// Import hack :( see https://github.com/vadimkorr/svelte-carousel/issues/27#issuecomment-851022295
// TODO: Move to regular import once the package correctly supports ESM.
const module = await import('copy-image-clipboard');
copyImageToClipboard = module.copyImageToClipboard;
canCopyImagesToClipboard = module.canCopyImagesToClipboard;
});
const loadAssetData = async () => {
@ -43,25 +44,35 @@
}
};
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
});
const doCopy = async () => {
if (!canCopyImagesToClipboard()) {
return;
}
try {
await copyImageToClipboard(assetData);
notificationController.show({
type: NotificationType.Info,
message: 'Copied image to clipboard.',
timeout: 3000
});
} catch (err) {
console.error('Error [photo-viewer]:', err);
notificationController.show({
type: NotificationType.Error,
message: 'Copying image to clipboard failed.'
});
}
};
</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 }}