diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/features/messages.js | 17 | ||||
| -rw-r--r-- | src/style.css | 7 |
2 files changed, 20 insertions, 4 deletions
diff --git a/src/features/messages.js b/src/features/messages.js index 44450ea..1371b04 100644 --- a/src/features/messages.js +++ b/src/features/messages.js @@ -13349,10 +13349,23 @@ export function messagesFeature(ctx) { pager.anchor = first; // the slide meant to be on screen, from the first moment pager.screenH = scroller.clientHeight; pagerLoadAhead(); - // the clip on screen's seek bar, every frame (timeupdate comes a few times a second) + // the clip on screen's seek bar, every frame (timeupdate comes a few + // times a second). While the pager is in motion — under a finger, in a + // glide or a flight, snapping back — no seek bar shows at all: the + // clip's slide is off its mark, and the bar rode along with it, a + // white line sliding up the screen (Adam, 2026-10-16: "i don't want to + // see the seek bar while i'm transitioning to the next video"). It + // fades back in once the clip is square on the screen. if (video) { const p = pager; - const frame = () => { if (pager !== p) return; p.cur?.querySelector('.mp-seek')?._paint?.(); p.raf = requestAnimationFrame(frame); }; + const frame = () => { + if (pager !== p) return; + const bar = p.cur?.querySelector('.mp-seek'); + if (bar) bar._paint(); + const r = p.cur && p.cur.getBoundingClientRect(); + p.el.classList.toggle('moving', !!r && (Math.abs(r.top) > 2 || Math.abs(r.left) > 2)); + p.raf = requestAnimationFrame(frame); + }; p.raf = requestAnimationFrame(frame); } // turned on its side (or back), the slides change height: stay on this one diff --git a/src/style.css b/src/style.css index 30448ed..cf32b4b 100644 --- a/src/style.css +++ b/src/style.css @@ -1661,9 +1661,12 @@ body::after { .media-pager { --mp-seek-lift: calc(env(safe-area-inset-bottom, 0px) + 32px); } .mp-seek { 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; + display: flex; align-items: flex-end; touch-action: none; cursor: pointer; visibility: hidden; opacity: 0; } -.mp-seek.ready { visibility: visible; } +.mp-seek.ready { visibility: visible; opacity: 1; transition: opacity .18s; } +/* only the clip on screen's bar, and not while the pager is in motion (a + finger, a glide, a flight): it goes at once and fades back in on landing */ +.mp-slide:not(.mp-cur) .mp-seek, .media-pager.moving .mp-seek { opacity: 0; transition: none; pointer-events: none; } .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 { |