({})}
- onswipe={onSwipe}
+ {...useSwipe(onSwipe)}
class="h-full w-full"
transition:fade={{ duration: haveFadeTransition ? assetViewerFadeDuration : 0 }}
>
diff --git a/web/src/lib/components/asset-viewer/slideshow-bar.svelte b/web/src/lib/components/asset-viewer/slideshow-bar.svelte
index c2b2a63586..52160af69e 100644
--- a/web/src/lib/components/asset-viewer/slideshow-bar.svelte
+++ b/web/src/lib/components/asset-viewer/slideshow-bar.svelte
@@ -7,7 +7,7 @@
import { IconButton, modalManager } from '@immich/ui';
import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiCog, mdiFullscreen, mdiPause, mdiPlay } from '@mdi/js';
import { onDestroy, onMount } from 'svelte';
- import { swipe } from 'svelte-gestures';
+ import { useSwipe } from 'svelte-gestures';
import { t } from 'svelte-i18n';
import { fly } from 'svelte/transition';
@@ -131,6 +131,13 @@
document.removeEventListener('webkitfullscreenchange', exitFullscreenHandler);
};
});
+
+ const { swipe, onswipe, onswipedown } = useSwipe(
+ () => {},
+ () => ({ touchAction: 'pan-x' }),
+ { onswipedown: showControlBar },
+ true,
+ );
-
({ touchAction: 'pan-x' })} onswipedown={showControlBar} />
+{/* @ts-expect-error https://github.com/Rezi/svelte-gestures/issues/38#issuecomment-3315953573 */ null}
+
{#if showControls}
({})}
- onswipe={onSwipe}
+ {...useSwipe(onSwipe)}
oncanplay={(e) => handleCanPlay(e.currentTarget)}
onended={onVideoEnded}
onvolumechange={(e) => ($videoViewerMuted = e.currentTarget.muted)}
diff --git a/web/src/lib/utils/asset-utils.ts b/web/src/lib/utils/asset-utils.ts
index 016ca410a0..25e045c8a1 100644
--- a/web/src/lib/utils/asset-utils.ts
+++ b/web/src/lib/utils/asset-utils.ts
@@ -620,26 +620,7 @@ const imgToBlob = async (imageElement: HTMLImageElement) => {
throw new Error('Canvas context is null');
};
-const urlToBlob = async (imageSource: string) => {
- const response = await fetch(imageSource);
- return await response.blob();
-};
-
-export const copyImageToClipboard = async (
- source: HTMLImageElement | string,
-): Promise<{ success: true } | { success: false; mimeType: string }> => {
- if (source instanceof HTMLImageElement) {
- // do not await, so the Safari clipboard write happens in the context of the user gesture
- await navigator.clipboard.write([new ClipboardItem({ ['image/png']: imgToBlob(source) })]);
- return { success: true };
- }
-
- // if we had a way to get the mime type synchronously, we could do the same thing here
- const blob = await urlToBlob(source);
- if (!ClipboardItem.supports(blob.type)) {
- return { success: false, mimeType: blob.type };
- }
-
- await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
- return { success: true };
+export const copyImageToClipboard = async (source: HTMLImageElement) => {
+ // do not await, so the Safari clipboard write happens in the context of the user gesture
+ await navigator.clipboard.write([new ClipboardItem({ ['image/png']: imgToBlob(source) })]);
};