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): use lib/utils/copyToClipboard for share link (#7603)

Browse Source
This commit is contained in:
Sam Holton 2024-03-04 17:39:58 -05:00 committed by GitHub
parent de71d8e0a3
commit 87c3d886ff
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 22 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
View File

@ -1,12 +1,13 @@
<script lang="ts"> <script lang="ts">
import Button from '$lib/components/elements/buttons/button.svelte'; import Button from '$lib/components/elements/buttons/button.svelte';
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
import Icon from '$lib/components/elements/icon.svelte'; import Icon from '$lib/components/elements/icon.svelte';
import { serverConfig } from '$lib/stores/server-config.store'; import { serverConfig } from '$lib/stores/server-config.store';
import { copyToClipboard, makeSharedLinkUrl } from '$lib/utils'; import { copyToClipboard, makeSharedLinkUrl } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
import { SharedLinkType, createSharedLink, updateSharedLink, type SharedLinkResponseDto } from '@immich/sdk'; import { SharedLinkType, createSharedLink, updateSharedLink, type SharedLinkResponseDto } from '@immich/sdk';
import { mdiLink } from '@mdi/js'; import { mdiContentCopy, mdiLink } from '@mdi/js';
import { createEventDispatcher, onMount } from 'svelte'; import { createEventDispatcher } from 'svelte';
import BaseModal from '../base-modal.svelte'; import BaseModal from '../base-modal.svelte';
import type { ImmichDropDownOption } from '../dropdown-button.svelte'; import type { ImmichDropDownOption } from '../dropdown-button.svelte';
import DropdownButton from '../dropdown-button.svelte'; import DropdownButton from '../dropdown-button.svelte';
@ -26,7 +27,6 @@
let expirationTime = ''; let expirationTime = '';
let password = ''; let password = '';
let shouldChangeExpirationTime = false; let shouldChangeExpirationTime = false;
let canCopyImagesToClipboard = true;
let enablePassword = false; let enablePassword = false;
const dispatch = createEventDispatcher<{ const dispatch = createEventDispatcher<{
@ -41,7 +41,6 @@
$: shareType = albumId ? SharedLinkType.Album : SharedLinkType.Individual; $: shareType = albumId ? SharedLinkType.Album : SharedLinkType.Individual;
onMount(async () => {
if (editingLink) { if (editingLink) {
if (editingLink.description) { if (editingLink.description) {
description = editingLink.description; description = editingLink.description;
@ -59,10 +58,6 @@
enablePassword = !!editingLink.password; enablePassword = !!editingLink.password;
} }
const module = await import('copy-image-clipboard');
canCopyImagesToClipboard = module.canCopyImagesToClipboard();
});
const handleCreateSharedLink = async () => { const handleCreateSharedLink = async () => {
const expirationTime = getExpirationTimeInMillisecond(); const expirationTime = getExpirationTimeInMillisecond();
const currentTime = Date.now(); const currentTime = Date.now();
@ -88,14 +83,6 @@
} }
}; };
const handleCopy = async () => {
if (!sharedLink) {
return;
}
await copyToClipboard(sharedLink);
};
const getExpirationTimeInMillisecond = () => { const getExpirationTimeInMillisecond = () => {
switch (expirationTime) { switch (expirationTime) {
case '30 minutes': { case '30 minutes': {
@ -265,9 +252,11 @@
<div class="flex w-full gap-4"> <div class="flex w-full gap-4">
<input class="immich-form-input w-full" bind:value={sharedLink} disabled /> <input class="immich-form-input w-full" bind:value={sharedLink} disabled />
{#if canCopyImagesToClipboard} <LinkButton on:click={() => (sharedLink ? copyToClipboard(sharedLink) : '')}>
<Button on:click={() => handleCopy()}>Copy</Button> <div class="flex place-items-center gap-2 text-sm">
{/if} <Icon path={mdiContentCopy} size="18" />
</div>
</LinkButton>
</div> </div>
{/if} {/if}
</section> </section>