rvlib-shipkit 2.2.0 → 2.4.0

package/src/serve/hub-app/repo-st.ts

@@ -5,7 +5,7 @@
 // (hash-route.ts), and setSel is the one place both move together. A repo
 // that is not shown keeps all of it and polls nothing (resume, pause), and
 // only the shown one writes the url.
-import { makeAutoObservable } from 'mobx'
+import { makeAutoObservable, reaction } from 'mobx'
 import { ClockSvc } from './clock-svc.ts'
 import { ColsSvc } from './cols-svc.ts'
 import { canonicalSel, currentHash, hashFor, parseHash, selOf, type CheckOwner, type HashSel } from './hash-route.ts'
@@ -21,8 +21,11 @@ import { GitSt } from './git-st.ts'
 import type { ProcessRow } from '../../home/process-rows.ts'
 import { TestsSvc } from './tests-svc.ts'
 import { AdminSvc } from './admin-svc.ts'
+import { ReviewSt } from './review/review-st.ts'
+import { TrailerSt } from './review/trailer-st.ts'
+import { WikiSt } from './wiki-st.ts'
 import { repoSections } from './repo-sections.ts'
-import { sectionKeyLabel } from './keys.ts'
+import { isTreeWalk, sectionKeyLabel } from './keys.ts'
 import type { Resource } from './hub-types.ts'
 import type { HomeSt } from './home-st.ts'
 
@@ -66,6 +69,12 @@ export class RepoSt {
     tests: TestsSvc
     /** the admin page: archive behind its confirmation, reload, keep active */
     admin: AdminSvc
+    /** the review page: the cards of the one store and his answers (review/review-st.ts) */
+    review: ReviewSt
+    /** the trailer page: a cut played with its timeline and his frame notes (review/trailer-st.ts) */
+    trailer: TrailerSt
+    /** the wikis page's search and preview */
+    wiki: WikiSt
     sel: Sel = null
     filter: Filter = 'all'
     /** sidebar search — live substring filter over asset + collection rows */
@@ -103,7 +112,18 @@ export class RepoSt {
         this.git = new GitSt(this)
         this.tests = new TestsSvc(this)
         this.admin = new AdminSvc(this)
-        makeAutoObservable<this, 'beat' | 'onceRead'>(this, { onceRead: false, home: false, key: false, base: false, clock: false, media: false, cols: false, tree: false, health: false, readme: false, checks: false, comfy: false, timeline: false, live: false, git: false, tests: false, admin: false, searchEl: false, beat: false })
+        this.review = new ReviewSt(this)
+        this.trailer = new TrailerSt(this)
+        this.wiki = new WikiSt(this)
+        makeAutoObservable<this, 'beat' | 'onceRead'>(this, { onceRead: false, home: false, key: false, base: false, clock: false, media: false, cols: false, tree: false, health: false, readme: false, checks: false, comfy: false, timeline: false, live: false, git: false, tests: false, admin: false, review: false, trailer: false, wiki: false, searchEl: false, beat: false })
+        // a view or a filter changed on the review page: its address follows, the card unchanged
+        reaction(
+            () => (this.sel?.t === 'review' ? this.review.address : null),
+            (q) => {
+                const s = this.sel
+                if (q !== null && s?.t === 'review' && (s.q ?? '') !== q) this.setSel({ t: 'review', id: s.id, ...(q ? { q } : {}) })
+            },
+        )
     }
 
     /** an absolute hub path ('/api/…', '/media/…', '/hub.json') as this
@@ -175,6 +195,8 @@ export class RepoSt {
         this.media.start()
         this.cols.start()
         this.live.start()
+        if (this.sel?.t === 'review') this.review.start()
+        if (this.sel?.t === 'trailer') this.trailer.start()
     }
 
     /** stop polling, keep every state: a resume shows the same page */
@@ -185,6 +207,8 @@ export class RepoSt {
         this.media.stop()
         this.cols.stop()
         this.live.stop()
+        this.review.stop()
+        this.trailer.stop()
     }
 
     dispose(): void {
@@ -285,7 +309,12 @@ export class RepoSt {
         const next = parseHash(h)
         // the tool set rides after the asset id (media-svc syncHash), so an
         // address is the same page whatever tools it carries
-        if (cur.kind === next.kind && cur.col === next.col && cur.id === next.id) return
+        if (cur.kind === next.kind && cur.col === next.col && cur.id === next.id) {
+            // the trailer's note and filter, the review's view and filters ride on their page, as the tool set does on an
+            // asset: no history entry
+            if ((next.kind === 'trailer' || next.kind === 'review') && currentHash() !== h) history.replaceState(null, '', `#${h}`)
+            return
+        }
         if (this.walking && this.walked) history.replaceState(null, '', `#${h}`)
         else history.pushState(null, '', `#${h}`)
         this.walked = this.walking
@@ -295,6 +324,11 @@ export class RepoSt {
      *  lands on the raw wall of text unless it is asked for by name */
     openResource(r: Resource): void {
         if (r.type === 'process') return this.showProcesses(r.id.replace(/^process:/, ''))
+        if (r.type === 'card') return this.showReview(r.id.replace(/^card:/, ''))
+        if (r.type === 'cut') {
+            const [trailer = null, cut = null] = r.id.replace(/^cut:/, '').split('/')
+            return this.showTrailer(trailer, cut)
+        }
         const assetId = r.id.replace(/^media:/, '')
         if (r.collection === 'media' && this.media.assets.some((a) => a.id === assetId)) {
             this.selectAsset(assetId)
@@ -339,6 +373,27 @@ export class RepoSt {
     showProcesses(id: string | null): void {
         this.setSel({ t: 'processes', id })
     }
+    /** the review page, `id` the card it opens, null for the first the list shows */
+    showReview(id: string | null, q?: string): void {
+        this.review.select(id)
+        if (q !== undefined) this.review.applyAddress(q)
+        const query = this.review.address
+        this.setSel({ t: 'review', id, ...(query ? { q: query } : {}) })
+        if (this.polling) this.review.start()
+    }
+    /** a plain key the page shown claims for itself: the review page (V F R A N M, a clip's Space and arrows) and
+     *  the trailer page (its player keys), as the atelier takes its roll keys. True when the page used it. ↑ ↓ stay
+     *  the tree's while its cursor walks it, so a walk crosses these sections; a click in the page hands them back */
+    pageKey(e: Pick<KeyboardEvent, 'key' | 'shiftKey'>): boolean {
+        if (isTreeWalk(e.key) && !e.shiftKey && this.tree.cursor != null) return false
+        return (this.sel?.t === 'review' && this.review.key(e)) || (this.sel?.t === 'trailer' && this.trailer.key(e))
+    }
+    /** the trailer page on a trailer folder and one of its cuts, null for the first */
+    showTrailer(trailer: string | null, cut: string | null, note: string | null = null, filter: 'open' | 'all' | null = null): void {
+        this.trailer.select(trailer, cut, note, filter)
+        this.setSel({ t: 'trailer', trailer, cut, note, filter })
+        if (this.polling) this.trailer.start()
+    }
 
     /** collection view — one card per instance */
     showCol(id: string): void {
@@ -360,6 +415,8 @@ export class RepoSt {
             case 'git': return this.showGit()
             case 'when': return this.showWhen()
             case 'checks': return this.showChecks(sel.from)
+            case 'review': return this.showReview(sel.id, sel.q ?? '')
+            case 'trailer': return this.showTrailer(sel.trailer, sel.cut, sel.note ?? null, sel.filter ?? null)
         }
     }
     /** the url decides the page: a reload, back, forward and a pasted link

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

@@ -0,0 +1,258 @@
+// the one clock of a clip on screen (a card's clip view, a sound, a trailer cut): it plays, pauses, seeks and steps
+// every video of the view at once, so a pair of clips stays in sync. A paused time is always the middle of a frame, so
+// both videos of a pair and every rectangle drawn on it agree on the frame. The sound choice and the volume are the
+// page's, kept in the browser. One thing plays at a time on the whole page (`solo`): any clock or player that starts
+// pauses the one playing
+import { makeAutoObservable, runInAction } from 'mobx'
+
+/** the part of a video element the clock drives */
+interface ClipEl {
+    currentTime: number
+    muted: boolean
+    volume: number
+    playbackRate: number
+    readonly paused: boolean
+    play(): Promise<void> | void
+    pause(): void
+}
+
+/** a follower further than this from the first video, in seconds, is put back on it */
+const DRIFT = 0.06
+const KEY = 'shipkit.review.sound'
+
+/** the page's one sound choice and volume, kept for the next visit */
+class Heard {
+    on = false
+    level = 0.8
+    constructor() {
+        try {
+            const v = JSON.parse(localStorage.getItem(KEY) ?? '{}') as { on?: boolean; level?: number }
+            if (typeof v.on === 'boolean') this.on = v.on
+            if (typeof v.level === 'number' && v.level > 0 && v.level <= 1) this.level = v.level
+        } catch {
+            // a blocked storage only loses the kept choice
+        }
+        makeAutoObservable(this)
+    }
+    private save(): void {
+        try {
+            localStorage.setItem(KEY, JSON.stringify({ on: this.on, level: this.level }))
+        } catch {
+            // as above
+        }
+    }
+    setOn(on: boolean): void {
+        this.on = on
+        this.save()
+    }
+    set(level: number): void {
+        this.level = Math.max(0, Math.min(1, level))
+        this.save()
+    }
+}
+
+export const heard = new Heard()
+
+/** what plays now, page wide: anything that starts pauses it first */
+interface Playing {
+    pause(): void
+}
+let playing: Playing | null = null
+/** the clock each media element of the page plays under; an element no clock drives is its own */
+const owners = new WeakMap<object, Playing>()
+
+export const solo = {
+    /** `p` starts: the one playing before it pauses */
+    claim(p: Playing): void {
+        const before = playing
+        playing = p
+        if (before && before !== p) before.pause()
+    },
+    /** `p` stopped or left the page */
+    release(p: Playing): void {
+        if (playing === p) playing = null
+    },
+}
+
+// every audio or video of the page that starts (a sound's own player, the atelier's rolls) claims under its clock, so
+// the rule holds for players no clock drives
+if (typeof document !== 'undefined')
+    document.addEventListener(
+        'play',
+        (e) => {
+            const el = e.target
+            if (!(el instanceof HTMLMediaElement)) return
+            let me = owners.get(el)
+            if (!me) {
+                me = { pause: () => el.pause() }
+                owners.set(el, me)
+            }
+            solo.claim(me)
+        },
+        true,
+    )
+
+export class ClipSt {
+    /** which clip is on screen, empty when none */
+    key = ''
+    /** the clip's length in seconds, its frames a second */
+    duration = 0
+    fps = 20
+    paused = false
+    /** the audio track on: only the first video is heard */
+    sound: boolean
+    /** the time on screen, in seconds: exact while paused, the first video's while it plays */
+    time = 0
+    /** a play the browser refused, shown under the clip */
+    error: string | null = null
+    /** the playback speed, 1 the clip's own */
+    rate = 1
+    private els: ClipEl[] = []
+    private raf = 0
+
+    constructor() {
+        this.sound = heard.on
+        makeAutoObservable<this, 'els' | 'raf' | 'follow'>(this, { els: false, raf: false, follow: false })
+    }
+
+    get volume(): number {
+        return heard.level
+    }
+
+    /** another clip on screen: from the start, playing unless `still`; the same one again changes nothing */
+    load(key: string, duration: number, fps: number, still = false): void {
+        if (key === this.key) return
+        this.key = key
+        this.duration = duration
+        this.fps = fps > 0 ? fps : 20
+        this.time = 0
+        this.paused = still
+        this.error = null
+    }
+
+    /** the frame index of a time */
+    frameOf(t: number): number {
+        const last = Math.max(0, Math.round(this.duration * this.fps) - 1)
+        return Math.max(0, Math.min(last, Math.floor(t * this.fps + 1e-6)))
+    }
+
+    /** the middle of frame `k`, where a seek lands on that frame for sure */
+    private centerOf(k: number): number {
+        return (k + 0.5) / this.fps
+    }
+
+    /** a video of the view on screen; it returns its release */
+    attach(el: ClipEl): () => void {
+        this.els.push(el)
+        owners.set(el, this)
+        el.muted = !this.sound || this.els[0] !== el
+        el.volume = heard.level
+        el.playbackRate = this.rate
+        el.currentTime = this.paused ? this.time : (this.els[0]?.currentTime ?? this.time)
+        if (this.paused) el.pause()
+        else this.start(el)
+        if (this.raf === 0 && typeof requestAnimationFrame === 'function') this.raf = requestAnimationFrame(this.follow)
+        return () => {
+            this.els = this.els.filter((e) => e !== el)
+            if (this.els.length === 0) solo.release(this)
+        }
+    }
+
+    /** played to be heard: its sound on, from where it stands */
+    listen(): void {
+        this.hear(true)
+        this.play()
+    }
+
+    toggleSound(): void {
+        this.hear(!this.sound)
+        heard.setOn(this.sound)
+    }
+
+    /** this clip's sound on or off, the kept choice left as it is */
+    hear(on: boolean): void {
+        this.sound = on
+        this.els.forEach((el, i) => (el.muted = !this.sound || i > 0))
+    }
+
+    /** a volume asked is a sound wanted, and none is the sound off */
+    setVolume(v: number): void {
+        if (v > 0) heard.set(v)
+        for (const el of this.els) el.volume = heard.level
+        if (this.sound !== v > 0) this.toggleSound()
+    }
+
+    toggle(): void {
+        if (this.paused) this.play()
+        else this.pause()
+    }
+
+    play(): void {
+        this.paused = false
+        this.error = null
+        solo.claim(this)
+        for (const el of this.els) this.start(el)
+    }
+
+    /** stops on the frame the first video shows */
+    pause(): void {
+        this.seek(this.els[0]?.currentTime ?? this.time)
+    }
+
+    /** paused on the frame at `t` */
+    seek(t: number): void {
+        this.paused = true
+        this.time = this.centerOf(this.frameOf(t))
+        for (const el of this.els) {
+            el.pause()
+            el.currentTime = this.time
+        }
+    }
+
+    /** to `t`, playing on when it played: a jump while it plays never stops it */
+    jump(t: number): void {
+        if (this.paused) return this.seek(t)
+        const to = Math.max(0, Math.min(this.duration, t))
+        this.time = to
+        for (const el of this.els) el.currentTime = to
+    }
+
+    setRate(r: number): void {
+        this.rate = r
+        for (const el of this.els) el.playbackRate = r
+    }
+
+    /** `n` frames on (or back), paused, wrapping round the loop */
+    step(n: number): void {
+        const count = Math.max(1, Math.round(this.duration * this.fps))
+        const from = this.paused ? this.time : (this.els[0]?.currentTime ?? this.time)
+        this.seek(this.centerOf((((this.frameOf(from) + n) % count) + count) % count))
+    }
+
+    private start(el: ClipEl): void {
+        solo.claim(this)
+        const p = el.play()
+        if (p)
+            p.catch((e: Error) => {
+                // a pause that lands before the play resolves aborts it: that is the pause working
+                if (e.name === 'AbortError') return
+                runInAction(() => {
+                    this.paused = true
+                    this.error = `play refused: ${e.message}`
+                })
+            })
+    }
+
+    /** each frame while it plays: the time read from the first video, the others put back on it */
+    private follow = (): void => {
+        this.raf = 0
+        if (this.els.length === 0) return
+        const lead = this.els[0]
+        if (lead && !this.paused) {
+            const t = lead.currentTime
+            runInAction(() => (this.time = t))
+            for (const el of this.els.slice(1)) if (Math.abs(el.currentTime - t) > DRIFT) el.currentTime = t
+        }
+        this.raf = requestAnimationFrame(this.follow)
+    }
+}

package/src/serve/hub-app/review/kind-view.tsx

@@ -0,0 +1,240 @@
+// what the repo's review unit says of the open item, drawn from DATA the hub computed (review/project.ts viewOfItem): its
+// kind's facts, links, a text or its change as a diff, its parts (a card each: logo, media beside the text, its change),
+// and « live », the kind's url in a frame, off until he opens it; and a pair's animation to download. The page never
+// runs the repo's code
+import { makeAutoObservable, runInAction } from 'mobx'
+import { observer } from 'mobx-react-lite'
+import { useEffect } from 'react'
+import { isGallery, isPair, viewName, type ReviewItem } from '../../../review/model.ts'
+import type { PartData } from '../../../review/project.ts'
+import type { Fact, Link, PartTone, ViewText } from '../../../review/unit.ts'
+
+/** where an item's files and routes answer under the repo's base: the review page's own url maker */
+interface Urls {
+    fileUrl(id: string, name: string): string
+}
+
+export interface KindData {
+    facts: Fact[]
+    links: Link[]
+    live: string | null
+    text: ViewText | null
+    parts: PartData[]
+}
+
+/** each item's data view, read once an item opens and again when its thread moves; « live » stays as he left it */
+export class KindViewSt {
+    views = new Map<string, KindData | { error: string }>()
+    live = false
+    anim = { view: 0, mode: 'fade', format: 'mp4', labels: 'en' }
+
+    constructor(private readonly st: Urls) {
+        try {
+            this.live = localStorage.getItem('rv.kindLive') === '1'
+            const a = JSON.parse(localStorage.getItem('rv.anim') ?? 'null') as Partial<KindViewSt['anim']> | null
+            if (a) this.anim = { ...this.anim, ...a, view: 0 }
+        } catch {
+            // a private window: the defaults
+        }
+        makeAutoObservable<this, 'st'>(this, { st: false })
+    }
+
+    /** the view of item `x`, read when its stamp (its last message) moved */
+    read(x: ReviewItem): void {
+        const key = `${x.item.id}@${x.thread.at(-1)?.id ?? ''}`
+        if (this.views.has(key)) return
+        this.views.set(key, { facts: [], links: [], live: null, text: null, parts: [] })
+        void fetch(this.st.fileUrl(x.item.id, 'view'))
+            .then(async (r) => (r.ok ? ((await r.json()) as KindData) : { error: ((await r.json().catch(() => ({}))) as { error?: string }).error ?? `HTTP ${r.status}` }))
+            .catch((e: Error) => ({ error: e.message }))
+            .then((v) => runInAction(() => this.views.set(key, v)))
+    }
+
+    of(x: ReviewItem): KindData | { error: string } | undefined {
+        return this.views.get(`${x.item.id}@${x.thread.at(-1)?.id ?? ''}`)
+    }
+
+    toggleLive(): void {
+        this.live = !this.live
+        try {
+            localStorage.setItem('rv.kindLive', this.live ? '1' : '0')
+        } catch {
+            // kept for this page only
+        }
+    }
+
+    setAnim(k: 'view' | 'mode' | 'format' | 'labels', v: string): void {
+        this.anim = { ...this.anim, [k]: k === 'view' ? Number(v) : v }
+        try {
+            localStorage.setItem('rv.anim', JSON.stringify(this.anim))
+        } catch {
+            // kept for this page only
+        }
+    }
+
+    animUrl(x: ReviewItem, view: number): string {
+        const a = this.anim
+        return `${this.st.fileUrl(x.item.id, 'anim')}?view=${view}&mode=${a.mode}&format=${a.format}&labels=${a.labels}`
+    }
+}
+
+const held = new WeakMap<Urls, KindViewSt>()
+const kindViewOf = (st: Urls): KindViewSt => {
+    let k = held.get(st)
+    if (!k) held.set(st, (k = new KindViewSt(st)))
+    return k
+}
+
+/** a diff of two token lists: each token kept, gone or new */
+function diffSeq(a: readonly string[], b: readonly string[]): { t: ' ' | '-' | '+'; line: string }[] {
+    const n = a.length
+    const m = b.length
+    const lcs: number[][] = Array.from({ length: n + 1 }, () => new Array<number>(m + 1).fill(0))
+    for (let i = n - 1; i >= 0; i--) for (let j = m - 1; j >= 0; j--) lcs[i]![j] = a[i] === b[j] ? lcs[i + 1]![j + 1]! + 1 : Math.max(lcs[i + 1]![j]!, lcs[i]![j + 1]!)
+    const out: { t: ' ' | '-' | '+'; line: string }[] = []
+    let i = 0
+    let j = 0
+    while (i < n && j < m) {
+        if (a[i] === b[j]) out.push({ t: ' ', line: a[i++]! }), j++
+        else if (lcs[i + 1]![j]! >= lcs[i]![j + 1]!) out.push({ t: '-', line: a[i++]! })
+        else out.push({ t: '+', line: b[j++]! })
+    }
+    while (i < n) out.push({ t: '-', line: a[i++]! })
+    while (j < m) out.push({ t: '+', line: b[j++]! })
+    return out
+}
+
+/** a line diff of two texts: each line kept, gone or new */
+const diffLines = (before: string, after: string) => diffSeq(before.split('\n'), after.split('\n'))
+
+/** a word diff of two texts, the spaces kept as tokens so each side reads as written */
+const diffWords = (before: string, after: string) => diffSeq(before.split(/(\s+)/), after.split(/(\s+)/))
+
+const TONE = { ' ': 'var(--dim)', '-': 'var(--red, #e5484d)', '+': 'var(--green, #46a758)' } as const
+
+/** the kind's data view of the open item, under its facts */
+export const KindView = observer(({ app, x }: { app: Urls; x: ReviewItem }) => {
+    const k = kindViewOf(app)
+    const last = x.thread.at(-1)?.id
+    useEffect(() => k.read(x), [k, x, last])
+    const v = k.of(x)
+    if (v === undefined) return null
+    if ('error' in v) return <div className="rv-err rv-pre">the repo's view of this item: {v.error}</div>
+    const t = v.text
+    return (
+        <div className="rv-kindview">
+            {v.facts.length > 0 ? (
+                <div className="rv-facts">
+                    {v.facts.map((f, i) => (
+                        <div key={i} className="rv-fact"><span className="rv-factl">{f.label}</span><span className="rv-factv">{f.value}</span></div>
+                    ))}
+                </div>
+            ) : null}
+            {v.links.length > 0 ? (
+                <div className="rv-fact">
+                    {v.links.map((l) => <LinkTo key={l.url} l={l} />)}
+                </div>
+            ) : null}
+            {t !== null && 'text' in t ? <pre className="rv-pre rv-kindtext">{t.text}</pre> : null}
+            {t !== null && 'before' in t ? (
+                <pre className="rv-kindtext">
+                    {diffLines(t.before, t.after).map((d, i) => (
+                        <div key={i} style={{ color: TONE[d.t] }}>{d.t} {d.line}</div>
+                    ))}
+                </pre>
+            ) : null}
+            {v.parts.map((p, i) => <PartCard key={i} app={app} x={x} n={i} p={p} />)}
+            {v.live !== null ? (
+                <div>
+                    <button className="ghost" onClick={() => k.toggleLive()}>{k.live ? 'hide live' : 'live'}</button>
+                    {k.live ? <iframe title="live" src={v.live} style={{ width: '100%', aspectRatio: '16 / 10', border: '1px solid var(--line)', borderRadius: 3, marginTop: 6 }} /> : null}
+                </div>
+            ) : null}
+        </div>
+    )
+})
+
+/** a link: a page of the tool that frames the hub is posted to it, any other opens in a new tab */
+const LinkTo = ({ l }: { l: Link }) => {
+    const framed = l.host === true && window.parent !== window
+    return (
+        <a
+            href={l.url}
+            target="_blank"
+            rel="noreferrer"
+            onClick={(e) => {
+                if (!framed) return
+                e.preventDefault()
+                window.parent.postMessage({ shipkit: 'open', url: l.url }, location.origin)
+            }}
+        >
+            {l.label}
+        </a>
+    )
+}
+
+const BADGE: Record<PartTone, string> = { new: 'var(--green, #46a758)', changed: 'var(--orange, #e5932d)', gone: 'var(--red, #e5484d)', same: 'var(--dim)' }
+const GONE = { background: 'color-mix(in srgb, var(--red, #e5484d) 18%, transparent)', textDecoration: 'line-through' }
+const ADDED = { background: 'color-mix(in srgb, var(--green, #46a758) 20%, transparent)' }
+
+/** one side of a word diff: what stayed and what that side alone has, marked */
+const Side = ({ before, after, side }: { before: string; after: string; side: '-' | '+' }) => (
+    <div className="rv-pre rv-parttext">
+        {diffWords(before, after)
+            .filter((d) => d.t === ' ' || d.t === side)
+            .map((d, i) => <span key={i} style={d.t === ' ' ? undefined : side === '-' ? GONE : ADDED}>{d.line}</span>)}
+    </div>
+)
+
+/** a part of the subject as a card: its logo and name, its change, its media beside its text or the text's change */
+const PartCard = ({ app, x, n, p }: { app: Urls; x: ReviewItem; n: number; p: PartData }) => {
+    const t = p.text
+    const src = app.fileUrl(x.item.id, `part-${n}`)
+    return (
+        <div className="rv-part">
+            <div className="rv-parthead">
+                {p.icon ? <img className="rv-particon" src={p.icon} alt="" /> : null}
+                <b>{p.label}</b>
+                {p.detail ? <span className="rv-dim"> · {p.detail}</span> : null}
+                {p.badge ? <span className="rv-partbadge" style={{ color: BADGE[p.badge.tone], borderColor: BADGE[p.badge.tone] }}>{p.badge.text}</span> : null}
+            </div>
+            <div className="rv-partbody">
+                {p.media === 'video' ? <video src={src} muted loop autoPlay playsInline controls /> : p.media === 'image' ? <img src={src} alt="" /> : null}
+                {'text' in t ? (
+                    <div className="rv-pre rv-parttext">{t.text}</div>
+                ) : t.before === t.after ? (
+                    <div className="rv-pre rv-parttext">{t.after}</div>
+                ) : (
+                    <>
+                        <div><div className="rv-factl">before</div><Side before={t.before} after={t.after} side="-" /></div>
+                        <div><div className="rv-factl">after</div><Side before={t.before} after={t.after} side="+" /></div>
+                    </>
+                )}
+            </div>
+        </div>
+    )
+}
+
+/** a pair of images as a looping animation to download: the mode, the format, the corner labels */
+export const AnimPanel = observer(({ app, x }: { app: Urls; x: ReviewItem }) => {
+    const pairs = x.item.views.flatMap((v, i) => (!isGallery(v) && isPair(v.files) && !v.clip && !v.audio ? [{ i, name: viewName(v, i) }] : []))
+    if (pairs.length === 0) return null
+    const k = kindViewOf(app)
+    const a = k.anim
+    const view = pairs.some((p) => p.i === a.view) ? a.view : (pairs[0]?.i ?? 0)
+    const pick = (key: 'view' | 'mode' | 'format' | 'labels', options: [string, string][], value: string) => (
+        <select value={value} onChange={(e) => k.setAnim(key, e.currentTarget.value)}>
+            {options.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
+        </select>
+    )
+    return (
+        <div className="rv-fact rv-anim" style={{ flexWrap: 'wrap' }}>
+            <span className="rv-factl">animation</span>
+            {pairs.length > 1 ? pick('view', pairs.map((p) => [String(p.i), p.name]), String(view)) : null}
+            {pick('mode', [['cut', 'cut'], ['fade', 'fade'], ['wipe', 'wipe']], a.mode)}
+            {pick('format', [['mp4', 'MP4'], ['gif', 'GIF']], a.format)}
+            {pick('labels', [['en', 'EN'], ['fr', 'FR'], ['none', 'no labels']], a.labels)}
+            <a href={k.animUrl(x, view)} download>download</a>
+        </div>
+    )
+})