diff --git a/components/ImagePickerModal.vue b/components/ImagePickerModal.vue index 07995e4..0f369a4 100644 --- a/components/ImagePickerModal.vue +++ b/components/ImagePickerModal.vue @@ -95,7 +95,7 @@ >
{ if (!props.asset) return '' if (props.asset.kind === 'clip') return `/api/library/clips/${props.asset.id}/thumb` - return `/api/library/stills/${props.asset.id}` + return `/api/library/stills/${props.asset.id}/thumb` }) diff --git a/components/studio2/LibraryModal.vue b/components/studio2/LibraryModal.vue index 78b5063..8322e6f 100644 --- a/components/studio2/LibraryModal.vue +++ b/components/studio2/LibraryModal.vue @@ -60,6 +60,7 @@ v-for="entry in entries" :key="entry.key" class="lib-modal-tile" + :data-thumb-key="entry.key" :data-active="entry.key === focusedKey ? 'true' : undefined" @click="pickEntry(entry)" > @@ -77,9 +78,10 @@ />
@@ -170,6 +172,10 @@ const clips = ref([]) const stills = ref([]) const tracks = ref([]) const fetchedAt = ref(0) +const nextCursor = ref(null) +const liveThumbs = ref(new Set()) +let thumbObserver: IntersectionObserver | null = null +let scrollLoadBound = false const activeFolderId = computed(() => props.folderId || folders.value[0]?.id || 'all') @@ -209,7 +215,7 @@ const detailRows = computed(() => { function thumbSrc(entry: LibraryEntry) { if (entry.kind === 'clip' && entry.group) return `/api/library/clips/${entry.group.head.id}/thumb` if (entry.kind === 'track') return '' - if (entry.stillGroup) return `/api/library/stills/${entry.stillGroup.head.id}?thumb=1` + if (entry.stillGroup) return `/api/library/stills/${entry.stillGroup.head.id}/thumb` return '' } @@ -259,14 +265,37 @@ function onDeleteClick() { window.setTimeout(() => { void fetchLibrary(true) }, 500) } -function applyLibrary(data: any) { - folders.value = data?.folders || [] - clips.value = data?.clips || [] - stills.value = data?.stills || [] - tracks.value = data?.tracks || [] +function mergeIds(prev: { id: string }[], next: { id: string }[]) { + const map = new Map(prev.map(item => [item.id, item])) + for (const item of next) map.set(item.id, item) + return [...map.values()] +} + +function applyLibraryPage(data: any, replace: boolean) { + folders.value = data?.folders || folders.value + if (replace) { + clips.value = data?.clips || [] + stills.value = data?.stills || [] + tracks.value = data?.tracks || [] + } else { + clips.value = mergeIds(clips.value, data?.clips || []) as LibraryClip[] + stills.value = mergeIds(stills.value, data?.stills || []) as LibraryStill[] + tracks.value = mergeIds(tracks.value, data?.tracks || []) as LibraryTrack[] + } + nextCursor.value = data?.nextCursor || null fetchedAt.value = Date.now() } +async function fetchLibraryPage(cursor: string | null, replace: boolean) { + const folder = activeFolderId.value && activeFolderId.value !== 'all' ? activeFolderId.value : '' + const type = filter.value === 'all' ? 'all' : filter.value === 'images' ? 'images' : filter.value === 'videos' ? 'videos' : 'music' + const qs = new URLSearchParams({ limit: '50' }) + if (folder) qs.set('folderId', folder) + if (type !== 'all') qs.set('type', type) + if (cursor) qs.set('cursor', cursor) + return await $fetch(`/api/library?${qs.toString()}`) +} + async function fetchLibrary(force = false) { if (loading.value) return const stale = !fetchedAt.value || Date.now() - fetchedAt.value > 15_000 @@ -274,15 +303,64 @@ async function fetchLibrary(force = false) { if (!force && !empty && !stale) return loading.value = true loadError.value = '' + liveThumbs.value = new Set() try { - applyLibrary(await $fetch('/api/library?light=1')) + const first = await fetchLibraryPage(null, true) + applyLibraryPage(first, true) + loading.value = false + nextTick(() => observeThumbs()) + // Pull remaining pages in the background — first paint already has ≤50 items + let cursor = first?.nextCursor || null + while (cursor) { + const more = await fetchLibraryPage(cursor, false) + applyLibraryPage(more, false) + cursor = more?.nextCursor || null + nextTick(() => observeThumbs()) + } } catch (e: any) { loadError.value = e?.data?.statusMessage || e?.message || 'Could not load library' - } finally { loading.value = false } } +function observeThumbs() { + if (!import.meta.client) return + const root = gridScrollEl.value + if (!root) return + if (thumbObserver) thumbObserver.disconnect() + thumbObserver = new IntersectionObserver((entries) => { + let changed = false + const next = new Set(liveThumbs.value) + for (const entry of entries) { + if (!entry.isIntersecting) continue + const key = (entry.target as HTMLElement).dataset.thumbKey + if (!key || next.has(key)) continue + next.add(key) + changed = true + } + if (changed) liveThumbs.value = next + }, { root, rootMargin: '200px 0px', threshold: 0.01 }) + root.querySelectorAll('[data-thumb-key]').forEach((el) => thumbObserver!.observe(el)) +} + +function onGridScroll() { + const el = gridScrollEl.value + if (!el || !nextCursor.value || loading.value) return + if (el.scrollTop + el.clientHeight < el.scrollHeight - 240) return + void fetchMore() +} + +async function fetchMore() { + if (!nextCursor.value || loading.value) return + loading.value = true + try { + const more = await fetchLibraryPage(nextCursor.value, false) + applyLibraryPage(more, false) + nextTick(() => observeThumbs()) + } catch { /* keep what we have */ } + finally { loading.value = false } +} + function onTab(e: KeyboardEvent) { const root = dialogEl.value if (!root) return @@ -308,15 +386,30 @@ watch(() => props.open, (on) => { void fetchLibrary(true) nextTick(() => { dialogEl.value?.focus() - if (gridScrollEl.value) gridScrollEl.value.scrollTop = 0 + if (gridScrollEl.value) { + gridScrollEl.value.scrollTop = 0 + if (!scrollLoadBound) { + gridScrollEl.value.addEventListener('scroll', onGridScroll, { passive: true }) + scrollLoadBound = true + } + observeThumbs() + } }) } else { document.body.style.overflow = '' + thumbObserver?.disconnect() + thumbObserver = null } }) +watch(entries, () => nextTick(() => observeThumbs())) + onBeforeUnmount(() => { - if (import.meta.client) document.body.style.overflow = '' + if (import.meta.client) { + document.body.style.overflow = '' + gridScrollEl.value?.removeEventListener('scroll', onGridScroll) + thumbObserver?.disconnect() + } }) diff --git a/pages/library.vue b/pages/library.vue index 73f89df..3656062 100644 --- a/pages/library.vue +++ b/pages/library.vue @@ -802,7 +802,11 @@ function applyLibrary(data: unknown) { } async function loadLibrary() { - applyLibrary(await $fetch('/api/library?light=1')) + // First page of metadata only — grid paints immediately; full catalog follows for grouping/search + const first = await $fetch('/api/library?limit=50') + applyLibrary(first) + const data = await $fetch('/api/library?light=1') + applyLibrary(data) } function folderChipCount(folder: LibraryFolder) { @@ -881,7 +885,7 @@ async function toggleFocusedHidden() { function thumbSrc(entry: LibraryEntry) { if (entry.kind === 'clip' && entry.group) return `/api/library/clips/${entry.group.head.id}/thumb` if (entry.kind === 'track') return '' - if (entry.stillGroup) return `/api/library/stills/${entry.stillGroup.parts[cardImageIndex(entry)].id}?thumb=1` + if (entry.stillGroup) return `/api/library/stills/${entry.stillGroup.parts[cardImageIndex(entry)].id}/thumb` return '' } @@ -907,7 +911,7 @@ function partThumb(part: LibraryClip | LibraryStill) { // Prefer this clip’s first frame so siblings don’t all look like the Start thumb. return `/api/library/clips/${clip.id}/first-frame?thumb=1&v=${encodeURIComponent(clip.id)}` } - return `/api/library/stills/${part.id}?thumb=1` + return `/api/library/stills/${part.id}/thumb` } function focusPart(id: string) { @@ -1309,10 +1313,9 @@ let resizeObserver: ResizeObserver | null = null let observedScroller: HTMLElement | null = null onMounted(async () => { window.addEventListener('keydown', onKey) - const [me] = await Promise.all([ - $fetch<{ user?: { name?: string; email?: string }; authEnabled?: boolean; authMode?: string; instanceName?: string }>('/api/auth/me').catch(() => ({ user: null })), - loadLibrary().catch(() => applyLibrary({ folders: [], clips: [], stills: [] })) - ]) + // Do not block chrome/grid on the full catalog — first page paints via loadLibrary's first apply + void loadLibrary().catch(() => applyLibrary({ folders: [], clips: [], stills: [] })) + const me = await $fetch<{ user?: { name?: string; email?: string }; authEnabled?: boolean; authMode?: string; instanceName?: string }>('/api/auth/me').catch(() => ({ user: null })) instanceName.value = me.instanceName || instanceName.value await nextTick() measure() diff --git a/server/api/library/clips/[id]/thumb.get.ts b/server/api/library/clips/[id]/thumb.get.ts index cd0719b..402e192 100644 --- a/server/api/library/clips/[id]/thumb.get.ts +++ b/server/api/library/clips/[id]/thumb.get.ts @@ -13,7 +13,7 @@ export default defineEventHandler(async (event) => { } const etag = fileEtag(path) setHeader(event, 'ETag', etag) - setHeader(event, 'Cache-Control', 'private, max-age=86400, stale-while-revalidate=604800') + setHeader(event, 'Cache-Control', 'public, max-age=86400') if (getHeader(event, 'if-none-match') === etag) { setResponseStatus(event, 304) return null diff --git a/server/api/library/index.get.ts b/server/api/library/index.get.ts index fb67572..7a10894 100644 --- a/server/api/library/index.get.ts +++ b/server/api/library/index.get.ts @@ -1,5 +1,26 @@ +import { publicLibrary, publicLibraryPage } from '~/server/utils/library' + export default defineEventHandler((event) => { - const light = String(getQuery(event).light || '') === '1' + const query = getQuery(event) + const light = String(query.light || '') === '1' + const limitRaw = query.limit + const wantsPage = limitRaw != null && String(limitRaw) !== '' + + if (wantsPage) { + const page = publicLibraryPage(event, { + limit: Number(limitRaw) || 50, + cursor: String(query.cursor || ''), + folderId: String(query.folderId || query.folder || ''), + type: String(query.type || query.filter || 'all') + }) + try { + const { owner } = assertLibraryOwner(event) + const folderId = page.folders.find(folder => folder.unlocked)?.id + void maintainLibrary(owner, folderId).catch(() => null) + } catch { /* locked or anonymous */ } + return page + } + const library = publicLibrary(event, { light }) try { const { owner } = assertLibraryOwner(event) diff --git a/server/api/library/stills/[id].get.ts b/server/api/library/stills/[id].get.ts index 926641f..75615f6 100644 --- a/server/api/library/stills/[id].get.ts +++ b/server/api/library/stills/[id].get.ts @@ -7,13 +7,26 @@ export default defineEventHandler(async (event) => { const still = getStill(owner, id) assertFolderAccess(event, still.folderId) const wantThumb = String(getQuery(event).thumb || '') === '1' - const path = wantThumb ? await stillThumbPath(owner, id) : stillPath(owner, still.id) - if (!path || !existsSync(path)) { + const original = stillPath(owner, still.id) + + let path = original + if (wantThumb) { + path = await stillThumbPath(owner, id) + // Never fall back to the archive PNG/JPEG for ?thumb=1 + if (!path || path === original || !existsSync(path)) { + throw createError({ statusCode: 404, statusMessage: 'Thumbnail not found' }) + } + } else if (!existsSync(path)) { throw createError({ statusCode: 404, statusMessage: 'Image file is missing' }) } + const etag = fileEtag(path) setHeader(event, 'ETag', etag) - setHeader(event, 'Cache-Control', wantThumb ? 'private, max-age=86400, stale-while-revalidate=604800' : 'private, max-age=3600') + setHeader( + event, + 'Cache-Control', + wantThumb ? 'public, max-age=86400' : 'private, max-age=3600' + ) if (getHeader(event, 'if-none-match') === etag) { setResponseStatus(event, 304) return null diff --git a/server/api/library/stills/[id]/thumb.get.ts b/server/api/library/stills/[id]/thumb.get.ts new file mode 100644 index 0000000..6008930 --- /dev/null +++ b/server/api/library/stills/[id]/thumb.get.ts @@ -0,0 +1,26 @@ +import { existsSync, createReadStream } from 'node:fs' +import { fileEtag, stillPath, stillThumbPath } from '~/server/utils/library' + +export default defineEventHandler(async (event) => { + const { owner } = assertLibraryOwner(event) + const id = String(getRouterParam(event, 'id') || '') + const still = getStill(owner, id) + assertFolderAccess(event, still.folderId) + + const path = await stillThumbPath(owner, id) + const original = stillPath(owner, still.id) + // Never stream the archive master as a "thumb" + if (!path || !existsSync(path) || path === original) { + throw createError({ statusCode: 404, statusMessage: 'Thumbnail not found' }) + } + + const etag = fileEtag(path) + setHeader(event, 'ETag', etag) + setHeader(event, 'Cache-Control', 'public, max-age=86400') + if (getHeader(event, 'if-none-match') === etag) { + setResponseStatus(event, 304) + return null + } + setHeader(event, 'Content-Type', 'image/jpeg') + return sendStream(event, createReadStream(path)) +}) diff --git a/server/api/studio-2/library.get.ts b/server/api/studio-2/library.get.ts index 8d50bd5..cfa756b 100644 --- a/server/api/studio-2/library.get.ts +++ b/server/api/studio-2/library.get.ts @@ -1,9 +1,15 @@ -import { existsSync } from 'node:fs'; -import { studio2LoraCatalog } from '../../utils/studio2/lora-catalog'; -import { publicLibrary, stillPath, clipVideoPath } from '../../utils/library'; -export default defineEventHandler(event => { - const { owner } = assertLibraryOwner(event); - const library = publicLibrary(event); - const catalog=studio2LoraCatalog(owner); - return {...library,loraAliases:catalog.aliases,loraTriggers:catalog.triggers, stills:library.stills.filter(s=>existsSync(stillPath(owner,s.id))), clips:library.clips.filter(c=>existsSync(clipVideoPath(owner,c.id))), tracks:library.tracks || []}; -}); +import { studio2LoraCatalog } from '../../utils/studio2/lora-catalog' +import { publicLibrary } from '../../utils/library' + +export default defineEventHandler((event) => { + const { owner } = assertLibraryOwner(event) + // light:true — metadata only; never existsSync every still/clip on the volume + const library = publicLibrary(event, { light: true }) + const catalog = studio2LoraCatalog(owner) + return { + ...library, + loraAliases: catalog.aliases, + loraTriggers: catalog.triggers, + tracks: library.tracks || [] + } +}) diff --git a/server/utils/library.ts b/server/utils/library.ts index 2930663..1a4de3f 100644 --- a/server/utils/library.ts +++ b/server/utils/library.ts @@ -615,6 +615,121 @@ export function publicLibrary(event: H3Event, opts?: { light?: boolean }) { } } +/** Paginated metadata page — no file bytes, no existsSync join of the volume. */ +export function publicLibraryPage( + event: H3Event, + opts: { limit?: number; cursor?: string; folderId?: string; type?: string } = {} +) { + const limit = Math.min(Math.max(Number(opts.limit) || 50, 1), 60) + const cursor = String(opts.cursor || '') + const folderId = String(opts.folderId || '') + const typeFilter = String(opts.type || 'all') + const full = publicLibrary(event, { light: true }) + + type Row = { + id: string + name: string + type: 'still' | 'clip' | 'track' + createdAt: number + thumbUrl: string + folderId: string + prompt?: string + promptPre?: string + promptPost?: string + width?: number + height?: number + role?: string + hideInput?: boolean + filename?: string + duration?: number + ext?: string + } + + const rows: Row[] = [] + for (const still of full.stills) { + if (folderId && folderId !== 'all' && still.folderId !== folderId) continue + if (typeFilter === 'videos' || typeFilter === 'music') continue + rows.push({ + id: still.id, + name: still.name || still.filename || still.id, + type: 'still', + createdAt: still.createdAt || 0, + thumbUrl: `/api/library/stills/${still.id}/thumb`, + folderId: still.folderId, + prompt: still.prompt, + promptPre: still.promptPre, + promptPost: still.promptPost, + width: still.width, + height: still.height, + role: still.role, + hideInput: still.hideInput, + filename: still.filename + }) + } + for (const clip of full.clips) { + if (folderId && folderId !== 'all' && clip.folderId !== folderId) continue + if (typeFilter === 'images' || typeFilter === 'music') continue + rows.push({ + id: clip.id, + name: clip.name || clip.id, + type: 'clip', + createdAt: clip.createdAt || 0, + thumbUrl: `/api/library/clips/${clip.id}/thumb`, + folderId: clip.folderId, + prompt: clip.prompt, + promptPre: clip.promptPre, + promptPost: clip.promptPost, + width: clip.width, + height: clip.height, + duration: clip.duration + }) + } + for (const track of full.tracks || []) { + if (folderId && folderId !== 'all' && track.folderId !== folderId) continue + if (typeFilter === 'images' || typeFilter === 'videos') continue + rows.push({ + id: track.id, + name: track.name || track.id, + type: 'track', + createdAt: track.createdAt || 0, + thumbUrl: '', + folderId: track.folderId, + duration: track.duration, + ext: track.ext + }) + } + + rows.sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0) || String(b.id).localeCompare(String(a.id))) + + let start = 0 + if (cursor) { + const idx = rows.findIndex(row => `${row.type}:${row.id}` === cursor) + start = idx >= 0 ? idx + 1 : 0 + } + const page = rows.slice(start, start + limit) + const last = page[page.length - 1] + const nextCursor = page.length === limit && last ? `${last.type}:${last.id}` : null + + const stillIds = new Set(page.filter(r => r.type === 'still').map(r => r.id)) + const clipIds = new Set(page.filter(r => r.type === 'clip').map(r => r.id)) + const trackIds = new Set(page.filter(r => r.type === 'track').map(r => r.id)) + + return { + folders: full.folders, + items: page, + nextCursor, + limit, + stills: full.stills.filter(s => stillIds.has(s.id)), + clips: full.clips.filter(c => clipIds.has(c.id)), + tracks: (full.tracks || []).filter(t => trackIds.has(t.id)), + drafts: full.drafts, + loraAliases: full.loraAliases, + loraTriggers: full.loraTriggers, + keepPrompts: full.keepPrompts, + total: rows.length + } +} + export function assertLibraryOwner(event: H3Event) { const owner = libraryOwnerKey(event) return { owner, catalog: readCatalog(owner) } @@ -830,7 +945,7 @@ export async function ensureScaledThumb(source: string, dest: string) { if (pending) return pending const build = withThumbSlot(async () => { const ok = await buildStillThumb(source, dest) - return ok ? dest : source + return ok ? dest : '' }).finally(() => { thumbBuilds.delete(key) }) @@ -1130,7 +1245,7 @@ function buildStillThumb(source: string, dest: string) { const proc = spawn('ffmpeg', [ '-y', '-i', source, - '-vf', 'scale=320:-2', + '-vf', 'scale=384:-2', '-frames:v', '1', '-q:v', '5', dest @@ -1164,7 +1279,8 @@ export async function stillThumbPath(owner: string, id: string) { if (pending) return pending const build = withThumbSlot(async () => { const ok = await buildStillThumb(source, dest) - return ok ? dest : source + // Never return the archive master — callers must not stream originals as thumbs + return ok ? dest : '' }).finally(() => { thumbBuilds.delete(key) })