elk/components/modal/ModalMediaPreviewCarousel.vue

287 lines
7.7 KiB
Vue

<script setup lang="ts">
import type { Vector2 } from '@vueuse/gesture'
import type { mastodon } from 'masto'
import { useGesture } from '@vueuse/gesture'
import { useReducedMotion } from '@vueuse/motion'
const { media = [] } = defineProps<{
media?: mastodon.v1.MediaAttachment[]
}>()
const emit = defineEmits<{
(event: 'close'): void
}>()
const modelValue = defineModel<number>({ required: true })
const slideGap = 20
const doubleTapThreshold = 250
const view = ref()
const slider = ref()
const slide = ref()
const image = ref()
const reduceMotion = import.meta.server ? ref(false) : useReducedMotion()
const isInitialScrollDone = useTimeout(350)
const canAnimate = computed(() => isInitialScrollDone.value && !reduceMotion.value)
const scale = ref(1)
const x = ref(0)
const y = ref(0)
const isDragging = ref(false)
const isPinching = ref(false)
const maxZoomOut = ref(1)
const isZoomedIn = computed(() => scale.value > 1)
const enableAutoplay = usePreferences('enableAutoplay')
function goToFocusedSlide() {
scale.value = 1
x.value = slide.value[modelValue.value].offsetLeft * scale.value
y.value = 0
}
onMounted(() => {
const slideGapAsScale = slideGap / view.value.clientWidth
maxZoomOut.value = 1 - slideGapAsScale
goToFocusedSlide()
})
watch(modelValue, goToFocusedSlide)
let lastOrigin = [0, 0]
let initialScale = 0
useGesture({
onPinch({ first, initial: [initialDistance], movement: [deltaDistance], da: [distance], origin, touches }) {
isPinching.value = true
if (first) {
initialScale = scale.value
}
else {
if (touches === 0)
handleMouseWheelZoom(initialScale, deltaDistance, origin)
else
handlePinchZoom(initialScale, initialDistance, distance, origin)
}
lastOrigin = origin
},
onPinchEnd() {
isPinching.value = false
isDragging.value = false
if (!isZoomedIn.value)
goToFocusedSlide()
},
onDrag({ movement, delta, pinching, tap, last, swipe, event, xy }) {
event.preventDefault()
if (pinching)
return
if (last)
handleLastDrag(tap, swipe, movement, xy)
else
handleDrag(delta, movement)
},
}, {
domTarget: view,
eventOptions: {
passive: false,
},
})
const shiftRestrictions = computed(() => {
const focusedImage = image.value[modelValue.value]
const focusedSlide = slide.value[modelValue.value]
const scaledImageWidth = focusedImage.offsetWidth * scale.value
const scaledHorizontalOverflow = scaledImageWidth / 2 - view.value.clientWidth / 2 + slideGap
const horizontalOverflow = Math.max(0, scaledHorizontalOverflow / scale.value)
const scaledImageHeight = focusedImage.offsetHeight * scale.value
const scaledVerticalOverflow = scaledImageHeight / 2 - view.value.clientHeight / 2 + slideGap
const verticalOverflow = Math.max(0, scaledVerticalOverflow / scale.value)
return {
left: focusedSlide.offsetLeft - horizontalOverflow,
right: focusedSlide.offsetLeft + horizontalOverflow,
top: focusedSlide.offsetTop - verticalOverflow,
bottom: focusedSlide.offsetTop + verticalOverflow,
}
})
function handlePinchZoom(initialScale: number, initialDistance: number, distance: number, [originX, originY]: Vector2) {
scale.value = initialScale * (distance / initialDistance)
scale.value = Math.max(maxZoomOut.value, scale.value)
const deltaCenterX = originX - lastOrigin[0]
const deltaCenterY = originY - lastOrigin[1]
handleZoomDrag([deltaCenterX, deltaCenterY])
}
function handleMouseWheelZoom(initialScale: number, deltaDistance: number, [originX, originY]: Vector2) {
scale.value = initialScale + (deltaDistance / 1000)
scale.value = Math.max(maxZoomOut.value, scale.value)
const deltaCenterX = lastOrigin[0] - originX
const deltaCenterY = lastOrigin[1] - originY
handleZoomDrag([deltaCenterX, deltaCenterY])
}
function handleLastDrag(tap: boolean, swipe: Vector2, movement: Vector2, position: Vector2) {
isDragging.value = false
if (tap)
handleTap(position)
else if (swipe[0] || swipe[1])
handleSwipe(swipe, movement)
else if (!isZoomedIn.value)
slideToClosestSlide()
}
let lastTapAt = 0
function handleTap([positionX, positionY]: Vector2) {
const now = Date.now()
const isDoubleTap = now - lastTapAt < doubleTapThreshold
lastTapAt = now
if (!isDoubleTap)
return
if (isZoomedIn.value) {
goToFocusedSlide()
}
else {
const focusedSlideBounding = slide.value[modelValue.value].getBoundingClientRect()
const slideCenterX = focusedSlideBounding.left + focusedSlideBounding.width / 2
const slideCenterY = focusedSlideBounding.top + focusedSlideBounding.height / 2
scale.value = 3
x.value += positionX - slideCenterX
y.value += positionY - slideCenterY
restrictShiftToInsideSlide()
}
}
function handleSwipe([horiz, vert]: Vector2, [movementX, movementY]: Vector2) {
if (isZoomedIn.value || isPinching.value)
return
const isHorizontalDrag = Math.abs(movementX) >= Math.abs(movementY)
if (isHorizontalDrag) {
if (horiz === 1) // left
modelValue.value = Math.max(0, modelValue.value - 1)
if (horiz === -1) // right
modelValue.value = Math.min(media.length - 1, modelValue.value + 1)
}
else if (vert === 1 || vert === -1) {
emit('close')
}
goToFocusedSlide()
}
function slideToClosestSlide() {
const startOfFocusedSlide = slide.value[modelValue.value].offsetLeft * scale.value
const slideWidth = slide.value[modelValue.value].offsetWidth * scale.value
if (x.value > startOfFocusedSlide + slideWidth / 2)
modelValue.value = Math.min(media.length - 1, modelValue.value + 1)
else if (x.value < startOfFocusedSlide - slideWidth / 2)
modelValue.value = Math.max(0, modelValue.value - 1)
goToFocusedSlide()
}
function handleDrag(delta: Vector2, movement: Vector2) {
isDragging.value = true
if (isZoomedIn.value)
handleZoomDrag(delta)
else
handleSlideDrag(movement)
}
function handleZoomDrag([deltaX, deltaY]: Vector2) {
x.value -= deltaX / scale.value
y.value -= deltaY / scale.value
restrictShiftToInsideSlide()
}
function handleSlideDrag([movementX, movementY]: Vector2) {
goToFocusedSlide()
if (Math.abs(movementY) > Math.abs(movementX)) // vertical movement is more than horizontal
y.value -= movementY / scale.value
else
x.value -= movementX / scale.value
if (media.length === 1)
x.value = 0
}
function restrictShiftToInsideSlide() {
x.value = Math.min(shiftRestrictions.value.right, Math.max(shiftRestrictions.value.left, x.value))
y.value = Math.min(shiftRestrictions.value.bottom, Math.max(shiftRestrictions.value.top, y.value))
}
const sliderStyle = computed(() => {
const style = {
transform: `scale(${scale.value}) translate(${-x.value}px, ${-y.value}px)`,
transition: 'none',
gap: `${slideGap}px`,
}
if (canAnimate.value && !isDragging.value && !isPinching.value)
style.transition = 'all 0.3s ease'
return style
})
const imageStyle = computed(() => ({
cursor: isDragging.value ? 'grabbing' : 'grab',
}))
</script>
<template>
<div ref="view" flex flex-row h-full w-full overflow-hidden>
<div ref="slider" :style="sliderStyle" w-full h-full flex items-center>
<div
v-for="item in media"
:key="item.id"
ref="slide"
flex-shrink-0
w-full
h-full
flex
items-center
justify-center
>
<component
:is="item.type === 'gifv' ? 'video' : 'img'"
ref="image"
:autoplay="enableAutoplay"
controls
loop
select-none
max-w-full
max-h-full
:style="imageStyle"
:draggable="false"
:src="item.url || item.previewUrl"
:alt="item.description || ''"
/>
</div>
</div>
</div>
</template>