"Open in new tab"

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>
2026-07-06 15:32:31 +00:00 · 2026-07-01 19:08:21 +00:00 · 2026-06-30 16:26:20 +00:00 · 2026-06-30 16:22:30 +00:00 · 2026-06-30 08:38:54 +00:00 · 2026-06-30 08:25:37 +00:00
14 changed files with 2490 additions and 362 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
 */__pycache__/*
 .tmp
 frontend/dist/*
 .playwright-mcp/*
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -7,10 +7,11 @@
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Space+Grotesk:wght@500;600&family=Sora:wght@400;500;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Sora:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="static/css/style.css">
 </head>
 <body>
    <div id="scroll-progress" class="scroll-progress" aria-hidden="true"></div>
    <header class="top-bar">
        <div class="logo">Jacuzzi</div>
        <div class="search-container">
@@ -90,6 +91,21 @@
                    <option value="360">360p</option>
                </select>
            </div>
            <div class="setting-item">
                <label for="density-select">Grid Density</label>
                <select id="density-select">
                    <option value="comfortable">Comfortable</option>
                    <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">
@@ -126,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">
@@ -166,14 +177,25 @@
        <button id="update-banner-btn" type="button">Refresh</button>
    </div>
    <button id="back-to-top" class="back-to-top" type="button" title="Back to top" aria-label="Back to top">↑</button>
    <div id="command-palette" class="command-palette" aria-hidden="true">
        <div class="cmdk-box" role="dialog" aria-modal="true" aria-label="Command palette">
            <input id="cmdk-input" class="cmdk-input" type="text" placeholder="Type a command or search… (⌘K)" autocomplete="off" spellcheck="false">
            <div id="cmdk-list" class="cmdk-list" role="listbox"></div>
        </div>
    </div>
    <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>
    <script src="static/js/feed.js"></script>
    <script src="static/js/ui.js"></script>
    <script src="static/js/version.js"></script>
    <script src="static/js/enhance.js"></script>
    <script src="static/js/main.js"></script>
 </body>
 </html>
--- a/frontend/js/customPlayer.js
+++ b/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);
        };
    };
 })();
--- a/frontend/js/enhance.js
+++ b/frontend/js/enhance.js
@@ -0,0 +1,252 @@
 window.App = window.App || {};
 App.enhance = App.enhance || {};
 // Progressive UI enhancements layered on top of the core app. Everything here
 // is non-essential polish: cursor-tracking card spotlight, a scroll-progress
 // bar, a back-to-top button, a ⌘K command palette, and hover video previews.
 // None of it is required for the app to function, so each piece fails soft.
 (function() {
    const fineHover = window.matchMedia('(hover: hover) and (pointer: fine)').matches;
    const reduceMotion = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    // ---- Cursor-tracking spotlight border on grid cards ----------------------
    // One delegated listener keeps per-card vars (--mx/--my) updated; the brass
    // border gradient that reads them lives in CSS (.video-card::after).
    function initSpotlight() {
        const grid = document.getElementById('video-grid');
        if (!grid || !fineHover) return;
        grid.addEventListener('pointermove', (e) => {
            const card = e.target.closest('.video-card');
            if (!card) return;
            const r = card.getBoundingClientRect();
            card.style.setProperty('--mx', (e.clientX - r.left) + 'px');
            card.style.setProperty('--my', (e.clientY - r.top) + 'px');
        }, { passive: true });
    }
    // ---- Scroll progress bar + back-to-top FAB -------------------------------
    function initScrollAffordances() {
        const bar = document.getElementById('scroll-progress');
        const fab = document.getElementById('back-to-top');
        let ticking = false;
        const onScroll = () => {
            if (ticking) return;
            ticking = true;
            requestAnimationFrame(() => {
                ticking = false;
                const doc = document.documentElement;
                const max = doc.scrollHeight - window.innerHeight;
                const pct = max > 0 ? (window.scrollY / max) * 100 : 0;
                if (bar) bar.style.width = pct.toFixed(2) + '%';
                if (fab) fab.classList.toggle('is-visible', window.scrollY > 700);
            });
        };
        window.addEventListener('scroll', onScroll, { passive: true });
        onScroll();
        if (fab) {
            fab.addEventListener('click', () => {
                window.scrollTo({ top: 0, behavior: reduceMotion() ? 'auto' : 'smooth' });
            });
        }
    }
    // ---- Hover video preview --------------------------------------------------
    // After a short dwell over a card, play a muted inline clip in place of the
    // poster — but only if the video's real formats are already resolved (the
    // grid resolves them lazily on hover/scroll anyway), so we never block or
    // hammer the backend just to preview.
    function initHoverPreview() {
        const grid = document.getElementById('video-grid');
        if (!grid || !fineHover) return;
        let dwellTimer = null;
        let activeCard = null;
        const clearPreview = () => {
            if (dwellTimer) { clearTimeout(dwellTimer); dwellTimer = null; }
            if (activeCard) {
                const vid = activeCard.querySelector('.card-preview');
                if (vid) { try { vid.pause(); } catch (e) {} vid.remove(); }
                activeCard.classList.remove('is-previewing');
                activeCard = null;
            }
        };
        const startPreview = (card) => {
            if (!App.videos || typeof App.videos.getVideoForCard !== 'function') return;
            const v = App.videos.getVideoForCard(card);
            if (!v) return;
            const meta = v.meta;
            const ready = meta && Array.isArray(meta.formats) && meta.formats.length;
            if (!ready) {
                // Not resolved yet: kick it off so the *next* hover can preview.
                if (typeof App.videos.resolveAndProbe === 'function') App.videos.resolveAndProbe(v);
                return;
            }
            let url = '';
            try { url = App.videos.buildStreamUrl(v); } catch (e) { return; }
            if (!url) return;
            const img = card.querySelector('img');
            const vid = document.createElement('video');
            vid.className = 'card-preview';
            vid.muted = true;
            vid.loop = true;
            vid.playsInline = true;
            vid.setAttribute('playsinline', '');
            vid.setAttribute('webkit-playsinline', '');
            vid.preload = 'auto';
            if (img) vid.style.height = img.getBoundingClientRect().height + 'px';
            vid.src = url;
            vid.addEventListener('error', () => { if (vid.isConnected) vid.remove(); }, { once: true });
            card.appendChild(vid);
            card.classList.add('is-previewing');
            const p = vid.play();
            if (p && p.catch) p.catch(() => {});
        };
        grid.addEventListener('pointerover', (e) => {
            const card = e.target.closest('.video-card');
            if (!card || card === activeCard) return;
            clearPreview();
            activeCard = card;
            dwellTimer = setTimeout(() => { dwellTimer = null; if (activeCard === card) startPreview(card); }, 600);
        });
        grid.addEventListener('pointerout', (e) => {
            const card = e.target.closest('.video-card');
            if (!card) return;
            const to = e.relatedTarget;
            if (to && card.contains(to)) return; // still inside the same card
            if (card === activeCard) clearPreview();
        });
        window.addEventListener('scroll', clearPreview, { passive: true });
    }
    // ---- Command palette (⌘K / Ctrl+K) ---------------------------------------
    function initCommandPalette() {
        const palette = document.getElementById('command-palette');
        const input = document.getElementById('cmdk-input');
        const list = document.getElementById('cmdk-list');
        if (!palette || !input || !list) return;
        let actions = [];
        let filtered = [];
        let activeIndex = 0;
        const fireChange = (el) => el && el.dispatchEvent(new Event('change'));
        const buildActions = () => {
            const out = [];
            out.push({ label: 'Search videos', hint: 'Focus the search box', run: () => {
                const s = document.getElementById('search-input'); if (s) { s.focus(); s.select(); }
            }});
            const theme = (localStorage.getItem('theme') || 'dark');
            out.push({ label: `Switch to ${theme === 'light' ? 'dark' : 'light'} theme`, hint: 'Appearance', run: () => {
                localStorage.setItem('theme', theme === 'light' ? 'dark' : 'light');
                if (App.ui && App.ui.applyTheme) App.ui.applyTheme();
            }});
            const density = (App.storage && App.storage.getDensity) ? App.storage.getDensity() : 'comfortable';
            out.push({ label: `Grid density: ${density === 'compact' ? 'comfortable' : 'compact'}`, hint: 'Layout', run: () => {
                if (!App.storage) return;
                App.storage.setDensity(density === 'compact' ? 'comfortable' : 'compact');
                if (App.ui && App.ui.applyDensity) App.ui.applyDensity();
                if (App.virtualGrid && App.virtualGrid.relayout) App.virtualGrid.relayout();
            }});
            out.push({ label: 'Toggle Reels view', hint: 'Playback', run: () => { if (App.feed) App.feed.toggle(); } });
            out.push({ label: 'Reload channel', hint: 'Refresh the current feed', run: () => { if (App.videos) App.videos.resetAndReload(); } });
            out.push({ label: 'Open Menu', hint: 'Source · channel · filters', run: () => { if (App.ui) App.ui.toggleDrawer('menu'); } });
            out.push({ label: 'Open Settings', hint: 'Preferences', run: () => { if (App.ui) App.ui.toggleDrawer('settings'); } });
            const sourceSelect = document.getElementById('source-select');
            if (sourceSelect) {
                Array.from(sourceSelect.options).forEach((opt) => {
                    if (opt.value === sourceSelect.value) return;
                    out.push({ label: opt.textContent, hint: 'Source', run: () => { sourceSelect.value = opt.value; fireChange(sourceSelect); } });
                });
            }
            const channelSelect = document.getElementById('channel-select');
            if (channelSelect) {
                Array.from(channelSelect.options).forEach((opt) => {
                    if (opt.value === channelSelect.value) return;
                    out.push({ label: opt.textContent, hint: 'Channel', run: () => { channelSelect.value = opt.value; fireChange(channelSelect); } });
                });
            }
            return out;
        };
        const render = () => {
            list.innerHTML = '';
            filtered.forEach((a, i) => {
                const li = document.createElement('button');
                li.type = 'button';
                li.className = 'cmdk-item' + (i === activeIndex ? ' is-active' : '');
                li.innerHTML = `<span class="cmdk-label"></span><span class="cmdk-hint"></span>`;
                li.querySelector('.cmdk-label').textContent = a.label;
                li.querySelector('.cmdk-hint').textContent = a.hint || '';
                li.addEventListener('click', () => choose(i));
                li.addEventListener('pointermove', () => { if (activeIndex !== i) { activeIndex = i; render(); } });
                list.appendChild(li);
            });
        };
        const applyFilter = () => {
            const q = input.value.trim().toLowerCase();
            filtered = q
                ? actions.filter((a) => (a.label + ' ' + (a.hint || '')).toLowerCase().includes(q))
                : actions.slice();
            activeIndex = 0;
            render();
        };
        const choose = (i) => {
            const a = filtered[i];
            close();
            if (a && a.run) a.run();
        };
        const open = () => {
            actions = buildActions();
            input.value = '';
            applyFilter();
            palette.classList.add('open');
            palette.setAttribute('aria-hidden', 'false');
            requestAnimationFrame(() => input.focus());
        };
        const close = () => {
            palette.classList.remove('open');
            palette.setAttribute('aria-hidden', 'true');
        };
        App.enhance.openPalette = open;
        input.addEventListener('input', applyFilter);
        input.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowDown') { e.preventDefault(); activeIndex = Math.min(activeIndex + 1, filtered.length - 1); render(); scrollActive(); }
            else if (e.key === 'ArrowUp') { e.preventDefault(); activeIndex = Math.max(activeIndex - 1, 0); render(); scrollActive(); }
            else if (e.key === 'Enter') { e.preventDefault(); choose(activeIndex); }
            else if (e.key === 'Escape') { e.preventDefault(); close(); }
        });
        const scrollActive = () => {
            const el = list.children[activeIndex];
            if (el) el.scrollIntoView({ block: 'nearest' });
        };
        palette.addEventListener('click', (e) => { if (e.target === palette) close(); });
        document.addEventListener('keydown', (e) => {
            if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K')) {
                e.preventDefault();
                if (palette.classList.contains('open')) close(); else open();
            }
        });
    }
    function init() {
        initSpotlight();
        initScrollAffordances();
        initHoverPreview();
        initCommandPalette();
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
 })();
--- a/frontend/js/favorites.js
+++ b/frontend/js/favorites.js
@@ -77,6 +77,7 @@ App.favorites = App.favorites || {};
        if (!key) return;
        const favorites = App.favorites.getAll();
        const existingIndex = favorites.findIndex((item) => item.key === key);
        const becameFavorite = existingIndex < 0;
        if (existingIndex >= 0) {
            favorites.splice(existingIndex, 1);
        } else {
@@ -86,6 +87,15 @@ App.favorites = App.favorites || {};
        App.favorites.setAll(favorites);
        App.favorites.renderBar();
        App.favorites.syncButtons();
        // Celebrate an add with a brass pop + ring on every button for this key.
        if (becameFavorite) {
            document.querySelectorAll(`.favorite-btn[data-fav-key="${(window.CSS && CSS.escape) ? CSS.escape(key) : key}"]`).forEach((btn) => {
                btn.classList.remove('just-favorited');
                void btn.offsetWidth; // restart the animation
                btn.classList.add('just-favorited');
                btn.addEventListener('animationend', () => btn.classList.remove('just-favorited'), { once: true });
            });
        }
    };
    App.favorites.renderBar = function() {
@@ -104,6 +114,9 @@ App.favorites = App.favorites || {};
            card.className = 'favorite-card';
            card.dataset.favKey = item.key;
            const uploaderText = item.uploader || '';
            const durationText = (!item.isLive && App.videos && typeof App.videos.formatDuration === 'function')
                ? App.videos.formatDuration(item.duration)
                : '';
            const liveBadge = item.isLive ? '<span class="live-badge">● LIVE</span>' : '';
            card.innerHTML = `
                ${liveBadge}
@@ -113,13 +126,16 @@ App.favorites = App.favorites || {};
                    <button class="video-menu-item" type="button" data-action="info" role="menuitem">Show info</button>
                    <button class="video-menu-item" type="button" data-action="download" role="menuitem">Download</button>
                </div>
-                <img src="${item.thumb}" alt="${item.title}" loading="lazy" decoding="async">
+                <div class="video-thumb">
-                <div class="video-loading" aria-hidden="true">
+                    <img src="${item.thumb}" alt="${item.title}" loading="lazy" decoding="async">
-                    <div class="video-loading-spinner"></div>
+                    <div class="video-loading" aria-hidden="true">
                        <div class="video-loading-spinner"></div>
                    </div>
                    ${uploaderText ? `<button class="video-uploader uploader-link" type="button" data-uploader="${uploaderText}">${uploaderText}</button>` : ''}
                    ${durationText ? `<span class="video-duration">${durationText}</span>` : ''}
                </div>
                <div class="favorite-info">
                    <h4>${item.title}</h4>
                    ${uploaderText ? `<p><button class="uploader-link" type="button" data-uploader="${uploaderText}">${uploaderText}</button></p>` : ''}
                </div>
            `;
            const thumb = card.querySelector('img');
--- a/frontend/js/feed.js
+++ b/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');
@@ -749,5 +847,8 @@ App.feed = App.feed || {};
            ? 'https://cdn.jsdelivr.net/npm/heroicons@2.0.13/24/outline/speaker-x-mark.svg'
            : 'https://cdn.jsdelivr.net/npm/heroicons@2.0.13/24/outline/speaker-wave.svg';
        icon.alt = state.feedMuted ? 'Unmute' : 'Mute';
        // Pulse a brass ring while muted to hint "tap to hear sound".
        const btn = document.getElementById('feed-mute-btn');
        if (btn) btn.classList.toggle('is-muted', !!state.feedMuted);
    };
 })();
--- a/frontend/js/main.js
+++ b/frontend/js/main.js
@@ -7,6 +7,10 @@ window.App = window.App || {};
        App.ui.applyTheme();
        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();
--- a/frontend/js/player.js
+++ b/frontend/js/player.js
--- a/frontend/js/state.js
+++ b/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,
--- a/frontend/js/storage.js
+++ b/frontend/js/storage.js
@@ -48,6 +48,39 @@ App.session = App.session || {};
        localStorage.setItem(FEED_END_BEHAVIOR_KEY, nextBehavior === 'scroll' ? 'scroll' : 'loop');
    };
    // Grid density: 'comfortable' (default) or 'compact' (more, smaller columns).
    App.storage.getDensity = function() {
        return localStorage.getItem('density') === 'compact' ? 'compact' : 'comfortable';
    };
    App.storage.setDensity = function(nextDensity) {
        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 [];
--- a/frontend/js/ui.js
+++ b/frontend/js/ui.js
@@ -21,6 +21,36 @@ App.ui = App.ui || {};
        if (select) select.value = App.storage.getFeedEndBehavior();
    };
    App.ui.applyDensity = function() {
        const density = App.storage.getDensity();
        document.body.dataset.density = density;
        const select = document.getElementById('density-select');
        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');
@@ -286,6 +316,36 @@ App.ui = App.ui || {};
            };
        }
        const densitySelect = document.getElementById('density-select');
        if (densitySelect) {
            densitySelect.value = App.storage.getDensity();
            densitySelect.onchange = () => {
                App.storage.setDensity(densitySelect.value);
                App.ui.applyDensity();
                if (App.virtualGrid && typeof App.virtualGrid.relayout === 'function') {
                    App.virtualGrid.relayout();
                }
            };
        }
        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();
@@ -552,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');
--- a/frontend/js/version.js
+++ b/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);
    };
 })();
--- a/frontend/js/videos.js
+++ b/frontend/js/videos.js
@@ -322,14 +322,16 @@ App.videos = App.videos || {};
                <button class="video-menu-item" type="button" data-action="info" role="menuitem">Show info</button>
                <button class="video-menu-item" type="button" data-action="download" role="menuitem">Download</button>
            </div>
-            <img src="${v.thumb}" alt="${v.title}" loading="lazy" decoding="async">
+            <div class="video-thumb">
-            <div class="video-loading" aria-hidden="true">
+                <img src="${v.thumb}" alt="${v.title}" loading="lazy" decoding="async">
-                <div class="video-loading-spinner"></div>
+                <div class="video-loading" aria-hidden="true">
                    <div class="video-loading-spinner"></div>
                </div>
                ${uploaderText ? `<button class="video-uploader uploader-link" type="button" data-uploader="${uploaderText}">${uploaderText}</button>` : ''}
                ${durationText ? `<span class="video-duration">${durationText}</span>` : ''}
            </div>
            <h4 class="video-title"><span class="video-title-text">${v.title}</span></h4>
            ${tagsMarkup}
            ${uploaderText ? `<p class="video-meta"><button class="uploader-link" type="button" data-uploader="${uploaderText}">${uploaderText}</button></p>` : ''}
            ${durationText ? `<p class="video-duration">${durationText}</p>` : ''}
        `;
        const thumb = card.querySelector('img');
        App.videos.attachNoReferrerRetry(thumb);
@@ -548,6 +550,7 @@ App.videos = App.videos || {};
    // ---------------------------------------------------------------------
    App.virtualGrid = (function() {
        const mounted = new Map();   // loadedVideos index -> card element
        const revealed = new Set();  // indices that have played their entrance once
        const layout = [];           // index -> { top, left, width, height, col, posInCol }
        const heightCache = new Map(); // shape signature -> estimated px height
        let colItems = [];           // col -> ordered list of item indices in that column
@@ -562,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);
@@ -575,7 +579,14 @@ App.videos = App.videos || {};
            el.style.padding = '0';
            const inner = el.clientWidth - padX * 2;
            if (inner <= 0) return false;
-            cols = mobile ? 2 : Math.max(1, Math.floor((inner + gap) / (260 + gap)));
+            // Density toggle (see enhance.js / settings) tunes the minimum card
            // width, so "compact" packs more columns at the same viewport width.
            // The user's Card Size setting scales that minimum on top of density.
            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;
        };
@@ -682,14 +693,22 @@ App.videos = App.videos || {};
            if (!v || !l) return;
            const card = App.videos.buildCard(v);
            place(card, l);
            // Entrance animation only the first time an index appears, so cards
            // don't re-animate every time they scroll back into the window.
            if (!revealed.has(i)) {
                revealed.add(i);
                card.classList.add('is-revealing');
                card.addEventListener('animationend', () => card.classList.remove('is-revealing'), { once: true });
            }
            grid().appendChild(card);
            mounted.set(i, card);
            // Once the thumbnail loads, drop the 16:9 placeholder so it shows at
-            // its true aspect ratio, then correct this card's height.
+            // its true aspect ratio, clear the shimmer, then correct the height.
            const img = card.querySelector('img');
            if (img) {
                const reveal = () => {
                    img.style.aspectRatio = 'auto';
                    img.classList.add('is-loaded');
                    if (mounted.get(i) === card) correct(i);
                };
                if (img.complete && img.naturalHeight > 0) requestAnimationFrame(reveal);
@@ -807,6 +826,7 @@ App.videos = App.videos || {};
        const reset = function() {
            mounted.forEach((card, i) => unmount(i));
            mounted.clear();
            revealed.clear();           // new result set should animate in again
            layout.length = 0;
            colBottoms = [];
            colItems = [];
@@ -1012,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
@@ -1190,6 +1227,12 @@ App.videos = App.videos || {};
        return App.videos.buildStreamUrlFromSource(App.videos.resolveStreamSource(videoOrUrl, options));
    };
    // Lets enhancement layers (e.g. hover preview) recover the video object that
    // backs a mounted card without reaching into the virtualizer internals.
    App.videos.getVideoForCard = function(card) {
        return cardVideo.get(card);
    };
    App.videos.downloadVideo = function(video) {
        if (!video) return;
        const streamUrl = App.videos.buildStreamUrl(video, { applyPreferredQuality: false });
Author	SHA1	Message	Date
Simon	b6b17b1f52	"Open in new tab"	2026-07-06 15:32:31 +00:00
Simon	7207e36510	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>	2026-07-01 19:08:21 +00:00
Simon	5d739bec12	adjustable card/font size	2026-06-30 16:26:20 +00:00
Simon	2e6e74b959	bigger video cards	2026-06-30 16:22:30 +00:00
Simon	1d0b435e87	Overlay duration and uploader on card thumbnails Move the duration (bottom-right) and uploader (bottom-left) onto the thumbnail as dark-transparent pills instead of text rows below it, for both .video-card and .favorite-card. Wrap the thumbnail in .video-thumb to anchor the overlays; uploader stays clickable and truncates with ellipsis. Favorite cards now show duration too (was stored, never shown). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-06-30 08:38:54 +00:00
Simon	138c3224de	Add modern UI enhancements over the classic redesign Layered progressive polish on the warm classic + brass theme: - Card entrance animation on first mount (virtualizer-aware) - Cursor-tracking brass spotlight border on cards - Thumbnail skeleton shimmer until the poster paints - Hover video preview after a short dwell (only when formats resolved) - View Transition + blurred-poster ambient backdrop on player open - Favorite heart pop + expanding ring on add - ⌘K command palette (search, theme, density, reels, source/channel) - Scroll-progress bar + back-to-top FAB - Grid density toggle (comfortable/compact) - Reels HUD: serif title, brass scrubber, muted-state pulse All new motion respects prefers-reduced-motion; no JS/HTML structure changes to the core grid/feed. New glue lives in frontend/js/enhance.js. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-06-30 08:25:37 +00:00