diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index 06928ca6..3ea96a7a 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -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() diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue index 5a77d235..95f71950 100644 --- a/src/components/flash/flash.vue +++ b/src/components/flash/flash.vue @@ -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> diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js index e7384c93..b6919366 100644 --- a/src/components/media_modal/media_modal.js +++ b/src/components/media_modal/media_modal.js @@ -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) { diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue index 54bc5335..a578bc71 100644 --- a/src/components/media_modal/media_modal.vue +++ b/src/components/media_modal/media_modal.vue @@ -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')" diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js index 49f9d7f8..c085c992 100644 --- a/src/components/status_content/status_content.js +++ b/src/components/status_content/status_content.js @@ -72,12 +72,6 @@ const StatusContent = { Gallery, LinkPreview, StatusBody - }, - methods: { - setMedia () { - const attachments = this.status.attachments - return () => this.$store.dispatch('setMedia', attachments) - } } } diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue index 0f999da6..a9511fbe 100644 --- a/src/components/status_content/status_content.vue +++ b/src/components/status_content/status_content.vue @@ -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)" /> diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js index d9fb64d1..23e6358f 100644 --- a/src/components/user_card/user_card.js +++ b/src/components/user_card/user_card.js @@ -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 }) diff --git a/src/modules/media_viewer.js b/src/modules/media_viewer.js index 721c25e6..ebcba01d 100644 --- a/src/modules/media_viewer.js +++ b/src/modules/media_viewer.js @@ -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')