From 028dd56084b5a07bbff6d37e5f760ad344d58060 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Tue, 13 Oct 2026 04:55:16 +0000 Subject: Media pager: the seek bar sits clear of the phone's gesture strip. Adam's screenshot: the bar ran along the very bottom edge of the screen, under Android's own gesture handle — a drag there is the system's (home, recents), and it was placed by env(safe-area-inset-bottom), which is 0 here (the page doesn't ask for viewport-fit=cover, and the gesture strip is never reported as a safe area anyway). It now sits 32px up from the bottom (plus any safe-area inset) and 16px in from each side, where an edge drag is the back gesture; the post's details stand above it, and its line has rounded ends. feed-video-pager-test checks the bar's place (32px up, 16px in) and that the author, caption and counts clear it; SHOT=path saves a picture of the pager with the details up. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01KPw21NEpWeTGu6swVASmBt --- src/style.css | 14 +++++++++----- tools/feed-video-pager-test.js | 6 ++++++ 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/style.css b/src/style.css index 9b7d6a0..448f702 100644 --- a/src/style.css +++ b/src/style.css @@ -1529,14 +1529,18 @@ body::after { .media-pager.quiet .mp-top .mp-sound { pointer-events: auto; } .media-pager.quiet.show .mp-top .mp-x { opacity: 1; pointer-events: auto; } /* a clip's seek bar: a thin line along the bottom, thicker with the details - up or under a finger; the strip above it is the finger's (no swipe there) */ + up or under a finger; the strip above it is the finger's (no swipe there). + Lifted clear of the phone's own gesture strip along the bottom edge (which + a page isn't told about: no safe-area inset for it) and in from the side + edges, where a drag would be the system's back gesture. */ +.media-pager { --mp-seek-lift: calc(env(safe-area-inset-bottom, 0px) + 32px); } .mp-seek { - position: absolute; left: 0; right: 0; bottom: env(safe-area-inset-bottom, 0px); z-index: 3; height: 28px; + position: absolute; left: 16px; right: 16px; bottom: var(--mp-seek-lift); z-index: 3; height: 28px; display: flex; align-items: flex-end; touch-action: none; cursor: pointer; visibility: hidden; } .mp-seek.ready { visibility: visible; } -.mp-seek-track { position: relative; width: 100%; height: 3px; background: rgba(255, 255, 255, .28); transition: height .15s; } -.mp-seek-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; } +.mp-seek-track { position: relative; width: 100%; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .28); transition: height .15s; } +.mp-seek-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: #fff; } .mp-seek-fill::after { content: ''; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .15s; @@ -1550,7 +1554,7 @@ body::after { } .mp-seek.drag .mp-seek-time { opacity: 1; } /* the details sit clear of the seek bar */ -.media-pager.videos .mp-meta { padding-bottom: calc(max(16px, env(safe-area-inset-bottom)) + 22px); } +.media-pager.videos .mp-meta { padding-bottom: calc(var(--mp-seek-lift) + 36px); } /* a clip that waits for a tap: what it costs, over its (blank or still) box */ .vid-heavy { diff --git a/tools/feed-video-pager-test.js b/tools/feed-video-pager-test.js index 6d34cf1..ab5aa2a 100644 --- a/tools/feed-video-pager-test.js +++ b/tools/feed-video-pager-test.js @@ -115,6 +115,11 @@ try { console.log('\n[the seek bar]'); check('the seek bar is up once the clip knows its length', await waitFor((cur) => !!eval(cur)()?.querySelector('.mp-seek.ready'), '(' + CUR + ')', 4000)); + // clear of the phone's gesture strip along the bottom, and of the side edges (back gesture) + const geo = await page.evaluate((cur) => { const r = eval(cur)().querySelector('.mp-seek').getBoundingClientRect(); return { bottom: Math.round(innerHeight - r.bottom), left: Math.round(r.left), right: Math.round(innerWidth - r.right) }; }, '(' + CUR + ')'); + check('the seek bar sits clear of the bottom edge', geo.bottom >= 32, JSON.stringify(geo)); + check('…and in from the sides', geo.left >= 16 && geo.right >= 16, JSON.stringify(geo)); + if (process.env.SHOT) { await page.evaluate(() => document.querySelector('.media-pager').classList.add('show')); await sleep(300); await page.screenshot({ path: process.env.SHOT }); await page.evaluate(() => document.querySelector('.media-pager').classList.remove('show')); } const bar = await page.evaluate((cur) => { const r = eval(cur)().querySelector('.mp-seek').getBoundingClientRect(); return { x: r.x, y: r.y + r.height - 4, w: r.width }; }, '(' + CUR + ')'); await page.mouse.move(bar.x + bar.w * 0.1, bar.y); await page.mouse.down(); @@ -135,6 +140,7 @@ try { check('a tap pauses', v && v.paused, JSON.stringify(v)); check('…and shows the details', s.show); check('…with the author and the words', await page.evaluate((cur) => { const x = eval(cur)(); return /Clip Poster/.test(x.textContent) && /a wide one/.test(x.textContent); }, '(' + CUR + ')')); + check('…clear of the seek bar', await page.evaluate((cur) => { const x = eval(cur)(); const bar = x.querySelector('.mp-seek-track').getBoundingClientRect(); return [...x.querySelectorAll('.mp-left > *, .mp-counts > *')].every((n) => n.getBoundingClientRect().bottom <= bar.top - 4); }, '(' + CUR + ')')); check('…still in the pager', s.open && s.fs); await tapPager(); v = await curVideo(); s = await pagerState(); -- cgit v1.2.3