From 4859e63a89e641d5eb9b3afb2d328fd6adb4a9b3 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Fri, 12 Feb 2021 18:14:54 +0200
Subject: Remove body scrollbar in chat layout, keep nav bar still on scroll
 lock, add tiny fade for media modal

---
 src/components/media_modal/media_modal.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

(limited to 'src/components/media_modal')

diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index ea7f7a7f..34394e7e 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -73,11 +73,22 @@
   }
 }
 
+@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
+  opacity: 1;
+  animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
 }
 
 .modal-view-button-arrow {
-- 
cgit v1.2.3-70-g09d2


From 398aac65585cf7f743f323aa75d05646470da1d5 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Fri, 12 Feb 2021 18:47:10 +0200
Subject: remove redundant opacity2

---
 src/components/media_modal/media_modal.vue | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/components/media_modal')

diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 34394e7e..54bc5335 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -87,7 +87,6 @@
   max-height: 90%;
   box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
   image-orientation: from-image; // NOTE: only FF supports this
-  opacity: 1;
   animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
 }
 
-- 
cgit v1.2.3-70-g09d2


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/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 +++++++
 src/components/status_content/status_content.js  |  6 ------
 src/components/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(-)

(limited to 'src/components/media_modal')

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


From f5823a96e970b6936185b7545c68d9401f8b3281 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 19:43:52 +0300
Subject: add key attribute to make image refresh in media modal to give
 feedback when images are still loaded

---
 src/components/media_modal/media_modal.vue | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'src/components/media_modal')

diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index a578bc71..31455e48 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -8,6 +8,7 @@
       v-if="type === 'image'"
       class="modal-image"
       :src="currentMedia.url"
+      :key="currentMedia.url"
       :alt="currentMedia.description"
       :title="currentMedia.description"
       @touchstart.stop="mediaTouchStart"
@@ -19,11 +20,13 @@
       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
@@ -31,6 +34,7 @@
     <Flash
       v-if="type === 'flash'"
       class="modal-image"
+      :key="currentMedia.url"
       :src="currentMedia.url"
       :alt="currentMedia.description"
       :title="currentMedia.description"
-- 
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')

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

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


From 14ec7d6a41569af555ba5a361edbb413dbbd4c5d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 16 Aug 2021 01:11:16 +0300
Subject: add attachment counter

---
 src/components/media_modal/media_modal.vue | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

(limited to 'src/components/media_modal')

diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index e8bc8591..bfe7ee6a 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -65,6 +65,11 @@
     >
       {{ description }}
     </span>
+    <span
+      class="counter"
+    >
+      {{ currentIndex + 1 }} / {{ media.length }}
+    </span>
     <span
       v-if="loading"
       class="loading-spinner"
@@ -110,15 +115,22 @@
     }
   }
 
-  /* Hardcoded since background is also hardcoded */
-  .description {
+  .description,
+  .counter {
+    /* Hardcoded since background is also hardcoded */
     color: white;
     margin-top: 1em;
     text-shadow: 0 0 10px black, 0 0 10px black;
+    padding: 0.2em 2em;
+  }
+
+  .description {
+    flex: 0 0 auto;
+    overflow-y: auto;
+    min-height: 1em;
     max-width: 500px;
     max-height: 9.5em;
-    overflow-y: auto;
-    padding: 0 2em;
+    word-break: break-all;
   }
 
   .modal-image {
@@ -141,6 +153,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+
     svg {
       color: white;
     }
-- 
cgit v1.2.3-70-g09d2


From 1b32bb9c51bd6fd1a71d07c61a165004dab63aa6 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 21 Feb 2022 10:33:47 -0500
Subject: Make media modal counter go through i18n

---
 src/components/media_modal/media_modal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/media_modal')

diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index bfe7ee6a..8680267b 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -68,7 +68,7 @@
     <span
       class="counter"
     >
-      {{ currentIndex + 1 }} / {{ media.length }}
+      {{ $tc('media_modal.counter', currentIndex + 1, { current: currentIndex + 1, total: media.length }) }}
     </span>
     <span
       v-if="loading"
-- 
cgit v1.2.3-70-g09d2