gallery now supports flash, fixes for flash component. refactored media modal

This commit is contained in:
Henry Jameson 2021-06-18 02:01:37 +03:00
parent e654fead23
commit 90345f158f
8 changed files with 36 additions and 28 deletions

View file

@ -113,13 +113,14 @@ const Attachment = {
},
openModal (event) {
if (this.useModal) {
this.setMedia()
this.$store.dispatch('setCurrent', this.attachment)
this.$emit('setMedia')
this.$store.dispatch('setCurrentMedia', this.attachment)
}
},
openModalForce (event) {
this.setMedia()
this.$store.dispatch('setCurrent', this.attachment)
this.$emit('setMedia')
this.$store.dispatch('setCurrentMedia', this.attachment)
},
},
stopFlash () {
this.$refs.flash.closePlayer()

View file

@ -44,8 +44,9 @@
<style lang="scss">
@import '../../_variables.scss';
.Flash {
display: inline-block;
width: 100%;
height: 260px;
height: 100%;
position: relative;
.player {
@ -53,6 +54,16 @@
width: 100%;
}
.placeholder {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg);
color: var(--link);
}
.hider {
top: 0;
}
@ -69,13 +80,5 @@
display: none;
visibility: 'hidden';
}
.placeholder {
height: 100%;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
}
</style>

View file

@ -3,6 +3,7 @@ import VideoAttachment from '../video_attachment/video_attachment.vue'
import Modal from '../modal/modal.vue'
import fileTypeService from '../../services/file_type/file_type.service.js'
import GestureService from '../../services/gesture_service/gesture_service'
import Flash from 'src/components/flash/flash.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faChevronLeft,
@ -18,7 +19,8 @@ const MediaModal = {
components: {
StillImage,
VideoAttachment,
Modal
Modal,
Flash
},
computed: {
showing () {
@ -67,13 +69,13 @@ const MediaModal = {
goPrev () {
if (this.canNavigate) {
const prevIndex = this.currentIndex === 0 ? this.media.length - 1 : (this.currentIndex - 1)
this.$store.dispatch('setCurrent', this.media[prevIndex])
this.$store.dispatch('setCurrentMedia', this.media[prevIndex])
}
},
goNext () {
if (this.canNavigate) {
const nextIndex = this.currentIndex === this.media.length - 1 ? 0 : (this.currentIndex + 1)
this.$store.dispatch('setCurrent', this.media[nextIndex])
this.$store.dispatch('setCurrentMedia', this.media[nextIndex])
}
},
handleKeyupEvent (e) {

View file

@ -28,6 +28,13 @@
:title="currentMedia.description"
controls
/>
<Flash
v-if="type === 'flash'"
class="modal-image"
:src="currentMedia.url"
:alt="currentMedia.description"
:title="currentMedia.description"
/>
<button
v-if="canNavigate"
:title="$t('media_modal.previous')"

View file

@ -72,12 +72,6 @@ const StatusContent = {
Gallery,
LinkPreview,
StatusBody
},
methods: {
setMedia () {
const attachments = this.status.attachments
return () => this.$store.dispatch('setMedia', attachments)
}
}
}

View file

@ -16,8 +16,8 @@
v-if="status.attachments.length !== 0"
:nsfw="nsfwClickthrough"
:attachments="status.attachments"
:set-media="setMedia()"
:size="attachmentSize"
@setMedia="onMedia"
@play="$emit('mediaplay', attachment.id)"
@pause="$emit('mediapause', attachment.id)"
/>

View file

@ -159,7 +159,7 @@ export default {
mimetype: 'image'
}
this.$store.dispatch('setMedia', [attachment])
this.$store.dispatch('setCurrent', attachment)
this.$store.dispatch('setCurrentMedia', attachment)
},
mentionUser () {
this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })

View file

@ -1,4 +1,5 @@
import fileTypeService from '../services/file_type/file_type.service.js'
const supportedTypes = new Set(['image', 'video', 'audio', 'flash'])
const mediaViewer = {
state: {
@ -10,7 +11,7 @@ const mediaViewer = {
setMedia (state, media) {
state.media = media
},
setCurrent (state, index) {
setCurrentMedia (state, index) {
state.activated = true
state.currentIndex = index
},
@ -22,13 +23,13 @@ const mediaViewer = {
setMedia ({ commit }, attachments) {
const media = attachments.filter(attachment => {
const type = fileTypeService.fileType(attachment.mimetype)
return type === 'image' || type === 'video' || type === 'audio'
return supportedTypes.has(type)
})
commit('setMedia', media)
},
setCurrent ({ commit, state }, current) {
setCurrentMedia ({ commit, state }, current) {
const index = state.media.indexOf(current)
commit('setCurrent', index || 0)
commit('setCurrentMedia', index || 0)
},
closeMediaViewer ({ commit }) {
commit('close')