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

Pick formats by decode cost, and fix auto picture-in-picture

Browse Source 
Two things, both about playing several videos at once.

Capping the resolution per panel wasn't enough, because pixel count isn't
the only cost. A split panel now also prefers a progressive file over HLS
-- every HLS panel runs its own JavaScript demuxer over every segment, so
four panels means four media pipelines doing work a plain MP4 skips
entirely -- and H.264 over AV1 or VP9, which are often decoded in software
and are a cliff rather than a gradient, and 30fps over 60. The height
ceiling still comes first, so cheapness cannot argue a panel into a bigger
picture than it should have, and every format stays reachable as fallback.
The preloaded step's hls.js instances now park after buffering one
fragment and resume when the reader swipes to them, instead of fetching
and demuxing ahead for a step nobody reached.

Auto picture-in-picture had been implemented since the custom player was
written and had never worked. requestPictureInPicture() from a
visibilitychange handler carries no user activation, browsers refuse those,
and .catch(() => {}) swallowed the refusal -- so it failed silently every
time, in the reels feed and the standalone player alike. The declarative
autoPictureInPicture attribute is the form made for this: the browser is
told in advance which video should follow the reader out. The imperative
call stays as a fallback.

With panels there are several candidates and only one window, so binding
every pane made them race for it. The feed picks one deliberately -- the
panel you can hear, or the first if they are all muted -- re-picks when the
step or a mute switch changes, and releases it on close.

Whether a window actually opens is browser policy, not ours: Safari honours
the attribute, Chrome honours it for installed apps.

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:16:08 +00:00
parent 764e3416a3
commit 451bf0f983
4 changed files with 164 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/js/customPlayer.js
View File

@@ -212,8 +212,24 @@ App.customPlayer = App.customPlayer || {};
}
};
// Asking for picture-in-picture the moment a tab is hidden is a request
// with no user gesture behind it, and browsers refuse those -- which is why
// the imperative call below fails silently. `autoPictureInPicture` is the
// declarative form made for exactly this: the browser is told in advance
// which video should follow the reader out, and does it itself. Safari
// honours it outright; Chrome honours it for installed apps. The call is
// kept as a fallback for anywhere the flag is ignored but the request is
// allowed.
App.customPlayer.setAutoPiP = function(video, on) {
if (!video) return;
try { video.autoPictureInPicture = !!on; } catch (err) { /* unsupported */ }
if (on) video.setAttribute('autopictureinpicture', '');
else video.removeAttribute('autopictureinpicture');
};
App.customPlayer.bindAutoPiP = function(video) {
if (!video) return function destroy() {};
App.customPlayer.setAutoPiP(video, true);
const trigger = () => {
if (document.visibilityState !== 'hidden') return;
if (!document.pictureInPictureEnabled || video.disablePictureInPicture) return;
@@ -224,6 +240,7 @@ App.customPlayer = App.customPlayer || {};
document.addEventListener('visibilitychange', trigger);
window.addEventListener('pagehide', trigger);
return function destroy() {
App.customPlayer.setAutoPiP(video, false);
document.removeEventListener('visibilitychange', trigger);
window.removeEventListener('pagehide', trigger);
};