akkoma-fe/src/components/media_modal/media_modal.js

153 lines
4.1 KiB
JavaScript
Raw Normal View History

import StillImage from '../still-image/still-image.vue'
2019-01-26 15:45:03 +00:00
import VideoAttachment from '../video_attachment/video_attachment.vue'
import Modal from '../modal/modal.vue'
import PinchZoom from '../pinch_zoom/pinch_zoom.vue'
import SwipeClick from '../swipe_click/swipe_click.vue'
import GestureService from '../../services/gesture_service/gesture_service'
import Flash from 'src/components/flash/flash.vue'
import fileTypeService from '../../services/file_type/file_type.service.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faChevronLeft,
2021-08-15 22:02:56 +00:00
faChevronRight,
2022-03-03 17:51:13 +00:00
faCircleNotch,
faTimes
} from '@fortawesome/free-solid-svg-icons'
library.add(
faChevronLeft,
2021-08-15 22:02:56 +00:00
faChevronRight,
2022-03-03 17:51:13 +00:00
faCircleNotch,
faTimes
)
const MediaModal = {
components: {
2019-01-26 15:45:03 +00:00
StillImage,
VideoAttachment,
PinchZoom,
SwipeClick,
Modal,
Flash
},
2021-08-15 22:02:56 +00:00
data () {
return {
loading: false,
swipeDirection: GestureService.DIRECTION_LEFT,
swipeThreshold: () => {
const considerableMoveRatio = 1 / 4
return window.innerWidth * considerableMoveRatio
},
2021-08-02 23:21:18 +00:00
pinchZoomMinScale: 1,
pinchZoomScaleResetLimit: 1.2
2021-08-15 22:02:56 +00:00
}
},
computed: {
showing () {
return this.$store.state.mediaViewer.activated
},
media () {
return this.$store.state.mediaViewer.media
},
2021-08-15 16:45:48 +00:00
description () {
return this.currentMedia.description
},
currentIndex () {
return this.$store.state.mediaViewer.currentIndex
},
currentMedia () {
return this.media[this.currentIndex]
},
canNavigate () {
return this.media.length > 1
},
type () {
2021-08-15 22:02:56 +00:00
return this.currentMedia ? this.getType(this.currentMedia) : null
}
},
methods: {
2021-08-15 22:02:56 +00:00
getType (media) {
return fileTypeService.fileType(media.mimetype)
},
hide () {
// HACK: Closing immediately via a touch will cause the click
// to be processed on the content below the overlay
const transitionTime = 100 // ms
setTimeout(() => {
this.$store.dispatch('closeMediaViewer')
}, transitionTime)
},
hideIfNotSwiped (event) {
// If we have swiped over SwipeClick, do not trigger hide
const comp = this.$refs.swipeClick
if (!comp) {
this.hide()
} else {
comp.$gesture.click(event)
}
},
goPrev () {
if (this.canNavigate) {
const prevIndex = this.currentIndex === 0 ? this.media.length - 1 : (this.currentIndex - 1)
2021-08-15 22:02:56 +00:00
const newMedia = this.media[prevIndex]
if (this.getType(newMedia) === 'image') {
this.loading = true
}
this.$store.dispatch('setCurrentMedia', newMedia)
}
},
goNext () {
if (this.canNavigate) {
const nextIndex = this.currentIndex === this.media.length - 1 ? 0 : (this.currentIndex + 1)
2021-08-15 22:02:56 +00:00
const newMedia = this.media[nextIndex]
if (this.getType(newMedia) === 'image') {
this.loading = true
}
this.$store.dispatch('setCurrentMedia', newMedia)
}
},
2021-08-15 22:02:56 +00:00
onImageLoaded () {
this.loading = false
},
2021-08-01 23:46:27 +00:00
handleSwipePreview (offsets) {
this.$refs.pinchZoom.setTransform({ scale: 1, x: offsets[0], y: 0 })
2021-08-01 23:46:27 +00:00
},
handleSwipeEnd (sign) {
this.$refs.pinchZoom.setTransform({ scale: 1, x: 0, y: 0 })
if (sign > 0) {
2021-08-01 23:46:27 +00:00
this.goNext()
} else if (sign < 0) {
2021-08-01 23:46:27 +00:00
this.goPrev()
}
},
handleKeyupEvent (e) {
if (this.showing && e.keyCode === 27) { // escape
this.hide()
}
},
handleKeydownEvent (e) {
if (!this.showing) {
return
}
if (e.keyCode === 39) { // arrow right
this.goNext()
} else if (e.keyCode === 37) { // arrow left
this.goPrev()
}
}
},
mounted () {
window.addEventListener('popstate', this.hide)
document.addEventListener('keyup', this.handleKeyupEvent)
document.addEventListener('keydown', this.handleKeydownEvent)
},
2021-04-25 10:44:50 +00:00
unmounted () {
window.removeEventListener('popstate', this.hide)
document.removeEventListener('keyup', this.handleKeyupEvent)
document.removeEventListener('keydown', this.handleKeydownEvent)
}
}
export default MediaModal