Merge remote-tracking branch 'origin/develop' into vue3-again

* origin/develop: (475 commits)
  Apply 1 suggestion(s) to 1 file(s)
  Update dependency @ungap/event-target to v0.2.3
  Update package.json
  fix broken icons after FA upgrade
  Update Font Awesome
  Update dependency webpack-dev-middleware to v3.7.3
  Update dependency vuelidate to v0.7.7
  Pin dependency @kazvmoe-infra/pinch-zoom-element to 1.2.0
  lint
  Make media modal buttons larger
  Add English translation for hide tooltip
  Add hide button to media modal
  Lint
  Prevent hiding media viewer if swiped over SwipeClick
  Fix webkit image blurs
  Fix video in media modal not displaying properly
  Add changelog for https://git.pleroma.social/pleroma/pleroma-fe/-/merge_requests/1403
  Remove image box-shadow in media modal
  Clean up debug code for image pinch zoom
  Bump @kazvmoe-infra/pinch-zoom-element to 1.2.0 on npm
  ...

2 files changed, 232 insertions, 67 deletions

diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index d13d98f9..094b3e57 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -1,15 +1,26 @@
 import Attachment from '../attachment/attachment.vue'
-import { chunk, last, dropRight, sumBy } from 'lodash'
+import { sumBy } from 'lodash'
 
 const Gallery = {
   props: [
     'attachments',
+    'limitRows',
+    'descriptions',
+    'limit',
     'nsfw',
-    'setMedia'
+    'setMedia',
+    'size',
+    'editable',
+    'removeAttachment',
+    'shiftUpAttachment',
+    'shiftDnAttachment',
+    'editAttachment',
+    'grid'
   ],
   data () {
     return {
-      sizes: {}
+      sizes: {},
+      hidingLong: true
     }
   },
   components: { Attachment },
@@ -18,26 +29,70 @@ const Gallery = {
       if (!this.attachments) {
         return []
       }
-      const rows = chunk(this.attachments, 3)
-      if (last(rows).length === 1 && rows.length > 1) {
-        // if 1 attachment on last row -> add it to the previous row instead
-        const lastAttachment = last(rows)[0]
-        const allButLastRow = dropRight(rows)
-        last(allButLastRow).push(lastAttachment)
-        return allButLastRow
+      const attachments = this.limit > 0
+        ? this.attachments.slice(0, this.limit)
+        : this.attachments
+      if (this.size === 'hide') {
+        return attachments.map(item => ({ minimal: true, items: [item] }))
       }
+      const rows = this.grid
+        ? [{ grid: true, items: attachments }]
+        : attachments.reduce((acc, attachment, i) => {
+          if (attachment.mimetype.includes('audio')) {
+            return [...acc, { audio: true, items: [attachment] }, { items: [] }]
+          }
+          if (!(
+            attachment.mimetype.includes('image') ||
+              attachment.mimetype.includes('video') ||
+              attachment.mimetype.includes('flash')
+          )) {
+            return [...acc, { minimal: true, items: [attachment] }, { items: [] }]
+          }
+          const maxPerRow = 3
+          const attachmentsRemaining = this.attachments.length - i + 1
+          const currentRow = acc[acc.length - 1].items
+          currentRow.push(attachment)
+          if (currentRow.length >= maxPerRow && attachmentsRemaining > maxPerRow) {
+            return [...acc, { items: [] }]
+          } else {
+            return acc
+          }
+        }, [{ items: [] }]).filter(_ => _.items.length > 0)
       return rows
     },
-    useContainFit () {
-      return this.$store.getters.mergedConfig.useContainFit
+    attachmentsDimensionalScore () {
+      return this.rows.reduce((acc, row) => {
+        let size = 0
+        if (row.minimal) {
+          size += 1 / 8
+        } else if (row.audio) {
+          size += 1 / 4
+        } else {
+          size += 1 / (row.items.length + 0.6)
+        }
+        return acc + size
+      }, 0)
+    },
+    tooManyAttachments () {
+      if (this.editable || this.size === 'small') {
+        return false
+      } else if (this.size === 'hide') {
+        return this.attachments.length > 8
+      } else {
+        return this.attachmentsDimensionalScore > 1
+      }
     }
   },
   methods: {
-    onNaturalSizeLoad (id, size) {
-      this.sizes[id] = size
+    onNaturalSizeLoad ({ id, width, height }) {
+      this.$set(this.sizes, id, { width, height })
     },
-    rowStyle (itemsPerRow) {
-      return { 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` }
+    rowStyle (row) {
+      if (row.audio) {
+        return { 'padding-bottom': '25%' } // fixed reduced height for audio
+      } else if (!row.minimal && !row.grid) {
+        return { 'padding-bottom': `${(100 / (row.items.length + 0.6))}%` }
+      }
     },
     itemStyle (id, row) {
       const total = sumBy(row, item => this.getAspectRatio(item.id))
@@ -46,6 +101,16 @@ const Gallery = {
     getAspectRatio (id) {
       const size = this.sizes[id]
       return size ? size.width / size.height : 1
+    },
+    toggleHidingLong (event) {
+      this.hidingLong = event
+    },
+    openGallery () {
+      this.$store.dispatch('setMedia', this.attachments)
+      this.$store.dispatch('setCurrentMedia', this.attachments[0])
+    },
+    onMedia () {
+      this.$store.dispatch('setMedia', this.attachments)
     }
   }
 }
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index ca91c9c1..f2e1b5ce 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -1,26 +1,84 @@
 <template>
   <div
     ref="galleryContainer"
-    style="width: 100%;"
+    class="Gallery"
+    :class="{ '-long': tooManyAttachments && hidingLong }"
   >
+    <div class="gallery-rows">
+      <div
+        v-for="(row, rowIndex) in rows"
+        :key="rowIndex"
+        class="gallery-row"
+        :style="rowStyle(row)"
+        :class="{ '-audio': row.audio, '-minimal': row.minimal, '-grid': grid }"
+      >
+        <div
+          class="gallery-row-inner"
+          :class="{ '-grid': grid }"
+        >
+          <Attachment
+            v-for="(attachment, attachmentIndex) in row.items"
+            :key="attachment.id"
+            class="gallery-item"
+            :nsfw="nsfw"
+            :attachment="attachment"
+            :allow-play="false"
+            :size="size"
+            :editable="editable"
+            :remove="removeAttachment"
+            :shift-up="!(attachmentIndex === 0 && rowIndex === 0) && shiftUpAttachment"
+            :shift-dn="!(attachmentIndex === row.items.length - 1 && rowIndex === rows.length - 1) && shiftDnAttachment"
+            :edit="editAttachment"
+            :description="descriptions && descriptions[attachment.id]"
+            :hide-description="size === 'small' || tooManyAttachments && hidingLong"
+            :style="itemStyle(attachment.id, row.items)"
+            @setMedia="onMedia"
+            @naturalSizeLoad="onNaturalSizeLoad"
+          />
+        </div>
+      </div>
+    </div>
     <div
-      v-for="(row, index) in rows"
-      :key="index"
-      class="gallery-row"
-      :style="rowStyle(row.length)"
-      :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }"
+      v-if="tooManyAttachments"
+      class="many-attachments"
     >
-      <div class="gallery-row-inner">
-        <attachment
-          v-for="attachment in row"
-          :key="attachment.id"
-          :set-media="setMedia"
-          :nsfw="nsfw"
-          :attachment="attachment"
-          :allow-play="false"
-          :natural-size-load="onNaturalSizeLoad.bind(null, attachment.id)"
-          :style="itemStyle(attachment.id, row)"
-        />
+      <div class="many-attachments-text">
+        {{ $t("status.many_attachments", { number: attachments.length }) }}
+      </div>
+      <div class="many-attachments-buttons">
+        <span
+          v-if="!hidingLong"
+          class="many-attachments-button"
+        >
+          <button
+            class="button-unstyled -link"
+            @click="toggleHidingLong(true)"
+          >
+            {{ $t("status.collapse_attachments") }}
+          </button>
+        </span>
+        <span
+          v-if="hidingLong"
+          class="many-attachments-button"
+        >
+          <button
+            class="button-unstyled -link"
+            @click="toggleHidingLong(false)"
+          >
+            {{ $t("status.show_all_attachments") }}
+          </button>
+        </span>
+        <span
+          v-if="hidingLong"
+          class="many-attachments-button"
+        >
+          <button
+            class="button-unstyled -link"
+            @click="openGallery"
+          >
+            {{ $t("status.open_gallery") }}
+          </button>
+        </span>
       </div>
     </div>
   </div>
@@ -31,12 +89,66 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.gallery-row {
-  position: relative;
-  height: 0;
-  width: 100%;
-  flex-grow: 1;
-  margin-top: 0.5em;
+.Gallery {
+  .gallery-rows {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .gallery-row {
+    position: relative;
+    height: 0;
+    width: 100%;
+    flex-grow: 1;
+
+    &:not(:first-child) {
+      margin-top: 0.5em;
+    }
+  }
+
+  &.-long {
+    .gallery-rows {
+      max-height: 25em;
+      overflow: hidden;
+      mask:
+        linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
+        linear-gradient(to top, white, white);
+
+      /* Autoprefixed seem to ignore this one, and also syntax is different */
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+    }
+  }
+
+  .many-attachments-text {
+    text-align: center;
+    line-height: 2;
+  }
+
+  .many-attachments-buttons {
+    display: flex;
+  }
+
+  .many-attachments-button {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    line-height: 2;
+
+    button {
+      padding: 0 2em;
+    }
+  }
+
+  .gallery-row {
+    &.-grid,
+    &.-minimal {
+      height: auto;
+      .gallery-row-inner {
+        position: relative;
+      }
+    }
+  }
 
   .gallery-row-inner {
     position: absolute;
@@ -48,9 +160,24 @@
     flex-direction: row;
     flex-wrap: nowrap;
     align-content: stretch;
+
+    &.-grid {
+      width: 100%;
+      height: auto;
+      position: relative;
+      display: grid;
+      grid-column-gap: 0.5em;
+      grid-row-gap: 0.5em;
+      grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
+
+      .gallery-item {
+        margin: 0;
+        height: 200px;
+      }
+    }
   }
 
-  .gallery-row-inner .attachment {
+  .gallery-item {
     margin: 0 0.5em 0 0;
     flex-grow: 1;
     height: 100%;
@@ -61,32 +188,5 @@
       margin: 0;
     }
   }
-
-  .image-attachment {
-    width: 100%;
-    height: 100%;
-  }
-
-  .video-container {
-    height: 100%;
-  }
-
-  &.contain-fit {
-    img,
-    video,
-    canvas {
-      object-fit: contain;
-      height: 100%;
-    }
-  }
-
-  &.cover-fit {
-    img,
-    video,
-    canvas {
-      object-fit: cover;
-    }
-  }
 }
-
 </style>