rvlib-shipkit 2.2.0 → 2.3.0

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

@@ -0,0 +1,503 @@
+// 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
+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 { blurOnEscape, Empty, FIT_ROOM, keepFocus, PAIR_NAMES, REACTIONS, secs } from './kit.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'
+
+const ZOOM_LABEL: Record<Zoom, string> = { fit: 'Fit', '1': '100 %', '1.5': '150 %', '2': '200 %' }
+const toneClass = (s: string | undefined): string => (s ? ` re-${s}` : '')
+
+export const ReviewImage = observer(({ rv }: { rv: ReviewSt }) => {
+    const x = rv.open
+    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)
+    return (
+        <div className="rv-views">
+            <div className="rv-viewsbar">
+                {views.length > 1 ? <JumpList rv={rv} /> : <span />}
+                <span className="rv-viewsctl">
+                    {rv.phone.on && drawable ? (
+                        <button className={rv.phone.draw ? 'primary' : ''} onClick={() => rv.phone.toggleDraw()}>Circle</button>
+                    ) : null}
+                    {rv.phone.on ? null : (
+                        <span className="seg" title="the card against its answer: on top of it, left of it, or auto (on top when the page is narrow)">
+                            {CARD_PLACES.map((p) => <button key={p} className={rv.place === p ? 'on' : ''} onMouseDown={keepFocus} onClick={() => rv.setPlace(p)}>{p}</button>)}
+                        </span>
+                    )}
+                    <span className="seg" title="the zoom every view starts at">
+                        {ZOOMS.map((z) => <button key={z} className={rv.zoom === z ? 'on' : ''} onMouseDown={keepFocus} onClick={() => rv.setZoom(z)}>{ZOOM_LABEL[z]}</button>)}
+                    </span>
+                </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} />)}
+            {views.length === 0 ? <TextOnly x={x} /> : null}
+        </div>
+    )
+})
+
+/** 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)
+    const first = x.item.views[0]
+    return (
+        <div className="rv-raised">
+            <div className="rv-dim">answers {x.item.origin.by === 'owner' ? 'your note' : 'a report'} · {x.item.title}</div>
+            {opening?.text ? <div className="rv-pre">{opening.text}</div> : null}
+            {first && !isGallery(first) && 'image' in first.files ? <img className="rv-raisedimg" src={rv.fileUrl(x.item.id, first.files.image)} alt="" /> : null}
+        </div>
+    )
+})
+
+/** an item with no view: its words, full width */
+const TextOnly = ({ x }: { x: ReviewItem }) => {
+    const text = x.item.what ?? x.thread.find((m) => m.text !== undefined)?.text
+    return text ? <div className="rv-pre">{text}</div> : <Empty text="This item has no image and no text." />
+}
+
+/** the views' labels on top of a card of several: a click scrolls to that view; a dot says the owner's reaction to it */
+const JumpList = observer(({ rv }: { rv: ReviewSt }) => {
+    const x = rv.open
+    if (!x) return null
+    return (
+        <span className="rv-jumps">
+            {x.item.views.map((v, i) => (
+                <button key={i} className={`rv-jump${rv.view === i ? ' on' : ''}${toneClass(rv.reactionOf(i)?.status)}`} onMouseDown={keepFocus}
+                    onClick={() => {
+                        rv.setView(i)
+                        document.getElementById(`review-view-${i}`)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+                    }}>
+                    {rv.reactionOf(i)?.status ? <span className="rv-jdot" /> : null}
+                    {i + 1}. {viewName(v, i)}
+                </button>
+            ))}
+        </span>
+    )
+})
+
+/** one view: its label, its reaction and zoom, its image, pair, clip or gallery, then his word on it */
+const ViewBlock = observer(({ rv, id, v, i, many }: { rv: ReviewSt; id: string; v: ReviewView; i: number; many: boolean }) => {
+    const reaction = rv.reactionOf(i)
+    const media = isGallery(v) ? null : v
+    const zoom = rv.zoomOf(i)
+    return (
+        <div id={`review-view-${i}`} className={`rv-view${toneClass(reaction?.status)}${rv.view === i && many ? ' active' : ''}`}>
+            <div className="rv-viewhead">
+                <b className="rv-viewname">{many ? `${i + 1}. ` : ''}{viewName(v, i)}</b>
+                <ReactionToggles rv={rv} view={i} />
+                <span className="sp" />
+                {media?.marks && media.marks.length > 0 ? (
+                    <button className={rv.marksOn ? 'primary' : ''} onMouseDown={keepFocus} onClick={() => rv.toggleMarks()}>marks · M</button>
+                ) : null}
+                {media && isPair(media.files) && !media.audio && !rv.phone.on ? <CompareModes c={rv.compare} /> : null}
+                {media ? (
+                    <button title={zoom === 'fit' ? 'see this image at its own size' : 'fit this image to the column'} onMouseDown={keepFocus}
+                        onClick={() => rv.setViewZoom(i, zoom === 'fit' ? '1' : 'fit')}>{zoom === 'fit' ? '100 %' : 'Fit'}</button>
+                ) : null}
+            </div>
+            {isGallery(v) ? <Gallery rv={rv} id={id} v={v} view={i} /> : <MediaBody rv={rv} id={id} v={v} i={i} zoom={zoom} />}
+            <textarea className="rv-word" rows={1} placeholder={isGallery(v) ? 'a word on these images' : 'a word on this image'} value={reaction?.comment ?? ''}
+                onKeyDown={blurOnEscape} onChange={(e) => rv.setReactionComment(i, undefined, e.currentTarget.value)} />
+        </div>
+    )
+})
+
+/** the owner's reaction to one view or tile: OK, fix or no; a click on the chosen one clears it */
+const ReactionToggles = observer(({ rv, view, tile, small }: { rv: ReviewSt; view: number; tile?: number; small?: boolean }) => {
+    const cur = rv.reactionOf(view, tile)?.status
+    return (
+        <span className="rv-reacts">
+            {REACTIONS.map((o) => (
+                <button key={o.status} title={o.tip} className={`rv-react re-${o.status}${cur === o.status ? ' on' : ''}${cur && cur !== o.status ? ' off' : ''}`}
+                    onMouseDown={keepFocus} onClick={() => rv.react(view, tile, o.status)}>
+                    {o.glyph}{small ? null : ` ${o.label}`}
+                </button>
+            ))}
+        </span>
+    )
+})
+
+/** a gallery tile's image height */
+const TILE_H = 170
+
+/** a gallery view: its images as a wrapping grid of small tiles, each with its label and its own reaction; a click
+ *  shows it large */
+const Gallery = observer(({ rv, id, v, view }: { rv: ReviewSt; id: string; v: GalleryView; view: number }) => (
+    <div className="rv-gallery">
+        {v.gallery.map((t, k) => {
+            const big = rv.bigTile === `${view}/${k}`
+            const r = rv.reactionOf(view, k)
+            const ratio = t.size.w / t.size.h
+            const w = big ? undefined : Math.round(Math.max(110, Math.min(260, TILE_H * ratio)))
+            return (
+                <div key={k} id={`review-tile-${view}-${k}`} className={`rv-tile${big ? ' big' : ''}${toneClass(r?.status)}`} style={big ? undefined : { width: w }}>
+                    <div className="rv-tileimg" onClick={() => rv.toggleTile(view, k)} title={big ? 'click to shrink' : 'click to enlarge'}
+                        style={big ? { width: `min(100%, calc((100vh - ${FIT_ROOM}px) * ${ratio}))` } : { height: TILE_H }}>
+                        <img src={rv.fileUrl(id, t.file)} alt={t.label} draggable={false} />
+                    </div>
+                    <div className="rv-tilelabel" title={t.label}>{t.label}</div>
+                    <ReactionToggles rv={rv} view={view} tile={k} small />
+                    <textarea className="rv-word" rows={1} placeholder="a word" value={r?.comment ?? ''} onKeyDown={blurOnEscape}
+                        onChange={(e) => rv.setReactionComment(view, k, e.currentTarget.value)} />
+                </div>
+            )
+        })}
+    </div>
+))
+
+/** one media view: a single image or clip, or the pair in the compare component; fitted to the column on its own, or
+ *  zoomed with its own scroll */
+const MediaBody = observer(({ rv, id, v, i, zoom }: { rv: ReviewSt; id: string; v: MediaView; i: number; zoom: Zoom }) => {
+    if (v.audio) return <SoundBody rv={rv} id={id} v={v} />
+    const f = v.files
+    const ratio = v.size.w / v.size.h
+    const aspect = `${v.size.w} / ${v.size.h}`
+    const scale = zoom === 'fit' ? null : Number(zoom)
+    const room = FIT_ROOM + (v.clip ? 40 : 0)
+    const bar = v.clip ? <ClipBar clip={rv.clipOf(i)} info={v.clip} use={() => rv.setView(i)} /> : null
+    const scroll = scale ? { overflow: 'auto', maxHeight: `calc(100vh - ${room}px)` } : undefined
+    if (!isPair(f)) {
+        const name = 'image' in f ? f.image : 'video' in f ? f.video : f.audio
+        return (
+            <div style={scroll}>
+                <div style={{ width: scale ? `${v.size.w * scale}px` : `min(100%, calc((100vh - ${room}px) * ${ratio}))`, margin: '0 auto' }}>
+                    <Compare c={rv.compare} base={rv.fileUrl(id, name)} mod={undefined} aspect={aspect} draw={(s) => <Marks rv={rv} src={s} side={undefined} view={i} />} />
+                    {bar}
+                    <Downloads rv={rv} id={id} files={[{ file: name }]} />
+                </div>
+            </div>
+        )
+    }
+    const before = rv.fileUrl(id, f.before)
+    const after = rv.fileUrl(id, f.after)
+    const saves = <Downloads rv={rv} id={id} files={[{ file: f.before, label: 'before' }, { file: f.after, label: 'after' }]} />
+    if (rv.phone.on)
+        return (
+            <>
+                <PhonePair rv={rv} view={i} bar={bar} before={before} after={after} aspect={aspect} size={v.size} scale={scale} />
+                {saves}
+            </>
+        )
+    const c = rv.compare
+    const cols = c.mode === 'side' ? 2 : 1
+    const fitW = `min(100%, calc((100vh - ${room}px) * ${ratio * cols}))`
+    return (
+        <>
+            <div style={scroll}>
+                <div className="rv-pairgrid" style={{ width: scale ? `${v.size.w * scale * cols + 8 * (cols - 1)}px` : fitW, gridTemplateColumns: `repeat(${cols}, 1fr)` }}>
+                    <Compare c={c} base={before} mod={after} names={PAIR_NAMES} aspect={aspect}
+                        draw={(s) => <Marks rv={rv} src={s} side={drawnSide(c.mode, s === before ? 'before' : 'after')} view={i} />} />
+                </div>
+            </div>
+            {bar ? <div style={{ width: fitW, margin: '0 auto' }}>{bar}</div> : null}
+            <div style={{ width: fitW, margin: '0 auto' }}>{saves}</div>
+            {c.mode === 'swipe' ? <div className="rv-dim rv-center">curtain: a drag moves the line; rectangles are drawn in the other modes</div> : null}
+        </>
+    )
+})
+
+/** a sound view: its waveform over the browser's player, one row a side on a pair, each to download */
+const SoundBody = ({ rv, id, v }: { rv: ReviewSt; id: string; v: MediaView }) => {
+    const f = v.files
+    const a = v.audio
+    if (!a) return null
+    const rows = isPair(f) ? [{ label: 'before', file: f.before, wave: a.waveBefore ?? a.wave }, { label: 'after', file: f.after, wave: a.wave }] : [{ label: '', file: 'audio' in f ? f.audio : '', wave: a.wave }]
+    return (
+        <div className="rv-sound">
+            {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' }} />
+                    <audio controls preload="metadata" src={rv.fileUrl(id, r.file)} style={{ width: '100%' }} />
+                </div>
+            ))}
+            <div className="rv-dim">{secs(a.duration)}</div>
+            <Downloads rv={rv} id={id} files={rows.map((r) => ({ file: r.file, ...(r.label ? { label: r.label } : {}) }))} />
+        </div>
+    )
+}
+
+/** a view's files to save, each under the card's id and its own name */
+const Downloads = observer(({ rv, id, files }: { rv: ReviewSt; id: string; files: readonly { file: string; label?: string }[] }) => (
+    <div className="rv-downloads">
+        {/* the Finder is on the desktop only: a phone has none */}
+        {rv.phone.on ? null : <button className="rv-dl ghost" title="show the card's folder in the Finder" onClick={() => void rv.reveal(id)}>📁</button>}
+        {files.map(({ file, label }) => (
+            <span key={file}>
+                <a className="rv-dl" href={rv.fileUrl(id, file)} download={`${id}-${file}`} title="download the file">⤓ {label ?? 'download'}</a>
+                {rv.phone.on ? null : <button className="rv-dl ghost" title={`show ${file} in the Finder`} onClick={() => void rv.reveal(id, file)}>📂</button>}
+            </span>
+        ))}
+    </div>
+))
+
+const PAIR_SIDES: { value: PairSide; label: string }[] = [
+    { value: 'before', label: 'before' },
+    { value: 'after', label: 'after' },
+    { value: 'swipe', label: 'curtain' },
+]
+
+/** a pair on a phone: one side at a time full width, or the curtain; the zoom scrolls */
+const PhonePair = observer(({ rv, view, bar, before, after, aspect, size, scale }: {
+    rv: ReviewSt
+    view: number
+    bar: ReactNode
+    before: string
+    after: string
+    aspect: string
+    size: { w: number; h: number }
+    scale: number | null
+}) => {
+    const ph = rv.phone
+    const c = rv.compare
+    const side = ph.pair === 'swipe' && c.mode !== 'swipe' ? 'after' : ph.pair
+    const pick = (s: PairSide): void => {
+        if (s === 'swipe') c.setMode('swipe')
+        ph.setPair(s)
+    }
+    const one = side === 'before' ? before : after
+    return (
+        <div className="rv-phonepair">
+            <span className="seg">{PAIR_SIDES.map((s) => <button key={s.value} className={side === s.value ? 'on' : ''} onClick={() => pick(s.value)}>{s.label}</button>)}</span>
+            <div style={scale ? { overflow: 'auto', maxHeight: '70vh' } : undefined}>
+                <div style={{ width: scale ? `${size.w * scale}px` : '100%' }}>
+                    {side === 'swipe' ? (
+                        <Compare c={c} base={before} mod={after} names={PAIR_NAMES} aspect={aspect} draw={(s) => <Marks rv={rv} src={s} side={s === before ? 'before' : 'after'} view={view} />} />
+                    ) : (
+                        <Compare key={side} c={c} base={one} mod={undefined} aspect={aspect} draw={(s) => <Marks rv={rv} src={s} side={side} view={view} />} />
+                    )}
+                    {bar}
+                </div>
+            </div>
+        </div>
+    )
+})
+
+// ── the pair ──
+
+const MODES: { mode: CompareMode; glyph: string; tip: string }[] = [
+    { mode: 'side', glyph: '◫', tip: 'side by side' },
+    { mode: 'swipe', glyph: '⇹', tip: 'curtain: drag the line, the before on the left, the after on the right' },
+    { mode: 'onion', glyph: '◐', tip: 'onion skin: the after over the before' },
+    { mode: 'mod', glyph: '▣', tip: 'the after alone: hovering the image shows the before' },
+]
+
+/** the compare modes as tiny buttons, the onion's opacity floating under them */
+const CompareModes = observer(({ c }: { c: CompareSt }) => (
+    <span className="rv-modes">
+        <span className="seg">
+            {COMPARE_MODES.map((m) => {
+                const o = MODES.find((x) => x.mode === m)!
+                return <button key={m} title={o.tip} className={c.mode === m ? 'on' : ''} onMouseDown={keepFocus} onClick={() => c.setMode(m)}>{o.glyph}</button>
+            })}
+        </span>
+        {c.mode === 'onion' ? (
+            <input className="rv-onion" type="range" min={0} max={1} step={0.05} value={c.opacity} title={`after ${Math.round(c.opacity * 100)} %`} onChange={(e) => c.setOpacity(Number(e.currentTarget.value))} />
+        ) : null}
+    </span>
+))
+
+/** follows the pointer until it is released */
+function track(move: (e: PointerEvent) => void): void {
+    const up = (): void => {
+        window.removeEventListener('pointermove', move)
+        window.removeEventListener('pointerup', up)
+    }
+    window.addEventListener('pointermove', move)
+    window.addEventListener('pointerup', up)
+}
+
+/** THE pair: side by side, the curtain clipping both images, the after over the before as an onion skin, or the
+ *  after alone (the before while the pointer is over it). One image alone when `mod` is undefined */
+const Compare = observer(({ c, base, mod, names, aspect, draw }: { c: CompareSt; base: string; mod: string | undefined; names?: { base: string; mod: string }; aspect: string; draw: (src: string) => ReactNode }) => {
+    const [peek, setPeek] = useState(false)
+    if (mod === undefined) return <Cell aspect={aspect} caption={null}><div className="rv-fill">{draw(base)}</div></Cell>
+    const n = names ?? PAIR_NAMES
+    if (c.mode === 'side')
+        return (
+            <>
+                <Cell aspect={aspect} caption={n.base}><div className="rv-fill">{draw(base)}</div></Cell>
+                <Cell aspect={aspect} caption={n.mod} modCap><div className="rv-fill">{draw(mod)}</div></Cell>
+            </>
+        )
+    if (c.mode === 'mod')
+        return (
+            <Cell aspect={aspect} caption={peek ? n.base : n.mod} modCap={!peek} onPeek={setPeek}>
+                <div className="rv-fill">{draw(peek ? base : mod)}</div>
+            </Cell>
+        )
+    const pct = Math.round(c.split * 100)
+    return (
+        <Cell aspect={aspect} caption={<>{n.base} {c.mode === 'swipe' ? '◀ ▶' : '+'} <span className="rv-modcap">{n.mod}</span></>} swipe={c.mode === 'swipe' ? c : undefined}>
+            <div className="rv-fill" style={c.mode === 'swipe' ? { clipPath: `inset(0 ${100 - pct}% 0 0)` } : undefined}>{draw(base)}</div>
+            <div className="rv-fill" style={c.mode === 'swipe' ? { clipPath: `inset(0 0 0 ${pct}%)` } : { opacity: c.opacity }}>{draw(mod)}</div>
+            {c.mode === 'swipe' ? <div className="rv-curtain" style={{ left: `${pct}%` }} /> : null}
+        </Cell>
+    )
+})
+
+/** one frame and its caption; the curtain's line follows the pointer */
+const Cell = ({ aspect, caption, modCap, swipe, onPeek, children }: { aspect: string; caption: ReactNode; modCap?: boolean; swipe?: CompareSt | undefined; onPeek?: (on: boolean) => void; children: ReactNode }) => {
+    const frame = useRef<HTMLDivElement>(null)
+    const down = (e: React.PointerEvent): void => {
+        const el = frame.current
+        if (!swipe || !el) return
+        e.preventDefault()
+        const at = (x: number): void => {
+            const r = el.getBoundingClientRect()
+            swipe.setSplit((x - r.left) / r.width)
+        }
+        at(e.clientX)
+        track((m) => at(m.clientX))
+    }
+    return (
+        <div className="rv-cell">
+            <div ref={frame} className={`rv-frame${swipe ? ' swipe' : ''}`} style={{ aspectRatio: aspect }} onPointerDown={down}
+                onMouseEnter={() => onPeek?.(true)} onMouseLeave={() => onPeek?.(false)}>
+                {children}
+            </div>
+            {caption != null ? <div className={`rv-caption${modCap ? ' mod' : ''}`}>{caption}</div> : null}
+        </div>
+    )
+}
+
+// ── drawing ──
+
+const box = (a: { x0: number; y0: number; x1: number; y1: number }) => ({ x: Math.min(a.x0, a.x1), y: Math.min(a.y0, a.y1), w: Math.abs(a.x1 - a.x0), h: Math.abs(a.y1 - a.y0) })
+const pct = (r: { x: number; y: number; w: number; h: number }) => ({ left: `${r.x * 100}%`, top: `${r.y * 100}%`, width: `${r.w * 100}%`, height: `${r.h * 100}%` })
+const clamp01 = (v: number): number => Math.max(0, Math.min(1, v))
+/** a drag shorter than this, on either axis, is a click: it picks nothing */
+const MIN_DRAG = 0.01
+
+/** one image of view `view` and its rectangles; a drag on it draws one (never in the curtain, whose drag moves the
+ *  line). A clip view that is not the active one loops on its own: a click makes it active */
+const Marks = observer(({ rv, src, side, view }: { rv: ReviewSt; src: string; side: Side | undefined; view: number }) => {
+    const el = useRef<HTMLDivElement>(null)
+    const [drag, setDrag] = useState<{ x0: number; y0: number; x1: number; y1: number } | null>(null)
+    const phone = rv.phone
+    const any = rv.open?.item.views[view]
+    const shown = any && !isGallery(any) ? any : undefined
+    const clip = shown?.clip
+    const active = rv.view === view
+    const drawing = phone.on ? phone.draw && (side === undefined || phone.pair !== 'swipe' || rv.compare.mode !== 'swipe') : side === undefined || rv.compare.mode !== 'swipe'
+    const c = rv.clipOf(view)
+    const at = (e: { clientX: number; clientY: number }): { x: number; y: number } => {
+        const b = el.current?.getBoundingClientRect()
+        if (!b) return { x: 0, y: 0 }
+        return { x: clamp01((e.clientX - b.left) / b.width), y: clamp01((e.clientY - b.top) / b.height) }
+    }
+    const down = (e: React.PointerEvent): void => {
+        if (e.button !== 0) return
+        if (clip && !active) {
+            e.preventDefault()
+            rv.setView(view)
+            return
+        }
+        if (!drawing) return
+        e.preventDefault()
+        e.stopPropagation()
+        // he draws on the paused frame: the rectangle keeps its time
+        if (clip && !c.paused) c.pause()
+        const a = at(e)
+        let cur = { x0: a.x, y0: a.y, x1: a.x, y1: a.y }
+        setDrag(cur)
+        const move = (m: PointerEvent): void => {
+            const b = at(m)
+            cur = { ...cur, x1: b.x, y1: b.y }
+            setDrag(cur)
+        }
+        const up = (): void => {
+            window.removeEventListener('pointermove', move)
+            window.removeEventListener('pointerup', up)
+            window.removeEventListener('pointercancel', up)
+            setDrag(null)
+            const r = box(cur)
+            if (r.w > MIN_DRAG && r.h > MIN_DRAG) rv.addRect(r, side, view)
+            else rv.pickRect(null)
+        }
+        window.addEventListener('pointermove', move)
+        window.addEventListener('pointerup', up)
+        window.addEventListener('pointercancel', up)
+    }
+    const rects = rv.draft.rects.map((r, i) => [r, i] as const).filter(([r]) => r.side === side && (r.view ?? 0) === view)
+    const onIts = (r: Rect): boolean => !clip || r.t === undefined || (c.paused && onFrame(r.t, c.time, clip.fps))
+    const rings = rv.marksOn ? (shown?.marks ?? []).filter((m) => m.side === side) : []
+    const live = drawing || (clip !== undefined && !active)
+    return (
+        <div ref={el} className={`rv-marks${clip && !active ? ' pick' : drawing ? ' draw' : ''}`} onPointerDown={down} style={{ pointerEvents: live ? 'auto' : 'none', touchAction: drawing ? 'none' : undefined }}>
+            {clip ? <ClipVideo key={src} clip={c} src={src} /> : <img src={src} alt="" draggable={false} className="rv-markimg" />}
+            {shown && rings.length > 0 ? <Rings marks={rings} w={shown.size.w} h={shown.size.h} /> : null}
+            {rects.map(([r, i]) => (
+                <RectMark key={i} r={r} n={i + 1} on={rv.rect === i} faint={!onIts(r)} at={clip && r.t !== undefined ? secs(r.t) : undefined} pick={() => rv.pickRect(i)} />
+            ))}
+            {drag ? <div className="rv-drag" style={pct(box(drag))} /> : null}
+        </div>
+    )
+})
+
+/** a repo's own rings over its shot; they never take a click */
+const Rings = ({ marks, w, h }: { marks: readonly ReviewMark[]; w: number; h: number }) => (
+    <svg className="rv-rings" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
+        {marks.map((m, i) => (
+            <g key={i}>
+                <circle className="rv-ringshade" cx={m.x * w} cy={m.y * h} r={m.r * w} />
+                <circle className="rv-ring" cx={m.x * w} cy={m.y * h} r={m.r * w} />
+            </g>
+        ))}
+    </svg>
+)
+
+/** a rectangle of his; on a clip, faint and dashed away from its frame, its time on its number */
+const RectMark = ({ r, n, on, faint, at, pick }: { r: Rect; n: number; on: boolean; faint: boolean; at: string | undefined; pick: () => void }) => (
+    <div className={`rv-rect${on ? ' on' : ''}${faint ? ' faint' : ''}`} style={pct(r)} title={r.comment || `rectangle ${n}`}
+        onPointerDown={(e) => { e.stopPropagation(); pick() }}>
+        <span className="rv-rectn">{n}{at ? ` · ${at}` : ''}</span>
+    </div>
+)
+
+// ── 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 }) => {
+    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" />
+}
+
+/** the sound button and the volume: a volume moved turns the sound on */
+export const ClipSound = observer(({ clip, keyHint }: { clip: ClipSt; keyHint?: string }) => (
+    <span className="rv-sound">
+        <button className={clip.sound ? 'primary' : ''} title={`${clip.sound ? 'sound off' : 'sound on'}${keyHint ? ` (${keyHint})` : ''}`} onMouseDown={keepFocus} onClick={() => clip.toggleSound()}>
+            {clip.sound ? '🔊' : '🔇'}
+        </button>
+        <input type="range" min={0} max={1} step={0.05} value={clip.sound ? clip.volume : 0} aria-label="volume" onChange={(e) => clip.setVolume(Number(e.currentTarget.value))}
+            onMouseUp={(e) => e.currentTarget.blur()} />
+    </span>
+))
+
+/** under a clip: play or pause, one frame back or on, the scrubber, the time and the frame */
+const ClipBar = observer(({ clip, info, use }: { clip: ClipSt; info: ReviewClip; use: () => void }) => {
+    const frames = Math.max(1, Math.round(info.duration * info.fps))
+    return (
+        <div className="rv-clipbar" onMouseDownCapture={use} onTouchStartCapture={use}>
+            <button title={clip.paused ? 'play (Space)' : 'pause (Space)'} onMouseDown={keepFocus} onClick={() => clip.toggle()}>{clip.paused ? '▶' : '❚❚'}</button>
+            <ClipSound clip={clip} />
+            <button title="frame back (←)" onMouseDown={keepFocus} onClick={() => clip.step(-1)}>⏮</button>
+            <button title="frame on (→)" onMouseDown={keepFocus} onClick={() => clip.step(1)}>⏭</button>
+            <input className="rv-scrub" type="range" min={0} max={info.duration} step={1 / info.fps} value={Math.min(clip.time, info.duration)}
+                onChange={(e) => clip.seek(Number(e.currentTarget.value))} onMouseUp={(e) => e.currentTarget.blur()} />
+            <span className="rv-mono">{secs(clip.time)} · frame {clip.frameOf(clip.time) + 1}/{frames}</span>
+            {clip.error ? <span className="rv-err">{clip.error}</span> : null}
+        </div>
+    )
+})