rvlib-shipkit 2.2.0 → 2.3.0

package/src/serve/hub-app/review/trailer-st.ts

@@ -0,0 +1,602 @@
+// a repo's trailer page as state (wiki build/trailer.md, Frame notes): a cut's render on a clip clock, its montage as a
+// timeline, the owner's notes on its frames. The render on screen is a kept version: a new render never swaps under
+// him, the page offers it. The desk is read while the page shows, every 3 s
+import { makeAutoObservable, observableRef, reaction, runInAction } from 'mobx'
+import {
+    noteTime,
+    shotAt,
+    type CaptionSpan,
+    type CutInfo,
+    type NotePin,
+    type NoteState,
+    type SectionSpan,
+    type ShotSpan,
+    type Timeline,
+    type TrailerDesk,
+    type TrailerInfo,
+    type TrailerNote,
+} from '../../../review/trailer-model.ts'
+import { reach } from '../reach.ts'
+import type { RepoSt } from '../repo-st.ts'
+import { ClipSt } from './clip-st.ts'
+
+const POLL_MS = 3000
+
+/** the render on screen: its version and the timeline and strip that belong to it */
+interface Shown {
+    trailer: string
+    cut: string
+    version: number
+    duration: number
+    fps: number
+    timeline: Timeline
+    strip: CutInfo['strip']
+}
+
+interface NoteDraft {
+    time: number
+    text: string
+    pin: NotePin | null
+}
+
+/** a note placed on the cut on screen: `at` its time there, null when its shot is not in it */
+export interface PlacedNote {
+    note: TrailerNote
+    at: number | null
+    /** it was written on this cut and its shot has moved since */
+    moved: boolean
+}
+
+type NoteFilter = 'open' | 'all'
+
+const ZOOMS = [1, 1.5, 2, 3, 4, 6, 8, 12, 16] as const
+
+/** the caption's text as the title draws it: `\n` in the file is a line break */
+export const captionText = (c: Pick<CaptionSpan, 'text'>): string => c.text.replaceAll('\\n', '\n')
+
+async function send<T>(url: string, method: string, body?: unknown): Promise<T> {
+    const res = await reach(url, { method, headers: { 'content-type': 'application/json' }, ...(body === undefined ? {} : { body: JSON.stringify(body) }) })
+    const text = await res.text()
+    if (!res.ok) {
+        let msg = text
+        try {
+            msg = (JSON.parse(text) as { error?: string }).error ?? text
+        } catch {
+            // a plain text answer says it already
+        }
+        throw new Error(msg || `HTTP ${res.status}`)
+    }
+    return JSON.parse(text) as T
+}
+
+export class TrailerSt {
+    desk: TrailerDesk | null = null
+    deskError: string | null = null
+    readonly clock = new ClipSt()
+    trailerId: string | null = null
+    cutId: string | null = null
+    shown: Shown | null = null
+    draft: NoteDraft | null = null
+    editing: { id: string; text: string } | null = null
+    /** the note asked a reply before it closes (done or wontfix) */
+    closing: { id: string; state: Exclude<NoteState, 'open'>; reply: string } | null = null
+    selected: string | null = null
+    filter: NoteFilter = 'all'
+    zoom = 1
+    saving = false
+    error: string | null = null
+    /** the montage page of the cut on screen, its markdown, once asked */
+    montage: { key: string; md: string | null } | null = null
+    montageOpen = false
+    private landing: { shot: string; offset: number; play: boolean } | null = null
+    private noteLanding: string | null = null
+    private timer: ReturnType<typeof setInterval> | null = null
+    private readonly prefs: string
+
+    constructor(private readonly st: RepoSt) {
+        this.prefs = `shipkit.trailer.${st.key}`
+        try {
+            const p = JSON.parse(localStorage.getItem(this.prefs) ?? '{}') as { zoom?: number; filter?: NoteFilter; rate?: number }
+            if (p.zoom && ZOOMS.includes(p.zoom as never)) this.zoom = p.zoom
+            if (p.filter === 'open' || p.filter === 'all') this.filter = p.filter
+            if (p.rate) this.clock.setRate(p.rate)
+        } catch {
+            // a blocked storage only loses the kept choices
+        }
+        makeAutoObservable<this, 'st' | 'landing' | 'timer' | 'prefs' | 'noteLanding'>(this, { st: false, clock: false, shown: observableRef, landing: false, timer: false, prefs: false, noteLanding: false })
+        // a trailer is heard: the clock starts with its sound on
+        this.clock.hear(true)
+        // the first answer, or a cut picked: the render on screen follows
+        reaction(
+            () => [this.cut?.video?.mtime ?? null, this.trailer?.id ?? null, this.cut?.cut ?? null] as const,
+            () => {
+                if (!this.shown || this.shown.cut !== this.cut?.cut || this.shown.trailer !== this.trailer?.id) this.showCurrent()
+            },
+            { fireImmediately: true },
+        )
+        // a note opened or the filter changed on the page: the address follows, on the page that shows it
+        reaction(
+            () => JSON.stringify(this.address),
+            () => {
+                if (this.st.sel?.t === 'trailer') this.st.setSel(this.address)
+            },
+        )
+        // the notes arrive after the address that names one
+        reaction(
+            () => [this.shown?.version ?? null, this.notes.length] as const,
+            () => this.landOnNote(),
+        )
+        reaction(
+            () => JSON.stringify({ zoom: this.zoom, filter: this.filter, rate: this.clock.rate }),
+            (s) => {
+                try {
+                    localStorage.setItem(this.prefs, s)
+                } catch {
+                    // as above
+                }
+            },
+        )
+    }
+
+    start(): void {
+        void this.refresh()
+        if (this.timer === null) this.timer = setInterval(() => void this.refresh(), POLL_MS)
+    }
+
+    stop(): void {
+        if (this.timer !== null) clearInterval(this.timer)
+        this.timer = null
+        if (!this.clock.paused) this.clock.pause()
+    }
+
+    async refresh(): Promise<void> {
+        try {
+            const desk = await send<TrailerDesk>(this.st.url('/api/trailer'), 'GET')
+            runInAction(() => {
+                this.desk = desk
+                this.deskError = null
+            })
+        } catch (e) {
+            runInAction(() => (this.deskError = (e as Error).message))
+        }
+    }
+
+    get trailers(): TrailerInfo[] {
+        return this.desk?.trailers ?? []
+    }
+
+    get trailer(): TrailerInfo | null {
+        return this.trailers.find((t) => t.id === this.trailerId) ?? this.trailers[0] ?? null
+    }
+
+    get cut(): CutInfo | null {
+        const cuts = this.trailer?.cuts ?? []
+        return cuts.find((c) => c.cut === this.cutId) ?? cuts.find((c) => c.video !== null) ?? cuts[0] ?? null
+    }
+
+    /** a finished render newer than the one on screen */
+    get newer(): boolean {
+        const v = this.cut?.video
+        return !!v && !!this.shown && this.shown.cut === this.cut?.cut && v.mtime !== this.shown.version
+    }
+
+    /** the cut the address names, the note open on it (the player lands on its frame), the notes filter; an address
+     *  with no filter keeps the one the page remembers */
+    select(trailer: string | null, cut: string | null, note: string | null = null, filter: NoteFilter | null = null): void {
+        if (cut !== this.cutId || trailer !== this.trailerId) {
+            this.draft = null
+            this.editing = null
+        }
+        this.trailerId = trailer
+        this.cutId = cut
+        if (note !== this.selected) {
+            this.selected = note
+            this.noteLanding = note
+        }
+        if (filter !== null) this.filter = filter
+        this.landOnNote()
+    }
+
+    /** what the address carries of this page; RepoSt.setSel writes it, the one place an address is written */
+    get address(): { t: 'trailer'; trailer: string | null; cut: string | null; note: string | null; filter: NoteFilter | null } {
+        return { t: 'trailer', trailer: this.trailerId, cut: this.cutId, note: this.selected, filter: this.filter === 'all' ? null : this.filter }
+    }
+
+    /** the note an address opened: the player lands on its frame once the cut on screen places it */
+    private landOnNote(): void {
+        const id = this.noteLanding
+        if (id === null || !this.shown) return
+        const p = this.placed.find((x) => x.note.id === id)
+        if (!p) return
+        this.noteLanding = null
+        if (p.at !== null) this.seekPaused(p.at)
+    }
+
+    /** a trailer or a cut picked on the page: its address follows */
+    pick(trailer: string, cut: string | null): void {
+        this.st.showTrailer(trailer, cut, trailer === this.trailerId ? this.selected : null, this.filter === 'all' ? null : this.filter)
+    }
+
+    showCurrent(): void {
+        const t = this.trailer
+        const c = this.cut
+        if (!t || !c?.video || !c.timeline) {
+            this.shown = null
+            return
+        }
+        this.shown = { trailer: t.id, cut: c.cut, version: c.video.mtime, duration: c.video.duration, fps: c.video.fps, timeline: c.timeline, strip: c.strip }
+        this.clock.load(`trailer:${t.id}/${c.cut}/${c.video.mtime}`, c.video.duration, c.video.fps)
+        const land = this.landing
+        this.landing = null
+        const s = land ? c.timeline.shots.find((x) => x.name === land.shot) : undefined
+        this.clock.seek(s && land ? s.start + Math.min(land.offset, s.length) : 0)
+        if (land?.play) this.clock.play()
+    }
+
+    /** the new render, on the shot and the time into it he was on */
+    loadNewer(): void {
+        const s = this.shot
+        if (s) this.landing = { shot: s.name, offset: this.time - s.start, play: !this.clock.paused }
+        this.shown = null
+        this.showCurrent()
+    }
+
+    get videoUrl(): string | null {
+        const s = this.shown
+        return s ? this.st.url(`/api/trailer/video/${s.trailer}/${s.cut}/${s.version}.mp4`) : null
+    }
+
+    get stripUrl(): string | null {
+        const s = this.shown
+        return s?.strip ? this.st.url(`/api/trailer/strip/${s.trailer}/${s.cut}/${s.version}.png`) : null
+    }
+
+    stillUrl(n: TrailerNote): string {
+        return this.st.url(`/api/review/${n.id}/${n.still}`)
+    }
+
+    /** the cut's montage page, read once per cut when he opens it */
+    async toggleMontage(): Promise<void> {
+        this.montageOpen = !this.montageOpen
+        const s = this.shown
+        if (!this.montageOpen || !s) return
+        const key = `${s.trailer}/${s.cut}/${s.version}`
+        if (this.montage?.key === key) return
+        try {
+            const res = await reach(this.st.url(`/api/trailer/montage/${s.trailer}/${s.cut}`))
+            const md = res.ok ? await res.text() : null
+            runInAction(() => (this.montage = { key, md }))
+        } catch (e) {
+            runInAction(() => (this.error = (e as Error).message))
+        }
+    }
+
+    // ── where the playhead is ──
+
+    get timeline(): Timeline | null {
+        return this.shown?.timeline ?? null
+    }
+
+    get time(): number {
+        return this.clock.time
+    }
+
+    get fps(): number {
+        return this.shown?.fps ?? 30
+    }
+
+    get frame(): number {
+        return this.clock.frameOf(this.clock.time)
+    }
+
+    get frames(): number {
+        return Math.max(1, Math.round((this.shown?.duration ?? 0) * this.fps))
+    }
+
+    get shot(): ShotSpan | null {
+        return this.timeline ? shotAt(this.timeline, this.time) : null
+    }
+
+    get shotIndex(): number {
+        const s = this.shot
+        return s ? (this.timeline?.shots.indexOf(s) ?? -1) : -1
+    }
+
+    get section(): SectionSpan | null {
+        return this.timeline?.sections.find((x) => x.start <= this.time + 1e-6 && this.time < x.end) ?? null
+    }
+
+    get captions(): CaptionSpan[] {
+        const t = this.time
+        return (this.timeline?.shots ?? []).flatMap((s) => s.captions.filter((c) => c.start <= t && t < c.end))
+    }
+
+    /** the captions on screen as one string: it changes when a caption comes or goes, never on every frame */
+    get captionsKey(): string {
+        return this.captions.map((c) => `${c.start}|${c.text}`).join('\n')
+    }
+
+    // ── the notes ──
+
+    get notes(): TrailerNote[] {
+        return this.trailer?.notes ?? []
+    }
+
+    get openCount(): number {
+        return this.notes.filter((n) => n.state === 'open').length
+    }
+
+    openOn(cut: CutInfo): number {
+        const tl = cut.timeline
+        return tl ? this.notes.filter((n) => n.state === 'open' && noteTime(n, tl) !== null).length : 0
+    }
+
+    /** every note of the trailer, placed on the cut on screen, by its time there; the filter applied */
+    get placed(): PlacedNote[] {
+        const tl = this.timeline
+        return this.notes
+            .filter((n) => this.filter === 'all' || n.state === 'open')
+            .map((n) => {
+                const at = tl ? noteTime(n, tl) : null
+                return { note: n, at, moved: at !== null && n.cut === this.shown?.cut && Math.abs(at - n.time) > 0.5 / this.fps }
+            })
+            .sort((a, b) => (a.at ?? Infinity) - (b.at ?? Infinity) || a.note.n - b.note.n)
+    }
+
+    get here(): PlacedNote[] {
+        return this.placed.filter((p) => p.at !== null)
+    }
+
+    get elsewhere(): PlacedNote[] {
+        return this.placed.filter((p) => p.at === null)
+    }
+
+    /** the notes whose pin shows over the frame: on this frame, or close while it plays */
+    get pinsNow(): PlacedNote[] {
+        const near = this.clock.paused ? 0.5 / this.fps + 1e-6 : 0.3
+        return this.here.filter((p) => p.note.pin && p.at !== null && Math.abs(p.at - this.time) <= near)
+    }
+
+    setFilter(f: NoteFilter): void {
+        this.filter = f
+    }
+
+    // ── moving ──
+
+    seek(t: number): void {
+        this.clock.jump(Math.max(0, Math.min(this.shown?.duration ?? 0, t)))
+    }
+
+    seekPaused(t: number): void {
+        this.clock.seek(Math.max(0, Math.min((this.shown?.duration ?? 0) - 0.5 / this.fps, t)))
+    }
+
+    by(dt: number): void {
+        this.seek(this.time + dt)
+    }
+
+    step(n: number): void {
+        this.clock.step(n)
+    }
+
+    /** the previous shot's start (this one's when past its first half second), or the next one's */
+    shotBy(d: 1 | -1): void {
+        const shots = this.timeline?.shots ?? []
+        const i = this.shotIndex
+        const cur = shots[i]
+        const target = d > 0 ? shots[i + 1] : cur && this.time - cur.start > 0.5 ? cur : shots[i - 1]
+        if (target) this.seek(target.start)
+    }
+
+    noteBy(d: 1 | -1): void {
+        const t = this.time
+        const eps = 0.5 / this.fps
+        const list = this.here
+        const next = d > 0 ? list.find((p) => (p.at ?? 0) > t + eps) : [...list].reverse().find((p) => (p.at ?? 0) < t - eps)
+        if (next) this.goTo(next)
+    }
+
+    goTo(p: PlacedNote): void {
+        this.selected = p.note.id
+        if (p.at !== null) this.seekPaused(p.at)
+    }
+
+    /** a note on a shot this cut lacks: the cut it was written on, on its frame */
+    openOnItsCut(n: TrailerNote): void {
+        this.selected = n.id
+        this.landing = { shot: n.shot, offset: n.shotTime, play: false }
+        this.pick(n.trailer, n.cut)
+    }
+
+    zoomBy(d: 1 | -1): void {
+        const i = ZOOMS.indexOf(this.zoom as never)
+        this.zoom = ZOOMS[Math.max(0, Math.min(ZOOMS.length - 1, (i < 0 ? 0 : i) + d))] ?? 1
+    }
+
+    // ── writing ──
+
+    /** N, or a click on the frame: a note on the frame on screen, paused there */
+    newNote(pin: NotePin | null = null): void {
+        if (!this.shown) return
+        if (!this.clock.paused) this.clock.pause()
+        this.editing = null
+        this.closing = null
+        this.draft = { time: this.clock.time, text: this.draft?.text ?? '', pin: pin ?? this.draft?.pin ?? null }
+    }
+
+    /** a click on the frame: the pin of the note being edited on this frame, else of the draft, else a new pinned note */
+    clickFrame(pin: NotePin): void {
+        const e = this.editing ? this.here.find((p) => p.note.id === this.editing?.id) : undefined
+        if (e && e.at !== null && Math.abs(e.at - this.time) <= 0.5 / this.fps + 1e-6) {
+            void this.edit(e.note.id, { pin })
+            return
+        }
+        if (this.draft) {
+            this.draft.pin = pin
+            if (!this.clock.paused) this.clock.pause()
+            this.draft.time = this.clock.time
+            return
+        }
+        this.newNote(pin)
+    }
+
+    setDraftText(t: string): void {
+        if (this.draft) this.draft.text = t
+    }
+
+    unpinDraft(): void {
+        if (this.draft) this.draft.pin = null
+    }
+
+    cancelDraft(): void {
+        this.draft = null
+    }
+
+    async saveDraft(): Promise<void> {
+        const d = this.draft
+        const s = this.shown
+        if (!d || !s || d.text.trim() === '' || this.saving) return
+        this.saving = true
+        this.error = null
+        try {
+            const note = await send<TrailerNote>(this.st.url('/api/trailer/notes'), 'POST', {
+                trailer: s.trailer,
+                cut: s.cut,
+                version: s.version,
+                time: d.time,
+                text: d.text,
+                ...(d.pin ? { pin: d.pin } : {}),
+            })
+            runInAction(() => {
+                this.draft = null
+                this.selected = note.id
+            })
+            void this.refresh()
+            // the cut's row in the tree says its open notes at once
+            void this.st.cols.poll(true)
+        } catch (e) {
+            runInAction(() => (this.error = (e as Error).message))
+        } finally {
+            runInAction(() => (this.saving = false))
+        }
+    }
+
+    startEdit(n: TrailerNote): void {
+        this.draft = null
+        this.closing = null
+        this.selected = n.id
+        this.editing = { id: n.id, text: n.text }
+    }
+
+    setEditText(t: string): void {
+        if (this.editing) this.editing.text = t
+    }
+
+    cancelEdit(): void {
+        this.editing = null
+    }
+
+    async saveEdit(): Promise<void> {
+        const e = this.editing
+        if (!e || e.text.trim() === '') return
+        await this.edit(e.id, { text: e.text })
+        runInAction(() => {
+            if (this.editing?.id === e.id) this.editing = null
+        })
+    }
+
+    askClose(n: TrailerNote, state: Exclude<NoteState, 'open'>): void {
+        this.editing = null
+        this.selected = n.id
+        this.closing = { id: n.id, state, reply: '' }
+    }
+
+    setReply(t: string): void {
+        if (this.closing) this.closing.reply = t
+    }
+
+    cancelClose(): void {
+        this.closing = null
+    }
+
+    async confirmClose(): Promise<void> {
+        const c = this.closing
+        if (!c) return
+        await this.edit(c.id, { state: c.state, reply: c.reply })
+        runInAction(() => (this.closing = null))
+    }
+
+    async reopen(n: TrailerNote): Promise<void> {
+        await this.edit(n.id, { state: 'open' })
+    }
+
+    async unpin(n: TrailerNote): Promise<void> {
+        await this.edit(n.id, { pin: null })
+    }
+
+    async edit(id: string, body: { text?: string; pin?: NotePin | null; state?: NoteState; reply?: string }): Promise<void> {
+        const t = this.trailer
+        if (!t) return
+        this.error = null
+        try {
+            await send<TrailerNote>(this.st.url(`/api/trailer/notes/${t.id}/${id}`), 'POST', body)
+            void this.refresh()
+        } catch (e) {
+            runInAction(() => (this.error = (e as Error).message))
+        }
+    }
+
+    /** the render on screen shown in the Finder */
+    async reveal(): Promise<void> {
+        const s = this.shown
+        if (!s) return
+        this.error = null
+        try {
+            await send(this.st.url('/api/trailer/reveal'), 'POST', { trailer: s.trailer, cut: s.cut })
+        } catch (e) {
+            runInAction(() => (this.error = `Finder: ${(e as Error).message}`))
+        }
+    }
+
+    async remove(n: TrailerNote): Promise<void> {
+        const t = this.trailer
+        if (!t) return
+        this.error = null
+        try {
+            await send(this.st.url(`/api/trailer/notes/${t.id}/${n.id}`), 'DELETE')
+            runInAction(() => {
+                if (this.selected === n.id) this.selected = null
+                if (this.editing?.id === n.id) this.editing = null
+            })
+            void this.refresh()
+        } catch (e) {
+            runInAction(() => (this.error = (e as Error).message))
+        }
+    }
+
+    /** the page's keys: Space plays or pauses, `,` and `.` a frame, ← → a second (Shift: five), ↑ ↓ a shot (Shift: a
+     *  note), N a note on this frame, M the sound, - and + the timeline's zoom, Home the start. Arrows and plain keys,
+     *  so an AZERTY keyboard reaches every one */
+    key(e: Pick<KeyboardEvent, 'key' | 'shiftKey'>): boolean {
+        const k = e.key.toLowerCase()
+        if (e.key === ' ') {
+            // a focused button would click again on the key's release
+            if (document.activeElement instanceof HTMLElement) document.activeElement.blur()
+            this.clock.toggle()
+        } else if (e.key === ',') this.step(-1)
+        else if (e.key === '.') this.step(1)
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') this.by((e.key === 'ArrowRight' ? 1 : -1) * (e.shiftKey ? 5 : 1))
+        else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            const d = e.key === 'ArrowDown' ? 1 : -1
+            if (e.shiftKey) this.noteBy(d)
+            else this.shotBy(d)
+        } else if (k === 'n') this.newNote()
+        else if (k === 'm') this.clock.toggleSound()
+        else if (e.key === '-') this.zoomBy(-1)
+        else if (e.key === '+' || e.key === '=') this.zoomBy(1)
+        else if (e.key === 'Home') this.seek(0)
+        else if (e.key === 'Escape' && this.draft) this.cancelDraft()
+        else return false
+        return true
+    }
+}