e2e-player: the volume slider is only there wider than a phone

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/scripts/e2e-player.mjs

@@ -67,6 +67,63 @@ if (await page.locator('canvas.vp-sphere').count()) {
 }
 await page.screenshot({ path: `${SHOTS}/h1-auto.png` })
 
+// No theme touches playback: for every theme the stylesheet has rules for, no full-window
+// overlay is drawn, the picture isn't filtered, and the player's lettering is plain.
+{
+  const was = await page.evaluate(() => document.documentElement.getAttribute('data-theme'))
+  const themes = await page.evaluate(() => {
+    const ids = new Set()
+    for (const sh of document.styleSheets) { let rules; try { rules = sh.cssRules } catch { continue }
+      const walk = (rs) => { for (const r of rs) { if (r.cssRules) walk(r.cssRules); for (const m of (r.selectorText ?? '').matchAll(/data-theme="([^"]+)"/g)) ids.add(m[1]) } }
+      walk(rules) }
+    return [...ids]
+  })
+  const bad = []
+  for (const t of themes) {
+    const r = await page.evaluate((t) => {
+      document.documentElement.setAttribute('data-theme', t)
+      const els = [document.documentElement, document.body, document.querySelector('.app'), document.querySelector('#root')].filter(Boolean)
+      const overlays = els.flatMap((e) => ['::before', '::after'].map((p) => getComputedStyle(e, p))).filter((c) => c.display !== 'none' && c.content !== 'none' && c.content !== 'normal' && (c.position === 'fixed' || c.position === 'absolute')).length
+      const pics = [...document.querySelectorAll('.vp video, .vp canvas')].map((e) => getComputedStyle(e).filter).filter((f) => f !== 'none').length
+      const c = getComputedStyle(document.querySelector('.vp'))
+      const b = getComputedStyle(document.querySelector('.vp button'))
+      return { overlays, pics, plain: !/mono|courier/i.test(b.fontFamily) && c.fontWeight === '400' && c.letterSpacing === 'normal' && c.textShadow === 'none' }
+    }, t)
+    if (r.overlays || r.pics || !r.plain) bad.push(`${t}: ${JSON.stringify(r)}`)
+  }
+  check(`no theme touches the video (${themes.length} themes with their own rules)`, themes.length > 0 && bad.length === 0, bad.join(' / ') || themes.join(', '))
+  await page.evaluate((t) => t ? document.documentElement.setAttribute('data-theme', t) : document.documentElement.removeAttribute('data-theme'), was)
+}
+
+// Volume: the speaker mutes and unmutes, the slider sets the level, and it is remembered.
+{
+  await controls()
+  const vs = () => page.evaluate(() => { const v = document.querySelector('.vp video'); return { muted: v.muted, volume: Math.round(v.volume * 100) / 100 } })
+  await page.getByRole('button', { name: 'Mute' }).click()
+  const a = await vs()
+  await page.getByRole('button', { name: 'Unmute' }).click()
+  const b = await vs()
+  let c = b
+  if (await page.getByLabel('Volume').isVisible()) { await page.getByLabel('Volume').fill('0.3'); c = await vs() }
+  const kept = await page.evaluate(() => Object.entries(localStorage).find(([k]) => /volume/.test(k))?.[1] ?? '')
+  check('volume: mute, unmute, level, remembered', a.muted && !b.muted && (c.volume === 0.3 || !(await page.getByLabel('Volume').isVisible())) && /level/.test(kept),
+    `${JSON.stringify(a)} → ${JSON.stringify(b)} → ${JSON.stringify(c)}, kept ${kept}`)
+  if (await page.getByLabel('Volume').isVisible()) await page.getByLabel('Volume').fill('1')
+}
+
+// The 5-second buttons: back and on, the ball with them.
+{
+  await controls()
+  const t0 = (await vstate()).t
+  await page.getByRole('button', { name: 'On 5 seconds' }).click()
+  const t1 = (await vstate()).t
+  await page.getByRole('button', { name: 'Back 5 seconds' }).click()
+  await page.getByRole('button', { name: 'Back 5 seconds' }).click()
+  const t2 = (await vstate()).t
+  const ball = await page.evaluate(() => Number(document.querySelector('.vp input[type=range]').value))
+  check('+5 and −5 buttons', t1 - t0 > 4 && t1 - t0 < 6.5 && t1 - t2 > 9 && t1 - t2 < 11 && Math.abs(ball - t2) < 1, `${t0.toFixed(1)} → ${t1.toFixed(1)} → ${t2.toFixed(1)}, ball ${ball.toFixed(1)}`)
+}
+
 const mid = Math.floor(s.d / 2)
 mark('seek')
 await page.evaluate((m) => { document.querySelector('.vp video').currentTime = m }, mid)

web/src/Player.tsx

@@ -53,6 +53,9 @@ class PatientAbr extends Base {
   }
 }
 
+// Whether the browser lets a page set the volume level (iOS doesn't: only mute).
+const canLevel = (() => { try { const a = document.createElement('audio'); a.volume = 0.5; return a.volume === 0.5 } catch { return false } })()
+
 const mbps = (b: number) => `${b >= 10e6 ? Math.round(b / 1e6) : (b / 1e6).toFixed(1)} Mb/s`
 const clock = (sec: number) => { const t = Math.max(0, Math.floor(sec)), h = Math.floor(t / 3600), m = Math.floor((t % 3600) / 60), x = t % 60; return `${h ? `${h}:${String(m).padStart(2, '0')}` : m}:${String(x).padStart(2, '0')}` }
 const size = (w?: number, h?: number, vr?: boolean) => {
@@ -68,6 +71,22 @@ const I = ({ d, size: sz = 20, fill }: { d: string; size?: number; fill?: boolea
 const PLAY = 'M7 4.5v15l12.5-7.5z', PAUSE = 'M8 5v14M16 5v14', CHECK = 'M5 12.5l4.5 4.5L19 7.5', TUNE = 'M4 7h10M18 7h2M4 17h4M12 17h8M16 5v4M10 15v4'
 const FULL = 'M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5', SMALL = 'M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5', PHONE = 'M8 3h8a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zM3 9a9 9 0 0 0 0 6M21 9a9 9 0 0 1 0 6'
 
+// The speaker: waves by the level, a cross when muted.
+const Speaker = ({ off, low }: { off?: boolean; low?: boolean }) => (
+  <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="M4 9.5h3.5L12 5.5v13l-4.5-4H4z" fill="currentColor" />
+    {off ? <path d="M16 9.5l5 5M21 9.5l-5 5" /> : <path d={low ? 'M15.5 9.5a3.5 3.5 0 0 1 0 5' : 'M15.5 9.5a3.5 3.5 0 0 1 0 5M18 7a7 7 0 0 1 0 10'} />}
+  </svg>
+)
+
+// Five seconds back or on: a circling arrow with the 5 inside.
+const Skip = ({ back }: { back?: boolean }) => (
+  <svg width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d={back ? 'M12 5a7 7 0 1 1-7 7M12 5l2.5-2.5M12 5l2.5 2.5' : 'M12 5a7 7 0 1 0 7 7M12 5L9.5 2.5M12 5l-2.5 2.5'} />
+    <text x="12" y="15" textAnchor="middle" fontSize="7.5" fontWeight="700" fill="currentColor" stroke="none" fontFamily="system-ui, sans-serif">5</text>
+  </svg>
+)
+
 export default function Player({ path, sudo }: { path: string; sudo: boolean; name: string }) {
   const [open, setOpen] = useState<PlayOpen | null>(null)
   const [err, setErr] = useState('')
@@ -231,10 +250,23 @@ export default function Player({ path, sudo }: { path: string; sudo: boolean; na
     el.addEventListener('change', commit)
     return () => el.removeEventListener('change', commit)
   })
+  // Volume: a level and mute, remembered for the next video. iOS lets a page mute but not set
+  // the level (it reads back as 1), so there the slider isn't shown.
+  const [vol, setVol] = useState(() => { try { const v = JSON.parse(localStorage.getItem('hamlab.play.volume') ?? ''); return { level: Math.min(1, Math.max(0, Number(v.level) || 0)), muted: !!v.muted } } catch { return { level: 1, muted: false } } })
+  useEffect(() => {
+    const v = video.current
+    if (v) { v.volume = vol.level; v.muted = vol.muted || vol.level === 0 }
+    try { localStorage.setItem('hamlab.play.volume', JSON.stringify(vol)) } catch { /* private mode */ }
+  }, [vol, open])
+  const volBy = useCallback((d: number) => setVol((x) => ({ level: Math.round(Math.min(1, Math.max(0, x.level + d)) * 20) / 20, muted: false })), [])
+  const muteToggle = useCallback(() => setVol((x) => (x.muted || x.level === 0 ? { level: x.level || 0.5, muted: false } : { ...x, muted: true })), [])
+
   const seekBy = useCallback((d: number) => {
     const v = video.current
     if (!v) return
-    v.currentTime = Math.max(0, Math.min(info?.duration ?? v.duration, v.currentTime + d))
+    const to = Math.max(0, Math.min(info?.duration ?? v.duration, v.currentTime + d))
+    v.currentTime = to
+    setTime(to) // the ball goes there at once, made yet or not
     poke()
   }, [info, poke])
   // Full screen: the browser's where it has one for an element, else (an iPhone) the window.
@@ -258,6 +290,9 @@ export default function Player({ path, sudo }: { path: string; sudo: boolean; na
     else if (e.key === 'ArrowLeft' || e.key === 'j') { e.preventDefault(); seekBy(e.key === 'j' ? -10 : -5) }
     else if (e.key === 'ArrowRight' || e.key === 'l') { e.preventDefault(); seekBy(e.key === 'l' ? 10 : 5) }
     else if (e.key === 'f') fullscreen()
+    else if (e.key === 'm') muteToggle()
+    else if (e.key === 'ArrowUp') { e.preventDefault(); volBy(0.1) }
+    else if (e.key === 'ArrowDown') { e.preventDefault(); volBy(-0.1) }
     else if (e.key === 'Escape') { if (menu) setMenu(false); else if (full && !document.fullscreenElement) setFull(false) }
   }
 
@@ -330,13 +365,22 @@ export default function Player({ path, sudo }: { path: string; sudo: boolean; na
       {vr && open && chrome && !menu && time < 8 && !err && <div className="vp-hint">Drag to look around · scroll or pinch to zoom</div>}
 
       <div className="vp-bottom">
+        <span className="vp-time above">{clock(shown)} / {clock(dur)}</span>
         <div className="vp-seek" style={{ ['--p' as string]: dur ? `${(shown / dur) * 100}%` : '0%', ['--b' as string]: dur ? `${(buffered / dur) * 100}%` : '0%' }}>
           <input ref={seekBar} type="range" min={0} max={dur || 1} step={0.1} value={shown} aria-label="Seek"
             onChange={(e) => { setScrub(Number(e.target.value)); poke() }} />
         </div>
         <div className="vp-row">
           <button className="vp-icon" onClick={toggle} aria-label={paused ? 'Play' : 'Pause'}>{paused ? <I d={PLAY} fill /> : <I d={PAUSE} />}</button>
-          <span className="vp-time">{clock(shown)} / {clock(dur)}</span>
+          <button className="vp-icon" onClick={() => seekBy(-5)} aria-label="Back 5 seconds" title="Back 5 seconds"><Skip back /></button>
+          <button className="vp-icon" onClick={() => seekBy(5)} aria-label="On 5 seconds" title="On 5 seconds"><Skip /></button>
+          <span className="vp-vol">
+            <button className="vp-icon" onClick={muteToggle} aria-label={vol.muted || vol.level === 0 ? 'Unmute' : 'Mute'} title={vol.muted || vol.level === 0 ? 'Unmute (m)' : 'Mute (m)'}><Speaker off={vol.muted || vol.level === 0} low={vol.level < 0.5} /></button>
+            {canLevel && <input type="range" min={0} max={1} step={0.05} value={vol.muted ? 0 : vol.level} aria-label="Volume"
+              style={{ ['--v' as string]: `${(vol.muted ? 0 : vol.level) * 100}%` }}
+              onChange={(e) => { const level = Number(e.target.value); setVol({ level, muted: level === 0 }); poke() }} />}
+          </span>
+          <span className="vp-time inrow">{clock(shown)} / {clock(dur)}</span>
           <span className="spacer" />
           {vr && canMotion() && (
             <button className={`vp-icon${motion ? ' on' : ''}`} aria-label="Look around by moving the phone" aria-pressed={motion}

web/src/styles.css

@@ -5,6 +5,10 @@
   --s1: #3987e5; --s2: #c98500; --track: rgba(57, 135, 229, .18);
   --btn-fg: #111; --term-bg: var(--term-bg); --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
   --header-h: 44px; --footer-h: 28px; --rail-w: 220px; --tabs-h: 34px;
+  /* iOS 26+ draws a soft blur under the status bar of a Home Screen app that reaches ~16pt
+     below it (hamlet docs/gotchas.md). Whatever starts at the safe area starts below that band
+     too. Zero where there is no status bar to clear: desktop, a Safari tab. */
+  --blur: min(env(safe-area-inset-top), 16px);
 }
 * { box-sizing: border-box; }
 html, body, #root { height: 100%; margin: 0; }
@@ -30,7 +34,7 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 .svc-list > .error, .cron-list > .error { margin: 8px 12px; }
 
 /* layout */
-.app { height: 100%; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); }
+.app { height: 100%; display: flex; flex-direction: column; padding-top: calc(env(safe-area-inset-top) + var(--blur)); }
 .header { height: var(--header-h); display: flex; align-items: center; gap: 12px; padding: 0 12px; background: var(--bg2); border-bottom: 1px solid var(--border); }
 .brand { font-weight: 700; color: var(--accent); letter-spacing: .5px; }
 .host { color: var(--muted); font-family: ui-monospace, monospace; font-size: 13px; }
@@ -264,7 +268,7 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
    than what is left, and scrolls inside itself. Its parts keep their height: in a column that
    may shrink, anything with its own scrollbar (a preview, a list) is squeezed to a sliver
    instead, and the dialog never scrolls at all. */
-.modal-back { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
+.modal-back { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: max(16px, calc(env(safe-area-inset-top) + var(--blur))) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
 .modal { --modal-bg: var(--bg2); width: min(420px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--modal-bg); border: 1px solid var(--border); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
 .modal > * { flex-shrink: 0; }
 /* a long dialog's buttons (and what went wrong) stay in reach while the rest scrolls */
@@ -372,6 +376,7 @@ h2.section { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted);
    on an iPhone the whole window */
 .vp { position: relative; flex: 1; min-height: 240px; background: #000; color: #fff; overflow: hidden; user-select: none; -webkit-user-select: none; outline: none; }
 .vp.max { position: fixed; inset: 0; z-index: 1000; }
+.vp.max .vp-note { top: calc(env(safe-area-inset-top) + var(--blur) + 14px); }
 .vp-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
 .vp-hidden { opacity: 0; pointer-events: none; }
 .vp-sphere { touch-action: none; cursor: grab; }
@@ -957,10 +962,38 @@ pre.diff .add { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%,
 @media (max-width: 800px) { .kvm-bar .kvm-url { display: none; } }
 .kvm-none { text-align: center; } .kvm-none p { margin: 4px 0; }
 /* No true fullscreen for a page element (Safari on iOS): fill the viewport in-page instead. */
-.kvm-frame.expanded { position: fixed; inset: 0; z-index: 60; }
+.kvm-frame.expanded { position: fixed; inset: 0; z-index: 60; padding-top: calc(env(safe-area-inset-top) + var(--blur)); }
 .kvm-frame.expanded iframe { height: 100%; }
 .kvm-shrink { position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); z-index: 61; background: var(--bg2); border: 1px solid var(--border); opacity: .75; }
 .kvm-shrink:hover, .kvm-shrink:active { opacity: 1; }
 .updot { margin-left: 6px; font-size: 11px; font-weight: 700; }
 .updot.behind { color: var(--s2); } .updot.unknown { color: var(--muted); }
 
+
+/* a phone: the time goes above the seek bar, so the buttons fit in one row */
+.vp-time.above { display: none; }
+@media (max-width: 560px) {
+  .vp-time.above { display: block; padding: 0 10px 2px; }
+  .vp-time.inrow { display: none; }
+}
+
+
+/* No theme touches playback, whatever it draws. A theme's full-window overlays (the Retro
+   scanlines today, any other tomorrow) are off while a player is open; the picture is never
+   filtered or blended; the player's text is plain, not the theme's lettering. Only the accent
+   colour of its controls follows the theme. */
+html:has(.vp)::before, html:has(.vp)::after, body:has(.vp)::before, body:has(.vp)::after,
+.app:has(.vp)::before, .app:has(.vp)::after, #root:has(.vp)::before, #root:has(.vp)::after { display: none !important; }
+.vp { isolation: isolate; filter: none !important; mix-blend-mode: normal !important; }
+.vp video, .vp canvas { filter: none !important; mix-blend-mode: normal !important; }
+.vp { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 400; letter-spacing: normal; text-shadow: none; }
+.vp button, .vp input, .vp select { font-family: inherit !important; }
+
+/* volume: the speaker mutes; the slider beside it (not on iOS, which only mutes) sets the level */
+.vp-vol { display: inline-flex; align-items: center; }
+.vp-vol input { width: 72px; height: 24px; margin: 0 6px 0 0; padding: 0; background: transparent; border: 0; -webkit-appearance: none; appearance: none; cursor: pointer; }
+.vp-vol input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #fff var(--v), rgba(255, 255, 255, .3) var(--v)); }
+.vp-vol input::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #fff var(--v), rgba(255, 255, 255, .3) var(--v)); }
+.vp-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: #fff; border: 0; }
+.vp-vol input::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
+@media (max-width: 560px) { .vp-vol input { display: none; } }