2 files changed, 54 insertions, 23 deletions

diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index 992d7129..abb18c7d 100644
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@@ -1,11 +1,14 @@
 import StillImage from '../still-image/still-image.vue'
 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'
 
 const MediaModal = {
   components: {
     StillImage,
-    VideoAttachment
+    VideoAttachment,
+    Modal
   },
   computed: {
     showing () {
@@ -27,7 +30,27 @@ const MediaModal = {
       return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : null
     }
   },
+  created () {
+    this.mediaSwipeGestureRight = GestureService.swipeGesture(
+      GestureService.DIRECTION_RIGHT,
+      this.goPrev,
+      50
+    )
+    this.mediaSwipeGestureLeft = GestureService.swipeGesture(
+      GestureService.DIRECTION_LEFT,
+      this.goNext,
+      50
+    )
+  },
   methods: {
+    mediaTouchStart (e) {
+      GestureService.beginSwipe(e, this.mediaSwipeGestureRight)
+      GestureService.beginSwipe(e, this.mediaSwipeGestureLeft)
+    },
+    mediaTouchMove (e) {
+      GestureService.updateSwipe(e, this.mediaSwipeGestureRight)
+      GestureService.updateSwipe(e, this.mediaSwipeGestureLeft)
+    },
     hide () {
       this.$store.dispatch('closeMediaViewer')
     },
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 7f666603..80d2a8b9 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -1,50 +1,58 @@
 <template>
-  <div class="modal-view media-modal-view" v-if="showing" @click.prevent="hide">
-    <img class="modal-image" v-if="type === 'image'" :src="currentMedia.url"></img>
-    <VideoAttachment
+  <Modal
+    v-if="showing"
+    class="media-modal-view"
+    @backdropClicked="hide"
+  >
+    <img
+      v-if="type === 'image'"
       class="modal-image"
+      :src="currentMedia.url"
+      @touchstart.stop="mediaTouchStart"
+      @touchmove.stop="mediaTouchMove"
+      @click="hide"
+    >
+    <VideoAttachment
       v-if="type === 'video'"
+      class="modal-image"
       :attachment="currentMedia"
       :controls="true"
-      @click.stop.native="">
-    </VideoAttachment>
+    />
     <button
+      v-if="canNavigate"
       :title="$t('media_modal.previous')"
       class="modal-view-button-arrow modal-view-button-arrow--prev"
-      v-if="canNavigate"
       @click.stop.prevent="goPrev"
     >
       <i class="icon-left-open arrow-icon" />
     </button>
     <button
+      v-if="canNavigate"
       :title="$t('media_modal.next')"
       class="modal-view-button-arrow modal-view-button-arrow--next"
-      v-if="canNavigate"
       @click.stop.prevent="goNext"
     >
       <i class="icon-right-open arrow-icon" />
     </button>
-  </div>
+  </Modal>
 </template>
 
 <script src="./media_modal.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+.modal-view.media-modal-view {
+  z-index: 1001;
 
-.media-modal-view {
-  &:hover {
-    .modal-view-button-arrow {
-      opacity: 0.75;
+  .modal-view-button-arrow {
+    opacity: 0.75;
 
-      &:focus,
-      &:hover {
-        outline: none;
-        box-shadow: none;
-      }
-      &:hover {
-        opacity: 1;
-      }
+    &:focus,
+    &:hover {
+      outline: none;
+      box-shadow: none;
+    }
+    &:hover {
+      opacity: 1;
     }
   }
 }
@@ -53,6 +61,7 @@
   max-width: 90%;
   max-height: 90%;
   box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
+  image-orientation: from-image; // NOTE: only FF supports this
 }
 
 .modal-view-button-arrow {
@@ -98,5 +107,4 @@
     }
   }
 }
-
 </style>