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
2026-08-28 09:28:53 -05:00
co-authored by Cursor
parent f512d6c57a
commit a50c236c03
2 changed files with 158 additions and 64 deletions
+40 -1
View File
@@ -1154,7 +1154,12 @@
@click.prevent="onSelectClick(entry.key, $event)"
>
</label>
<button type="button" class="relative h-16 w-16 shrink-0 overflow-hidden rounded-xl bg-zinc-900" @click="openClip(entry.group.head)">
<button
type="button"
class="relative h-16 w-16 shrink-0 overflow-hidden rounded-xl bg-zinc-900"
:title="entry.group.head.hideThumbnail ? 'Preview hidden · click to open' : undefined"
@click="openClip(entry.group.head)"
>
<span v-if="entry.group.head.hideThumbnail" class="sensitive-glow block h-full w-full" />
<img v-else-if="entry.group.head.hasThumbnail" :src="`/api/library/clips/${entry.group.head.id}/thumb`" alt="" loading="lazy" decoding="async" class="h-full w-full object-cover">
<span v-else class="block h-full w-full bg-zinc-800" />
@@ -1194,6 +1199,14 @@
<button v-if="entry.group.parts.length > 1" type="button" class="text-xs text-amber-200" @click="toggleFamily(entry.group.key)">
{{ expandedFamilies[entry.group.key] ? 'Collapse' : `Expand ${entry.group.parts.length} parts` }}
</button>
<button
v-if="entry.group.parts.length > 1 && entry.group.parts.some(part => part.hideThumbnail)"
type="button"
class="text-xs text-amber-300"
@click="toggleFamilyFrames(entry.group)"
>
{{ familyFramesRevealed(entry.group.parts) ? 'Hide frames' : 'Click to reveal' }}
</button>
<button type="button" class="text-xs text-amber-300" @click="openClip(entry.group.head)">Open</button>
<button type="button" class="text-xs text-amber-300" @click="openExtend(entry.group.head)">Extend</button>
<button type="button" class="text-xs text-amber-300" @click="startRename(entry.group.head, true)">Rename</button>
@@ -1225,10 +1238,12 @@
>
<ClipFrameThumbs
:hidden="item.hideThumbnail"
:revealed="!!stitchReveal[item.id]"
:still-id="partIndex === 0 ? item.stillId : undefined"
:from-clip-id="previousChronoClipId(entry.group.parts, partIndex)"
:clip-id="item.id"
:show-first-frame="partIndex > 0 || !item.stillId"
@update:revealed="stitchReveal[item.id] = $event"
/>
<div class="min-w-0 flex-1">
<div class="flex items-start gap-2">
@@ -1255,6 +1270,14 @@
@update-label="(refIndex, label) => updateClipRefLabel(item, refIndex, label)"
/>
<div class="mt-1.5 flex flex-wrap items-center gap-3">
<button
v-if="item.hideThumbnail"
type="button"
class="text-xs text-amber-300"
@click="stitchReveal[item.id] = !stitchReveal[item.id]"
>
{{ stitchReveal[item.id] ? 'Hide frames' : 'Click to reveal' }}
</button>
<button type="button" class="text-xs text-amber-300" @click="openClip(item)">Open</button>
<button type="button" class="text-xs text-amber-300" @click="openExtend(item)">Extend</button>
<button type="button" class="text-xs text-amber-300" @click="startRename(item)">Rename</button>
@@ -1735,6 +1758,7 @@ const overallProgress = ref(0)
const completedChainStep = ref(0)
const activeChainPlan = ref<{ label: string; prompt: string; duration: number }[]>([])
const expandedFamilies = ref<Record<string, boolean>>({})
const stitchReveal = reactive<Record<string, boolean>>({})
const elapsedMs = ref(0)
const videoUrl = ref('')
const videoSeekable = ref(true)
@@ -2351,6 +2375,21 @@ function toggleFamily(key: string) {
expandedFamilies.value = { ...expandedFamilies.value, [key]: !expandedFamilies.value[key] }
}
function familyFramesRevealed(parts: LibraryClip[]) {
const hidden = parts.filter(part => part.hideThumbnail)
return hidden.length > 0 && hidden.every(part => stitchReveal[part.id])
}
function toggleFamilyFrames(group: { key: string; parts: LibraryClip[] }) {
const hidden = group.parts.filter(part => part.hideThumbnail)
if (!hidden.length) return
const next = !familyFramesRevealed(group.parts)
if (next && group.parts.length > 1) {
expandedFamilies.value = { ...expandedFamilies.value, [group.key]: true }
}
for (const part of hidden) stitchReveal[part.id] = next
}
function chainPartDone(index: number) {
return index < completedChainStep.value
}