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

82
frontend/js/feed.js
View File

@@ -264,7 +264,9 @@ App.feed = App.feed || {};
pipBtn.addEventListener('click', onClick);
cleanups.push(() => pipBtn.removeEventListener('click', onClick));
}
cleanups.push(App.customPlayer.bindAutoPiP(video));
// Auto-PiP is not bound per pane: only one picture-in-picture window can
// exist, so binding every pane makes them race and the winner arbitrary.
// The feed picks one deliberately -- see updateAutoPiPTarget.
const formatBtn = slide.querySelector('.feed-format-btn');
const formatMenu = slide.querySelector('.feed-format-menu');
@@ -335,6 +337,8 @@ App.feed = App.feed || {};
if (!video) return;
if (slide.classList.contains('is-loaded')) {
if (autoplay) {
// Picks up a stream that was parked after preloading.
if (video._hlsPlayer) video._hlsPlayer.startLoad();
video.muted = slide._muted !== false;
const playPromise = video.play();
if (playPromise && typeof playPromise.catch === 'function') playPromise.catch(() => {});
@@ -360,7 +364,13 @@ App.feed = App.feed || {};
const resolved = slide._formatOverride
? App.videos.resolveSourceForFormat(videoData, slide._formatOverride)
: App.videos.resolveStreamSource(videoData, { maxHeight: paneHeightCap(slide) });
: App.videos.resolveStreamSource(videoData, {
maxHeight: paneHeightCap(slide),
// Several panels at once is a decoder problem, not a picture
// problem: prefer a progressive file over HLS, H.264 over AV1,
// 30fps over 60.
cheapest: paneCount() > 1
});
if (!resolved || !resolved.url) {
// No playable source -- treat exactly like a load failure so the
// clip is dropped from the queue and the next one takes its place.
@@ -401,6 +411,16 @@ App.feed = App.feed || {};
video._hlsPlayer = hls;
hls.loadSource(streamUrl);
hls.attachMedia(video);
if (!autoplay && split) {
// Buffered enough to start instantly, then stopped: four
// panels' worth of hls.js all fetching and demuxing ahead is
// work for a step the reader has not swiped to yet. loadSlide-
// Source runs again with autoplay when they do.
hls.on(HlsLib.Events.FRAG_BUFFERED, function once() {
hls.off(HlsLib.Events.FRAG_BUFFERED, once);
if (video._hlsPlayer === hls) hls.stopLoad();
});
}
hls.on(HlsLib.Events.ERROR, (event, data) => {
if (data && data.fatal && video._hlsPlayer === hls) {
hls.destroy();
@@ -617,6 +637,8 @@ App.feed = App.feed || {};
pane._muted = !pane._muted;
syncMute();
refreshFeedMuteState();
// The panel you can hear is the one that should follow you out.
updateAutoPiPTarget();
});
return pane;
@@ -906,6 +928,7 @@ App.feed = App.feed || {};
});
});
updateAutoPiPTarget();
prefetchIfNeeded(clamped);
};
@@ -971,6 +994,54 @@ App.feed = App.feed || {};
});
};
// ------------------------------------------------------------------
// Auto picture-in-picture
//
// Leaving the tab while reels is playing should carry the video out with
// the reader. With panes there are several candidates and only one window,
// so the choice is made here rather than left to whichever pane's handler
// fires first: the panel you can hear, or the first one if they are all
// muted.
// ------------------------------------------------------------------
const autoPipVideo = function() {
const slide = slidesByIndex.get(state.feedActiveIndex);
if (!slide) return null;
const panes = panesOf(slide);
if (!panes.length) return null;
const audible = panes.find((pane) => !pane._muted);
const chosen = audible || panes[0];
return chosen ? chosen.querySelector('.feed-video') : null;
};
// Marks the chosen video and clears every other, so the browser's own
// automatic handling targets the same one this would.
const updateAutoPiPTarget = function() {
const wanted = state.feedOpen ? autoPipVideo() : null;
slidesByIndex.forEach((slide) => {
panesOf(slide).forEach((pane) => {
const video = pane.querySelector('.feed-video');
if (video) App.customPlayer.setAutoPiP(video, video === wanted);
});
});
};
App.feed.updateAutoPiPTarget = updateAutoPiPTarget;
// The fallback for browsers that ignore the attribute but would allow the
// request. It fails without a user gesture in most of them, which is why
// the attribute above is the real mechanism.
const onFeedHidden = function() {
if (!state.feedOpen) return;
if (document.visibilityState !== 'hidden') return;
if (!document.pictureInPictureEnabled) return;
if (document.pictureInPictureElement) return;
const video = autoPipVideo();
if (!video || video.paused || video.ended || video.disablePictureInPicture) return;
video.requestPictureInPicture().catch(() => {});
};
let autoPipBound = false;
App.feed.isOpen = function() {
return !!state.feedOpen;
};
@@ -1041,6 +1112,12 @@ App.feed = App.feed || {};
scrollBound = true;
}
if (!autoPipBound) {
document.addEventListener('visibilitychange', onFeedHidden);
window.addEventListener('pagehide', onFeedHidden);
autoPipBound = true;
}
if (!hudActivityBound) {
container.addEventListener('mousemove', wakeHud, { passive: true });
container.addEventListener('pointerdown', wakeHud, { passive: true });
@@ -1075,6 +1152,7 @@ App.feed = App.feed || {};
hudIdleTimer = null;
}
document.body.classList.remove('feed-hud-idle');
updateAutoPiPTarget(); // feedOpen is false now, so this clears them
slidesByIndex.forEach((slide) => panesOf(slide).forEach(destroySlidePlayback));
container.classList.remove('open');
container.setAttribute('aria-hidden', 'true');