rvlib-shipkit 2.3.0 → 2.5.0

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

@@ -3,10 +3,17 @@
 // sent. The list is read while the page shows, every 2 s, answered 304 when the store did not move
 import { makeAutoObservable, reaction, runInAction } from 'mobx'
 import {
+    asOptions,
+    isApproved,
+    isChoice,
     isGallery,
+    isPair,
     laneOf,
     moveOf,
+    pasteBlock,
     reworkOf,
+    STARS,
+    STATUS_LABEL,
     stateOf,
     unreadBy,
     verdictOf,
@@ -25,12 +32,15 @@ import { answererOf, chainOf, childrenOf, conversationOf, followedIds, isActive,
 import { reach } from '../reach.ts'
 import type { RepoSt } from '../repo-st.ts'
 import type { Role } from '../../../review/role.ts'
+import type { PasteHosts } from '../../../review/paste.ts'
 import { ClipSt } from './clip-st.ts'
 
 interface Draft {
     rects: Rect[]
     comment: string
     reactions?: ReviewReaction[]
+    /** the option he picked, on a choice card */
+    pick?: number
 }
 
 /** a live `sk review watch`: its process, the session or lane it keeps, when it started */
@@ -58,7 +68,7 @@ export const drawnSide = (mode: CompareMode, drawn: Side): Side => (mode === 'mo
 
 /** below this width the page is the phone's: one column at a time, the verdicts in a bar under the thumb */
 /** a repo's review unit as the page reads it: the words of its kinds and topics, its dispatcher and who holds the role */
-export type RepoSpec = Spec & { role: Role | null; sources: string[]; auto: { id: string; every: string }[] }
+export type RepoSpec = Spec & { role: Role | null; sources: string[]; auto: { id: string; every: string }[]; where?: PasteHosts | null }
 
 export const PHONE_PX = 768
 /** below this width of the review page itself (the project list and the sidebar already took theirs), `auto` stacks
@@ -71,6 +81,10 @@ export type PhonePane = 'list' | 'card' | 'answer'
 export type PairSide = 'before' | 'after' | 'swipe'
 
 const POLL_MS = 2000
+/** a sound's clock steps a tenth of a second */
+const SOUND_FPS = 10
+/** ← → on a sound jump this many seconds */
+const SOUND_JUMP = 2
 
 const sameSpot = (r: ReviewReaction, view: number, tile: number | undefined): boolean => r.view === view && r.tile === tile
 
@@ -97,7 +111,7 @@ const draftOf = (s: string | null): Draft | null => {
     try {
         const d = s === null ? null : (JSON.parse(s) as Partial<Draft>)
         if (!d || !Array.isArray(d.rects) || typeof d.comment !== 'string') return null
-        return { rects: d.rects, comment: d.comment, ...(Array.isArray(d.reactions) ? { reactions: d.reactions } : {}) }
+        return { rects: d.rects, comment: d.comment, ...(Array.isArray(d.reactions) ? { reactions: d.reactions } : {}), ...(typeof d.pick === 'number' ? { pick: d.pick } : {}) }
     } catch {
         return null
     }
@@ -132,6 +146,26 @@ async function postJson<T>(url: string, body: unknown): Promise<T> {
     return JSON.parse(text) as T
 }
 
+/** a text to the clipboard: the clipboard api, else (a page over plain http, the phone through a public host) the
+ *  old copy command on a hidden field */
+async function copyText(text: string): Promise<boolean> {
+    try {
+        await navigator.clipboard.writeText(text)
+        return true
+    } catch {
+        const el = document.createElement('textarea')
+        el.value = text
+        el.setAttribute('readonly', '')
+        el.style.position = 'fixed'
+        el.style.opacity = '0'
+        document.body.appendChild(el)
+        el.select()
+        const ok = document.execCommand('copy')
+        el.remove()
+        return ok
+    }
+}
+
 /** the pair's compare mode, the curtain's line and the onion's opacity, shared by every pair of the page */
 export class CompareSt {
     mode: CompareMode = 'side'
@@ -179,6 +213,8 @@ export class PhoneSt {
     }
 }
 
+const isShownStatus = (s: string): s is ShownStatus => Object.hasOwn(STATUS_LABEL, s)
+
 export class ReviewSt {
     list: Listing | null = null
     listError: string | null = null
@@ -206,6 +242,10 @@ export class ReviewSt {
     viewZoom: Record<number, Zoom> = {}
     /** the gallery tile shown large across the column, `<view>/<tile>` */
     bigTile: string | null = null
+    /** a card of options shown full, every view stacked, by id: his switch, this visit */
+    full: Record<string, boolean> = {}
+    /** the option rows unfolded to their full view, by view index */
+    openRows: Record<number, boolean> = {}
     replies: Record<string, string> = {}
     private reading = new Set<string>()
     /** « hide handled »: only the active threads in the list */
@@ -216,6 +256,9 @@ export class ReviewSt {
     unfolded: Record<string, boolean> = {}
     busy = false
     error: string | null = null
+    /** what the last copy put on the clipboard, in words, shown a moment */
+    toast: string | null = null
+    private toastTimer: ReturnType<typeof setTimeout> | null = null
     /** the card against its answer, his pick, kept with the prefs */
     place: CardPlace = 'auto'
     /** the page is narrower than STACK_PX */
@@ -239,6 +282,27 @@ export class ReviewSt {
     setPlace(p: CardPlace): void {
         this.place = p
     }
+    /** the open card as thin option rows: a choice, or views that each play alone, unless he asked them full */
+    get rows(): boolean {
+        const x = this.open
+        return x !== null && asOptions(x.item) && this.full[x.item.id] !== true
+    }
+    setFull(on: boolean): void {
+        const id = this.open?.item.id
+        if (id) this.full = { ...this.full, [id]: on }
+    }
+    get choice(): boolean {
+        const x = this.open
+        return x !== null && isChoice(x.item)
+    }
+    /** the card's header (title, state, what, and in one column the verdicts) sits over its views: one column, the
+     *  phone's card pane, a choice's options */
+    get headInViews(): boolean {
+        return this.stacked || this.phone.on || this.choice
+    }
+    toggleRow(i: number): void {
+        this.openRows = { ...this.openRows, [i]: !this.openRows[i] }
+    }
 
     constructor(private readonly st: RepoSt) {
         this.prefix = `shipkit.review.${st.key}.`
@@ -255,7 +319,7 @@ export class ReviewSt {
         } catch {
             // a broken pref is the default
         }
-        makeAutoObservable<this, 'st' | 'clips' | 'clipsCard' | 'reading' | 'timer' | 'loadList' | 'loadWatchers' | 'prefix'>(this, {
+        makeAutoObservable<this, 'st' | 'clips' | 'clipsCard' | 'reading' | 'timer' | 'loadList' | 'loadWatchers' | 'prefix' | 'toastTimer'>(this, {
             st: false,
             clips: false,
             clipsCard: false,
@@ -264,6 +328,7 @@ export class ReviewSt {
             loadList: false,
             loadWatchers: false,
             prefix: false,
+            toastTimer: false,
             compare: false,
             phone: false,
         })
@@ -317,6 +382,27 @@ export class ReviewSt {
         }
     }
 
+    /** the open card as one paste a fresh agent session in any repo acts on: what it is, its repo, the command that shows
+     *  it whole, its link here and on the phone (C) */
+    async copyCard(): Promise<void> {
+        const x = this.open
+        if (!x) return
+        const id = x.item.id
+        const w = this.spec?.where
+        const here = typeof location === 'undefined' ? (w?.open ?? '') : `${location.origin}${location.pathname}${location.search}`
+        const text = pasteBlock(x.item, STATUS_LABEL[this.statusOf(x)], {
+            root: w?.root ?? '<the repo>',
+            open: `${here}#page:review:${id}`,
+            phone: w?.phone ? `${w.phone}#page:review:${id}` : null,
+        })
+        const ok = await copyText(text)
+        runInAction(() => {
+            this.toast = ok ? `copied for an agent: title, repo, sk review show, ${w?.phone ? 'links' : 'link'}` : 'the browser refused the copy'
+            if (this.toastTimer !== null) clearTimeout(this.toastTimer)
+            this.toastTimer = setTimeout(() => runInAction(() => (this.toast = null)), 2600)
+        })
+    }
+
     setBoard(on: boolean): void {
         this.board = on
     }
@@ -470,7 +556,14 @@ export class ReviewSt {
         if (!x) return { rects: [], comment: '' }
         const v = verdictOf(x)
         const sent = v?.reactions
-        return this.drafts[x.item.id] ?? { rects: v?.rects ?? [], comment: v?.comment ?? '', ...(sent && sent.length > 0 ? { reactions: sent } : {}) }
+        return (
+            this.drafts[x.item.id] ?? {
+                rects: v?.rects ?? [],
+                comment: v?.comment ?? '',
+                ...(sent && sent.length > 0 ? { reactions: sent } : {}),
+                ...(v?.pick !== undefined ? { pick: v.pick } : {}),
+            }
+        )
     }
 
     get dirty(): boolean {
@@ -482,7 +575,7 @@ export class ReviewSt {
         const x = this.open
         if (!x) return
         const d = this.draft
-        const { reactions, ...rest } = f({ rects: [...d.rects], comment: d.comment, reactions: [...(d.reactions ?? [])] })
+        const { reactions, ...rest } = f({ ...d, rects: [...d.rects], reactions: [...(d.reactions ?? [])] })
         const next: Draft = reactions && reactions.length > 0 ? { ...rest, reactions } : rest
         this.drafts = { ...this.drafts, [x.item.id]: next }
         store.put(`${this.prefix}draft.${x.item.id}`, JSON.stringify(next))
@@ -494,12 +587,43 @@ export class ReviewSt {
         if (this.phone.on) this.phone.show('card')
     }
 
+    /** what the address carries beside the card: its view and the list's filters, `view=1&subject=place`, each only
+     *  off its default (`handled=1` shows the handled threads, `lanes=1` groups by lane) */
+    get address(): string {
+        const q = new URLSearchParams()
+        if (this.view > 0) q.set('view', String(this.view))
+        if (this.subject !== null) q.set('subject', this.subject)
+        if (this.whose !== null) q.set('whose', this.whose)
+        if (this.status !== null) q.set('status', this.status)
+        if (!this.hideHandled) q.set('handled', '1')
+        if (this.byLane) q.set('lanes', '1')
+        return q.toString()
+    }
+
+    /** an address's view and filters read back: a key it leaves out keeps what the page has; an unknown value is dropped */
+    applyAddress(raw: string): void {
+        const q = new URLSearchParams(raw)
+        const view = Number(q.get('view'))
+        if (Number.isInteger(view) && view > 0) this.view = view
+        const subject = q.get('subject')
+        if (subject) this.subject = subject
+        const whose = q.get('whose')
+        if (whose === 'owner' || whose === 'agents' || whose === 'none') this.whose = whose
+        const status = q.get('status')
+        if (status !== null && isShownStatus(status)) this.status = status
+        if (q.get('handled') === '1') this.hideHandled = false
+        if (q.get('lanes') === '1') this.byLane = true
+    }
+
     /** the card the address names; its draft is read again from storage, the truth over every window */
     select(id: string | null): void {
         if (id !== this.selectedId) {
             this.view = 0
             this.viewZoom = {}
             this.bigTile = null
+            this.openRows = {}
+            // a link to a card on the phone opens the card, never the list
+            if (id !== null && this.phone.on) this.phone.show('card')
         }
         this.selectedId = id
         if (id !== null) {
@@ -545,6 +669,13 @@ export class ReviewSt {
         this.rect = null
     }
 
+    /** the playable view an option row or a clip shows: a clip, or a sound shown as a row */
+    private playableAt(i: number): MediaView | null {
+        const v = this.open?.item.views[i]
+        if (!v || isGallery(v)) return null
+        return v.clip || (v.audio && this.rows && !isPair(v.files)) ? v : null
+    }
+
     get openView(): MediaView | null {
         const v = this.open?.item.views[this.view]
         return v && !isGallery(v) ? v : null
@@ -575,15 +706,28 @@ export class ReviewSt {
     /** a reaction's toggle: sets that status, or clears it when it is already the one */
     react(view: number, tile: number | undefined, status: ReviewStatus): void {
         const cur = this.reactionOf(view, tile)
-        this.putReaction(view, tile, { status: cur?.status === status ? undefined : status, comment: cur?.comment ?? '' })
+        this.putReaction(view, tile, { ...cur, status: cur?.status === status ? undefined : status, comment: cur?.comment ?? '' })
     }
 
     setReactionComment(view: number, tile: number | undefined, comment: string): void {
-        this.putReaction(view, tile, { status: this.reactionOf(view, tile)?.status, comment })
+        this.putReaction(view, tile, { ...this.reactionOf(view, tile), comment })
+    }
+
+    /** an option's stars; the same number again clears them */
+    setStars(view: number, n: number): void {
+        const cur = this.reactionOf(view)
+        this.putReaction(view, undefined, { ...cur, comment: cur?.comment ?? '', stars: cur?.stars === n ? undefined : n })
     }
 
     removeReaction(view: number, tile: number | undefined): void {
-        this.putReaction(view, tile, { status: undefined, comment: '' })
+        this.putReaction(view, tile, { comment: '' })
+    }
+
+    /** « pick »: that option is his answer, sent at once as an approval; his stars and words go with it */
+    async choose(view: number): Promise<void> {
+        if (!this.choice) return
+        this.edit((d) => ({ ...d, pick: view }))
+        await this.submit('approved')
     }
 
     /** the reactions that go to the agent with the verdict, in the card's order */
@@ -591,19 +735,27 @@ export class ReviewSt {
         return [...(this.draft.reactions ?? [])].sort((a, b) => a.view - b.view || (a.tile ?? -1) - (b.tile ?? -1))
     }
 
-    private putReaction(view: number, tile: number | undefined, r: { status: ReviewStatus | undefined; comment: string }): void {
-        const next: ReviewReaction = { view, ...(tile !== undefined ? { tile } : {}), ...(r.status ? { status: r.status } : {}), comment: r.comment }
-        const empty = !r.status && r.comment === ''
+    private putReaction(view: number, tile: number | undefined, r: { status?: ReviewStatus | undefined; comment: string; stars?: number | undefined }): void {
+        const next: ReviewReaction = { view, ...(tile !== undefined ? { tile } : {}), ...(r.status ? { status: r.status } : {}), comment: r.comment, ...(r.stars ? { stars: r.stars } : {}) }
+        const empty = !r.status && r.comment === '' && !r.stars
         this.edit((d) => {
             const rest = (d.reactions ?? []).filter((q) => !sameSpot(q, view, tile))
             return { ...d, reactions: empty ? rest : [...rest, next] }
         })
     }
 
-    /** the open view's clip identity, empty when it shows images */
+    /** the open view's clip identity (a clip, or a sound on a row), empty when it shows images */
     get clipKey(): string {
         const x = this.open
-        return x && this.openView?.clip ? `${x.item.id}#${this.view}` : ''
+        return x && this.playableAt(this.view) ? `${x.item.id}#${this.view}` : ''
+    }
+
+    /** a row's ▶: that option plays with its sound, the one playing before it stops; again, it pauses */
+    listen(i: number): void {
+        this.setView(i)
+        const c = this.clipOf(i)
+        if (c.paused) c.listen()
+        else c.pause()
     }
 
     /** the clock of a clip view of the open card: every clip view plays and steps on its own */
@@ -616,9 +768,14 @@ export class ReviewSt {
         let c = this.clips.get(view)
         if (!c) {
             c = new ClipSt()
-            const v = this.open?.item.views[view]
-            const info = v && !isGallery(v) ? v.clip : undefined
-            c.load(`${id}#${view}`, info?.duration ?? 0, info?.fps ?? 20)
+            const views = this.open?.item.views ?? []
+            const v = views[view]
+            const media = v && !isGallery(v) ? v : undefined
+            // one thing plays at a time: the first clip of a card loops on its own, the others and every option wait
+            const first = views.findIndex((w) => !isGallery(w) && w.clip !== undefined)
+            const still = this.rows || view !== first
+            if (media?.audio) c.load(`${id}#${view}`, media.audio.duration, SOUND_FPS, true)
+            else c.load(`${id}#${view}`, media?.clip?.duration ?? 0, media?.clip?.fps ?? 20, still)
             this.clips.set(view, c)
         }
         return c
@@ -740,7 +897,8 @@ export class ReviewSt {
         this.busy = true
         this.error = null
         try {
-            const m = await postJson<Message>(this.st.url(`/api/review/${id}/feedback`), { status, comment: d.comment, rects: d.rects, reactions: d.reactions ?? [] })
+            const pick = isChoice(x.item) && isApproved(status) && d.pick !== undefined ? { pick: d.pick } : {}
+            const m = await postJson<Message>(this.st.url(`/api/review/${id}/feedback`), { status, comment: d.comment, rects: d.rects, reactions: d.reactions ?? [], ...pick })
             runInAction(() => {
                 // the verdict shows at once: the list of every card comes back after it
                 const r = this.list
@@ -760,10 +918,22 @@ export class ReviewSt {
     }
 
     /** the page's keys, as the atelier takes its own: true when it used the key. V approves, F ok with a fix, R rejects,
-     *  A archives, N the next waiting card, M the rings, Delete the picked rectangle; on a clip Space plays, ← → a frame */
-    key(e: Pick<KeyboardEvent, 'key' | 'shiftKey'>): boolean {
+     *  A archives, N the next waiting card, C copies the card for an agent, M the rings, Delete the picked rectangle; on a clip Space plays, ← → a frame
+     *  (a sound: two seconds); on option rows 1 to 9 play that row, ⇧1 to ⇧5 score the row playing, P picks it. A digit is
+     *  read from its physical key (`code`), so ⇧ and an AZERTY keyboard read the same */
+    key(e: Pick<KeyboardEvent, 'key' | 'shiftKey'> & { code?: string }): boolean {
         const k = e.key.toLowerCase()
-        if (this.clipKey && e.key === ' ') this.clip.toggle()
+        const digit = Number(/^Digit([1-9])$/.exec(e.code ?? '')?.[1] ?? (/^[1-9]$/.test(e.key) ? e.key : 0))
+        const sound = this.openView?.audio !== undefined
+        if (this.rows && digit > 0 && !e.shiftKey) {
+            if (digit <= (this.open?.item.views.length ?? 0)) this.listen(digit - 1)
+        } else if (this.choice && this.rows && digit > 0 && e.shiftKey) {
+            if (digit <= STARS) this.setStars(this.view, digit)
+        } else if (this.choice && k === 'p') void this.choose(this.view)
+        else if (this.clipKey && e.key === ' ') {
+            if (this.clip.paused && this.rows) this.clip.listen()
+            else this.clip.toggle()
+        } else if (this.clipKey && sound && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) this.clip.jump(this.clip.time + (e.key === 'ArrowRight' ? SOUND_JUMP : -SOUND_JUMP))
         else if (this.clipKey && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) this.clip.step(e.key === 'ArrowRight' ? 1 : -1)
         else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') this.move(e.key === 'ArrowDown' ? 1 : -1)
         else if (k === 'v') void this.submit('approved')
@@ -771,6 +941,7 @@ export class ReviewSt {
         else if (k === 'r') void this.submit('rejected')
         else if (k === 'a') void this.submit('archived')
         else if (k === 'n') this.nextPending()
+        else if (k === 'c') void this.copyCard()
         else if (k === 'm') this.toggleMarks()
         else if ((e.key === 'Delete' || e.key === 'Backspace') && this.rect !== null) this.removeRect(this.rect)
         else return false

package/src/serve/hub-app/review/review-views.tsx

@@ -1,10 +1,12 @@
 // the review page's middle column: every view of the open card stacked, each under its heading with the owner's reaction and
 // its zoom; a view is an image, a clip, a pair (side by side, the curtain, the onion skin, the after alone) or a
-// gallery of tiles. A drag on an image draws a rectangle, on a clip it pauses and keeps the frame's time
+// gallery of tiles. A drag on an image draws a rectangle, on a clip it pauses and keeps the frame's time. A choice, or
+// views that each play alone, show as thin option rows; the card's header sits on top when the page reads in one column
 import { observer } from 'mobx-react-lite'
 import { useEffect, useRef, useState, type ReactNode } from 'react'
-import { isGallery, isPair, onFrame, viewName, type GalleryView, type MediaView, type Rect, type ReviewClip, type ReviewItem, type ReviewMark, type ReviewView, type Side } from '../../../review/model.ts'
+import { isGallery, isPair, onFrame, STARS, thumbFileOf, verdictOf, viewName, type GalleryView, type MediaView, type Rect, type ReviewClip, type ReviewItem, type ReviewMark, type ReviewView, type Side } from '../../../review/model.ts'
 import { blurOnEscape, Empty, FIT_ROOM, keepFocus, PAIR_NAMES, REACTIONS, secs } from './kit.tsx'
+import { CardHead } from './review-answer.tsx'
 import type { ClipSt } from './clip-st.ts'
 import { CARD_PLACES, COMPARE_MODES, drawnSide, ZOOMS, type CompareMode, type CompareSt, type PairSide, type ReviewSt, type Zoom } from './review-st.ts'
 
@@ -16,12 +18,20 @@ export const ReviewImage = observer(({ rv }: { rv: ReviewSt }) => {
     if (!x) return <Empty text={rv.list ? 'No card. An agent adds one with sk review add.' : 'Reading the cards…'} />
     const r = x.item
     const views = r.views
-    const drawable = views.some((v) => !isGallery(v) && !v.clip)
+    const drawable = views.some((v) => !isGallery(v) && !v.clip && !v.audio)
+    const rows = rv.rows
     return (
         <div className="rv-views">
+            {rv.headInViews ? <CardHead rv={rv} x={x} /> : null}
             <div className="rv-viewsbar">
-                {views.length > 1 ? <JumpList rv={rv} /> : <span />}
+                {views.length > 1 && !rows ? <JumpList rv={rv} /> : <span />}
                 <span className="rv-viewsctl">
+                    {asOptionsCard(rv) ? (
+                        <span className="seg" title="the options as thin rows, one below the other, or every view full">
+                            <button className={rows ? 'on' : ''} onMouseDown={keepFocus} onClick={() => rv.setFull(false)}>rows</button>
+                            <button className={rows ? '' : 'on'} onMouseDown={keepFocus} onClick={() => rv.setFull(true)}>full</button>
+                        </span>
+                    ) : null}
                     {rv.phone.on && drawable ? (
                         <button className={rv.phone.draw ? 'primary' : ''} onClick={() => rv.phone.toggleDraw()}>Circle</button>
                     ) : null}
@@ -36,12 +46,144 @@ export const ReviewImage = observer(({ rv }: { rv: ReviewSt }) => {
                 </span>
             </div>
             {rv.answered.map((y) => <Raised key={y.item.id} rv={rv} x={y} />)}
-            {views.map((v, i) => <ViewBlock key={`${r.id}#${i}`} rv={rv} id={r.id} v={v} i={i} many={views.length > 1} />)}
+            {rows ? (
+                <div className="rv-opts">{views.map((v, i) => <OptionRow key={`${r.id}#${i}`} rv={rv} x={x} v={v} i={i} />)}</div>
+            ) : (
+                views.map((v, i) => <ViewBlock key={`${r.id}#${i}`} rv={rv} id={r.id} v={v} i={i} many={views.length > 1} />)
+            )}
             {views.length === 0 ? <TextOnly x={x} /> : null}
         </div>
     )
 })
 
+/** the open card may show as rows: a choice, or views that each play alone (the switch shows while it shows full) */
+const asOptionsCard = (rv: ReviewSt): boolean => rv.rows || rv.full[rv.open?.item.id ?? ''] === true
+
+/** one option of a choice, or one view of a group, as a thin row: its number, ▶ and the clock, its label, a strip that
+ *  scrubs it, its stars and « pick » (a choice) or OK, fix, no (a group), ✎ his word, ⤢ the full view under it */
+const OptionRow = observer(({ rv, x, v, i }: { rv: ReviewSt; x: ReviewItem; v: ReviewView; i: number }) => {
+    const [word, setWord] = useState(false)
+    const id = x.item.id
+    const media = isGallery(v) ? null : v
+    const playable = media !== null && !isPair(media.files) && (media.clip !== undefined || media.audio !== undefined) ? media : null
+    const c = playable ? rv.clipOf(i) : null
+    const reaction = rv.reactionOf(i)
+    const choice = rv.choice
+    const picked = rv.draft.pick === i
+    const sent = verdictOf(x)?.pick === i
+    const unfolded = rv.openRows[i] === true
+    const file = playable ? ('video' in playable.files ? playable.files.video : 'audio' in playable.files ? playable.files.audio : '') : ''
+    const duration = playable?.clip?.duration ?? playable?.audio?.duration ?? 0
+    const showWord = word || (reaction?.comment ?? '') !== ''
+    return (
+        <div id={`review-view-${i}`} className={`rv-opt${rv.view === i ? ' active' : ''}${picked ? ' picked' : ''}${toneClass(reaction?.status)}`} onMouseDownCapture={() => rv.view !== i && rv.setView(i)}>
+            <div className="rv-optrow">
+                <span className="rv-optn">{i + 1}</span>
+                {c ? (
+                    <button className={`rv-optplay${c.paused ? '' : ' on'}`} title={`${c.paused ? 'play' : 'pause'} (${i + 1})`} onMouseDown={keepFocus} onClick={() => rv.listen(i)}>
+                        {c.paused ? '▶' : '❚❚'}
+                    </button>
+                ) : null}
+                <b className="rv-optlabel" title={viewName(v, i)}>{viewName(v, i)}</b>
+                {c && playable?.clip && !unfolded ? (
+                    <span className="rv-optthumb" style={{ aspectRatio: `${playable.size.w} / ${playable.size.h}` }} onClick={() => rv.toggleRow(i)} title="the full view">
+                        <ClipVideo clip={c} src={rv.fileUrl(id, file)} poster={rv.fileUrl(id, playable.clip.poster)} loop={false} />
+                    </span>
+                ) : null}
+                {c && playable ? (
+                    <Strip clip={c} duration={duration} wave={playable.audio ? rv.fileUrl(id, playable.audio.wave) : undefined} />
+                ) : (
+                    <span className="rv-optthumb img" onClick={() => rv.toggleRow(i)} title="the full view"><img src={rv.thumbUrl(x, thumbFileOf(v))} alt="" draggable={false} /></span>
+                )}
+                {c ? <span className="rv-mono rv-opttime">{clock(c.time)} / {clock(duration)}</span> : null}
+                <span className="rv-optacts">
+                    {choice ? <Stars rv={rv} view={i} /> : <ReactionToggles rv={rv} view={i} small />}
+                    <button className={`rv-optword${showWord ? ' on' : ''}`} title="a word on this one" onMouseDown={keepFocus} onClick={() => setWord(!word)}>✎</button>
+                    {playable?.clip || !playable ? (
+                        <button className={unfolded ? 'on' : ''} title={unfolded ? 'fold it back to its row' : 'the full view'} onMouseDown={keepFocus} onClick={() => rv.toggleRow(i)}>⤢</button>
+                    ) : null}
+                    {playable?.audio ? <a className="rv-dl" href={rv.fileUrl(id, file)} download={`${id}-${file}`} title="download the sound">⤓</a> : null}
+                    {choice ? (
+                        <button className={`rv-pick${picked ? ' on' : ''}`} title={`pick this one: it is your answer (P)${sent ? ', sent' : ''}`} disabled={rv.busy} onClick={() => void rv.choose(i)}>
+                            {picked ? '✓ picked' : 'pick'}
+                        </button>
+                    ) : null}
+                </span>
+            </div>
+            {media?.note ? <div className="rv-optnote">{media.note}</div> : null}
+            {showWord ? (
+                <textarea className="rv-word" rows={1} placeholder="a word on this one" value={reaction?.comment ?? ''} autoFocus={word && !reaction?.comment}
+                    onKeyDown={blurOnEscape} onChange={(e) => rv.setReactionComment(i, undefined, e.currentTarget.value)} />
+            ) : null}
+            {c && playable?.audio ? <SoundEl clip={c} src={rv.fileUrl(id, file)} /> : null}
+            {unfolded ? (
+                <div className="rv-optbody">
+                    {isGallery(v) ? <Gallery rv={rv} id={id} v={v} view={i} /> : <MediaBody rv={rv} id={id} v={v} i={i} zoom={rv.zoomOf(i)} />}
+                </div>
+            ) : null}
+        </div>
+    )
+})
+
+/** `1:05`: a time on a row, short */
+const clock = (t: number): string => `${Math.floor(t / 60)}:${String(Math.floor(t % 60)).padStart(2, '0')}`
+
+/** an option's score: STARS stars, a click on the one given clears it */
+const Stars = observer(({ rv, view }: { rv: ReviewSt; view: number }) => {
+    const n = rv.reactionOf(view)?.stars ?? 0
+    return (
+        <span className="rv-stars" title={`your score (⇧1 to ⇧${STARS} on the row playing)`}>
+            {Array.from({ length: STARS }, (_, k) => (
+                <button key={k} className={k < n ? 'on' : ''} aria-label={`${k + 1} of ${STARS}`} onMouseDown={keepFocus} onClick={() => rv.setStars(view, k + 1)}>{k < n ? '★' : '☆'}</button>
+            ))}
+        </span>
+    )
+})
+
+/** a thin track a row scrubs: a sound's waveform under what has played; a click or a drag moves the time */
+const Strip = observer(({ clip, duration, wave }: { clip: ClipSt; duration: number; wave: string | undefined }) => {
+    const el = useRef<HTMLDivElement>(null)
+    const down = (e: React.PointerEvent): void => {
+        const b = el.current?.getBoundingClientRect()
+        if (!b || duration <= 0) return
+        e.preventDefault()
+        const at = (px: number): void => clip.jump(Math.max(0, Math.min(1, (px - b.left) / b.width)) * duration)
+        at(e.clientX)
+        track((m) => at(m.clientX))
+    }
+    const played = duration > 0 ? Math.min(1, clip.time / duration) : 0
+    return (
+        <div ref={el} className={`rv-strip${wave ? ' wave' : ''}`} onPointerDown={down}>
+            {wave ? (
+                <>
+                    <Wave src={wave} className="rv-stripwave" />
+                    <Wave src={wave} className="rv-stripwave done" style={{ clipPath: `inset(0 ${100 - played * 100}% 0 0)` }} />
+                </>
+            ) : (
+                <div className="rv-stripdone" style={{ width: `${played * 100}%` }} />
+            )}
+            <div className="rv-striphead" style={{ left: `${played * 100}%` }} />
+        </div>
+    )
+})
+
+/** a waveform png as a mask the page fills with its own colour, so it reads on either theme (any colour it was drawn in) */
+const Wave = ({ src, className, style }: { src: string; className: string; style?: React.CSSProperties }) => {
+    const mask = `url("${src}") center / 100% 100% no-repeat`
+    return <div className={className} style={{ ...style, mask, WebkitMask: mask }} />
+}
+
+/** a sound row's player, no controls of its own: the row's clock drives it; at its end it waits at the start */
+const SoundEl = ({ clip, src }: { clip: ClipSt; src: string }) => {
+    const ref = useRef<HTMLAudioElement>(null)
+    useEffect(() => {
+        const el = ref.current
+        if (!el) return
+        return clip.attach(el)
+    }, [clip, src])
+    return <audio ref={ref} src={src} preload="metadata" onEnded={() => clip.seek(0)} />
+}
+
 /** a raised item the open card answers, nested above its views: the owner's words, his still */
 const Raised = observer(({ rv, x }: { rv: ReviewSt; x: ReviewItem }) => {
     const opening = x.thread.find((m) => m.op === undefined && m.text !== undefined)
@@ -213,7 +355,9 @@ const SoundBody = ({ rv, id, v }: { rv: ReviewSt; id: string; v: MediaView }) =>
             {rows.map((r) => (
                 <div key={r.file} className="rv-soundrow">
                     {r.label ? <div className="rv-dim">{r.label}</div> : null}
-                    <img src={rv.fileUrl(id, r.wave)} alt={`the waveform of ${r.file}`} draggable={false} style={{ width: '100%', aspectRatio: `${v.size.w} / ${v.size.h}`, display: 'block' }} />
+                    <div role="img" aria-label={`the waveform of ${r.file}`} className="rv-wavebox" style={{ aspectRatio: `${v.size.w} / ${v.size.h}` }}>
+                        <Wave src={rv.fileUrl(id, r.wave)} className="rv-stripwave full" />
+                    </div>
                     <audio controls preload="metadata" src={rv.fileUrl(id, r.file)} style={{ width: '100%' }} />
                 </div>
             ))}
@@ -463,15 +607,16 @@ const RectMark = ({ r, n, on, faint, at, pick }: { r: Rect; n: number; on: boole
 
 // ── a clip ──
 
-/** one video of the open view, driven by the view's one clock; muted until the sound button, looping, inline */
-const ClipVideo = ({ clip, src }: { clip: ClipSt; src: string }) => {
+/** one video of the open view, driven by the view's one clock; muted until the sound button, inline; looping, or at its
+ *  end waiting at the start */
+const ClipVideo = ({ clip, src, poster, loop = true }: { clip: ClipSt; src: string; poster?: string; loop?: boolean }) => {
     const ref = useRef<HTMLVideoElement>(null)
     useEffect(() => {
         const el = ref.current
         if (!el) return
         return clip.attach(el)
     }, [clip, src])
-    return <video ref={ref} className="rv-video" src={src} muted loop playsInline preload="auto" />
+    return <video ref={ref} className="rv-video" src={src} poster={poster} muted loop={loop} playsInline preload="auto" onEnded={loop ? undefined : () => clip.seek(0)} />
 }
 
 /** the sound button and the volume: a volume moved turns the sound on */