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

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

frontend/js/videos.js

@@ -1930,7 +1930,34 @@ App.videos = App.videos || {};
     // list is preferred (start with the last one). When a preferred height is
     // set, formats at or below it come first (best of those first), followed by
     // anything above it ordered closest-to-preferred first as a last resort.
-    App.videos.rankFormats = function(formats, preferredHeight) {
+    // How expensive a format is to decode, beyond its pixel count. Lower is
+    // cheaper, and these are ordered by how much they actually cost:
+    //
+    //   HLS means hls.js demuxes every segment in JavaScript before the browser
+    //   sees it. A progressive file skips that entirely -- and with several
+    //   panels each running their own instance, it is the difference between
+    //   one media pipeline and four.
+    //
+    //   AV1 and VP9 are frequently decoded in software; H.264 has hardware
+    //   support almost everywhere. That is a cliff, not a gradient.
+    //
+    //   60fps is twice the frames of 30fps for the same picture.
+    const decodeCost = function(fmt) {
+        const protocol = String(fmt.protocol || '').toLowerCase();
+        const ext = String(fmt.ext || '').toLowerCase();
+        const vcodec = String(fmt.vcodec || '').toLowerCase();
+        const streaming = protocol.indexOf('m3u8') >= 0 || protocol.indexOf('dash') >= 0
+            || ext === 'm3u8' || ext === 'mpd' ? 1 : 0;
+        const software = (vcodec.indexOf('av01') === 0 || vcodec.indexOf('vp9') === 0
+            || vcodec.indexOf('vp09') === 0) ? 1 : 0;
+        const highFps = App.videos.coerceNumber(fmt.fps) > 35 ? 1 : 0;
+        return streaming * 4 + software * 2 + highFps;
+    };
+
+    // `options.cheapest` ranks by what a machine has to do to play the format,
+    // once the height ceiling has been applied. It is for showing several
+    // videos at once, where the limit is the decoder rather than the picture.
+    App.videos.rankFormats = function(formats, preferredHeight, options) {
         if (!Array.isArray(formats) || formats.length === 0) return [];
         const candidates = formats
             .map((fmt, index) => ({ fmt, index }))
@@ -1944,12 +1971,17 @@ App.videos = App.videos || {};
             return false;
         });
         const pool = videoCandidates.length ? videoCandidates : candidates;
+        const cheapest = !!(options && options.cheapest);
         const score = (fmt) => {
             const height = App.videos.coerceNumber(fmt.height || fmt.quality);
             const width = App.videos.coerceNumber(fmt.width);
             const size = height || width;
             const bitrate = App.videos.coerceNumber(fmt.tbr || fmt.bitrate);
             const fps = App.videos.coerceNumber(fmt.fps);
+            // Cost is negated so that the same descending comparison puts the
+            // cheaper format first, and it outranks bitrate: a slightly softer
+            // picture that plays is worth more than a sharper one that stutters.
+            if (cheapest) return [size, -decodeCost(fmt), bitrate, fps];
             return [size, bitrate, fps];
         };
         // Tie-break on the original index so equal-quality formats start with
@@ -2013,7 +2045,8 @@ App.videos = App.videos || {};
             }
         }
 
-        const sources = App.videos.rankFormats(meta.formats, preferredHeight).map((fmt) => {
+        const ranking = { cheapest: !!(options && options.cheapest) };
+        const sources = App.videos.rankFormats(meta.formats, preferredHeight, ranking).map((fmt) => {
             // An *explicit* Referer (from the extractor) signals the upstream
             // enforces it; deriveReferer is only a best-effort fallback. The
             // browser can't set a cross-origin Referer, so refererRequired tells