rvlib-shipkit 2.2.0 → 2.4.0

package/src/serve/hub-app/review/trailer-page.tsx

@@ -0,0 +1,416 @@
+// a repo's trailer page (`#page:trailer`, wiki build/trailer.md, Frame notes): the cuts on the left, the player over
+// its timeline and its shot cards in the middle, the notes on the right. A note pins a frame of the render on screen
+// and becomes an item of the review store. On a phone the three stacked
+import { observer } from 'mobx-react-lite'
+import { Fragment, useEffect, useRef, useState, type ReactNode } from 'react'
+import { Group, Panel, Separator } from 'react-resizable-panels'
+import { clock, cutsByRecent, shotAt, type CutInfo, type TrailerNote } from '../../../review/trailer-model.ts'
+import { editorHref } from '../check-words.ts'
+import { renderMd } from '../md.ts'
+import type { RepoSt } from '../repo-st.ts'
+import { keepFocus } from './kit.tsx'
+import { PANEL, PhoneTop } from './review-page.tsx'
+import { ClipSound } from './review-views.tsx'
+import { hueOf, ShotCards, TrailerTimeline } from './trailer-timeline.tsx'
+import { captionText, type PlacedNote, type TrailerSt } from './trailer-st.ts'
+
+export const TrailerPage = observer(({ app }: { app: RepoSt }) => {
+    const tr = app.trailer
+    useEffect(() => {
+        tr.start()
+        return () => tr.stop()
+    }, [tr])
+    if (app.review.phone.on)
+        return (
+            <div className="tr-phone">
+                <PhoneTop app={app} />
+                <PlayerColumn tr={tr} app={app} />
+                <NotesColumn tr={tr} />
+                <CutList tr={tr} />
+            </div>
+        )
+    return (
+        <Group className="rv-cols" orientation="horizontal">
+            <Panel id="trailer-cuts" defaultSize="15%" minSize={190} className="rv-pane" style={PANEL}>
+                <div className="rv-scroll"><CutList tr={tr} /></div>
+            </Panel>
+            <Separator className="rsep" />
+            <Panel id="trailer-player" defaultSize="57%" minSize={420} className="rv-pane" style={PANEL}>
+                <div className="rv-scroll"><PlayerColumn tr={tr} app={app} /></div>
+            </Panel>
+            <Separator className="rsep" />
+            <Panel id="trailer-notes" defaultSize="28%" minSize={300} className="rv-pane" style={PANEL}>
+                <NotesColumn tr={tr} />
+            </Panel>
+        </Group>
+    )
+})
+
+// ── the cuts ──
+
+/** `m:ss`, the seconds rounded */
+const mmss = (t: number): string => {
+    const s = Math.round(Math.max(0, t))
+    return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`
+}
+
+const ago = (ms: number): string => {
+    const s = Math.max(0, Math.round((Date.now() - ms) / 1000))
+    return s < 60 ? `${s}s` : s < 3600 ? `${Math.round(s / 60)}m` : s < 86400 ? `${Math.round(s / 3600)}h` : `${Math.round(s / 86400)}d`
+}
+
+const CutList = observer(({ tr }: { tr: TrailerSt }) => (
+    <div className="tr-cuts">
+        {tr.deskError ? <div className="rv-err">{tr.deskError}</div> : null}
+        {tr.trailers.length > 1 ? (
+            <select value={tr.trailer?.id ?? ''} onChange={(e) => tr.pick(e.currentTarget.value, null)}>
+                {tr.trailers.map((t) => <option key={t.id} value={t.id}>{t.id}</option>)}
+            </select>
+        ) : (
+            <div className="tr-trailername">🎬 {tr.trailer?.id ?? 'trailer'}</div>
+        )}
+        {!tr.desk && !tr.deskError ? <div className="rv-empty"><span className="spin" /> reading the cuts…</div> : null}
+        {tr.desk && tr.trailers.length === 0 ? <div className="rv-empty">No trailer under trailer/: write trailer/&lt;name&gt;/main.trailer, then sk trailer.</div> : null}
+        <div className="tr-cutrows">
+            {cutsByRecent(tr.trailer?.cuts ?? []).map((c, i, all) => (
+                <Fragment key={c.cut}>
+                    {c.version && !all[i - 1]?.version ? <div className="tr-cuthead" style={{ margin: '8px 0 2px', fontSize: 11, fontWeight: 700, color: 'var(--dim)' }}>Kept versions</div> : null}
+                    <CutRow tr={tr} c={c} />
+                </Fragment>
+            ))}
+        </div>
+        <Keys />
+    </div>
+))
+
+/** one row a cut: the name on the left, its length and render age on the right; the rest in marks and tooltips */
+const CutRow = observer(({ tr, c }: { tr: TrailerSt; c: CutInfo }) => {
+    const t = tr.trailer
+    const on = tr.cut?.cut === c.cut
+    const open = tr.openOn(c)
+    const v = c.video
+    const shots = c.timeline?.shots.length ?? 0
+    const age = v ? (c.version ? `kept, rendered ${new Date(v.mtime).toLocaleDateString()}` : `rendered ${ago(v.mtime)} ago`) : 'not rendered yet'
+    return (
+        <button className={`tr-cutrow${on ? ' on' : ''}${v ? '' : ' unrendered'}`} disabled={!v} onClick={() => t && tr.pick(t.id, c.cut)}
+            title={v ? `${clock(v.duration)} · ${shots} shot${shots > 1 ? 's' : ''} · ${age} · ${c.files.video}` : `${age}: sk trailer ${c.files.trailer ?? ''}`}>
+            <span className="tr-cutname">{c.cut}</span>
+            {c.version ? <span className="tr-kept" style={{ color: 'var(--accent)', fontSize: 11 }} title="a kept version: versions/ holds its text and its render, it never changes">▣</span> : null}
+            {c.rendering ? <span className="spin" title="a render is being written" /> : null}
+            {c.edited && !c.rendering ? <span className="tr-edited" title="the .trailer changed since this render">✎</span> : null}
+            {c.errors.length > 0 ? <span className="tr-cuterr" title={c.errors.join('\n')}>!</span> : null}
+            <span className="sp" />
+            {open > 0 ? <span className="tr-opencount" title={`${open} open note${open > 1 ? 's' : ''} on its shots`}>{open}</span> : null}
+            <span className="tr-cutage">{v ? `${mmss(v.duration)} · ${c.version ? new Date(v.mtime).toLocaleDateString(undefined, { day: 'numeric', month: 'numeric' }) : ago(v.mtime)}` : '—'}</span>
+        </button>
+    )
+})
+
+const KEYS: [string, string][] = [
+    ['Space', 'play, pause'],
+    [', .', 'frame back, on'],
+    ['← →', 'one second (Shift: five)'],
+    ['↑ ↓', 'shot back, on'],
+    ['⇧↑ ⇧↓', 'note back, on'],
+    ['N', 'a note on this frame'],
+    ['click', 'a note pinned to that point'],
+    ['M', 'sound'],
+    ['- +', 'timeline zoom'],
+    ['Home', 'to the start'],
+]
+
+const Keys = () => (
+    <div className="tr-keys">
+        <div className="tr-keyshead">Keys</div>
+        {KEYS.map(([k, what]) => <div key={k} className="tr-keyrow"><kbd>{k}</kbd><span>{what}</span></div>)}
+    </div>
+)
+
+// ── the player ──
+
+const PlayerColumn = observer(({ tr, app }: { tr: TrailerSt; app: RepoSt }) => {
+    const c = tr.cut
+    if (!tr.desk) return <div className="rv-empty">{tr.deskError ?? 'Reading the cuts…'}</div>
+    if (!c) return <div className="rv-empty">No cut. A trailer is trailer/&lt;name&gt;/&lt;cut&gt;.trailer, rendered by sk trailer.</div>
+    if (!tr.shown) return <div className="rv-empty">{c.video ? `${c.cut}: its timeline does not read (${c.errors[0] ?? '?'})` : `${c.cut} is not rendered yet: sk trailer ${c.files.trailer ?? ''}`}</div>
+    return (
+        <div className="tr-player">
+            {tr.newer ? (
+                <div className="tr-banner">
+                    <span>A new render of {c.cut} is ready ({c.video ? `${ago(c.video.mtime)} ago` : ''}).</span>
+                    <button className="primary" onClick={() => tr.loadNewer()}>Load it, on the same shot</button>
+                </div>
+            ) : null}
+            {!tr.newer && c.edited && !c.timelineFromRender ? (
+                <div className="tr-banner warn">The .trailer changed since this render: the timeline comes from the file, its shots may be off until the next sk trailer.</div>
+            ) : null}
+            <Player tr={tr} />
+            <Transport tr={tr} app={app} />
+            <NowLine tr={tr} />
+            <TrailerTimeline st={tr} />
+            <ShotCards st={tr} />
+            <Montage tr={tr} />
+        </div>
+    )
+})
+
+const Player = observer(({ tr }: { tr: TrailerSt }) => {
+    const shown = tr.shown
+    const ref = useRef<HTMLVideoElement>(null)
+    const src = tr.videoUrl
+    useEffect(() => {
+        const el = ref.current
+        if (!el || !src) return
+        return tr.clock.attach(el)
+    }, [tr, src])
+    if (!shown || !src) return null
+    const [w, h] = shown.timeline.size
+    return (
+        <div className="tr-screen">
+            <div className="tr-frame" style={{ width: `min(100%, calc(64vh * ${w / h}))`, aspectRatio: `${w} / ${h}` }}>
+                <video ref={ref} src={src} playsInline preload="auto" onEnded={() => tr.clock.pause()} />
+                <div className="tr-clickzone" title="click: a note pinned to this point"
+                    onClick={(e) => {
+                        const r = e.currentTarget.getBoundingClientRect()
+                        tr.clickFrame({ x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height })
+                    }}>
+                    <FramePins tr={tr} />
+                </div>
+                {tr.clock.paused ? <div className="tr-paused">❚❚ frame {tr.frame + 1}</div> : null}
+            </div>
+        </div>
+    )
+})
+
+/** the pins of the notes on this frame, and the draft's */
+const FramePins = observer(({ tr }: { tr: TrailerSt }) => {
+    const d = tr.draft
+    return (
+        <>
+            {tr.pinsNow.map((n) => <Pin key={n.note.id} x={n.note.pin!.x} y={n.note.pin!.y} state={n.note.state} label={String(n.note.n)} on={tr.selected === n.note.id} />)}
+            {d?.pin ? <Pin x={d.pin.x} y={d.pin.y} state="open" label="+" on pulse /> : null}
+        </>
+    )
+})
+
+const Pin = ({ x, y, state, label, on, pulse }: { x: number; y: number; state: string; label: string; on: boolean; pulse?: boolean }) => (
+    <div className="tr-pin" style={{ left: `${x * 100}%`, top: `${y * 100}%` }}>
+        {pulse ? <div className="tr-pulse" /> : null}
+        <div className={`tr-pinhead ns-${state}${on ? ' on' : ''}`}><span>{label}</span></div>
+    </div>
+)
+
+const RATES = [0.25, 0.5, 1, 1.25, 1.5, 2]
+
+const Transport = observer(({ tr, app }: { tr: TrailerSt; app: RepoSt }) => {
+    const c = tr.clock
+    const btn = (glyph: ReactNode, label: string, go: () => void, big = false): ReactNode => (
+        <button className={`tr-tbtn${big ? ' big' : ''}`} title={label} aria-label={label} onMouseDown={keepFocus} onClick={go}>{glyph}</button>
+    )
+    const file = tr.cut?.files.trailer ?? tr.cut?.files.video
+    const href = editorHref(app.root, file)
+    return (
+        <div className="tr-transport">
+            {btn('⏮', 'shot back (↑)', () => tr.shotBy(-1))}
+            {btn('‹', 'frame back (,)', () => tr.step(-1))}
+            {btn(c.paused ? '▶' : '❚❚', c.paused ? 'play (Space)' : 'pause (Space)', () => c.toggle(), true)}
+            {btn('›', 'frame on (.)', () => tr.step(1))}
+            {btn('⏭', 'shot on (↓)', () => tr.shotBy(1))}
+            <div className="tr-time">
+                <div className="tr-timebig">{clock(tr.time)} <span className="tr-dim">/ {clock(tr.shown?.duration ?? 0)}</span></div>
+                <div className="tr-dim tr-small">frame {tr.frame + 1} / {tr.frames} · {tr.fps} fps</div>
+            </div>
+            <span className="sp" />
+            <span className="seg">{RATES.map((r) => <button key={r} className={c.rate === r ? 'on' : ''} onMouseDown={keepFocus} onClick={() => c.setRate(r)}>×{r}</button>)}</span>
+            <ClipSound clip={c} keyHint="M" />
+            {href && file ? <a className="tr-file" href={href} title={`open ${file} in the editor`}>{file.split('/').pop()}</a> : null}
+            {tr.shown ? <button className="tr-tbtn" title={`show ${tr.cut?.files.video ?? 'the render'} in the Finder`} aria-label="show the render in the Finder" onMouseDown={keepFocus} onClick={() => void tr.reveal()}>📂</button> : null}
+            <button className="tr-notebtn" onMouseDown={keepFocus} onClick={() => tr.newNote()}>✚ Note (N)</button>
+        </div>
+    )
+})
+
+/** what is on screen: the section, the shot and the time into it, the caption shown */
+const NowLine = observer(({ tr }: { tr: TrailerSt }) => {
+    const s = tr.shot
+    const tl = tr.timeline
+    if (!s || !tl) return null
+    return (
+        <div className="tr-now">
+            <span className={`tr-secbadge ${hueOf(tl, s.section)}`}>{s.section ?? 'opening'}</span>
+            <b className="tr-shotnow">{s.name}</b>
+            <span className="tr-dim">shot {tr.shotIndex + 1}/{tl.shots.length} · {(tr.time - s.start).toFixed(2)} s of {s.length} s · line {s.line}</span>
+            {tr.captions.map((c) => <span key={`${c.start}${c.text}`} className="tr-capnow">« {captionText(c)} »</span>)}
+        </div>
+    )
+})
+
+/** the cut's montage page (out/<name>.montage.md), folded until asked */
+const Montage = observer(({ tr }: { tr: TrailerSt }) => {
+    const m = tr.montage
+    return (
+        <div className="tr-montage">
+            <button className="ghost" onClick={() => void tr.toggleMontage()}>{tr.montageOpen ? '▾' : '▸'} montage</button>
+            {tr.montageOpen ? (m == null ? <span className="spin" /> : m.md == null ? <div className="rv-dim">This render has no montage page.</div> : <div className="md tr-montagebody" dangerouslySetInnerHTML={{ __html: renderMd(m.md) }} />) : null}
+        </div>
+    )
+})
+
+const DraftBox = observer(({ tr }: { tr: TrailerSt }) => {
+    const d = tr.draft
+    const tl = tr.timeline
+    if (!d || !tl) return null
+    const s = shotAt(tl, d.time)
+    return (
+        <div className="tr-draft">
+            <div className="tr-drafthead">
+                <b>New note · {clock(d.time)} · {s?.name}</b>
+                {d.pin ? (
+                    <span><span className="tr-pinned">📍 pinned</span> <button className="ghost" onClick={() => tr.unpinDraft()}>remove</button></span>
+                ) : (
+                    <span className="tr-dim tr-small">click the image to pin a point</span>
+                )}
+            </div>
+            <textarea autoFocus rows={3} placeholder="What is wrong, what you want instead…" value={d.text} onChange={(e) => tr.setDraftText(e.currentTarget.value)}
+                onKeyDown={(e) => {
+                    if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
+                        e.preventDefault()
+                        void tr.saveDraft()
+                    } else if (e.key === 'Escape') {
+                        e.preventDefault()
+                        tr.cancelDraft()
+                    }
+                }} />
+            {tr.error ? <div className="rv-err">{tr.error}</div> : null}
+            <div className="tr-dim tr-small">Enter saves · Shift Enter a new line · Escape drops it</div>
+            <div className="tr-draftbtns">
+                <button onClick={() => tr.cancelDraft()}>Cancel</button>
+                <button className="primary" disabled={tr.saving || d.text.trim() === ''} onClick={() => void tr.saveDraft()}>Save</button>
+            </div>
+        </div>
+    )
+})
+
+// ── the notes ──
+
+const NotesColumn = observer(({ tr }: { tr: TrailerSt }) => {
+    const here = tr.here
+    const elsewhere = tr.elsewhere
+    const total = tr.notes.length
+    return (
+        <div className="tr-notescol">
+            <div className="tr-noteshead">
+                <b>Notes</b>
+                <span className={`tr-openbadge${tr.openCount > 0 ? ' on' : ''}`}>{tr.openCount} open</span>
+                <span className="tr-dim tr-small">of {total}</span>
+                <span className="sp" />
+                <span className="seg">
+                    <button className={tr.filter === 'open' ? 'on' : ''} onClick={() => tr.setFilter('open')}>open</button>
+                    <button className={tr.filter === 'all' ? 'on' : ''} onClick={() => tr.setFilter('all')}>all</button>
+                </span>
+            </div>
+            <div className="tr-notesscroll">
+                {tr.draft ? <DraftBox tr={tr} /> : null}
+                {total === 0 && !tr.draft ? <div className="rv-empty">No note. N, or a click on the image, writes one on the frame on screen.</div> : null}
+                {here.map((n) => <NoteCard key={n.note.id} tr={tr} n={n} />)}
+                {elsewhere.length > 0 ? <div className="tr-elsewhere">On shots outside this cut ({elsewhere.length})</div> : null}
+                {elsewhere.map((n) => <NoteCard key={n.note.id} tr={tr} n={n} />)}
+                {!tr.draft && tr.error ? <div className="rv-err">{tr.error}</div> : null}
+            </div>
+        </div>
+    )
+})
+
+const STATE_LABEL: Record<string, string> = { open: 'open', done: 'done', wontfix: 'not doing' }
+
+const NoteCard = observer(({ tr, n: p }: { tr: TrailerSt; n: PlacedNote }) => {
+    const n = p.note
+    const on = tr.selected === n.id
+    const editing = tr.editing?.id === n.id ? tr.editing : null
+    const closing = tr.closing?.id === n.id ? tr.closing : null
+    const [sure, setSure] = useState(false)
+    const ref = useRef<HTMLDivElement>(null)
+    useEffect(() => {
+        if (on) ref.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+    }, [on])
+    const go = (): void => (p.at !== null ? tr.goTo(p) : tr.openOnItsCut(n))
+    const enterSaves = (save: () => void, cancel: () => void) => (e: React.KeyboardEvent<HTMLTextAreaElement>): void => {
+        if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
+            e.preventDefault()
+            save()
+        } else if (e.key === 'Escape') {
+            e.preventDefault()
+            cancel()
+        }
+    }
+    return (
+        <div ref={ref} className={`tr-note ns-${n.state}${on ? ' on' : ''}`} onClick={(e) => { if (!(e.target as Element).closest('button, textarea, input')) go() }}>
+            <div className="tr-notetop">
+                {!on ? <Still tr={tr} n={n} w={112} /> : null}
+                <div className="tr-notebody">
+                    <div className="tr-notemeta">
+                        <span className="tr-mono tr-dim" title={n.id}>#{n.n}</span>
+                        <b className="tr-mono">{p.at !== null ? clock(p.at) : `${n.cut} ${clock(n.time)}`}</b>
+                        <span className={`tr-secbadge small ${tr.timeline ? hueOf(tr.timeline, n.section) : 'hue-none'}`}>{n.shot}</span>
+                        {n.state !== 'open' ? <span className={`tr-statebadge ns-${n.state}`}>{n.state === 'done' ? '✓' : '⊘'} {STATE_LABEL[n.state]}</span> : null}
+                    </div>
+                    {p.moved && p.at !== null ? <div className="tr-moved">shot moved: written at {clock(n.time)}, this shot now starts at {clock(p.at - n.shotTime)}</div> : null}
+                    {p.at === null ? <div className="tr-dim tr-small">written on {n.cut} · this shot is not in {tr.shown?.cut} (click: open {n.cut})</div> : null}
+                    {!editing ? <div className={`tr-notetext${n.state === 'wontfix' ? ' struck' : ''}`}>{n.text}</div> : null}
+                </div>
+            </div>
+            {on ? <Still tr={tr} n={n} w="100%" /> : null}
+            {editing ? (
+                <div className="tr-edit">
+                    <textarea autoFocus rows={3} value={editing.text} onChange={(e) => tr.setEditText(e.currentTarget.value)} onKeyDown={enterSaves(() => void tr.saveEdit(), () => tr.cancelEdit())} />
+                    <div className="tr-dim tr-small">Enter saves · Escape drops it · on its frame, a click moves the pin</div>
+                </div>
+            ) : null}
+            {n.reply && !closing ? (
+                <div className={`tr-reply ns-${n.state}`}>
+                    <div className="rv-pre">{n.reply}</div>
+                    {n.closed ? <div className="tr-dim tr-small">{ago(Date.parse(n.closed))} ago</div> : null}
+                </div>
+            ) : null}
+            {closing ? (
+                <div className="tr-edit">
+                    <textarea autoFocus rows={2} placeholder={closing.state === 'done' ? 'The commit, or what was done (optional)' : 'Why (optional)'} value={closing.reply}
+                        onChange={(e) => tr.setReply(e.currentTarget.value)} onKeyDown={enterSaves(() => void tr.confirmClose(), () => tr.cancelClose())} />
+                    <div className="tr-draftbtns">
+                        <button onClick={() => tr.cancelClose()}>Cancel</button>
+                        <button className="primary" onClick={() => void tr.confirmClose()}>{closing.state === 'done' ? 'Mark done' : 'Not doing it'}</button>
+                    </div>
+                </div>
+            ) : null}
+            {on && !editing && !closing ? (
+                <div className="tr-noteacts">
+                    <button onClick={() => tr.startEdit(n)}>✎ Edit</button>
+                    {n.state === 'open' ? (
+                        <>
+                            <button className="tr-done" onClick={() => tr.askClose(n, 'done')}>✓ Done</button>
+                            <button onClick={() => tr.askClose(n, 'wontfix')}>⊘ Not doing</button>
+                        </>
+                    ) : (
+                        <button onClick={() => void tr.reopen(n)}>↺ Reopen</button>
+                    )}
+                    {n.pin ? <button className="ghost" onClick={() => void tr.unpin(n)}>📍 Unpin</button> : null}
+                    <span className="sp" />
+                    <button className={`tr-delete${sure ? ' sure' : ''}`} onClick={() => (sure ? void tr.remove(n) : setSure(true))} onMouseLeave={() => setSure(false)}>
+                        {sure ? 'Sure?' : 'Delete'}
+                    </button>
+                </div>
+            ) : null}
+        </div>
+    )
+})
+
+/** a note's still, as cut when he wrote it, with its pin */
+const Still = ({ tr, n, w }: { tr: TrailerSt; n: TrailerNote; w: number | string }) => {
+    const [sw, sh] = tr.shown?.timeline.size ?? [16, 9]
+    return (
+        <div className={`tr-still${typeof w === 'string' ? ' wide' : ''}`} style={{ width: w, aspectRatio: `${sw} / ${sh}` }}>
+            <img src={tr.stillUrl(n)} alt="" loading="lazy" />
+            {n.pin ? <div className={`tr-stillpin ns-${n.state}`} style={{ left: `${n.pin.x * 100}%`, top: `${n.pin.y * 100}%` }} /> : null}
+        </div>
+    )
+}