akkoma-fe/src/components/gallery/gallery.js

import Attachment from '../attachment/attachment.vue'
import { sumBy } from 'lodash'

const Gallery = {
  props: [
    'attachments',
    'limitRows',
    'descriptions',
    'nsfw',
    'setMedia',
    'size',
    'editable',
    'removeAttachment',
    'editAttachment',
    'maxPerRow'
  ],
  data () {
    return {
      sizes: {},
      hidingLong: true
    }
  },
  components: { Attachment },
  computed: {
    rows () {
      if (!this.attachments) {
        return []
      }
      if (this.size === 'hide') {
        return this.attachments.map(item => ({ minimal: true, items: [item] }))
      }
      const rows = this.attachments.reduce((acc, attachment, i) => {
        if (this.size === 'small' && acc.length === 2) return acc
        if (attachment.mimetype.includes('audio')) {
          return [...acc, { audio: true, items: [attachment] }, { items: [] }]
        }
        const maxPerRow = this.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
    },
    attachmentsDimensionalScore () {
      return this.rows.reduce((acc, row) => {
        return acc + (row.audio ? 0.25 : (1 / (row.items.length + 0.6)))
      }, 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, width, height }) {
      this.$set(this.sizes, id, { width, height })
    },
    rowStyle (row) {
      if (row.audio) {
        return { 'padding-bottom': '25%' } // fixed reduced height for audio
      } else if (!row.minimal) {
        return { 'padding-bottom': `${(100 / (row.items.length + 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
    },
    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)
    }
  }
}

export default Gallery