| "use client"; |
|
|
| import {AccessToken} from "@/components/AccessToken"; |
| import {ImportMedia} from "@/components/ImportMedia"; |
| import Link from "next/link"; |
| import { useEffect, useState } from "react"; |
| import { getJSON, type Stats, type VideoMeta } from "@/lib/api"; |
| import { bytes, compact, fmtDuration } from "@/lib/format"; |
| import { VIEW_INFO, VIEW_ORDER } from "@/lib/views"; |
| import { ViewSwatch } from "@/components/Controls"; |
|
|
| function Tile({ label, value, sub }: { label: string; value: string; sub?: string }) { |
| return ( |
| <div className="rounded-xl border border-line bg-surface p-4"> |
| <div className="text-xs text-muted">{label}</div> |
| <div className="mt-1 text-2xl font-semibold">{value}</div> |
| {sub && <div className="mt-0.5 text-xs text-ink-2">{sub}</div>} |
| </div> |
| ); |
| } |
|
|
| export function Library() { |
| const [videos, setVideos] = useState<VideoMeta[] | null>(null); |
| const [stats, setStats] = useState<Stats | null>(null); |
| const [error, setError] = useState<string | null>(null); |
|
|
| useEffect(() => { |
| getJSON<VideoMeta[]>("/api/videos").then(setVideos).catch((e) => setError(String(e))); |
| getJSON<Stats>("/api/stats").then(setStats).catch(() => {}); |
| }, []); |
|
|
| if (error) return <p className="text-ink-2">Library unavailable ({error}). Check access and service status.</p>; |
|
|
| const primaryDim = stats?.dims[0] ?? 768; |
| const s768 = stats?.storage.find((s) => s.dim === primaryDim)?.bytes_per_view ?? 0; |
| const s128 = stats?.storage.find((s) => s.dim === 128)?.bytes_per_view ?? 0; |
|
|
| return ( |
| <div className="space-y-8"> |
| <section> |
| <h1 className="text-2xl font-semibold">Library</h1> |
| <p className="mt-1 max-w-3xl text-sm text-ink-2"> |
| Browse timestamped clips, transcripts and evidence. Remote text indexes search transcripts; image, video and audio views require a compatible multimodal index. |
| </p> |
| </section> |
| |
| <AccessToken/><ImportMedia/> |
| {stats && ( |
| <section className="grid grid-cols-2 gap-3 md:grid-cols-4"> |
| <Tile label="Videos" value={String(stats.videos ?? videos?.length ?? "–")} sub={fmtDuration(stats.total_duration_s) + " of footage"} /> |
| <Tile label="Segments" value={String(stats.segments ?? "–")} sub={`${stats.views.length} retrieval views`} /> |
| <Tile label="Vectors" value={compact((stats.segments ?? 0) * Object.keys(stats.views_built ?? {}).length)} sub="segments × embedding views" /> |
| <Tile label="Index size per view" value={bytes(s768)} sub={stats?.dims.includes(128)&&primaryDim!==128?`${bytes(s128)} at 128d (MRL)`:`${primaryDim}d · only declared dimensions`} /> |
| </section> |
| )} |
| |
| {stats?.views_built && ( |
| <section className="rounded-xl border border-line bg-surface p-4"> |
| <h2 className="text-sm font-medium">Embedding views</h2> |
| <div className="mt-3 grid gap-x-6 gap-y-2 text-sm md:grid-cols-2"> |
| {VIEW_ORDER.filter((v) => stats.views.includes(v)).map((v) => { |
| const b = stats.views_built?.[v]; |
| return ( |
| <div key={v} className="flex items-center gap-2"> |
| <ViewSwatch view={v} /> |
| <span className="w-14 font-medium">{VIEW_INFO[v].label}</span> |
| <span className="flex-1 text-ink-2">{stats.view_descriptions[v]}</span> |
| {b && <span className="text-xs text-muted tabular">{b.ms_per_segment} ms/seg</span>} |
| </div> |
| ); |
| })} |
| </div> |
| </section> |
| )} |
| |
| {videos?.length===0&&<p className="rounded-xl border border-line bg-surface p-5 text-ink-2">Your library is ready for its first video. Import a clip above; missing inference dependencies appear in its job status.</p>} |
| <section className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"> |
| {(videos ?? []).map((v) => ( |
| <Link key={v.id} href={`/videos/${v.id}`} className="group overflow-hidden rounded-xl border border-line bg-surface transition-colors hover:bg-surface-2"> |
| <div className="relative"> |
| {/* eslint-disable-next-line @next/next/no-img-element */} |
| <img src={v.thumb} alt="" className="aspect-video w-full object-cover" loading="lazy" /> |
| <span className="absolute bottom-2 right-2 rounded bg-black/80 px-1.5 py-0.5 text-xs tabular">{fmtDuration(v.duration)}</span> |
| </div> |
| <div className="space-y-1 p-3"> |
| <div className="line-clamp-2 text-sm font-medium">{v.title}</div> |
| <div className="flex flex-wrap gap-x-3 text-xs text-muted"> |
| <span>{v.num_segments} segments</span> |
| {v.view_count != null && <span>{compact(v.view_count)} views</span>} |
| {v.id.startsWith("sample-") && <span className="text-accent">Synthetic sample</span>} |
| </div> |
| </div> |
| </Link> |
| ))} |
| {!videos && <p className="text-sm text-muted">Loading…</p>} |
| </section> |
| </div> |
| ); |
| } |
|
|
