mitchell/hamlab
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 14 Wiki Activity

files: on a phone the player's time sits above the seek bar

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Mitchell-Johnson
2026-10-23 23:52:35 -07:00
co-authored by Claude Opus 5.5
parent 033343793f
commit dbf89cd5e2
2 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/Player.tsx
+2 -1
View File
@@ -340,6 +340,7 @@ 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() }} />
@@ -348,7 +349,7 @@ export default function Player({ path, sudo }: { path: string; sudo: boolean; na
<button className="vp-icon" onClick={toggle} aria-label={paused ? 'Play' : 'Pause'}>{paused ? <I d={PLAY} fill /> : <I d={PAUSE} />}</button>
<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-time">{clock(shown)} / {clock(dur)}</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
+7
View File
@@ -964,3 +964,10 @@ pre.diff .add { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%,
.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; }
}