From b01ec800019bc0ac74926a4366f045b71bd7c29b Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Tue, 13 Oct 2026 04:04:32 +0000 Subject: Feed: a clip opens in the media pager, full screen, with the feed's other clips a swipe away and a seek bar to drag. Adam full-screened a video in the feed and swiped up for the next one, and nothing moved: a tap on a feed clip handed it to the player's own full screen (video.requestFullscreen), where every touch is the player's and there is no next. Now, as pictures do since 6eda018, the tap opens the media pager on that clip over the feed's clips in the feed's order (every shape, not only the tall ones the Videos view flips through), carrying on from where it was. What the player's full screen gave is kept: the pager puts the page itself full screen (the tap's own gesture), and a wide clip locks the screen to landscape — for that clip; past it the screen follows the phone. Each clip in the pager (the media grid's too) gets its own seek bar, a thin line along the bottom that thickens with the details up; dragging it scrubs with the time shown, and the drag is never the pager's swipe or tap. A tap pauses the clip and shows the post's details, the × and the bar; another plays on. Leaving full screen another way (Back on Android, Escape) leaves the pager in the same step; × or Escape after moving on lands the feed on the post last watched. Threads, profiles and chats keep the player's full screen. tools/feed-video-pager-test.js (open, resume, landscape lock and release, seek drag, tap pause/play, swipe and arrows, Escape onto the post, exit full screen); video-tap-test now checks the feed opens the pager and runs its native full-screen checks in a thread. tools/puppeteer.js takes CHROME=/path for a machine without /usr/bin/google-chrome. feed-media-views-test's range-less probe check fails on HEAD before this too. 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 | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) (limited to 'src/style.css') diff --git a/src/style.css b/src/style.css index 0a1562d..9b7d6a0 100644 --- a/src/style.css +++ b/src/style.css @@ -1528,6 +1528,29 @@ body::after { .media-pager.quiet .mp-top .mp-x { opacity: 0; pointer-events: none; } .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) */ +.mp-seek { + position: absolute; left: 0; right: 0; bottom: env(safe-area-inset-bottom, 0px); 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-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; +} +.media-pager.show .mp-seek-track, .mp-seek.drag .mp-seek-track { height: 5px; } +.media-pager.show .mp-seek-fill::after, .mp-seek.drag .mp-seek-fill::after { opacity: 1; } +.mp-seek-time { + position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); padding: 3px 8px; border-radius: 6px; + font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; background: rgba(0, 0, 0, .55); + opacity: 0; pointer-events: none; transition: opacity .12s; +} +.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); } /* a clip that waits for a tap: what it costs, over its (blank or still) box */ .vid-heavy { -- cgit v1.2.3