From 17735943d5cdde1eb852d36f1c3bb699d23f7eb6 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Mon, 14 Jan 2019 19:23:13 +0200
Subject: Add media viewer module and media module component, modify attachment
 behavior

---
 src/modules/media_viewer.js | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/modules/media_viewer.js

(limited to 'src/modules/media_viewer.js')

diff --git a/src/modules/media_viewer.js b/src/modules/media_viewer.js
new file mode 100644
index 00000000..27714bae
--- /dev/null
+++ b/src/modules/media_viewer.js
@@ -0,0 +1,40 @@
+import fileTypeService from '../services/file_type/file_type.service.js'
+
+const mediaViewer = {
+  state: {
+    media: [],
+    currentIndex: 0,
+    activated: false
+  },
+  mutations: {
+    setMedia (state, media) {
+      state.media = media
+    },
+    setCurrent (state, index) {
+      state.activated = true
+      state.currentIndex = index
+    },
+    close (state) {
+      state.activated = false
+    }
+  },
+  actions: {
+    setMedia ({ commit }, attachments) {
+      const media = attachments.filter(attachment => {
+        const type = fileTypeService.fileType(attachment.mimetype)
+        return type === 'image' || type === 'video'
+      })
+      commit('setMedia', media)
+    },
+    setCurrent ({ commit, state }, current) {
+      const index = state.media.indexOf(current)
+      console.log(index, current)
+      commit('setCurrent', index || 0)
+    },
+    closeMediaViewer ({ commit }) {
+      commit('close')
+    }
+  }
+}
+
+export default mediaViewer
-- 
cgit v1.2.3-70-g09d2


From e1c3691a72551926a292ed11d8fb0c723ead1552 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Wed, 16 Jan 2019 17:27:23 +0200
Subject: Add escape button support

---
 src/components/media_modal/media_modal.js  | 16 +++++++++++++---
 src/components/media_modal/media_modal.vue |  4 ++--
 src/modules/media_viewer.js                |  1 -
 3 files changed, 15 insertions(+), 6 deletions(-)

(limited to 'src/modules/media_viewer.js')

diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index 91601515..95c3b4a9 100644
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@@ -24,24 +24,34 @@ const MediaModal = {
       return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : null
     }
   },
+  created () {
+    document.addEventListener('keyup', e => {
+      if (e.keyCode === 27 && this.showing) { // escape
+        this.hide()
+      }
+    })
+  },
   methods: {
     hide () {
       this.$store.dispatch('closeMediaViewer')
     },
     onVideoDataLoad (e) {
+      if (!e.srcElement) {
+        return
+      }
       if (typeof e.srcElement.webkitAudioDecodedByteCount !== 'undefined') {
         // non-zero if video has audio track
         if (e.srcElement.webkitAudioDecodedByteCount > 0) {
-          this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
+          this.loopVideo = this.$store.state.config.loopVideo && !this.$store.state.config.loopVideoSilentOnly
         }
       } else if (typeof e.srcElement.mozHasAudio !== 'undefined') {
         // true if video has audio track
         if (e.srcElement.mozHasAudio) {
-          this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
+          this.loopVideo = this.$store.state.config.loopVideo && !this.$store.state.config.loopVideoSilentOnly
         }
       } else if (typeof e.srcElement.audioTracks !== 'undefined') {
         if (e.srcElement.audioTracks.length > 0) {
-          this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
+          this.loopVideo = this.$store.state.config.loopVideo && !this.$store.state.config.loopVideoSilentOnly
         }
       }
     }
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 6e291ac5..c8b4c306 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -7,8 +7,8 @@
       :src="currentMedia.url"
       @click.stop=""
       controls autoplay
-      :loop="loopVideo"
-      @loadeddata="onVideoDataLoad">
+      @loadeddata="onVideoDataLoad" 
+      :loop="loopVideo">
     </video>
   </div>
 </template>
diff --git a/src/modules/media_viewer.js b/src/modules/media_viewer.js
index 27714bae..a24b408d 100644
--- a/src/modules/media_viewer.js
+++ b/src/modules/media_viewer.js
@@ -28,7 +28,6 @@ const mediaViewer = {
     },
     setCurrent ({ commit, state }, current) {
       const index = state.media.indexOf(current)
-      console.log(index, current)
       commit('setCurrent', index || 0)
     },
     closeMediaViewer ({ commit }) {
-- 
cgit v1.2.3-70-g09d2