Replace video player with a fully custom fake-fullscreen HUD

Single fullscreen player state everywhere (desktop/Android/iOS/feed) instead
of the old modal-vs-native-fullscreen split, with custom controls: draggable
timeline with buffered range, dynamically-escalating skip buttons (double-tap
zones too), per-video format switching, favorites, PiP with auto-PiP on
backgrounding, volume swipe, TikTok-style HUD auto-hide, and swipe-down/
back-button/close-button dismissal. Reels feed reuses the same skip/format/
PiP logic via the new customPlayer.js shared module.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/js/customPlayer.js

@@ -0,0 +1,302 @@
+window.App = window.App || {};
+App.customPlayer = App.customPlayer || {};
+
+// Shared building blocks for the custom video player HUD, reused by the
+// standalone fullscreen player (player.js) and the reels feed (feed.js) so
+// both present identical skip/format/gesture/PiP behavior.
+(function() {
+    // -----------------------------------------------------------------
+    // Skip escalation: tapping skip-forward/back repeatedly ramps the skip
+    // duration up (5 -> 10 -> 20 -> 40 -> 60s), independently per direction,
+    // so mashing forward doesn't also ramp up backward. A tap lands as
+    // "rapid" (and escalates further) only if it arrives within
+    // RAPID_WINDOW_MS of the previous same-direction tap. After GRACE_MS of
+    // silence the level steps back down by one every DECAY_STEP_MS.
+    // -----------------------------------------------------------------
+    const LEVELS = [5, 10, 20, 40, 60];
+    const RAPID_WINDOW_MS = 1500;
+    const GRACE_MS = 2000;
+    const DECAY_STEP_MS = 1000;
+
+    App.customPlayer.createSkipEscalator = function() {
+        const dirs = {
+            back: { levelIndex: 0, lastTapAt: 0, decayTimer: null },
+            forward: { levelIndex: 0, lastTapAt: 0, decayTimer: null }
+        };
+
+        const clearDecay = (d) => {
+            if (d.decayTimer) {
+                clearTimeout(d.decayTimer);
+                d.decayTimer = null;
+            }
+        };
+
+        const scheduleDecay = (d) => {
+            clearDecay(d);
+            d.decayTimer = setTimeout(function tick() {
+                d.decayTimer = null;
+                if (d.levelIndex > 0) {
+                    d.levelIndex -= 1;
+                    d.decayTimer = setTimeout(tick, DECAY_STEP_MS);
+                }
+            }, GRACE_MS);
+        };
+
+        // Advances the state for a tap in `direction` and returns the number
+        // of seconds that tap should skip.
+        const trigger = function(direction) {
+            const d = dirs[direction];
+            if (!d) return LEVELS[0];
+            const now = Date.now();
+            if (now - d.lastTapAt <= RAPID_WINDOW_MS && d.levelIndex < LEVELS.length - 1) {
+                d.levelIndex += 1;
+            }
+            d.lastTapAt = now;
+            scheduleDecay(d);
+            return LEVELS[d.levelIndex];
+        };
+
+        const destroy = function() {
+            clearDecay(dirs.back);
+            clearDecay(dirs.forward);
+        };
+
+        return { trigger, destroy };
+    };
+
+    // Applies one skip tap to `video` using `escalator`, clamped to the
+    // media's bounds. Returns the number of seconds skipped (for HUD flash
+    // feedback), or 0 if the video has no usable duration yet.
+    App.customPlayer.skip = function(video, direction, escalator) {
+        if (!video) return 0;
+        const amount = escalator.trigger(direction);
+        const delta = direction === 'forward' ? amount : -amount;
+        let target = video.currentTime + delta;
+        if (isFinite(video.duration) && video.duration > 0) {
+            target = Math.min(target, Math.max(0, video.duration - 0.1));
+        }
+        video.currentTime = Math.max(0, target);
+        return amount;
+    };
+
+    // -----------------------------------------------------------------
+    // Format switching: builds a labeled, ranked list of a video's playable
+    // formats (quality/codec/container variants) for a picker menu. Reuses
+    // App.videos.rankFormats (same ranking as automatic selection) with no
+    // preferred-height ceiling, since a manual pick overrides that entirely.
+    // -----------------------------------------------------------------
+    App.customPlayer.formatLabel = function(fmt) {
+        if (!fmt) return 'Auto';
+        const parts = [];
+        const height = App.videos.coerceNumber(fmt.height);
+        const fps = App.videos.coerceNumber(fmt.fps);
+        if (height) parts.push(`${height}p${fps > 30 ? Math.round(fps) : ''}`);
+        const ext = (fmt.ext || fmt.video_ext || '').toString();
+        if (ext) parts.push(ext);
+        if (!parts.length) {
+            const vcodec = (fmt.vcodec || '').toString();
+            parts.push(vcodec && vcodec !== 'none' ? vcodec : 'Auto');
+        }
+        return parts.join(' ');
+    };
+
+    // Returns [] when there's nothing to pick from (no formats, or only one
+    // usable variant) so callers know to hide the format-switch button.
+    App.customPlayer.buildFormatOptions = function(video) {
+        const meta = video && (video.meta || video);
+        if (!meta || !Array.isArray(meta.formats) || meta.formats.length < 2) return [];
+        const ranked = App.videos.rankFormats(meta.formats, null);
+        if (ranked.length < 2) return [];
+        return ranked.map((fmt) => ({ fmt, label: App.customPlayer.formatLabel(fmt) }));
+    };
+
+    // Wires a format-switch button + its dropdown menu against `videoData`,
+    // calling onSelect(fmt) when the user picks one. Hides the button when
+    // there's nothing to pick from. Shared by the standalone player and the
+    // reels feed so both present an identical menu. Returns a destroy() fn.
+    App.customPlayer.bindFormatMenu = function(btn, menu, videoData, onSelect) {
+        if (!btn || !menu) return function destroy() {};
+        const options = App.customPlayer.buildFormatOptions(videoData);
+        if (!options.length) {
+            btn.hidden = true;
+            menu.hidden = true;
+            menu.innerHTML = '';
+            return function destroy() {};
+        }
+        btn.hidden = false;
+        menu.hidden = true;
+        menu.innerHTML = options.map((opt, i) =>
+            `<button class="cp-format-option" type="button" data-index="${i}">${opt.label}</button>`
+        ).join('');
+        const cleanups = [];
+        menu.querySelectorAll('.cp-format-option').forEach((optBtn) => {
+            const onClick = (event) => {
+                event.stopPropagation();
+                const idx = parseInt(optBtn.dataset.index, 10);
+                const opt = options[idx];
+                menu.hidden = true;
+                menu.querySelectorAll('.cp-format-option').forEach((b) => b.classList.remove('is-active'));
+                optBtn.classList.add('is-active');
+                if (opt) onSelect(opt.fmt);
+            };
+            optBtn.addEventListener('click', onClick);
+            cleanups.push(() => optBtn.removeEventListener('click', onClick));
+        });
+        const onBtnClick = (event) => {
+            event.stopPropagation();
+            menu.hidden = !menu.hidden;
+        };
+        btn.addEventListener('click', onBtnClick);
+        cleanups.push(() => btn.removeEventListener('click', onBtnClick));
+        return function destroy() {
+            cleanups.forEach((fn) => fn());
+        };
+    };
+
+    // -----------------------------------------------------------------
+    // Picture-in-Picture: a manual toggle plus best-effort auto-PiP when the
+    // tab/app is backgrounded while a video is playing (Safari does this
+    // natively for inline video; Chrome/Android need an explicit call).
+    // -----------------------------------------------------------------
+    App.customPlayer.supportsPiP = function() {
+        return !!(document.pictureInPictureEnabled);
+    };
+
+    App.customPlayer.togglePiP = async function(video) {
+        if (!video || !document.pictureInPictureEnabled || video.disablePictureInPicture) return false;
+        try {
+            if (document.pictureInPictureElement === video) {
+                await document.exitPictureInPicture();
+            } else {
+                await video.requestPictureInPicture();
+            }
+            return true;
+        } catch (err) {
+            return false;
+        }
+    };
+
+    App.customPlayer.bindAutoPiP = function(video) {
+        if (!video) return function destroy() {};
+        const trigger = () => {
+            if (document.visibilityState !== 'hidden') return;
+            if (!document.pictureInPictureEnabled || video.disablePictureInPicture) return;
+            if (document.pictureInPictureElement) return;
+            if (video.paused || video.ended) return;
+            video.requestPictureInPicture().catch(() => {});
+        };
+        document.addEventListener('visibilitychange', trigger);
+        window.addEventListener('pagehide', trigger);
+        return function destroy() {
+            document.removeEventListener('visibilitychange', trigger);
+            window.removeEventListener('pagehide', trigger);
+        };
+    };
+
+    // -----------------------------------------------------------------
+    // Unified pointer-gesture recognizer for the video surface: a single
+    // pointer stream is classified into exactly one of tap / double-tap /
+    // volume-drag (right column) / dismiss-drag (top strip), so the gestures
+    // never fight each other over the same touch.
+    // -----------------------------------------------------------------
+    App.customPlayer.attachGestures = function(surfaceEl, handlers) {
+        handlers = handlers || {};
+        const TAP_MAX_MOVE = 10;
+        const DOUBLE_TAP_MS = 300;
+        const DISMISS_ZONE_FRACTION = 0.2;   // top strip that owns swipe-to-dismiss
+        const VOLUME_ZONE_START = 0.66;      // right column that owns volume swipe
+        const SKIP_ZONE_LEFT_END = 0.34;
+        const SKIP_ZONE_RIGHT_START = 0.66;
+
+        let pointerId = null;
+        let startX = 0, startY = 0, lastY = 0;
+        let moved = false;
+        let mode = null; // 'dismiss-candidate' | 'dismiss' | 'volume-candidate' | 'volume' | 'ignore'
+        let volumeStartValue = 0;
+        let lastTapTime = 0;
+        let lastTapSide = null;
+
+        const rectOf = () => surfaceEl.getBoundingClientRect();
+
+        const ignoreSelector = handlers.ignoreSelector || 'button, input, a, .cp-format-menu';
+
+        const onPointerDown = (e) => {
+            if (pointerId != null || e.button != null && e.button !== 0) return;
+            if (e.target && e.target.closest && e.target.closest(ignoreSelector)) return;
+            pointerId = e.pointerId;
+            startX = e.clientX;
+            startY = lastY = e.clientY;
+            moved = false;
+            mode = null;
+            const rect = rectOf();
+            const relX = rect.width ? (e.clientX - rect.left) / rect.width : 0;
+            const relY = rect.height ? (e.clientY - rect.top) / rect.height : 0;
+            if (relY <= DISMISS_ZONE_FRACTION && handlers.onDismissDrag) {
+                mode = 'dismiss-candidate';
+            } else if (relX >= VOLUME_ZONE_START && handlers.onVolumeDrag) {
+                mode = 'volume-candidate';
+                volumeStartValue = handlers.onVolumeStart ? handlers.onVolumeStart() : 0;
+            }
+            try { surfaceEl.setPointerCapture(e.pointerId); } catch (err) { /* ignore */ }
+        };
+
+        const onPointerMove = (e) => {
+            if (e.pointerId !== pointerId) return;
+            const dx = e.clientX - startX;
+            const dy = e.clientY - startY;
+            if (!moved && Math.hypot(dx, dy) > TAP_MAX_MOVE) moved = true;
+            if (moved) {
+                if (mode === 'dismiss-candidate') mode = 'dismiss';
+                else if (mode === 'volume-candidate') mode = 'volume';
+                else if (mode === null) mode = 'ignore';
+
+                if (mode === 'dismiss') {
+                    handlers.onDismissDrag(dy, rectOf());
+                } else if (mode === 'volume') {
+                    const rect = rectOf();
+                    const deltaRatio = rect.height ? (startY - e.clientY) / rect.height : 0;
+                    handlers.onVolumeDrag(Math.min(1, Math.max(0, volumeStartValue + deltaRatio)));
+                }
+            }
+            lastY = e.clientY;
+        };
+
+        const endGesture = (e) => {
+            if (e.pointerId !== pointerId) return;
+            try { surfaceEl.releasePointerCapture(e.pointerId); } catch (err) { /* ignore */ }
+            if (moved) {
+                if (mode === 'dismiss' && handlers.onDismissEnd) handlers.onDismissEnd(lastY - startY);
+                else if (mode === 'volume' && handlers.onVolumeEnd) handlers.onVolumeEnd();
+            } else {
+                if (handlers.onSingleTap) handlers.onSingleTap();
+                const rect = rectOf();
+                const relX = rect.width ? (startX - rect.left) / rect.width : 0.5;
+                const side = relX <= SKIP_ZONE_LEFT_END ? 'left' : (relX >= SKIP_ZONE_RIGHT_START ? 'right' : 'center');
+                const now = Date.now();
+                if (side !== 'center' && lastTapSide === side && (now - lastTapTime) <= DOUBLE_TAP_MS) {
+                    lastTapTime = 0;
+                    lastTapSide = null;
+                    if (side === 'left' && handlers.onDoubleTapLeft) handlers.onDoubleTapLeft();
+                    if (side === 'right' && handlers.onDoubleTapRight) handlers.onDoubleTapRight();
+                } else {
+                    lastTapTime = now;
+                    lastTapSide = side;
+                }
+            }
+            pointerId = null;
+            mode = null;
+        };
+
+        surfaceEl.addEventListener('pointerdown', onPointerDown);
+        surfaceEl.addEventListener('pointermove', onPointerMove);
+        surfaceEl.addEventListener('pointerup', endGesture);
+        surfaceEl.addEventListener('pointercancel', endGesture);
+
+        return function destroy() {
+            surfaceEl.removeEventListener('pointerdown', onPointerDown);
+            surfaceEl.removeEventListener('pointermove', onPointerMove);
+            surfaceEl.removeEventListener('pointerup', endGesture);
+            surfaceEl.removeEventListener('pointercancel', endGesture);
+        };
+    };
+})();

frontend/js/feed.js

@@ -233,6 +233,77 @@ App.feed = App.feed || {};
         timeline.addEventListener('pointercancel', stopScrubbing);
     };
 
+    const flashFeed = function(slide, text) {
+        const flashEl = slide.querySelector('.feed-flash');
+        if (!flashEl) return;
+        flashEl.textContent = text;
+        flashEl.classList.remove('is-visible');
+        void flashEl.offsetWidth;
+        flashEl.classList.add('is-visible');
+    };
+
+    // Wires the controls shared with the standalone fullscreen player (skip
+    // escalation + double-tap zones, format switching, PiP) onto a reels
+    // slide, reusing the same App.customPlayer logic so both surfaces behave
+    // identically. Feed's own timeline/favorite/title and scroll-snap
+    // slide-to-slide navigation are untouched (see bindTimeline above and
+    // setActive/onScroll below).
+    const bindSharedControls = function(slide, video, videoData) {
+        const cleanups = [];
+        const escalator = App.customPlayer.createSkipEscalator();
+        cleanups.push(() => escalator.destroy());
+
+        const doSkip = (direction) => {
+            const amount = App.customPlayer.skip(video, direction, escalator);
+            flashFeed(slide, `${direction === 'forward' ? '+' : '-'}${amount}s`);
+            wakeHud();
+        };
+
+        const pipBtn = slide.querySelector('.feed-pip-btn');
+        if (pipBtn) {
+            pipBtn.hidden = !App.customPlayer.supportsPiP();
+            const onClick = async (event) => {
+                event.stopPropagation();
+                await App.customPlayer.togglePiP(video);
+            };
+            pipBtn.addEventListener('click', onClick);
+            cleanups.push(() => pipBtn.removeEventListener('click', onClick));
+        }
+        cleanups.push(App.customPlayer.bindAutoPiP(video));
+
+        const formatBtn = slide.querySelector('.feed-format-btn');
+        const formatMenu = slide.querySelector('.feed-format-menu');
+        cleanups.push(App.customPlayer.bindFormatMenu(formatBtn, formatMenu, videoData, (fmt) => {
+            slide._formatOverride = fmt;
+            const t = video.currentTime;
+            if (isFinite(t) && t > 0) resumeTimes.set(videoData.id, t);
+            // Tear down the current source (mirrors destroySlidePlayback's
+            // hls/video reset) before reloading with the new format -- this
+            // is a live in-place reload, not a fresh never-loaded slide, so
+            // the old Hls.js instance must be destroyed or it keeps running
+            // (fetching segments, attached to the same <video>) forever.
+            if (video._hlsPlayer) {
+                video._hlsPlayer.destroy();
+                video._hlsPlayer = null;
+            }
+            video._tearingDown = true;
+            video.pause();
+            video.removeAttribute('src');
+            video.load();
+            slide.classList.remove('is-loaded');
+            loadSlideSource(slide, videoData, true);
+        }));
+
+        cleanups.push(App.customPlayer.attachGestures(slide, {
+            onSingleTap: wakeHud,
+            onDoubleTapLeft: () => doSkip('back'),
+            onDoubleTapRight: () => doSkip('forward'),
+            ignoreSelector: 'button, input, a, .cp-format-menu, .feed-timeline'
+        }));
+
+        slide._sharedControlCleanups = cleanups;
+    };
+
     const loadSlideSource = function(slide, videoData, autoplay) {
         const video = slide.querySelector('.feed-video');
         if (!video) return;
@@ -246,8 +317,10 @@ App.feed = App.feed || {};
         }
         slide.classList.add('is-loaded');
 
-        const resolved = App.videos.resolveStreamSource(videoData);
-        if (!resolved.url) {
+        const resolved = slide._formatOverride
+            ? App.videos.resolveSourceForFormat(videoData, slide._formatOverride)
+            : App.videos.resolveStreamSource(videoData);
+        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.
             markSlideFailed(slide);
@@ -332,6 +405,12 @@ App.feed = App.feed || {};
                 <video class="feed-video" muted playsinline webkit-playsinline preload="none"></video>
                 ${liveBadge}
                 ${favKey ? `<button class="favorite-btn feed-fav-btn" type="button" data-fav-key="${favKey}"></button>` : ''}
+                <button class="cp-pip-btn feed-pip-btn" type="button" aria-label="Picture in picture" hidden>
+                    <img class="icon-svg" src="https://cdn.jsdelivr.net/npm/heroicons@2.0.13/24/outline/arrow-top-right-on-square.svg" alt="">
+                </button>
+                <button class="cp-format-btn feed-format-btn" type="button" aria-label="Quality" hidden>HD</button>
+                <div class="cp-format-menu feed-format-menu" hidden></div>
+                <div class="cp-flash feed-flash" aria-hidden="true"></div>
                 <div class="feed-info">
                     <h4 class="feed-title"><span class="feed-title-text">${v.title || ''}</span></h4>
                     ${uploaderText ? `<p class="feed-uploader">${uploaderText}</p>` : ''}
@@ -347,6 +426,7 @@ App.feed = App.feed || {};
         App.videos.attachNoReferrerRetry(poster);
         const slideVideo = slide.querySelector('.feed-video');
         bindTimeline(slide, slideVideo);
+        bindSharedControls(slide, slideVideo, v);
 
         // A media error (bad/expired source, network failure, unsupported codec)
         // means this clip can't play -- drop it from the queue. Errors fired by
@@ -388,10 +468,23 @@ App.feed = App.feed || {};
         return slide;
     };
 
+    // Tears down everything a slide holds -- playback (video/hls) plus the
+    // shared skip/format/PiP/gesture bindings from bindSharedControls -- but
+    // does not remove it from the DOM or from slidesByIndex (callers differ
+    // on that: removeSlide always does, reset() removes the whole tree at
+    // once).
+    const teardownSlide = function(slide) {
+        destroySlidePlayback(slide);
+        if (Array.isArray(slide._sharedControlCleanups)) {
+            slide._sharedControlCleanups.forEach((fn) => { try { fn(); } catch (err) { /* ignore */ } });
+            slide._sharedControlCleanups = null;
+        }
+    };
+
     const removeSlide = function(index) {
         const slide = slidesByIndex.get(index);
         if (!slide) return;
-        destroySlidePlayback(slide);
+        teardownSlide(slide);
         slide.remove();
         slidesByIndex.delete(index);
     };
@@ -628,7 +721,7 @@ App.feed = App.feed || {};
 
     App.feed.reset = function() {
         slidesByIndex.forEach((slide) => {
-            destroySlidePlayback(slide);
+            teardownSlide(slide);
             slide.remove();
         });
         slidesByIndex.clear();
@@ -653,7 +746,12 @@ App.feed = App.feed || {};
         state.feedOpen = true;
 
         if (App.player && typeof App.player.close === 'function') {
-            App.player.close();
+            // fromPopState: true suppresses the player's own history.back()
+            // -- this is an incidental "make sure it's closed" call when
+            // switching to Reels view, not the user pressing the player's
+            // close button, so it must not silently consume a back-button
+            // entry out from under real browser navigation.
+            App.player.close({ fromPopState: true });
         }
 
         container.classList.add('open');

frontend/js/state.js

@@ -10,10 +10,6 @@ App.state = {
     hlsPlayer: null,
     currentLoadController: null,
     errorToastTimer: null,
-    playerMode: 'modal',
-    playerHome: null,
-    onFullscreenChange: null,
-    onWebkitEndFullscreen: null,
     loadedVideos: [],
     feedOpen: false,
     feedMuted: true,

frontend/js/ui.js

@@ -612,7 +612,6 @@ App.ui = App.ui || {};
     App.ui.bindGlobalHandlers = function() {
         window.toggleDrawer = App.ui.toggleDrawer;
         window.closeDrawers = App.ui.closeDrawers;
-        window.closePlayer = App.player.close;
         window.handleSearch = App.videos.handleSearch;
 
         const modeToggleBtn = document.getElementById('mode-toggle-btn');

frontend/js/version.js

@@ -49,15 +49,16 @@ App.version = App.version || {};
         return changed;
     }
 
-    // A reload is "safe" when the user isn't mid-playback: no open video modal,
-    // no active reels feed, and no playing <video>. App state survives a reload
-    // because it is restored from localStorage on boot.
+    // A reload is "safe" when the user isn't mid-playback: no open custom
+    // player, no active reels feed, and no playing <video>. App state survives
+    // a reload because it is restored from localStorage on boot.
     function isSafeToReload() {
         if (App.state && App.state.feedOpen) return false;
-        const modal = document.getElementById('video-modal');
-        if (modal && modal.style.display && modal.style.display !== 'none') return false;
-        const player = document.getElementById('player');
-        if (player && !player.paused && !player.ended) return false;
+        const player = document.getElementById('custom-player');
+        if (player && player.classList.contains('open')) {
+            const video = player.querySelector('.cp-video');
+            if (video && !video.paused && !video.ended) return false;
+        }
         return true;
     }
 
@@ -128,11 +129,12 @@ App.version = App.version || {};
                 check();
             }
         });
-        // Re-attempt a deferred reload whenever a video finishes/pauses.
-        const player = document.getElementById('player');
-        if (player) {
-            player.addEventListener('pause', tryReloadWhenSafe);
-            player.addEventListener('ended', tryReloadWhenSafe);
-        }
+        // Re-attempt a deferred reload whenever a video finishes/pauses. The
+        // custom player's <video> is torn down and rebuilt on every open(), so
+        // bind on the capture phase at the document level instead of to a
+        // specific element (media events don't bubble, but capture still sees
+        // them on ancestors).
+        document.addEventListener('pause', tryReloadWhenSafe, true);
+        document.addEventListener('ended', tryReloadWhenSafe, true);
     };
 })();

frontend/js/videos.js

@@ -1032,6 +1032,23 @@ App.videos = App.videos || {};
         return sources.length ? sources[0] : { url: '', referer: '', userAgent: '', isLive: false, refererRequired: false };
     };
 
+    // Resolves one specific format (as picked from a format-switcher menu, see
+    // App.customPlayer.buildFormatOptions) into a playable source, using the
+    // same header-merging rules as the automatic ranked path above.
+    App.videos.resolveSourceForFormat = function(videoOrUrl, fmt) {
+        if (!fmt || !fmt.url) return null;
+        const isLive = !!(videoOrUrl && typeof videoOrUrl === 'object' &&
+            (videoOrUrl.isLive || (videoOrUrl.meta && videoOrUrl.meta.isLive)));
+        const meta = (videoOrUrl && typeof videoOrUrl === 'object' && (videoOrUrl.meta || videoOrUrl)) || {};
+        const metaReferer = headerValue(meta.http_headers, 'Referer');
+        const metaUserAgent = headerValue(meta.http_headers, 'User-Agent');
+        const explicitReferer = headerValue(fmt.http_headers, 'Referer') || metaReferer;
+        const referer = explicitReferer || deriveReferer(fmt.url);
+        const userAgent = headerValue(fmt.http_headers, 'User-Agent') || metaUserAgent;
+        const headers = mergeHeaders(meta.http_headers, fmt.http_headers);
+        return { url: fmt.url, referer, userAgent, headers, isLive, refererRequired: !!explicitReferer };
+    };
+
     // Background "direct playability" probe. The backend proxy exists to work
     // around CORS, hotlink (403) protection, and TLS fingerprinting. When the
     // browser can fetch a media URL cross-origin and actually read the response