@iqual/nuxt-icms 1.2.1 → 1.2.2

package/components/DesignSystem/Molecules/MediaLightbox.vue

@@ -0,0 +1,273 @@
+<template>
+  <Teleport to="body">
+    <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="isOpen"
+        ref="lightboxContainer"
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-sm"
+        @click.self="$emit('close')"
+      >
+        <!-- Close button -->
+        <button
+          type="button"
+          class="absolute right-4 top-4 z-10 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black"
+          aria-label="Close lightbox"
+          @click="$emit('close')"
+        >
+          <X :size="24" />
+        </button>
+
+        <!-- Loading spinner -->
+        <div
+          v-if="isLoading"
+          class="absolute inset-0 flex items-center justify-center"
+          aria-live="polite"
+          aria-label="Loading media"
+        >
+          <div class="h-8 w-8 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
+        </div>
+
+        <!-- Carousel-based media container -->
+        <div class="relative h-full w-full max-h-[90vh] max-w-[90vw] flex items-center justify-center">
+          <Carousel
+            v-if="mediaObjects.length > 0"
+            :opts="carouselOptions"
+            orientation="horizontal"
+            class="w-full h-full flex flex-col"
+            @init-api="onCarouselInit"
+          >
+            <template #default="{ scrollPrev, scrollNext, canScrollPrev, canScrollNext }">
+              <!-- Navigation buttons using carousel methods -->
+              <button
+                v-if="mediaObjects.length > 1"
+                type="button"
+                class="absolute left-4 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black disabled:opacity-50 disabled:cursor-not-allowed"
+                aria-label="Previous media"
+                :disabled="!canScrollPrev"
+                @click="scrollPrev"
+              >
+                <ChevronLeft :size="24" />
+              </button>
+
+              <button
+                v-if="mediaObjects.length > 1"
+                type="button"
+                class="absolute right-4 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black disabled:opacity-50 disabled:cursor-not-allowed"
+                aria-label="Next media"
+                :disabled="!canScrollNext"
+                @click="scrollNext"
+              >
+                <ChevronRight :size="24" />
+              </button>
+
+              <CarouselContent class="h-full flex-1">
+                <CarouselItem
+                  v-for="(media, index) in mediaObjects"
+                  :key="index"
+                  class="flex h-full w-full items-center justify-center min-h-0"
+                >
+                  <!-- Use Media component directly -->
+                  <Media
+                    :media="media"
+                    :show-caption="false"
+                    :video-autoplay="index === currentIndex && media.type === 'MediaVideo'"
+                    :video-muted="true"
+                    :video-controls="true"
+                    :media-class="getMediaWrapperClass(media)"
+                    :element-class="getMediaElementClass(media)"
+                    class="max-h-full max-w-full"
+                    @load="handleMediaLoad"
+                    @error="handleMediaError"
+                  />
+
+                  <!-- Fallback/error state -->
+                  <div
+                    v-if="!['MediaImage', 'MediaVideo', 'MediaRemoteVideo', 'MediaIcon'].includes(media.type)"
+                    class="flex flex-col items-center text-white"
+                  >
+                    <AlertCircle :size="48" class="mb-4 text-red-400" />
+                    <p class="text-lg">Unable to display this media</p>
+                    <p class="text-sm text-gray-400">Unsupported format: {{ media.type }}</p>
+                  </div>
+                </CarouselItem>
+              </CarouselContent>
+            </template>
+          </Carousel>
+        </div>
+
+        <!-- Caption display -->
+        <div
+          v-if="currentCaption"
+          class="absolute bottom-0 left-4 h-[5vh] right-4 z-10 text-center leading-[5vh]"
+        >
+          <p class="text-white">
+            {{ currentCaption }}
+          </p>
+        </div>
+
+        <!-- Counter -->
+        <div
+          v-if="mediaObjects.length > 1"
+          class="absolute top-2 left-2 z-10 rounded px-3 py-1 text-sm text-white"
+          aria-live="polite"
+        >
+          {{ currentIndex + 1 }} / {{ mediaObjects.length }}
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, nextTick, onMounted, onUnmounted, watch } from 'vue'
+import { ChevronLeft, ChevronRight, X, AlertCircle } from 'lucide-vue-next'
+import { Carousel, CarouselContent, CarouselItem } from '@iqual/nuxt-icms/components/ui/carousel'
+import type { CarouselApi } from '@iqual/nuxt-icms/components/ui/carousel'
+import { Media } from '#components'
+import type { MediaFragment } from '#graphql-operations'
+
+interface Props {
+  mediaObjects: MediaFragment[]
+  isOpen: boolean
+  currentIndex: number
+  captions?: string[]
+}
+
+interface Emits {
+  (e: 'close'): void
+  (e: 'update:currentIndex', index: number): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  captions: () => []
+})
+
+const emit = defineEmits<Emits>()
+
+// Refs
+const lightboxContainer = ref<HTMLElement>()
+const isLoading = ref(false)
+const carouselApi = ref<CarouselApi>()
+
+// Computed properties
+const currentCaption = computed(() => props.captions[props.currentIndex] || '')
+
+// Carousel configuration
+const carouselOptions = computed(() => ({
+  startIndex: props.currentIndex,
+  loop: true,
+  skipSnaps: false,
+  dragFree: false,
+  containScroll: 'trimSnaps' as const
+}))
+
+// Helper to get wrapper classes for media containers
+const getMediaWrapperClass = (media: MediaFragment) => {
+  switch (media.type) {
+    case 'MediaRemoteVideo':
+      return 'w-full h-full flex items-center justify-center'
+    default:
+      return 'w-full h-full flex items-center justify-center'
+  }
+}
+
+// Helper to get element classes for media
+const getMediaElementClass = (media: MediaFragment) => {
+  switch (media.type) {
+    case 'MediaImage':
+      return 'max-h-full max-w-full object-contain'
+    case 'MediaVideo':
+      return 'max-h-full max-w-full'
+    case 'MediaRemoteVideo':
+      return 'w-full h-full max-w-[90vw] max-h-[90vh]'
+    default:
+      return ''
+  }
+}
+
+// Media loading handlers
+const handleMediaLoad = () => {
+  isLoading.value = false
+}
+
+const handleMediaError = () => {
+  isLoading.value = false
+  console.warn('Failed to load media item')
+}
+
+// Carousel event handlers
+const onCarouselInit = (api: CarouselApi) => {
+  carouselApi.value = api
+  
+  if (api) {
+    api.on('select', () => {
+      const selectedIndex = api.selectedScrollSnap()
+      emit('update:currentIndex', selectedIndex)
+    })
+  }
+}
+
+// Update carousel when currentIndex changes externally
+const updateCarousel = async () => {
+  if (carouselApi.value) {
+    await nextTick()
+    carouselApi.value.scrollTo(props.currentIndex, false)
+  }
+}
+
+// Watch for external index changes
+watch(() => props.currentIndex, updateCarousel)
+
+// Keyboard navigation
+const handleKeydown = (event: KeyboardEvent) => {
+  if (!props.isOpen) return
+
+  switch (event.key) {
+    case 'Escape':
+      emit('close')
+      break
+    case 'ArrowLeft':
+      event.preventDefault()
+      carouselApi.value?.scrollPrev()
+      break
+    case 'ArrowRight':
+      event.preventDefault()
+      carouselApi.value?.scrollNext()
+      break
+  }
+}
+
+// Focus management
+const focusLightbox = () => {
+  nextTick(() => {
+    lightboxContainer.value?.focus()
+  })
+}
+
+// Lifecycle
+onMounted(() => {
+  document.addEventListener('keydown', handleKeydown)
+  if (props.isOpen) {
+    focusLightbox()
+  }
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown)
+})
+
+// Watch for lightbox opening
+watch(() => props.isOpen, (isOpen) => {
+  if (isOpen) {
+    focusLightbox()
+    updateCarousel()
+  }
+})
+</script>

package/components/DesignSystem/Molecules/MediaSlider.vue

@@ -34,56 +34,50 @@
       </CarouselNext>
     </Carousel>
 
-    <FsLightbox
-      :toggler="toggleLightbox"
-      :sources="sources"
-      :slide="currentSlide"
-      :customAttributes="customAttributes"
+    <!-- MediaLightbox with Media component integration -->
+    <DesignSystemMoleculesMediaLightbox
+      :media-objects="media?.filter((item): item is MediaFragment => Boolean(item)) || []"
+      :is-open="isOpen"
+      :current-index="currentIndex"
       :captions="captions"
+      @close="closeLightbox"
+      @update:current-index="setCurrentIndex"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
 import cn from '@iqual/nuxt-icms/composables/useCn'
+import { useMediaLightbox } from '@iqual/nuxt-icms/composables/useMediaLightbox'
 import { tv } from 'tailwind-variants'
 import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
 import type { MediaFragment } from '#graphql-operations'
-import FsLightbox from 'fslightbox-vue'
 
 const props = defineProps<{
   media?: (MediaFragment | null)[] | undefined
   sliderClass?: string
   mediaClass?: string
-  colorScheme?: string
+  colorScheme?: 'white'
   showCaption?: boolean
   figcaptionClass?: string
   elementClass?: string
 }>()
 
 const {
-  toggleLightbox,
-  currentSlide,
+  isOpen,
+  currentIndex,
   openLightbox,
-  sources,
-  customAttributes,
+  closeLightbox,
+  setCurrentIndex,
   captions,
-} = useLightbox(props.media)
+} = useMediaLightbox(props.media)
 
 const carouselButton = tv({
-  base: 'size-10 border-none disabled:opacity-40 @sm:size:12 @md:size:16 [&_svg]:size-auto',
+  base: 'bg-white text-black ring-black',
   variants: {
     colorScheme: {
-      none: 'bg-gray-50 text-black hover:bg-black hover:text-white dark:bg-gray-50 dark:text-black hover:dark:bg-black hover:dark:text-white',
-      dark: 'bg-black text-white hover:bg-gray-50 hover:text-black dark:bg-black dark:text-white hover:dark:bg-gray-50 hover:dark:text-black',
-      light:
-        'bg-gray-50 text-black hover:bg-black hover:text-white dark:bg-gray-50 dark:text-black hover:dark:bg-black hover:dark:text-white',
-      accent:
-        'bg-primary-600 text-white hover:bg-primary-800 hover:text-white dark:bg-primary-600 dark:text-white hover:dark:bg-primary-800 hover:dark:text-white',
-    },
-  },
-  defaultVariants: {
-    colorScheme: 'none',
-  },
+      white: 'bg-black text-white ring-white'
+    }
+  }
 })
-</script>
+</script>