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: gallery now supports flash, fixes for flash component. refactored
 media modal

---
 src/components/media_modal/media_modal.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

(limited to 'src/components/media_modal/media_modal.js')

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) {
-- 
cgit v1.2.3-70-g09d2


From 34d265467a77d4e680e3c56c254df7dfb904fc18 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 19:45:48 +0300
Subject: add media description into media modal

---
 src/components/media_modal/media_modal.js  |   3 +
 src/components/media_modal/media_modal.vue | 116 +++++++++++++++++------------
 2 files changed, 71 insertions(+), 48 deletions(-)

(limited to 'src/components/media_modal/media_modal.js')

diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index b6919366..2e6aa1e3 100644
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@@ -29,6 +29,9 @@ const MediaModal = {
     media () {
       return this.$store.state.mediaViewer.media
     },
+    description () {
+      return this.currentMedia.description
+    },
     currentIndex () {
       return this.$store.state.mediaViewer.currentIndex
     },
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 31455e48..2a571056 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -61,6 +61,12 @@
         icon="chevron-right"
       />
     </button>
+    <span
+      v-if="description"
+      class="description"
+    >
+      {{ description }}
+    </span>
   </Modal>
 </template>
 
@@ -69,6 +75,7 @@
 <style lang="scss">
 .modal-view.media-modal-view {
   z-index: 1001;
+  flex-direction: column;
 
   .modal-view-button-arrow {
     opacity: 0.75;
@@ -84,63 +91,76 @@
   }
 }
 
-@keyframes media-fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
+.media-modal-view {
+  @keyframes media-fadein {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
   }
-}
 
-.modal-image {
-  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
-  animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
-}
+  /* Hardcoded since background is also hardcoded */
+  .description {
+    color: white;
+    margin-top: 1em;
+    text-shadow: 0 0 10px black, 0 0 10px black;
+    max-width: 500px;
+    max-height: 9.5em;
+    overflow-y: auto;
+    padding: 0 2em;
+  }
 
-.modal-view-button-arrow {
-  position: absolute;
-  display: block;
-  top: 50%;
-  margin-top: -50px;
-  width: 70px;
-  height: 100px;
-  border: 0;
-  padding: 0;
-  opacity: 0;
-  box-shadow: none;
-  background: none;
-  appearance: none;
-  overflow: visible;
-  cursor: pointer;
-  transition: opacity 333ms cubic-bezier(.4,0,.22,1);
+  .modal-image {
+    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
+    animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
+  }
 
-  .arrow-icon {
+  .modal-view-button-arrow {
     position: absolute;
-    top: 35px;
-    height: 30px;
-    width: 32px;
-    font-size: 14px;
-    line-height: 30px;
-    color: #FFF;
-    text-align: center;
-    background-color: rgba(0,0,0,.3);
-  }
+    display: block;
+    top: 50%;
+    margin-top: -50px;
+    width: 70px;
+    height: 100px;
+    border: 0;
+    padding: 0;
+    opacity: 0;
+    box-shadow: none;
+    background: none;
+    appearance: none;
+    overflow: visible;
+    cursor: pointer;
+    transition: opacity 333ms cubic-bezier(.4,0,.22,1);
 
-  &--prev {
-    left: 0;
     .arrow-icon {
-      left: 6px;
+      position: absolute;
+      top: 35px;
+      height: 30px;
+      width: 32px;
+      font-size: 14px;
+      line-height: 30px;
+      color: #FFF;
+      text-align: center;
+      background-color: rgba(0,0,0,.3);
     }
-  }
 
-  &--next {
-    right: 0;
-    .arrow-icon {
-      right: 6px;
+    &--prev {
+      left: 0;
+      .arrow-icon {
+        left: 6px;
+      }
+    }
+
+    &--next {
+      right: 0;
+      .arrow-icon {
+        right: 6px;
+      }
     }
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 7cc19ef2eadd9d2c41f46917b2ce80035712aec7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 16 Aug 2021 01:02:56 +0300
Subject: better media modal loading

---
 src/components/media_modal/media_modal.js  | 31 ++++++++++++++++++++++-----
 src/components/media_modal/media_modal.vue | 34 ++++++++++++++++++++++++++----
 2 files changed, 56 insertions(+), 9 deletions(-)

(limited to 'src/components/media_modal/media_modal.js')

diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index 2e6aa1e3..b8bce730 100644
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@@ -7,12 +7,14 @@ import Flash from 'src/components/flash/flash.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faChevronLeft,
-  faChevronRight
+  faChevronRight,
+  faCircleNotch
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faChevronLeft,
-  faChevronRight
+  faChevronRight,
+  faCircleNotch
 )
 
 const MediaModal = {
@@ -22,6 +24,11 @@ const MediaModal = {
     Modal,
     Flash
   },
+  data () {
+    return {
+      loading: false
+    }
+  },
   computed: {
     showing () {
       return this.$store.state.mediaViewer.activated
@@ -42,7 +49,7 @@ const MediaModal = {
       return this.media.length > 1
     },
     type () {
-      return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : null
+      return this.currentMedia ? this.getType(this.currentMedia) : null
     }
   },
   created () {
@@ -58,6 +65,9 @@ const MediaModal = {
     )
   },
   methods: {
+    getType (media) {
+      return fileTypeService.fileType(media.mimetype)
+    },
     mediaTouchStart (e) {
       GestureService.beginSwipe(e, this.mediaSwipeGestureRight)
       GestureService.beginSwipe(e, this.mediaSwipeGestureLeft)
@@ -72,15 +82,26 @@ const MediaModal = {
     goPrev () {
       if (this.canNavigate) {
         const prevIndex = this.currentIndex === 0 ? this.media.length - 1 : (this.currentIndex - 1)
-        this.$store.dispatch('setCurrentMedia', this.media[prevIndex])
+        const newMedia = this.media[prevIndex]
+        if (this.getType(newMedia) === 'image') {
+          this.loading = true
+        }
+        this.$store.dispatch('setCurrentMedia', newMedia)
       }
     },
     goNext () {
       if (this.canNavigate) {
         const nextIndex = this.currentIndex === this.media.length - 1 ? 0 : (this.currentIndex + 1)
-        this.$store.dispatch('setCurrentMedia', this.media[nextIndex])
+        const newMedia = this.media[nextIndex]
+        if (this.getType(newMedia) === 'image') {
+          this.loading = true
+        }
+        this.$store.dispatch('setCurrentMedia', newMedia)
       }
     },
+    onImageLoaded () {
+      this.loading = false
+    },
     handleKeyupEvent (e) {
       if (this.showing && e.keyCode === 27) { // escape
         this.hide()
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 2a571056..e8bc8591 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -6,27 +6,26 @@
   >
     <img
       v-if="type === 'image'"
+      :class="{ loading }"
       class="modal-image"
       :src="currentMedia.url"
-      :key="currentMedia.url"
       :alt="currentMedia.description"
       :title="currentMedia.description"
       @touchstart.stop="mediaTouchStart"
       @touchmove.stop="mediaTouchMove"
       @click="hide"
+      @load="onImageLoaded"
     >
     <VideoAttachment
       v-if="type === 'video'"
       class="modal-image"
       :attachment="currentMedia"
       :controls="true"
-      :key="currentMedia.url"
     />
     <audio
       v-if="type === 'audio'"
       class="modal-image"
       :src="currentMedia.url"
-      :key="currentMedia.url"
       :alt="currentMedia.description"
       :title="currentMedia.description"
       controls
@@ -34,7 +33,6 @@
     <Flash
       v-if="type === 'flash'"
       class="modal-image"
-      :key="currentMedia.url"
       :src="currentMedia.url"
       :alt="currentMedia.description"
       :title="currentMedia.description"
@@ -67,6 +65,16 @@
     >
       {{ description }}
     </span>
+    <span
+      v-if="loading"
+      class="loading-spinner"
+    >
+      <FAIcon
+        spin
+        icon="circle-notch"
+        size="5x"
+      />
+    </span>
   </Modal>
 </template>
 
@@ -85,6 +93,7 @@
       outline: none;
       box-shadow: none;
     }
+
     &:hover {
       opacity: 1;
     }
@@ -118,6 +127,23 @@
     box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
     image-orientation: from-image; // NOTE: only FF supports this
     animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
+
+    &.loading {
+      opacity: 0.5;
+    }
+  }
+
+  .loading-spinner {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    pointer-events: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    svg {
+      color: white;
+    }
   }
 
   .modal-view-button-arrow {
-- 
cgit v1.2.3-70-g09d2