Merge remote-tracking branch 'upstream/develop' into emoji-optimizations

* upstream/develop: (95 commits)
  Lightbox/modal multi image improvements - #381
  '/api/pleroma/profile/mfa' -> '/api/pleroma/accounts/mfa'
  Add ability to change user's email
  translations-de-batch-1
  eu-translate update
  profile-banner rounding css, fixes #690
  fix indentation
  remove needless ref
  show preview popover when hover numbered replies
  refactor conditions
  do not make too many nested div
  add fetchStatus action
  refactor status loading logic
  split status preview popover into a separate component
  uninstall mobile-detect library
  listen both events
  minor css fix
  restrict distance at top side only
  set different trigger event in desktop and mobile by default
  fix eslint warnings
  ...

1 files changed, 20 insertions, 22 deletions

diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index 7f33a81b..f856fd0a 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -1,23 +1,18 @@
 import Attachment from '../attachment/attachment.vue'
-import { chunk, last, dropRight } from 'lodash'
+import { chunk, last, dropRight, sumBy } from 'lodash'
 
 const Gallery = {
-  data: () => ({
-    width: 500
-  }),
   props: [
     'attachments',
     'nsfw',
     'setMedia'
   ],
-  components: { Attachment },
-  mounted () {
-    this.resize()
-    window.addEventListener('resize', this.resize)
-  },
-  destroyed () {
-    window.removeEventListener('resize', this.resize)
+  data () {
+    return {
+      sizes: {}
+    }
   },
+  components: { Attachment },
   computed: {
     rows () {
       if (!this.attachments) {
@@ -33,21 +28,24 @@ const Gallery = {
       }
       return rows
     },
-    rowHeight () {
-      return itemsPerRow => ({ 'height': `${(this.width / (itemsPerRow + 0.6))}px` })
-    },
     useContainFit () {
-      return this.$store.state.config.useContainFit
+      return this.$store.getters.mergedConfig.useContainFit
     }
   },
   methods: {
-    resize () {
-      // Quick optimization to make resizing not always trigger state change,
-      // only update attachment size in 10px steps
-      const width = Math.floor(this.$el.getBoundingClientRect().width / 10) * 10
-      if (this.width !== width) {
-        this.width = width
-      }
+    onNaturalSizeLoad (id, size) {
+      this.$set(this.sizes, id, size)
+    },
+    rowStyle (itemsPerRow) {
+      return { 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` }
+    },
+    itemStyle (id, row) {
+      const total = sumBy(row, item => this.getAspectRatio(item.id))
+      return { flex: `${this.getAspectRatio(id) / total} 1 0%` }
+    },
+    getAspectRatio (id) {
+      const size = this.sizes[id]
+      return size ? size.width / size.height : 1
     }
   }
 }