Let privacy-blurred stitch thumbs click-to-reveal so Start/From prev/This clip can be inspected.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Towsty
+118
-63
@@ -1,73 +1,40 @@
|
||||
<template>
|
||||
<div class="shrink-0">
|
||||
<div class="flex items-start gap-1.5">
|
||||
<div v-if="stillId && (hidden || !failed.still)" class="flex w-12 flex-col items-center gap-0.5">
|
||||
<span v-if="hidden" class="relative h-12 w-12 overflow-hidden rounded-lg">
|
||||
<span class="sensitive-glow block h-full w-full" />
|
||||
</span>
|
||||
<div
|
||||
v-for="slot in visibleSlots"
|
||||
:key="slot.key"
|
||||
class="flex w-12 flex-col items-center gap-0.5"
|
||||
>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="relative h-12 w-12 overflow-hidden rounded-lg bg-zinc-900"
|
||||
aria-label="Start still"
|
||||
@click.stop="openPreview(stillFull, 'Start')"
|
||||
:aria-label="concealed ? `Click to reveal ${slot.label}` : slot.aria"
|
||||
:title="concealed ? 'Click to reveal' : slot.label"
|
||||
@click.stop="onSlotClick(slot)"
|
||||
>
|
||||
<span v-if="concealed" class="sensitive-glow block h-full w-full" />
|
||||
<img
|
||||
:src="stillThumb"
|
||||
v-else
|
||||
:src="slot.thumb"
|
||||
alt=""
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
class="h-full w-full object-cover"
|
||||
@error="failed.still = true"
|
||||
@error="failed[slot.key] = true"
|
||||
>
|
||||
</button>
|
||||
<span class="text-[10px] leading-none text-zinc-500">Start</span>
|
||||
</div>
|
||||
<div v-if="fromClipId && (hidden || !failed.from)" class="flex w-12 flex-col items-center gap-0.5">
|
||||
<span v-if="hidden" class="relative h-12 w-12 overflow-hidden rounded-lg">
|
||||
<span class="sensitive-glow block h-full w-full" />
|
||||
</span>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="relative h-12 w-12 overflow-hidden rounded-lg bg-zinc-900"
|
||||
aria-label="Last frame of previous clip"
|
||||
@click.stop="openPreview(fromFull, 'From prev')"
|
||||
>
|
||||
<img
|
||||
:src="fromThumb"
|
||||
alt=""
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
class="h-full w-full object-cover"
|
||||
@error="failed.from = true"
|
||||
>
|
||||
</button>
|
||||
<span class="text-[10px] leading-none text-zinc-500">From prev</span>
|
||||
</div>
|
||||
<div v-if="showFirstFrame && clipId && (hidden || !failed.first)" class="flex w-12 flex-col items-center gap-0.5">
|
||||
<span v-if="hidden" class="relative h-12 w-12 overflow-hidden rounded-lg">
|
||||
<span class="sensitive-glow block h-full w-full" />
|
||||
</span>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="relative h-12 w-12 overflow-hidden rounded-lg bg-zinc-900"
|
||||
aria-label="First frame of this clip"
|
||||
@click.stop="openPreview(firstFull, 'This clip')"
|
||||
>
|
||||
<img
|
||||
:src="firstThumb"
|
||||
alt=""
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
class="h-full w-full object-cover"
|
||||
@error="failed.first = true"
|
||||
>
|
||||
</button>
|
||||
<span class="text-[10px] leading-none text-zinc-500">This clip</span>
|
||||
<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
|
||||
@@ -87,23 +54,90 @@
|
||||
</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 stillThumb = computed(() => !props.hidden && props.stillId ? `/api/library/stills/${props.stillId}?thumb=1` : '')
|
||||
const stillFull = computed(() => !props.hidden && props.stillId ? `/api/library/stills/${props.stillId}` : '')
|
||||
const fromThumb = computed(() => !props.hidden && props.fromClipId ? `/api/library/clips/${props.fromClipId}/last-frame?thumb=1` : '')
|
||||
const fromFull = computed(() => !props.hidden && props.fromClipId ? `/api/library/clips/${props.fromClipId}/last-frame` : '')
|
||||
const firstThumb = computed(() => !props.hidden && props.clipId ? `/api/library/clips/${props.clipId}/first-frame?thumb=1` : '')
|
||||
const firstFull = computed(() => !props.hidden && props.clipId ? `/api/library/clips/${props.clipId}/first-frame` : '')
|
||||
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(() => {
|
||||
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 => concealed.value || !failed[slot.key])
|
||||
})
|
||||
|
||||
function frameThumb(key: SlotKey) {
|
||||
if (concealed.value) return ''
|
||||
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`
|
||||
if (key === 'first' && props.clipId) return `/api/library/clips/${props.clipId}/first-frame?thumb=1`
|
||||
return ''
|
||||
}
|
||||
|
||||
function frameFull(key: SlotKey) {
|
||||
if (concealed.value) return ''
|
||||
if (key === 'still' && props.stillId) return `/api/library/stills/${props.stillId}`
|
||||
if (key === 'from' && props.fromClipId) return `/api/library/clips/${props.fromClipId}/last-frame`
|
||||
if (key === 'first' && props.clipId) return `/api/library/clips/${props.clipId}/first-frame`
|
||||
return ''
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [props.hidden, props.stillId, props.fromClipId, props.clipId, props.showFirstFrame],
|
||||
@@ -111,13 +145,34 @@ watch(
|
||||
failed.still = false
|
||||
failed.from = false
|
||||
failed.first = false
|
||||
localRevealed.value = false
|
||||
if (props.hidden) closePreview()
|
||||
}
|
||||
)
|
||||
|
||||
function openPreview(src: string, label: string) {
|
||||
if (props.hidden || !src) return
|
||||
preview.value = { src, label }
|
||||
watch(
|
||||
() => props.revealed,
|
||||
(value) => {
|
||||
if (value) localRevealed.value = true
|
||||
else {
|
||||
localRevealed.value = false
|
||||
closePreview()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
function onSlotClick(slot: FrameSlot) {
|
||||
if (concealed.value) {
|
||||
revealed.value = true
|
||||
return
|
||||
}
|
||||
if (!slot.full) return
|
||||
preview.value = { src: slot.full, label: slot.label }
|
||||
}
|
||||
|
||||
function toggleFrames() {
|
||||
revealed.value = !revealed.value
|
||||
if (!revealed.value) closePreview()
|
||||
}
|
||||
|
||||
function closePreview() {
|
||||
|
||||
Reference in New Issue
Block a user