simon/jacuzzi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Put the reel itself in the picture-in-picture window, so it scrolls

Browse Source 
A video picture-in-picture window renders one <video>'s frames and nothing
else, which is why moving through the reel from it had to be smuggled in
through media keys. Document picture-in-picture opens a real document
instead, so the feed is moved into it: #feed-view and its whole subtree are
appended to the new window's body. Nothing is copied and no <video> is
re-created, so playback continues across the move and the scroll-snap list,
the panes, the split tree and every control keep working -- they are the same
elements, in another window. Scrolling the window scrolls the reel, because
it is the reel.

The lookups in feed.js now go through the cached #feed-view root rather than
document.getElementById, since after the move the feed is no longer in this
document, and the HUD-idle class rides on that root so it travels with it.
The page underneath drops back to the grid while the feed is out, and gets it
back when the window closes.

The video window stays as the fallback: it is Chrome-only, needs a user
gesture, and a hidden tab has none -- so auto-PiP on tab switch is still the
old path. It is suppressed while a document window is open, or the browser
would tear the video out of it on the next switch.

Also fixes the picture-in-picture button, which referenced an undefined
`pane` in bindSharedControls (the parameter was named `slide`) and threw into
a swallowed promise rejection on every click.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QBDkEXP4htyXTCZUwMLphd
This commit is contained in:
Simon
2026-09-10 20:45:49 +00:00
parent 76a078b9b5
commit 2abdc31f56
3 changed files with 397 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/css/style.css
View File

@@ -2237,7 +2237,7 @@ body.feed-mode-open .mode-toggle-btn .icon-svg {
}
/* The HUD's idle fade takes the panel tools with it, like every other control. */
body.feed-hud-idle .feed-pane-tools {
.feed-hud-idle .feed-pane-tools {
opacity: 0;
transition: opacity 0.4s ease;
}
@@ -2464,13 +2464,13 @@ body.feed-hud-idle .feed-pane-tools {
/* Reels/TikTok mode: HUD auto-hides after a short idle. Elements stay
interactive (pointer-events untouched) so the buttons keep working while
invisible; any pointer/scroll activity reveals them again (see App.feed). */
body.feed-hud-idle .feed-info,
body.feed-hud-idle .feed-timeline,
body.feed-hud-idle .feed-mute-btn,
body.feed-hud-idle .feed-fav-btn,
body.feed-hud-idle .feed-pip-btn,
body.feed-hud-idle .feed-format-btn,
body.feed-hud-idle .mode-toggle-btn {
.feed-hud-idle .feed-info,
.feed-hud-idle .feed-timeline,
.feed-hud-idle .feed-mute-btn,
.feed-hud-idle .feed-fav-btn,
.feed-hud-idle .feed-pip-btn,
.feed-hud-idle .feed-format-btn,
.feed-hud-idle .mode-toggle-btn {
opacity: 0;
}