aigen/components/ClipFrameThumbs.vue

<template>
  <div class="shrink-0">
    <div v-if="concealed" class="flex w-[6.5rem] flex-col items-center gap-0.5">
      <button
        type="button"
        class="relative h-12 w-full overflow-hidden rounded-lg bg-zinc-900"
        aria-label="Click to reveal frames"
        title="Click to reveal"
        @click.stop="revealed = true"
      >
        <span class="sensitive-glow block h-full w-full" />
      </button>
      <span class="text-[10px] leading-none text-zinc-500">Hidden</span>
    </div>
    <div v-else class="flex items-start gap-1.5">
      <div
        v-for="slot in visibleSlots"
        :key="slot.key"
        class="flex w-12 flex-col items-center gap-0.5"
      >
        <button
          type="button"
          class="relative h-12 w-12 overflow-hidden rounded-lg bg-zinc-900"
          :aria-label="slot.aria"
          :title="slot.label"
          @click.stop="onSlotClick(slot)"
        >
          <img
            :src="slot.thumb"
            alt=""
            loading="lazy"
            decoding="async"
            class="h-full w-full object-cover"
            @error="failed[slot.key] = true"
          >
        </button>
        <span class="text-[10px] leading-none text-zinc-500">{{ slot.label }}</span>
      </div>
    </div>
    <button
      v-if="hidden"
      type="button"
      class="mt-1 text-xs text-amber-300 hover:text-amber-200"
      @click.stop="toggleFrames"
    >
      {{ revealed ? 'Hide frames' : 'Click to reveal' }}
    </button>

    <Teleport to="body">
      <div
        v-if="preview"
        class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
        @click.self="closePreview"
      >
        <img
          :src="preview.src"
          :alt="preview.label"
          class="max-h-[70vh] max-w-[min(90vw,56rem)] object-contain"
          @click.stop
        >
      </div>
    </Teleport>
  </div>
</template>

<script setup lang="ts">
type SlotKey = 'still' | 'from' | 'first'

interface FrameSlot {
  key: SlotKey
  label: string
  aria: string
  thumb: string
  full: string
}

const props = defineProps<{
  hidden?: boolean
  revealed?: boolean
  stillId?: string
  fromClipId?: string
  clipId: string
  showFirstFrame?: boolean
}>()

const emit = defineEmits<{
  'update:revealed': [value: boolean]
}>()

const failed = reactive({ still: false, from: false, first: false })
const preview = ref<{ src: string; label: string } | null>(null)
const localRevealed = ref(false)

const revealed = computed({
  get: () => (props.revealed !== undefined ? props.revealed : localRevealed.value),
  set: (value: boolean) => {
    localRevealed.value = value
    emit('update:revealed', value)
  }
})

const concealed = computed(() => props.hidden === true && !revealed.value)

const visibleSlots = computed(() => {
  if (concealed.value) return [] as FrameSlot[]
  const list: FrameSlot[] = []
  if (props.stillId) {
    list.push({
      key: 'still',
      label: 'Start',
      aria: 'Start still',
      thumb: frameThumb('still'),
      full: frameFull('still')
    })
  }
  if (props.fromClipId) {
    list.push({
      key: 'from',
      label: 'From prev',
      aria: 'Last frame of previous clip',
      thumb: frameThumb('from'),
      full: frameFull('from')
    })
  }
  if (props.showFirstFrame && props.clipId) {
    list.push({
      key: 'first',
      label: 'This clip',
      aria: 'First frame of this clip',
      thumb: frameThumb('first'),
      full: frameFull('first')
    })
  }
  return list.filter(slot => !failed[slot.key])
})

function frameThumb(key: SlotKey) {
  if (key === 'still' && props.stillId) return `/api/library/stills/${props.stillId}?thumb=1`
  if (key === 'from' && props.fromClipId) return `/api/library/clips/${props.fromClipId}/last-frame?thumb=1&v=parent`
  if (key === 'first' && props.clipId) return `/api/library/clips/${props.clipId}/first-frame?thumb=1&v=join`
  return ''
}

function frameFull(key: SlotKey) {
  if (key === 'still' && props.stillId) return `/api/library/stills/${props.stillId}`
  if (key === 'from' && props.fromClipId) return `/api/library/clips/${props.fromClipId}/last-frame?v=parent`
  if (key === 'first' && props.clipId) return `/api/library/clips/${props.clipId}/first-frame?v=join`
  return ''
}

watch(
  () => [props.hidden, props.stillId, props.fromClipId, props.clipId, props.showFirstFrame],
  () => {
    failed.still = false
    failed.from = false
    failed.first = false
    localRevealed.value = false
    if (props.hidden) closePreview()
  }
)

watch(
  () => props.revealed,
  (value) => {
    if (value) localRevealed.value = true
    else {
      localRevealed.value = false
      closePreview()
    }
  }
)

function onSlotClick(slot: FrameSlot) {
  if (!slot.full) return
  preview.value = { src: slot.full, label: slot.label }
}

function toggleFrames() {
  revealed.value = !revealed.value
  if (!revealed.value) closePreview()
}

function closePreview() {
  preview.value = null
}

function onKey(event: KeyboardEvent) {
  if (event.key === 'Escape') closePreview()
}

watch(preview, (value) => {
  if (value) window.addEventListener('keydown', onKey)
  else window.removeEventListener('keydown', onKey)
})

onUnmounted(() => {
  window.removeEventListener('keydown', onKey)
})
</script>