From 90345f158ff2eb12e619dbd7406f2fa81c379637 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 18 Jun 2021 02:01:37 +0300
Subject: [PATCH] gallery now supports flash, fixes for flash component.
 refactored media modal

---
 src/components/attachment/attachment.js       |  9 ++++----
 src/components/flash/flash.vue                | 21 +++++++++++--------
 src/components/media_modal/media_modal.js     |  8 ++++---
 src/components/media_modal/media_modal.vue    |  7 +++++++
 .../status_content/status_content.js          |  6 ------
 .../status_content/status_content.vue         |  2 +-
 src/components/user_card/user_card.js         |  2 +-
 src/modules/media_viewer.js                   |  9 ++++----
 8 files changed, 36 insertions(+), 28 deletions(-)

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')