commit: 90345f158ff2eb12e619dbd7406f2fa81c379637
parent e654fead23ebb457f81e8642c65e1f3e98ee0027
Author: Henry Jameson <me@hjkos.com>
Date: Fri, 18 Jun 2021 02:01:37 +0300
gallery now supports flash, fixes for flash component. refactored media modal
Diffstat:
8 files changed, 36 insertions(+), 28 deletions(-)
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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')