"Open in new tab"

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/css/style.css

@@ -559,6 +559,38 @@ body.theme-light .input-row input:focus {
     background: var(--bg-tertiary);
 }
 
+.setting-item input[type="range"] {
+    width: 100%;
+    appearance: none;
+    -webkit-appearance: none;
+    height: 6px;
+    border-radius: 999px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border);
+    cursor: pointer;
+    margin: 6px 0;
+}
+
+.setting-item input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--text-primary);
+    border: none;
+    cursor: pointer;
+}
+
+.setting-item input[type="range"]::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--text-primary);
+    border: none;
+    cursor: pointer;
+}
+
 .setting-item select {
     width: 100%;
     padding: 9px 12px;
@@ -798,7 +830,7 @@ body.theme-light .setting-item select option {
 /* Grid Container */
 .grid-container {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
     grid-auto-rows: 10px;
     gap: 16px;
     align-items: start;
@@ -840,6 +872,12 @@ body.theme-light .setting-item select option {
 }
 
 @media (max-width: 480px) {
+    .grid-container {
+        /* One full-width card per row on phones. */
+        grid-template-columns: 1fr;
+        gap: 16px;
+    }
+
     .logo {
         font-size: 18px;
     }
@@ -866,11 +904,11 @@ body.theme-light .setting-item select option {
     }
 
     .video-card h4 {
-        font-size: 16px;
+        font-size: calc(16px * var(--card-font-scale, 1));
     }
 
     .video-card p {
-        font-size: 13px;
+        font-size: calc(13px * var(--card-font-scale, 1));
     }
 }
 
@@ -983,7 +1021,7 @@ body.theme-light .setting-item select option {
 }
 
 .video-card h4 {
-    font-size: 15px;
+    font-size: calc(15px * var(--card-font-scale, 1));
     font-weight: 500;
     padding: 12px 12px 10px;
     line-height: 1.3;
@@ -1016,7 +1054,7 @@ body.theme-light .setting-item select option {
 }
 
 .video-card p {
-    font-size: 12px;
+    font-size: calc(12px * var(--card-font-scale, 1));
     color: var(--text-secondary);
     padding: 0 12px 12px 12px;
     margin: 0;
@@ -1034,7 +1072,7 @@ body.theme-light .setting-item select option {
 }
 
 .video-tag {
-    font-size: 11px;
+    font-size: calc(11px * var(--card-font-scale, 1));
     color: var(--text-secondary);
     background: var(--bg-tertiary);
     border: 1px solid var(--border);
@@ -1334,75 +1372,468 @@ body.theme-light .favorite-btn {
     padding-top: 6px;
 }
 
-/* Modal */
+/* --- Custom player: single fake-fullscreen state everywhere ------------ */
-.modal {
+.custom-player {
     display: none;
     position: fixed;
     inset: 0;
     background: #000;
-    z-index: 2000;
+    z-index: 3000;
+    touch-action: none;
+    transition: transform 0.25s ease, opacity 0.25s ease;
 }
 
-body.theme-light .modal {
+.custom-player.open {
-    background: #0b0b0b;
+    display: block;
+    animation: cp-open 0.22s ease;
 }
 
-.modal.open {
+@keyframes cp-open {
-    display: flex;
+    from { opacity: 0; }
+    to   { opacity: 1; }
 }
 
-.modal-content {
+.cp-surface {
+    position: absolute;
+    inset: 0;
+}
+
+/* Ambient backdrop: a blurred copy of the poster fills any letterbox bars
+   behind the contained video (set via the --poster custom property). */
+.cp-surface::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: var(--poster);
+    background-size: cover;
+    background-position: center;
+    filter: blur(60px) saturate(1.3) brightness(0.5);
+    transform: scale(1.25);
+    opacity: 0.55;
+    z-index: 0;
+    pointer-events: none;
+}
+
+.cp-video {
+    position: relative;
+    z-index: 1;
     width: 100%;
     height: 100%;
+    object-fit: contain;
+    background: #000;
+}
+
+.cp-flash {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 8px 18px;
+    border-radius: 999px;
+    background: rgba(0, 0, 0, 0.6);
+    color: #fff;
+    font-size: 16px;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    pointer-events: none;
+    opacity: 0;
+    z-index: 5;
+}
+
+.cp-flash.is-visible {
+    animation: cp-flash-fade 0.7s ease forwards;
+}
+
+@keyframes cp-flash-fade {
+    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
+}
+
+.cp-spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+    z-index: 4;
+}
+
+.cp-spinner.is-visible {
+    opacity: 1;
+}
+
+.cp-spinner-ring {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    border: 3px solid rgba(255, 255, 255, 0.25);
+    border-top-color: var(--accent);
+    animation: cp-spin 0.8s linear infinite;
+}
+
+@keyframes cp-spin {
+    to { transform: rotate(360deg); }
+}
+
+.cp-error {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    gap: 12px;
-    padding: 20px;
+    padding: 20px 24px;
-    box-sizing: border-box;
+    background: rgba(0, 0, 0, 0.7);
-    position: relative;
+    border-radius: var(--radius-lg);
+    color: #fff;
+    text-align: center;
+    max-width: min(360px, 80vw);
+    z-index: 5;
 }
 
-.close {
+.cp-error-actions {
-    position: absolute;
+    display: flex;
-    top: 20px;
+    gap: 10px;
-    right: 20px;
+}
-    color: #fff;
+
-    font-size: 32px;
+.cp-retry-btn,
+.cp-open-btn {
+    padding: 8px 20px;
+    border-radius: 999px;
+    border: 1px solid var(--accent);
+    background: transparent;
+    color: var(--accent);
     cursor: pointer;
-    background: rgba(0, 0, 0, 0.5);
+    font: inherit;
-    border: none;
+    text-decoration: none;
+    line-height: 1.2;
+}
+
+.cp-retry-btn:hover,
+.cp-open-btn:hover {
+    background: rgba(201, 165, 103, 0.15);
+}
+
+.cp-open-btn[hidden] {
+    display: none;
+}
+
+.cp-replay-btn {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 64px;
+    height: 64px;
     border-radius: 50%;
-    width: 44px;
+    border: none;
-    height: 44px;
+    background: rgba(0, 0, 0, 0.6);
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 2001;
+    cursor: pointer;
-    transition: all 0.2s ease;
+    z-index: 5;
 }
 
-.close:hover {
+.cp-replay-btn .icon-svg {
-    background: rgba(255, 255, 255, 0.2);
+    width: 30px;
+    height: 30px;
+    filter: invert(1);
 }
 
-video {
+.cp-hud {
-    width: 100%;
+    position: absolute;
-    height: 100%;
+    inset: 0;
-    max-width: 100%;
+    display: flex;
-    max-height: 100vh;
+    flex-direction: column;
-    object-fit: contain;
+    justify-content: space-between;
+    pointer-events: none;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 18%, transparent 78%, rgba(0, 0, 0, 0.6));
+    opacity: 1;
+    transition: opacity 0.3s ease;
+    z-index: 3;
 }
 
-#mobile-video-host {
+.custom-player.cp-hud-idle .cp-hud {
-    position: fixed;
+    opacity: 0;
-    left: -9999px;
+}
-    top: 0;
+
-    width: 1px;
+.cp-hud * {
-    height: 1px;
+    pointer-events: auto;
+}
+
+.cp-top-bar {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: max(14px, env(safe-area-inset-top)) 16px 0;
+}
+
+.cp-close-btn {
+    width: 40px;
+    height: 40px;
+    flex-shrink: 0;
+    border-radius: 50%;
+    border: none;
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+    font-size: 18px;
+    cursor: pointer;
+}
+
+.cp-title {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    font-family: var(--font-display);
+    font-size: 16px;
+    color: #fff;
+    white-space: nowrap;
     overflow: hidden;
 }
 
+.cp-title-text {
+    display: inline-block;
+    padding-right: 24px;
+    transform: translateX(0);
+}
+
+.cp-title.has-marquee .cp-title-text {
+    animation: video-title-marquee var(--marquee-duration, 10s) linear infinite;
+}
+
+.cp-fav-btn {
+    position: static;
+    flex-shrink: 0;
+}
+
+.cp-bottom-bar {
+    padding: 0 16px max(14px, env(safe-area-inset-bottom));
+}
+
+.custom-player.is-live .cp-timeline,
+.custom-player.is-live .cp-skip-back-btn,
+.custom-player.is-live .cp-skip-fwd-btn {
+    display: none;
+}
+
+.cp-timeline {
+    padding: 10px 0;
+    cursor: pointer;
+}
+
+.cp-timeline-track {
+    position: relative;
+    height: 4px;
+    border-radius: 2px;
+    background: rgba(255, 255, 255, 0.25);
+}
+
+.cp-timeline-buffered {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 0%;
+    border-radius: 2px;
+    background: rgba(255, 255, 255, 0.35);
+}
+
+.cp-timeline-fill {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 0%;
+    border-radius: 2px;
+    background: var(--accent);
+}
+
+.cp-timeline-handle {
+    position: absolute;
+    top: 50%;
+    left: 0%;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: var(--accent);
+    transform: translate(-50%, -50%) scale(0.7);
+    transition: transform 0.15s ease;
+}
+
+.cp-timeline:hover .cp-timeline-handle,
+.cp-timeline.is-scrubbing .cp-timeline-handle {
+    transform: translate(-50%, -50%) scale(1);
+}
+
+.cp-time-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.cp-time {
+    color: #fff;
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    flex-shrink: 0;
+    min-width: 34px;
+}
+
+.cp-time-duration {
+    text-align: right;
+}
+
+.cp-transport {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex: 1;
+    justify-content: center;
+}
+
+.cp-transport button {
+    position: relative;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: none;
+    background: transparent;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.cp-play-btn {
+    width: 48px !important;
+    height: 48px !important;
+    background: rgba(255, 255, 255, 0.12) !important;
+}
+
+.cp-play-btn .icon-svg {
+    width: 22px;
+    height: 22px;
+}
+
+.cp-skip-back-btn .icon-svg,
+.cp-skip-fwd-btn .icon-svg {
+    width: 20px;
+    height: 20px;
+}
+
+.cp-skip-amount {
+    position: absolute;
+    bottom: 2px;
+    font-size: 9px;
+    font-weight: 600;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 6px;
+    padding: 0 3px;
+    pointer-events: none;
+}
+
+.cp-secondary-controls {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+}
+
+.cp-mute-btn,
+.cp-pip-btn {
+    width: 34px;
+    height: 34px;
+    border-radius: 50%;
+    border: none;
+    background: transparent;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.cp-mute-btn .icon-svg,
+.cp-pip-btn .icon-svg {
+    width: 18px;
+    height: 18px;
+}
+
+.cp-volume-range {
+    width: 64px;
+    accent-color: var(--accent);
+}
+
+.cp-format-btn {
+    height: 26px;
+    padding: 0 8px;
+    border-radius: 6px;
+    border: 1px solid rgba(255, 255, 255, 0.35);
+    background: rgba(0, 0, 0, 0.4);
+    color: #fff;
+    font-size: 11px;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.cp-format-menu {
+    position: absolute;
+    right: 16px;
+    bottom: 64px;
+    display: flex;
+    flex-direction: column;
+    background: rgba(20, 17, 13, 0.92);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    z-index: 6;
+    max-height: 40vh;
+    overflow-y: auto;
+}
+
+.cp-format-option {
+    padding: 9px 18px;
+    border: none;
+    background: transparent;
+    color: var(--text-primary);
+    font-size: 13px;
+    text-align: left;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.cp-format-option:hover {
+    background: var(--bg-tertiary);
+}
+
+.cp-format-option.is-active {
+    color: var(--accent);
+}
+
+/* `.cp-error`/`.cp-replay-btn`/`.cp-format-menu` above set `display` on the
+   bare class so JS can toggle visibility via the `hidden` attribute alone;
+   these higher-specificity overrides keep that attribute effective (an
+   unconditional `display` on the class would otherwise beat the UA
+   `[hidden] { display: none }` rule). */
+.cp-error[hidden],
+.cp-replay-btn[hidden],
+.cp-format-menu[hidden],
+.cp-pip-btn[hidden],
+.favorite-btn[hidden] {
+    display: none;
+}
+
+@media (max-width: 480px) {
+    .cp-title { font-size: 14px; }
+    .cp-volume-range { display: none; }
+}
+
 .error-toast {
     position: fixed;
     right: 20px;
@@ -1776,6 +2207,38 @@ body.feed-mode-open .mode-toggle-btn .icon-svg {
     background: rgba(255, 59, 48, 0.18);
 }
 
+/* Reels HUD right rail additions: PiP + quality, stacked above favorite. */
+.feed-pip-btn {
+    position: absolute;
+    right: 24px;
+    bottom: 266px;
+    z-index: 6;
+    background: rgba(0, 0, 0, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    transition: background 0.2s ease, opacity 0.4s ease;
+}
+
+.feed-pip-btn .icon-svg {
+    filter: invert(100%) saturate(0%);
+}
+
+.feed-format-btn {
+    position: absolute;
+    right: 24px;
+    bottom: 322px;
+    z-index: 6;
+    transition: opacity 0.4s ease;
+}
+
+.feed-format-menu {
+    right: 76px;
+    bottom: 322px;
+}
+
+.feed-flash {
+    z-index: 5;
+}
+
 /* 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). */
@@ -1783,6 +2246,8 @@ 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 {
     opacity: 0;
 }
@@ -2017,26 +2482,6 @@ body.theme-light .video-card img:not(.is-loaded) {
     flex-shrink: 0;
 }
 
-/* --- Player ambient backdrop: blurred poster behind the video --------- */
-.modal-content::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-image: var(--poster);
-    background-size: cover;
-    background-position: center;
-    filter: blur(60px) saturate(1.3) brightness(0.5);
-    transform: scale(1.25);
-    opacity: 0.55;
-    z-index: 0;
-    pointer-events: none;
-}
-
-.modal-content > * {
-    position: relative;
-    z-index: 1;
-}
-
 /* --- Reels HUD polish: serif title + brass scrubber + mute pulse ------- */
 .feed-title { font-family: var(--font-display); }
 
@@ -2058,10 +2503,3 @@ body.theme-light .video-card img:not(.is-loaded) {
     pointer-events: none;
 }
 
-/* --- View Transition timing (player open/close crossfade) -------------- */
-@media (prefers-reduced-motion: no-preference) {
-    ::view-transition-old(root),
-    ::view-transition-new(root) {
-        animation-duration: 0.32s;
-    }
-}

frontend/index.html

@@ -98,6 +98,14 @@
                     <option value="compact">Compact</option>
                 </select>
             </div>
+            <div class="setting-item">
+                <label for="card-size-range">Card Size</label>
+                <input type="range" id="card-size-range" min="0.7" max="1.5" step="0.1" value="1">
+            </div>
+            <div class="setting-item">
+                <label for="text-size-range">Text Size</label>
+                <input type="range" id="text-size-range" min="0.8" max="1.4" step="0.1" value="1">
+            </div>
             <div class="setting-item">
                 <label for="feed-end-select">Reels: On Video End</label>
                 <select id="feed-end-select">
@@ -134,12 +142,7 @@
         <img class="icon-svg" src="https://cdn.jsdelivr.net/npm/heroicons@2.0.13/24/outline/chevron-down.svg" alt="Load More">
     </button>
 
-    <div id="video-modal" class="modal">
+    <div id="custom-player" class="custom-player" aria-hidden="true"></div>
-        <div class="modal-content">
-            <span class="close" onclick="closePlayer()">&times;</span>
-            <video id="player" controls autoplay playsinline webkit-playsinline></video>
-        </div>
-    </div>
 
     <button id="mode-toggle-btn" class="mode-toggle-btn" type="button" title="Switch to Reels view" aria-pressed="false">
         <img class="icon-svg" id="mode-toggle-icon" src="https://cdn.jsdelivr.net/npm/heroicons@2.0.13/24/outline/device-phone-mobile.svg" alt="Switch to Reels view">
@@ -185,6 +188,7 @@
 
     <script src="static/js/state.js"></script>
     <script src="static/js/storage.js"></script>
+    <script src="static/js/customPlayer.js"></script>
     <script src="static/js/player.js"></script>
     <script src="static/js/favorites.js"></script>
     <script src="static/js/videos.js"></script>

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);
+        const resolved = slide._formatOverride
-        if (!resolved.url) {
+            ? 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/main.js

@@ -8,6 +8,9 @@ window.App = window.App || {};
         App.ui.applyPreferredQuality();
         App.ui.applyFeedEndBehavior();
         App.ui.applyDensity();
+        // Set the text-size CSS variable before the first pack so initial card
+        // heights are measured at the user's chosen size.
+        document.documentElement.style.setProperty('--card-font-scale', App.storage.getFontScale());
         App.ui.renderMenu();
         App.favorites.renderBar();
         App.ui.bindGlobalHandlers();

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/storage.js

@@ -57,6 +57,30 @@ App.session = App.session || {};
         localStorage.setItem('density', nextDensity === 'compact' ? 'compact' : 'comfortable');
     };
 
+    // User-tunable card width / text size multipliers (default 1.0). Clamped so a
+    // stale or hand-edited value can never break the layout.
+    const clampScale = function(value, min, max, fallback) {
+        const n = parseFloat(value);
+        if (!isFinite(n)) return fallback;
+        return Math.min(max, Math.max(min, n));
+    };
+
+    App.storage.getCardScale = function() {
+        return clampScale(localStorage.getItem('cardScale'), 0.7, 1.5, 1);
+    };
+
+    App.storage.setCardScale = function(next) {
+        localStorage.setItem('cardScale', clampScale(next, 0.7, 1.5, 1));
+    };
+
+    App.storage.getFontScale = function() {
+        return clampScale(localStorage.getItem('fontScale'), 0.8, 1.4, 1);
+    };
+
+    App.storage.setFontScale = function(next) {
+        localStorage.setItem('fontScale', clampScale(next, 0.8, 1.4, 1));
+    };
+
     App.storage.getServerEntries = function() {
         const config = App.storage.getConfig();
         if (!config.servers || !Array.isArray(config.servers)) return [];

frontend/js/ui.js

@@ -28,6 +28,29 @@ App.ui = App.ui || {};
         if (select) select.value = density;
     };
 
+    // Card Size: re-packs the virtual grid (column count derives from the scaled
+    // minimum card width in videos.js).
+    App.ui.applyCardScale = function() {
+        const scale = App.storage.getCardScale();
+        const range = document.getElementById('card-size-range');
+        if (range) range.value = scale;
+        if (App.virtualGrid && typeof App.virtualGrid.relayout === 'function') {
+            App.virtualGrid.relayout();
+        }
+    };
+
+    // Text Size: drives the --card-font-scale CSS variable; a re-pack follows so
+    // card heights account for the new text size.
+    App.ui.applyFontScale = function() {
+        const scale = App.storage.getFontScale();
+        document.documentElement.style.setProperty('--card-font-scale', scale);
+        const range = document.getElementById('text-size-range');
+        if (range) range.value = scale;
+        if (App.virtualGrid && typeof App.virtualGrid.relayout === 'function') {
+            App.virtualGrid.relayout();
+        }
+    };
+
     // Toast helper for playback + network errors.
     App.ui.showError = function(message) {
         const toast = document.getElementById('error-toast');
@@ -305,6 +328,24 @@ App.ui = App.ui || {};
             };
         }
 
+        const cardSizeRange = document.getElementById('card-size-range');
+        if (cardSizeRange) {
+            cardSizeRange.value = App.storage.getCardScale();
+            cardSizeRange.oninput = () => {
+                App.storage.setCardScale(cardSizeRange.value);
+                App.ui.applyCardScale();
+            };
+        }
+
+        const textSizeRange = document.getElementById('text-size-range');
+        if (textSizeRange) {
+            textSizeRange.value = App.storage.getFontScale();
+            textSizeRange.oninput = () => {
+                App.storage.setFontScale(textSizeRange.value);
+                App.ui.applyFontScale();
+            };
+        }
+
         const feedEndSelect = document.getElementById('feed-end-select');
         if (feedEndSelect) {
             feedEndSelect.value = App.storage.getFeedEndBehavior();
@@ -571,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,
+    // A reload is "safe" when the user isn't mid-playback: no open custom
-    // no active reels feed, and no playing <video>. App state survives a reload
+    // player, no active reels feed, and no playing <video>. App state survives
-    // because it is restored from localStorage on boot.
+    // 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');
+        const player = document.getElementById('custom-player');
-        if (modal && modal.style.display && modal.style.display !== 'none') return false;
+        if (player && player.classList.contains('open')) {
-        const player = document.getElementById('player');
+            const video = player.querySelector('.cp-video');
-        if (player && !player.paused && !player.ended) return false;
+            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.
+        // Re-attempt a deferred reload whenever a video finishes/pauses. The
-        const player = document.getElementById('player');
+        // custom player's <video> is torn down and rebuilt on every open(), so
-        if (player) {
+        // bind on the capture phase at the document level instead of to a
-            player.addEventListener('pause', tryReloadWhenSafe);
+        // specific element (media events don't bubble, but capture still sees
-            player.addEventListener('ended', tryReloadWhenSafe);
+        // them on ancestors).
-        }
+        document.addEventListener('pause', tryReloadWhenSafe, true);
+        document.addEventListener('ended', tryReloadWhenSafe, true);
     };
 })();

frontend/js/videos.js

@@ -565,6 +565,7 @@ App.videos = App.videos || {};
         const measureMetrics = function() {
             const el = grid();
             if (!el) return false;
+            const phone = window.matchMedia('(max-width: 480px)').matches;
             const mobile = window.matchMedia('(max-width: 768px)').matches;
             const large = window.matchMedia('(min-width: 1600px)').matches;
             gap = mobile ? 12 : (large ? 24 : 16);
@@ -580,8 +581,12 @@ App.videos = App.videos || {};
             if (inner <= 0) return false;
             // Density toggle (see enhance.js / settings) tunes the minimum card
             // width, so "compact" packs more columns at the same viewport width.
-            const minCardW = document.body.dataset.density === 'compact' ? 210 : 260;
+            // The user's Card Size setting scales that minimum on top of density.
-            cols = mobile ? 2 : Math.max(1, Math.floor((inner + gap) / (minCardW + gap)));
+            const cardScale = (App.storage && App.storage.getCardScale) ? App.storage.getCardScale() : 1;
+            const minCardW = (document.body.dataset.density === 'compact' ? 210 : 260) * cardScale;
+            // One card per row on phones, two on larger handsets/tablets, and a
+            // size-driven count on desktop.
+            cols = phone ? 1 : (mobile ? 2 : Math.max(1, Math.floor((inner + gap) / (minCardW + gap))));
             colWidth = (inner - gap * (cols - 1)) / cols;
             return true;
         };
@@ -1027,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