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

feat(web): navigate assets with gestures (next/prev) (#11888)

Browse source 
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
kaziu687 2024-08-29 17:40:17 +02:00 • committed by GitHub
parent f3e176e192
commit c008feca63
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 69 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

15
web/src/lib/components/asset-viewer/video-native-viewer.svelte
View file

@ -5,12 +5,16 @@
import { handleError } from '$lib/utils/handle-error';
import { AssetMediaSize } from '@immich/sdk';
import { createEventDispatcher, tick } from 'svelte';
import { swipe } from 'svelte-gestures';
import type { SwipeCustomEvent } from 'svelte-gestures';
import { fade } from 'svelte/transition';
import { t } from 'svelte-i18n';
export let assetId: string;
export let loopVideo: boolean;
export let checksum: string;
export let onPreviousAsset: () => void;
export let onNextAsset: () => void;
let element: HTMLVideoElement | undefined = undefined;
let isVideoLoading = true;
@ -49,6 +53,15 @@
handleError(error, $t('errors.unable_to_play_video'));
}
};
const onSwipe = (event: SwipeCustomEvent) => {
if (event.detail.direction === 'left') {
onNextAsset();
}
if (event.detail.direction === 'right') {
onPreviousAsset();
}
};
</script>
<div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
@ -59,6 +72,8 @@
playsinline
controls
class="h-full object-contain"
use:swipe
on:swipe={onSwipe}
on:canplay={(e) => handleCanPlay(e.currentTarget)}
on:ended={() => dispatch('onVideoEnded')}
on:volumechange={(e) => {