@fy-/fws-vue 2.3.13 → 2.3.15

package/components/ui/DefaultGalleryOld.vue

@@ -0,0 +1,1073 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import type { APIPaging } from '../../composables/rest'
+import {
+  ChevronDoubleLeftIcon,
+  ChevronDoubleRightIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  InformationCircleIcon,
+  XMarkIcon,
+} from '@heroicons/vue/24/solid'
+import { useDebounceFn, useEventListener, useFullscreen, useResizeObserver } from '@vueuse/core'
+import { computed, h, nextTick, onMounted, onUnmounted, reactive, ref, shallowRef, watch } from 'vue'
+import { useEventBus } from '../../composables/event-bus'
+import DefaultPaging from './DefaultPaging.vue'
+
+const isGalleryOpen = ref<boolean>(false)
+const eventBus = useEventBus()
+const sidePanel = ref<boolean>(true)
+const showControls = ref<boolean>(true)
+const isFullscreen = ref<boolean>(false)
+const infoPanel = ref<boolean>(true) // Show info panel by default
+const touchStartTime = ref<number>(0)
+const infoHeight = ref<number>(0)
+const galleryContainerRef = shallowRef<HTMLElement | null>(null)
+
+// Use VueUse's useFullscreen for better fullscreen handling
+const { isFullscreen: isElementFullscreen, enter: enterFullscreen, exit: exitFullscreen } = useFullscreen(galleryContainerRef)
+
+// Track when fullscreen changes externally (like Escape key)
+watch(isElementFullscreen, (newValue) => {
+  isFullscreen.value = newValue
+  if (newValue) {
+    // Force update of image size when entering fullscreen
+    nextTick(() => {
+      updateImageSizes()
+    })
+  }
+})
+
+const props = withDefaults(
+  defineProps<{
+    id: string
+    images: Array<any>
+    title?: string
+    getImageUrl?: Function
+    getThumbnailUrl?: Function
+    onOpen?: Function
+    onClose?: Function
+    closeIcon?: object
+    gridHeight?: number
+    mode: 'mason' | 'grid' | 'button' | 'hidden' | 'custom'
+    paging?: APIPaging | undefined
+    buttonText?: string
+    buttonType?: string
+    modelValue: number
+    borderColor?: Function
+    imageLoader: string
+    videoComponent?: Component | string
+    imageComponent?: Component | string
+    isVideo?: Function
+    ranking?: boolean
+  }>(),
+  {
+    modelValue: 0,
+    imageComponent: 'img',
+    mode: 'grid',
+    gridHeight: 4,
+    closeIcon: () => h(XMarkIcon),
+    images: () => [],
+    isVideo: () => false,
+    getImageUrl: (image: any) => image.image_url,
+    getThumbnailUrl: (image: any) => `${image.image_url}?s=250x250&m=autocrop`,
+    paging: undefined,
+    borderColor: undefined,
+    ranking: false,
+  },
+)
+
+const emit = defineEmits(['update:modelValue'])
+const modelValue = computed({
+  get: () => props.modelValue,
+  set: (i) => {
+    emit('update:modelValue', i)
+  },
+})
+
+const direction = ref<'next' | 'prev'>('next')
+
+let controlsTimeout: number | null = null
+let fullscreenResizeTimeout: number | null = null
+
+// Used to maintain consistent image sizes
+function updateImageSizes() {
+  nextTick(() => {
+    const imageContainers = document.querySelectorAll('.image-container img, .image-container .video-component') as NodeListOf<HTMLElement>
+    if (imageContainers && imageContainers.length > 0) {
+      imageContainers.forEach((img) => {
+        // Force a reflow to ensure correct sizing
+        img.style.maxHeight = ''
+        // Force browser to recalculate styles
+        void img.offsetHeight
+
+        // Calculate the correct height based on fullscreen and info panel state
+        const topHeight = 4 // rem
+        const infoHeight = infoPanel.value ? Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--info-height') || '0px') / 16 : 0
+        const viewHeight = isFullscreen.value ? 90 : 80
+
+        // Set explicit height with important to override any other styles
+        img.style.maxHeight = `calc(${viewHeight}vh - ${infoHeight}rem - ${topHeight}rem) !important`
+      })
+    }
+  })
+}
+
+function setModal(value: boolean) {
+  if (value === true) {
+    if (props.onOpen) props.onOpen()
+    document.body.style.overflow = 'hidden' // Prevent scrolling when gallery is open
+    if (!import.meta.env.SSR) {
+      useEventListener(document, 'keydown', handleKeyboardInput)
+      useEventListener(document, 'keyup', handleKeyboardRelease)
+    }
+    // Auto-hide controls after 3 seconds on mobile
+    if (window.innerWidth < 1024) {
+      controlsTimeout = window.setTimeout(() => {
+        showControls.value = false
+      }, 3000)
+    }
+  }
+  else {
+    if (props.onClose) props.onClose()
+    document.body.style.overflow = '' // Restore scrolling
+    // Exit fullscreen if active
+    if (isFullscreen.value) {
+      exitFullscreen()
+      isFullscreen.value = false
+    }
+    // Clear timeout if modal is closed
+    if (controlsTimeout) {
+      clearTimeout(controlsTimeout)
+      controlsTimeout = null
+    }
+  }
+  isGalleryOpen.value = value
+  showControls.value = true
+  // Don't reset info panel state when opening/closing
+}
+
+const openGalleryImage = useDebounceFn((index: number | undefined) => {
+  if (index === undefined) {
+    modelValue.value = 0
+  }
+  else {
+    modelValue.value = Number.parseInt(index.toString())
+  }
+  setModal(true)
+}, 50) // Debounce to prevent accidental double-opens
+
+function goNextImage() {
+  direction.value = 'next'
+  if (modelValue.value < props.images.length - 1) {
+    modelValue.value++
+  }
+  else {
+    modelValue.value = 0
+  }
+  resetControlsTimer()
+}
+
+function goPrevImage() {
+  direction.value = 'prev'
+  if (modelValue.value > 0) {
+    modelValue.value--
+  }
+  else {
+    modelValue.value
+      = props.images.length - 1 > 0 ? props.images.length - 1 : 0
+  }
+  resetControlsTimer()
+}
+
+const modelValueSrc = computed(() => {
+  if (props.images.length === 0) return false
+  if (props.images[modelValue.value] === undefined) return false
+  return props.getImageUrl(props.images[modelValue.value])
+})
+
+const currentImage = computed(() => {
+  if (props.images.length === 0) return null
+  return props.images[modelValue.value]
+})
+
+const imageCount = computed(() => props.images.length)
+const currentIndex = computed(() => modelValue.value + 1)
+
+const start = reactive({ x: 0, y: 0 })
+
+function resetControlsTimer() {
+  // Show controls when user interacts
+  showControls.value = true
+
+  // Only set timer on mobile
+  if (window.innerWidth < 1024) {
+    if (controlsTimeout) {
+      clearTimeout(controlsTimeout)
+    }
+    controlsTimeout = window.setTimeout(() => {
+      showControls.value = false
+    }, 3000)
+  }
+}
+
+function toggleControls() {
+  showControls.value = !showControls.value
+  if (showControls.value && window.innerWidth < 1024) {
+    resetControlsTimer()
+  }
+}
+
+function toggleInfoPanel() {
+  infoPanel.value = !infoPanel.value
+  resetControlsTimer()
+
+  // Update the info height after panel toggle
+  if (infoPanel.value) {
+    nextTick(() => {
+      updateInfoHeight()
+    })
+  }
+  else {
+    // Reset when hiding
+    document.documentElement.style.setProperty('--info-height', '0px')
+  }
+}
+
+function toggleFullscreen() {
+  if (!isFullscreen.value) {
+    if (galleryContainerRef.value) {
+      enterFullscreen()
+        .then(() => {
+          isFullscreen.value = true
+          // Give browser time to adjust fullscreen before updating sizing
+          if (fullscreenResizeTimeout) clearTimeout(fullscreenResizeTimeout)
+          fullscreenResizeTimeout = window.setTimeout(() => {
+            updateImageSizes()
+          }, 50)
+        })
+        .catch(() => {})
+    }
+  }
+  else {
+    exitFullscreen()
+      .then(() => {
+        isFullscreen.value = false
+      })
+      .catch(() => {})
+  }
+  resetControlsTimer()
+}
+
+// Touch handling with debounce to prevent multiple rapid changes
+const touchStart = useDebounceFn((event: TouchEvent) => {
+  const touch = event.touches[0]
+  const targetElement = touch.target as HTMLElement
+
+  // Store start time for tap detection
+  touchStartTime.value = Date.now()
+
+  // Check if the touch started on an interactive element
+  if (targetElement.closest('button, a, input, textarea, select')) {
+    return // Don't handle swipe if interacting with an interactive element
+  }
+
+  start.x = touch.screenX
+  start.y = touch.screenY
+}, 50)
+
+const touchEnd = useDebounceFn((event: TouchEvent) => {
+  const touch = event.changedTouches[0]
+  const targetElement = touch.target as HTMLElement
+  const touchDuration = Date.now() - touchStartTime.value
+
+  // Check if the touch ended on an interactive element
+  if (targetElement.closest('button, a, input, textarea, select')) {
+    return // Don't handle swipe if interacting with an interactive element
+  }
+
+  const end = { x: touch.screenX, y: touch.screenY }
+
+  const diffX = start.x - end.x
+  const diffY = start.y - end.y
+
+  // Detect tap (quick touch with minimal movement)
+  if (Math.abs(diffX) < 10 && Math.abs(diffY) < 10 && touchDuration < 300) {
+    toggleControls()
+    return
+  }
+
+  // Add a threshold to prevent accidental swipes
+  if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
+    if (diffX > 0) {
+      direction.value = 'next'
+      goNextImage()
+    }
+    else {
+      direction.value = 'prev'
+      goPrevImage()
+    }
+  }
+}, 50)
+
+function getBorderColor(i: any) {
+  if (props.borderColor !== undefined) {
+    return props.borderColor(i)
+  }
+  return ''
+}
+
+const isKeyPressed = ref<boolean>(false)
+
+function handleKeyboardInput(event: KeyboardEvent) {
+  if (!isGalleryOpen.value) return
+  if (isKeyPressed.value) return
+
+  switch (event.key) {
+    case 'Escape':
+      event.preventDefault()
+      setModal(false)
+      break
+    case 'ArrowRight':
+      isKeyPressed.value = true
+      direction.value = 'next'
+      goNextImage()
+      break
+    case 'ArrowLeft':
+      isKeyPressed.value = true
+      direction.value = 'prev'
+      goPrevImage()
+      break
+    case 'f':
+      toggleFullscreen()
+      break
+    case 'i':
+      toggleInfoPanel()
+      break
+    default:
+      break
+  }
+}
+
+function handleKeyboardRelease(event: KeyboardEvent) {
+  if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+    isKeyPressed.value = false
+  }
+}
+
+function closeGallery() {
+  setModal(false)
+}
+
+// Click outside gallery content to close - with debounce to prevent accidental closes
+const handleBackdropClick = useDebounceFn((event: MouseEvent) => {
+  if (event.target === event.currentTarget) {
+    setModal(false)
+  }
+}, 200)
+
+// Watch for both image changes and fullscreen mode changes
+watch([currentImage, isFullscreen], () => {
+  // Update the info height when image changes or fullscreen state changes
+  if (infoPanel.value) {
+    nextTick(() => {
+      updateInfoHeight()
+      // Fix image sizing issue when navigating in fullscreen
+      if (isFullscreen.value) {
+        updateImageSizes()
+      }
+    })
+  }
+})
+
+// Update CSS variable with info panel height
+function updateInfoHeight() {
+  nextTick(() => {
+    const infoElement = document.querySelector('.info-panel-slot') as HTMLElement
+    if (infoElement) {
+      const height = infoElement.offsetHeight
+      infoHeight.value = height
+      document.documentElement.style.setProperty('--info-height', `${height}px`)
+    }
+  })
+}
+
+// Debounced window resize handler to avoid performance issues
+const handleWindowResize = useDebounceFn(() => {
+  if (isGalleryOpen.value) {
+    updateImageSizes()
+    updateInfoHeight()
+  }
+}, 100)
+
+onMounted(() => {
+  eventBus.on(`${props.id}GalleryImage`, openGalleryImage)
+  eventBus.on(`${props.id}Gallery`, openGalleryImage)
+  eventBus.on(`${props.id}GalleryClose`, closeGallery)
+
+  // Store reference to the gallery container
+  galleryContainerRef.value = document.querySelector('.gallery-container')
+
+  // Initialize info height once mounted (only if info panel is shown)
+  if (infoPanel.value) {
+    updateInfoHeight()
+  }
+
+  // Use vueUse's useResizeObserver instead of native ResizeObserver
+  const infoElement = document.querySelector('.info-panel-slot')
+  if (infoElement) {
+    useResizeObserver(infoElement as HTMLElement, () => {
+      if (infoPanel.value) {
+        updateInfoHeight()
+      }
+    })
+  }
+
+  // Listen for window resize events
+  useEventListener(window, 'resize', handleWindowResize)
+
+  // Listen for fullscreen changes to update image sizes
+  useEventListener(document, 'fullscreenchange', () => {
+    if (document.fullscreenElement) {
+      // This handles the case of using F11 or browser fullscreen controls
+      isFullscreen.value = true
+      updateImageSizes()
+    }
+    else {
+      isFullscreen.value = false
+    }
+  })
+})
+
+onUnmounted(() => {
+  eventBus.off(`${props.id}Gallery`, openGalleryImage)
+  eventBus.off(`${props.id}GalleryImage`, openGalleryImage)
+  eventBus.off(`${props.id}GalleryClose`, closeGallery)
+
+  if (!import.meta.env.SSR) {
+    document.body.style.overflow = '' // Ensure body scrolling is restored
+  }
+
+  // Clear any remaining timeouts
+  if (controlsTimeout) {
+    clearTimeout(controlsTimeout)
+  }
+
+  if (fullscreenResizeTimeout) {
+    clearTimeout(fullscreenResizeTimeout)
+  }
+
+  // Ensure we exit fullscreen mode on unmount
+  if (isFullscreen.value) {
+    exitFullscreen().catch(() => {})
+  }
+})
+</script>
+
+<template>
+  <div>
+    <transition
+      enter-active-class="duration-300 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="duration-200 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="isGalleryOpen"
+        class="fixed bg-fv-neutral-900 text-white inset-0 max-w-[100vw] overflow-hidden gallery-container"
+        style="z-index: 37"
+        role="dialog"
+        aria-modal="true"
+        @click="handleBackdropClick"
+      >
+        <div
+          class="relative w-full h-full max-w-full flex flex-col justify-center items-center"
+          style="z-index: 38"
+          @click.stop
+        >
+          <!-- Main Content Area -->
+          <div class="flex flex-grow gap-4 w-full h-full max-w-full">
+            <div class="flex-grow h-full flex items-center relative">
+              <!-- Image Display Area -->
+              <div
+                class="flex h-full relative flex-grow items-center justify-center gap-2 z-[1]"
+                @touchstart="touchStart"
+                @touchend="touchEnd"
+              >
+                <!-- Image Navigation - Left -->
+                <transition
+                  enter-active-class="transition-opacity duration-300"
+                  enter-from-class="opacity-0"
+                  enter-to-class="opacity-100"
+                  leave-active-class="transition-opacity duration-300"
+                  leave-from-class="opacity-100"
+                  leave-to-class="opacity-0"
+                >
+                  <div
+                    v-if="showControls && images.length > 1"
+                    class="absolute left-0 z-[40] h-full flex items-center px-2 md:px-4"
+                  >
+                    <button
+                      class="btn bg-fv-neutral-800/70 hover:bg-fv-neutral-700/90 backdrop-blur-sm p-2 rounded-full transition-transform transform hover:scale-110"
+                      aria-label="Previous image"
+                      @click="goPrevImage()"
+                    >
+                      <ChevronLeftIcon class="w-6 h-6 md:w-8 md:h-8" />
+                    </button>
+                  </div>
+                </transition>
+
+                <!-- Main Image Container -->
+                <div
+                  class="flex-1 flex flex-col z-[2] items-center justify-center max-w-full lg:max-w-[calc(100vw - 256px)] relative"
+                  style="padding-top: 1rem;"
+                >
+                  <transition
+                    :name="direction === 'next' ? 'slide-next' : 'slide-prev'"
+                    mode="out-in"
+                  >
+                    <div
+                      :key="`image-display-${modelValue}`"
+                      class="flex-1 w-full max-w-full flex flex-col items-center justify-center absolute inset-0 z-[2]"
+                    >
+                      <div
+                        class="flex-1 w-full max-w-full flex items-center justify-center image-container"
+                      >
+                        <template
+                          v-if="videoComponent && isVideo(images[modelValue])"
+                        >
+                          <ClientOnly>
+                            <component
+                              :is="videoComponent"
+                              :src="isVideo(images[modelValue])"
+                              class="shadow max-w-full h-auto object-contain video-component"
+                              :style="{
+                                maxHeight: isFullscreen
+                                  ? infoPanel
+                                    ? 'calc(90vh - var(--info-height, 0px) - 4rem)'
+                                    : 'calc(90vh - 4rem)'
+                                  : infoPanel
+                                    ? 'calc(80vh - var(--info-height, 0px) - 4rem)'
+                                    : 'calc(80vh - 4rem)',
+                              }"
+                            />
+                          </ClientOnly>
+                        </template>
+                        <template v-else>
+                          <img
+                            v-if="modelValueSrc && imageComponent === 'img'"
+                            class="shadow max-w-full h-auto object-contain"
+                            :style="{
+                              maxHeight: isFullscreen
+                                ? infoPanel
+                                  ? 'calc(90vh - var(--info-height, 0px) - 4rem)'
+                                  : 'calc(90vh - 4rem)'
+                                : infoPanel
+                                  ? 'calc(80vh - var(--info-height, 0px) - 4rem)'
+                                  : 'calc(80vh - 4rem)',
+                            }"
+                            :src="modelValueSrc"
+                            :alt="`Gallery image ${modelValue + 1}`"
+                          >
+                          <component
+                            :is="imageComponent"
+                            v-else-if="modelValueSrc && imageComponent"
+                            :image="modelValueSrc.image"
+                            :variant="modelValueSrc.variant"
+                            :alt="modelValueSrc.alt"
+                            class="shadow max-w-full h-auto object-contain"
+                            :style="{
+                              maxHeight: isFullscreen
+                                ? infoPanel
+                                  ? 'calc(90vh - var(--info-height, 0px) - 4rem)'
+                                  : 'calc(90vh - 4rem)'
+                                : infoPanel
+                                  ? 'calc(80vh - var(--info-height, 0px) - 4rem)'
+                                  : 'calc(80vh - 4rem)',
+                            }"
+                          />
+                        </template>
+                      </div>
+
+                      <!-- Image Slot Content -->
+                      <div
+                        v-if="infoPanel"
+                        class="info-panel-slot flex-0 px-4 py-3 backdrop-blur-md bg-fv-neutral-900/70 rounded-t-lg flex items-center justify-center max-w-full w-full !z-[45] transition-all"
+                        @transitionend="updateInfoHeight"
+                      >
+                        <slot :value="images[modelValue]" />
+                      </div>
+                    </div>
+                  </transition>
+                </div>
+
+                <!-- Image Navigation - Right -->
+                <transition
+                  enter-active-class="transition-opacity duration-300"
+                  enter-from-class="opacity-0"
+                  enter-to-class="opacity-100"
+                  leave-active-class="transition-opacity duration-300"
+                  leave-from-class="opacity-100"
+                  leave-to-class="opacity-0"
+                >
+                  <div
+                    v-if="showControls && images.length > 1"
+                    class="absolute right-0 z-[40] h-full flex items-center px-2 md:px-4"
+                  >
+                    <button
+                      class="btn bg-fv-neutral-800/70 hover:bg-fv-neutral-700/90 backdrop-blur-sm p-2 rounded-full transition-transform transform hover:scale-110"
+                      aria-label="Next image"
+                      @click="goNextImage()"
+                    >
+                      <ChevronRightIcon class="w-6 h-6 md:w-8 md:h-8" />
+                    </button>
+                  </div>
+                </transition>
+              </div>
+            </div>
+
+            <!-- Side Panel for Thumbnails -->
+            <transition
+              enter-active-class="transform transition ease-in-out duration-300"
+              enter-from-class="translate-x-full"
+              enter-to-class="translate-x-0"
+              leave-active-class="transform transition ease-in-out duration-300"
+              leave-from-class="translate-x-0"
+              leave-to-class="translate-x-full"
+            >
+              <div
+                v-if="sidePanel"
+                class="hidden lg:block flex-shrink-0 w-64 bg-fv-neutral-800/90 backdrop-blur-md h-full max-h-full overflow-y-auto"
+                style="padding-top: 4rem;"
+              >
+                <!-- Paging Controls -->
+                <div v-if="paging" class="flex items-center justify-center pt-2">
+                  <DefaultPaging :id="id" :items="paging" />
+                </div>
+
+                <!-- Thumbnail Grid -->
+                <div class="grid grid-cols-2 gap-2 p-2">
+                  <div
+                    v-for="i in images.length"
+                    :key="`bg_${id}_${i}`"
+                    class="group relative"
+                  >
+                    <div
+                      class="absolute inset-0 rounded-lg transition-colors duration-300 group-hover:bg-fv-neutral-700/40"
+                      :class="{ 'bg-fv-primary-500/40': i - 1 === modelValue }"
+                    />
+                    <img
+                      v-if="imageComponent === 'img'"
+                      :class="`h-auto max-w-full rounded-lg cursor-pointer shadow transition-all duration-300 group-hover:brightness-110 ${getBorderColor(
+                        images[i - 1],
+                      )}`"
+                      :style="{
+                        filter:
+                          i - 1 === modelValue ? 'brightness(1)' : 'brightness(0.7)',
+                      }"
+                      :src="getThumbnailUrl(images[i - 1])"
+                      :alt="`Thumbnail ${i}`"
+                      @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
+                    >
+                    <component
+                      :is="imageComponent"
+                      v-else
+                      :image="getThumbnailUrl(images[i - 1]).image"
+                      :variant="getThumbnailUrl(images[i - 1]).variant"
+                      :alt="getThumbnailUrl(images[i - 1]).alt"
+                      :class="`h-auto max-w-full rounded-lg cursor-pointer shadow transition-all duration-300 group-hover:brightness-110 ${getBorderColor(
+                        images[i - 1],
+                      )}`"
+                      :style="{
+                        filter:
+                          i - 1 === modelValue ? 'brightness(1)' : 'brightness(0.7)',
+                      }"
+                      :likes="getThumbnailUrl(images[i - 1]).likes"
+                      :show-likes="getThumbnailUrl(images[i - 1]).showLikes"
+                      :is-author="getThumbnailUrl(images[i - 1]).isAuthor"
+                      :user-uuid="getThumbnailUrl(images[i - 1]).userUUID"
+                      @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
+                    />
+                  </div>
+                </div>
+              </div>
+            </transition>
+          </div>
+
+          <!-- Top Controls -->
+          <transition
+            enter-active-class="transition-opacity duration-300"
+            enter-from-class="opacity-0"
+            enter-to-class="opacity-100"
+            leave-active-class="transition-opacity duration-300"
+            leave-from-class="opacity-100"
+            leave-to-class="opacity-0"
+          >
+            <div
+              v-if="showControls"
+              class="fixed top-0 left-0 right-0 px-4 py-3 flex justify-between items-center bg-gradient-to-b from-fv-neutral-900/90 to-transparent backdrop-blur-sm z-[50] transition-opacity h-16"
+            >
+              <!-- Title and Counter -->
+              <div class="flex items-center space-x-2">
+                <span v-if="title" class="font-medium text-lg">{{ title }}</span>
+                <span class="text-sm opacity-80">{{ currentIndex }} / {{ imageCount }}</span>
+              </div>
+
+              <!-- Control Buttons -->
+              <div class="flex items-center space-x-2">
+                <button
+                  class="btn p-1.5 rounded-full bg-fv-neutral-800/70 hover:bg-fv-neutral-700/90 transition-transform transform hover:scale-110"
+                  :class="{ 'bg-fv-primary-500/70': infoPanel }"
+                  :title="infoPanel ? 'Hide info' : 'Show info'"
+                  @click="toggleInfoPanel"
+                >
+                  <InformationCircleIcon class="w-5 h-5" />
+                </button>
+
+                <button
+                  class="btn p-1.5 rounded-full lg:hidden bg-fv-neutral-800/70 hover:bg-fv-neutral-700/90 transition-transform transform hover:scale-110"
+                  :title="sidePanel ? 'Hide thumbnails' : 'Show thumbnails'"
+                  @click="() => (sidePanel = !sidePanel)"
+                >
+                  <ChevronDoubleRightIcon v-if="sidePanel" class="w-5 h-5" />
+                  <ChevronDoubleLeftIcon v-else class="w-5 h-5" />
+                </button>
+
+                <button
+                  class="btn p-1.5 rounded-full hidden lg:block bg-fv-neutral-800/70 hover:bg-fv-neutral-700/90 transition-transform transform hover:scale-110"
+                  :title="sidePanel ? 'Hide thumbnails' : 'Show thumbnails'"
+                  @click="() => (sidePanel = !sidePanel)"
+                >
+                  <ChevronDoubleRightIcon v-if="sidePanel" class="w-5 h-5" />
+                  <ChevronDoubleLeftIcon v-else class="w-5 h-5" />
+                </button>
+
+                <button
+                  class="btn p-1.5 rounded-full bg-fv-neutral-800/70 hover:bg-fv-neutral-700/90 transition-transform transform hover:scale-110"
+                  aria-label="Close gallery"
+                  @click="setModal(false)"
+                >
+                  <component :is="closeIcon" class="w-5 h-5" />
+                </button>
+              </div>
+            </div>
+          </transition>
+
+          <!-- Mobile Thumbnail Preview -->
+          <transition
+            enter-active-class="transition-transform duration-300 ease-out"
+            enter-from-class="translate-y-full"
+            enter-to-class="translate-y-0"
+            leave-active-class="transition-transform duration-300 ease-in"
+            leave-from-class="translate-y-0"
+            leave-to-class="translate-y-full"
+          >
+            <div
+              v-if="showControls && images.length > 1 && !sidePanel"
+              class="absolute bottom-0 left-0 right-0 p-2 lg:hidden bg-gradient-to-t from-fv-neutral-900/90 to-transparent backdrop-blur-sm z-[50]"
+            >
+              <div class="overflow-x-auto flex space-x-2 pb-1 px-1">
+                <div
+                  v-for="(image, idx) in images"
+                  :key="`mobile_thumb_${id}_${idx}`"
+                  class="flex-shrink-0 w-16 h-16 rounded-lg relative cursor-pointer"
+                  :class="{ 'ring-2 ring-fv-primary-500 ring-offset-1 ring-offset-fv-neutral-900': idx === modelValue }"
+                  @click="$eventBus.emit(`${id}GalleryImage`, idx)"
+                >
+                  <img
+                    v-if="imageComponent === 'img'"
+                    class="w-full h-full object-cover rounded-lg transition duration-200"
+                    :style="{
+                      filter: idx === modelValue ? 'brightness(1)' : 'brightness(0.7)',
+                    }"
+                    :src="getThumbnailUrl(image)"
+                    :alt="`Thumbnail ${idx + 1}`"
+                  >
+                  <component
+                    :is="imageComponent"
+                    v-else
+                    :image="getThumbnailUrl(image).image"
+                    :variant="getThumbnailUrl(image).variant"
+                    :alt="getThumbnailUrl(image).alt"
+                    class="w-full h-full object-cover rounded-lg transition duration-200"
+                    :style="{
+                      filter: idx === modelValue ? 'brightness(1)' : 'brightness(0.7)',
+                    }"
+                  />
+                </div>
+              </div>
+            </div>
+          </transition>
+        </div>
+      </div>
+    </transition>
+
+    <!-- Thumbnail Grid/Mason/Custom Layouts -->
+    <div v-if="mode === 'grid' || mode === 'mason' || mode === 'custom'" class="gallery-grid">
+      <div
+        :class="{
+          'masonry-grid': mode === 'mason',
+          'standard-grid': mode === 'grid',
+          'custom-grid': mode === 'custom',
+        }"
+      >
+        <slot name="thumbnail" />
+        <template v-for="i in images.length" :key="`g_${id}_${i}`">
+          <template v-if="mode === 'mason'">
+            <div
+              v-if="i + (1 % gridHeight) === 0"
+              class="masonry-column relative"
+            >
+              <div v-if="ranking" class="img-gallery-ranking">
+                {{ i }}
+              </div>
+
+              <template v-for="j in gridHeight" :key="`gi_${id}_${i + j}`">
+                <div class="masonry-item">
+                  <img
+                    v-if="i + j - 2 < images.length && imageComponent === 'img'"
+                    class="h-auto max-w-full w-full rounded-lg cursor-pointer shadow-md hover:shadow-xl transition-all duration-300 hover:brightness-110 hover:scale-[1.02]"
+                    :src="getThumbnailUrl(images[i + j - 2])"
+                    :alt="`Gallery image ${i + j - 1}`"
+                    @click="$eventBus.emit(`${id}GalleryImage`, i + j - 2)"
+                  >
+                  <component
+                    :is="imageComponent"
+                    v-else-if="i + j - 2 < images.length"
+                    :image="getThumbnailUrl(images[i + j - 2]).image"
+                    :variant="getThumbnailUrl(images[i + j - 2]).variant"
+                    :alt="getThumbnailUrl(images[i + j - 2]).alt"
+                    :class="`h-auto max-w-full w-full rounded-lg cursor-pointer shadow-md hover:shadow-xl transition-all duration-300 hover:brightness-110 hover:scale-[1.02] ${getBorderColor(
+                      images[i + j - 2],
+                    )}`"
+                    :likes="getThumbnailUrl(images[i + j - 2]).likes"
+                    :show-likes="getThumbnailUrl(images[i + j - 2]).showLikes"
+                    :is-author="getThumbnailUrl(images[i + j - 2]).isAuthor"
+                    :user-uuid="getThumbnailUrl(images[i + j - 2]).userUUID"
+                    @click="$eventBus.emit(`${id}GalleryImage`, i + j - 2)"
+                  />
+                </div>
+              </template>
+            </div>
+          </template>
+          <div v-else class="grid-item relative group">
+            <div v-if="ranking" class="img-gallery-ranking">
+              {{ i }}
+            </div>
+            <div class="overflow-hidden rounded-lg">
+              <img
+                v-if="imageComponent === 'img'"
+                class="h-auto max-w-full w-full rounded-lg cursor-pointer shadow-md transition-all duration-300 group-hover:brightness-110 group-hover:scale-[1.03]"
+                :src="getThumbnailUrl(images[i - 1])"
+                :alt="`Gallery image ${i}`"
+                @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
+              >
+              <component
+                :is="imageComponent"
+                v-else-if="imageComponent"
+                :image="getThumbnailUrl(images[i - 1]).image"
+                :variant="getThumbnailUrl(images[i - 1]).variant"
+                :alt="getThumbnailUrl(images[i - 1]).alt"
+                :class="`h-auto max-w-full w-full rounded-lg cursor-pointer shadow-md transition-all duration-300 group-hover:brightness-110 group-hover:scale-[1.03] ${getBorderColor(
+                  images[i - 1],
+                )}`"
+                :likes="getThumbnailUrl(images[i - 1]).likes"
+                :show-likes="getThumbnailUrl(images[i - 1]).showLikes"
+                :is-author="getThumbnailUrl(images[i - 1]).isAuthor"
+                :user-uuid="getThumbnailUrl(images[i - 1]).userUUID"
+                @click="$eventBus.emit(`${id}GalleryImage`, i - 1)"
+              />
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <!-- Button Mode -->
+    <button
+      v-if="mode === 'button'"
+      :class="`btn ${buttonType ? buttonType : 'primary'} defaults relative overflow-hidden group`"
+      @click="openGalleryImage(0)"
+    >
+      <span class="relative z-10">{{ buttonText ? buttonText : $t("open_gallery_cta") }}</span>
+      <span class="absolute inset-0 bg-white/10 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300" />
+    </button>
+  </div>
+</template>
+
+<style scoped>
+/* Fix for top controls to ensure they're always visible */
+.fixed.top-0 {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  z-index: 51 !important;
+}
+
+/* Transition styles for next (right) navigation */
+.slide-next-enter-active,
+.slide-next-leave-active {
+  transition:
+    opacity 0.15s,
+    transform 0.15s,
+    filter 0.15s;
+}
+
+.slide-next-enter-from {
+  opacity: 0;
+  transform: translateX(100%);
+  filter: blur(10px);
+}
+
+.slide-next-enter-to {
+  opacity: 1;
+  transform: translateX(0);
+  filter: blur(0);
+}
+
+.slide-next-leave-from {
+  opacity: 1;
+  transform: translateX(0);
+  filter: blur(0);
+}
+
+.slide-next-leave-to {
+  opacity: 0;
+  transform: translateX(-100%);
+  filter: blur(10px);
+}
+
+/* Transition styles for prev (left) navigation */
+.slide-prev-enter-active,
+.slide-prev-leave-active {
+  transition:
+    opacity 0.15s,
+    transform 0.15s,
+    filter 0.15s;
+}
+
+.slide-prev-enter-from {
+  opacity: 0;
+  transform: translateX(-100%);
+  filter: blur(10px);
+}
+
+.slide-prev-enter-to {
+  opacity: 1;
+  transform: translateX(0);
+  filter: blur(0);
+}
+
+.slide-prev-leave-from {
+  opacity: 1;
+  transform: translateX(0);
+  filter: blur(0);
+}
+
+.slide-prev-leave-to {
+  opacity: 0;
+  transform: translateX(100%);
+  filter: blur(10px);
+}
+
+/* Modern grids */
+.gallery-grid {
+  min-height: 200px;
+}
+
+.standard-grid {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: 0.75rem;
+}
+
+@media (min-width: 480px) {
+  .standard-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 768px) {
+  .standard-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .standard-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+@media (min-width: 1280px) {
+  .standard-grid {
+    grid-template-columns: repeat(5, 1fr);
+  }
+}
+
+@media (min-width: 1536px) {
+  .standard-grid {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+
+.masonry-grid {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: 0.75rem;
+}
+
+@media (min-width: 480px) {
+  .masonry-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 768px) {
+  .masonry-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .masonry-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.masonry-column {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.masonry-item {
+  break-inside: avoid;
+  margin-bottom: 0.75rem;
+}
+
+.grid-item {
+  break-inside: avoid;
+  margin-bottom: 0.75rem;
+}
+
+.img-gallery-ranking {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  background-color: rgba(0, 0, 0, 0.6);
+  color: white;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  z-index: 10;
+}
+</style>