FloatingIsland/app/components/AttachmentList.vue

<template>
  <div v-if="attachments.length > 0" @click.stop>
    <!-- Single attachment: direct render -->
    <attachment-item
      v-if="attachments.length === 1 && attachments[0]"
      :item="attachments[0]"
    />

    <!-- Multiple attachments -->
    <template v-else>
      <!-- All images: use carousel -->
      <div
        v-if="isAllImages"
        class="carousel-container rounded-lg overflow-hidden"
        :style="carouselStyle"
      >
        <v-card width="100%" border>
          <v-carousel
            height="100%"
            hide-delimiter-background
            show-arrows="hover"
            hide-delimiters
            progress="primary"
          >
            <v-carousel-item
              v-for="attachment in attachments"
              :key="attachment.id"
              :src="getAttachmentUrl(attachment)"
              cover
            />
          </v-carousel>
        </v-card>
      </div>

      <!-- Mixed content: vertical scrollable -->
      <div v-else class="space-y-4 max-h-96 overflow-y-auto">
        <attachment-item
          v-for="attachment in attachments"
          :key="attachment.id"
          :item="attachment"
        />
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue"
import type { SnAttachment } from "~/types/api"
import AttachmentItem from "./AttachmentItem.vue"

const props = defineProps<{
  attachments: SnAttachment[]
  maxHeight?: number
}>()

const apiBase = useSolarNetworkUrl()

const isAllImages = computed(
  () =>
    props.attachments.length > 0 &&
    props.attachments.every((att) => att.mimeType?.startsWith("image/"))
)

const carouselHeight = computed(() => {
  if (!isAllImages.value) return Math.min(400, props.maxHeight || 400)

  const aspectRatio = calculateAspectRatio()
  // Use a base width of 600px for calculation, adjust height accordingly
  const baseWidth = 600
  const calculatedHeight = Math.round(baseWidth / aspectRatio)

  // Respect maxHeight constraint if provided
  const constrainedHeight = props.maxHeight
    ? Math.min(calculatedHeight, props.maxHeight)
    : calculatedHeight

  return constrainedHeight
})

const carouselStyle = computed(() => {
  if (!isAllImages.value) return {}

  const aspectRatio = calculateAspectRatio()
  const height = carouselHeight.value
  const width = Math.round(height * aspectRatio)

  return {
    width: `${width}px`,
    height: `${height}px`,
    maxWidth: "100%" // Ensure it doesn't overflow container
  }
})

function calculateAspectRatio(): number {
  const ratios: number[] = []

  // Collect all valid ratios
  for (const attachment of props.attachments) {
    const meta = attachment.fileMeta
    if (meta && typeof meta === "object" && "ratio" in meta) {
      const ratioValue = (meta as Record<string, unknown>).ratio
      if (typeof ratioValue === "number" && ratioValue > 0) {
        ratios.push(ratioValue)
      } else if (typeof ratioValue === "string") {
        try {
          const parsed = parseFloat(ratioValue)
          if (parsed > 0) ratios.push(parsed)
        } catch {
          // Skip invalid string ratios
        }
      }
    }
  }

  if (ratios.length === 0) {
    // Default to 4:3 aspect ratio when no valid ratios found
    return 4 / 3
  }

  if (ratios.length === 1 && ratios[0]) {
    return ratios[0]
  }

  // Group similar ratios and find the most common one
  const commonRatios: Record<number, number> = {}

  // Common aspect ratios to round to (with tolerance)
  const tolerance = 0.05
  const standardRatios = [
    1.0,
    4 / 3,
    3 / 2,
    16 / 9,
    5 / 3,
    5 / 4,
    7 / 5,
    9 / 16,
    2 / 3,
    3 / 4,
    4 / 5
  ]

  for (const ratio of ratios) {
    // Find the closest standard ratio within tolerance
    let closestRatio = ratio
    let minDiff = Infinity

    for (const standard of standardRatios) {
      const diff = Math.abs(ratio - standard)
      if (diff < minDiff && diff <= tolerance) {
        minDiff = diff
        closestRatio = standard
      }
    }

    // If no standard ratio is close enough, keep original
    if (minDiff === Infinity || minDiff > tolerance) {
      closestRatio = ratio
    }

    commonRatios[closestRatio] = (commonRatios[closestRatio] || 0) + 1
  }

  // Find the most frequent ratio(s)
  let maxCount = 0
  const mostFrequent: number[] = []

  for (const ratio of Object.keys(commonRatios)) {
    const ratioNum = parseFloat(ratio)
    const count = commonRatios[ratioNum] || 0
    if (count > maxCount) {
      maxCount = count
      mostFrequent.length = 0
      mostFrequent.push(ratioNum)
    } else if (count === maxCount) {
      mostFrequent.push(ratioNum)
    }
  }

  // If only one most frequent ratio, return it
  if (mostFrequent.length === 1 && mostFrequent[0]) {
    return mostFrequent[0]
  }

  // If multiple ratios have the same highest frequency, use median of them
  mostFrequent.sort((a, b) => a - b)
  const mid = Math.floor(mostFrequent.length / 2)
  return mostFrequent.length % 2 === 0
    ? (mostFrequent[mid - 1]! + mostFrequent[mid]!) / 2
    : mostFrequent[mid]!
}

function getAttachmentUrl(attachment: SnAttachment): string {
  return `${apiBase}/drive/files/${attachment.id}`
}
</script>