diff --git a/packages/frontend/src/components/MkImageGallery.item.vue b/packages/frontend/src/components/MkImageGallery.item.vue index 490e0b1f07..ba99aed408 100644 --- a/packages/frontend/src/components/MkImageGallery.item.vue +++ b/packages/frontend/src/components/MkImageGallery.item.vue @@ -31,6 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
(); let pointerVec = { x: 0, y: 0 }; +function resolveClickAction(target: EventTarget | null): 'hidden' | 'video' | null { + if (!(target instanceof Element)) return null; + + const action = target.closest('[data-gallery-click-action]')?.getAttribute('data-gallery-click-action'); + if (action === 'hidden' || action === 'video') { + return action; + } + + return null; +} + function onPointerdown(ev: PointerEvent) { if (mainEl.value == null) return; pointerEventCache.set(ev.pointerId, ev); @@ -422,6 +435,7 @@ function onPointerdown(ev: PointerEvent) { isDragging = true; isClick = true; + clickAction = resolveClickAction(ev.target); lastX = ev.clientX; lastY = ev.clientY; pointerVec = { x: 0, y: 0 }; @@ -566,6 +580,7 @@ function cancelPointerGesture() { currentPointerId = null; isDragging = false; isClick = false; + clickAction = null; pointerVec = { x: 0, y: 0 }; verticalSwipeDelta = 0; horizontalSwipeDelta = 0; @@ -653,9 +668,22 @@ watch(rootEl, (newRootEl) => { hideForFallback.value = false; }, { immediate: true }); -function onClick() { +function onClick(ev: MouseEvent) { if (!isClick) return; + const action = clickAction ?? resolveClickAction(ev.target); + clickAction = null; + + if (action === 'hidden') { + void onHiddenClick(); + return; + } + + if (action === 'video') { + onVideoClick(); + return; + } + if (!isTouchUsing) { if (isZooming.value) { isZooming.value = false;