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) { openModal (event) {
if (this.useModal) { if (this.useModal) {
this.setMedia() this.$emit('setMedia')
this.$store.dispatch('setCurrent', this.attachment) this.$store.dispatch('setCurrentMedia', this.attachment)
} }
}, },
openModalForce (event) { openModalForce (event) {
this.setMedia() this.$emit('setMedia')
this.$store.dispatch('setCurrent', this.attachment) this.$store.dispatch('setCurrentMedia', this.attachment)
},
}, },
stopFlash () { stopFlash () {
this.$refs.flash.closePlayer() this.$refs.flash.closePlayer()

View file

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

View file

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

View file

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

View file

@ -72,12 +72,6 @@ const StatusContent = {
Gallery, Gallery,
LinkPreview, LinkPreview,
StatusBody 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" v-if="status.attachments.length !== 0"
:nsfw="nsfwClickthrough" :nsfw="nsfwClickthrough"
:attachments="status.attachments" :attachments="status.attachments"
:set-media="setMedia()"
:size="attachmentSize" :size="attachmentSize"
@setMedia="onMedia"
@play="$emit('mediaplay', attachment.id)" @play="$emit('mediaplay', attachment.id)"
@pause="$emit('mediapause', attachment.id)" @pause="$emit('mediapause', attachment.id)"
/> />

View file

@ -159,7 +159,7 @@ export default {
mimetype: 'image' mimetype: 'image'
} }
this.$store.dispatch('setMedia', [attachment]) this.$store.dispatch('setMedia', [attachment])
this.$store.dispatch('setCurrent', attachment) this.$store.dispatch('setCurrentMedia', attachment)
}, },
mentionUser () { mentionUser () {
this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user }) 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' import fileTypeService from '../services/file_type/file_type.service.js'
const supportedTypes = new Set(['image', 'video', 'audio', 'flash'])
const mediaViewer = { const mediaViewer = {
state: { state: {
@ -10,7 +11,7 @@ const mediaViewer = {
setMedia (state, media) { setMedia (state, media) {
state.media = media state.media = media
}, },
setCurrent (state, index) { setCurrentMedia (state, index) {
state.activated = true state.activated = true
state.currentIndex = index state.currentIndex = index
}, },
@ -22,13 +23,13 @@ const mediaViewer = {
setMedia ({ commit }, attachments) { setMedia ({ commit }, attachments) {
const media = attachments.filter(attachment => { const media = attachments.filter(attachment => {
const type = fileTypeService.fileType(attachment.mimetype) const type = fileTypeService.fileType(attachment.mimetype)
return type === 'image' || type === 'video' || type === 'audio' return supportedTypes.has(type)
}) })
commit('setMedia', media) commit('setMedia', media)
}, },
setCurrent ({ commit, state }, current) { setCurrentMedia ({ commit, state }, current) {
const index = state.media.indexOf(current) const index = state.media.indexOf(current)
commit('setCurrent', index || 0) commit('setCurrentMedia', index || 0)
}, },
closeMediaViewer ({ commit }) { closeMediaViewer ({ commit }) {
commit('close') commit('close')