window.App = window.App || {};
App.videos = App.videos || {};

(function() {
    const state = App.state;

    const observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting) App.videos.loadVideos();
    }, {
        threshold: 1.0
    });

    const titleEnv = {
        useHoverFocus: window.matchMedia('(hover: hover) and (pointer: fine)').matches
    };

    const titleVisibility = new Map();
    let titleObserver = null;
    if (!titleEnv.useHoverFocus) {
        titleObserver = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    titleVisibility.set(entry.target, entry.intersectionRatio || 0);
                } else {
                    titleVisibility.delete(entry.target);
                    entry.target.dataset.titlePrimary = '0';
                    updateTitleActive(entry.target);
                }
            });
            let topCard = null;
            let topRatio = 0;
            titleVisibility.forEach((ratio, card) => {
                if (ratio > topRatio) {
                    topRatio = ratio;
                    topCard = card;
                }
            });
            titleVisibility.forEach((ratio, card) => {
                card.dataset.titlePrimary = card === topCard && ratio >= 0.55 ? '1' : '0';
                updateTitleActive(card);
            });
        }, {
            threshold: [0, 0.25, 0.55, 0.8, 1.0]
        });
    }

    App.videos.observeSentinel = function() {
        const sentinel = document.getElementById('sentinel');
        if (sentinel) {
            observer.observe(sentinel);
        }
    };

    const updateTitleActive = function(card) {
        const titleWrap = card && card.querySelector('.video-title');
        if (!titleWrap || !titleWrap.classList.contains('has-marquee')) {
            if (card) card.classList.remove('is-title-active');
            return;
        }
        const hovered = card.dataset.titleHovered === '1';
        const focused = card.dataset.titleFocused === '1';
        const primary = card.dataset.titlePrimary === '1';
        const active = titleEnv.useHoverFocus ? (hovered || focused) : (focused || primary);
        card.classList.toggle('is-title-active', active);
    };

    const measureTitle = function(card) {
        if (!card) return;
        const titleWrap = card.querySelector('.video-title');
        const titleText = card.querySelector('.video-title-text');
        if (!titleWrap || !titleText) return;
        if (App.marquee.measure(titleWrap, titleText)) {
            // Only marquee cards need the scroll-position observer that picks the
            // centered card to animate; observing every card made scrolling a
            // large grid needlessly expensive.
            if (titleObserver) titleObserver.observe(card);
        } else {
            card.classList.remove('is-title-active');
            if (titleObserver) {
                titleObserver.unobserve(card);
                titleVisibility.delete(card);
            }
        }
        updateTitleActive(card);
    };

    let titleMeasureRaf = null;
    const scheduleTitleMeasure = function() {
        if (titleMeasureRaf) return;
        titleMeasureRaf = requestAnimationFrame(() => {
            titleMeasureRaf = null;
            document.querySelectorAll('.video-card').forEach((card) => {
                measureTitle(card);
            });
            // The virtualizer re-packs and remounts on resize via its own
            // listener; nothing else to do here.
        });
    };

    window.addEventListener('resize', scheduleTitleMeasure);

    App.videos.formatDuration = function(seconds) {
        if (!seconds || seconds <= 0) return '';
        const totalSeconds = Math.floor(seconds);
        const hours = Math.floor(totalSeconds / 3600);
        const minutes = Math.floor((totalSeconds % 3600) / 60);
        const secs = totalSeconds % 60;
        if (hours > 0) {
            return `${hours}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
        }
        if (minutes > 0) {
            return `${minutes}:${String(secs).padStart(2, '0')}`;
        }
        return `${secs}`;
    };

    App.videos.buildImageProxyUrl = function(imageUrl) {
        if (!imageUrl) return '';
        try {
            return `/api/image?url=${encodeURIComponent(imageUrl)}`;
        } catch (err) {
            return '';
        }
    };

    // ---------------------------------------------------------------------
    // Thumbnails
    //
    // A thumbnail can come from two places: the provider's own CDN, or our
    // /api/image proxy. Neither is reliably the faster one -- the CDN is a hop
    // closer, but plenty of them hotlink-block or rate-limit, and learning that
    // used to cost a whole failed request before the proxy was even asked. That
    // serial retry is the wait worth removing.
    //
    // So the first thumbnail from a host is raced: both requests go out at once
    // and whichever answers first is the one displayed. The winner is then
    // remembered per host -- hotlink and CORS policy are origin-level, the same
    // assumption the direct-playability probe below makes -- so every later
    // thumbnail from that host goes straight down the route that already
    // worked. One race per host, not one per image: racing every card would
    // double the image traffic of a whole grid to learn something we already
    // know by the second card.
    // ---------------------------------------------------------------------
    const IMAGE_DIRECT = 'direct';
    const IMAGE_PROXY = 'proxy';

    const imageRoutes = new Map();   // host -> winning route; absent = unknown
    const imageRacing = new Set();   // hosts with a race already deciding
    const imageWaiting = new Map();  // host -> images held until it decides
    let thumbSeq = 0;                // generation, so stale work can be dropped

    // A page of cards is built in one go, so every thumbnail from a host is
    // attached before the first one has come back. Sending them all down the
    // optimistic route is how the old serial retry hurt: on a host that blocks
    // us, each card paid its own failed request before asking the proxy. So
    // while a host is being decided the rest of its images wait for the answer
    // -- at most as long as the fastest route takes -- and then load once, the
    // right way round. If the race somehow stalls they go anyway.
    const RACE_PATIENCE_MS = 2500;

    // Direct is the route we'd rather settle on, so when the proxy comes home
    // first the held images give direct this much longer to answer before
    // committing to the proxy. Long enough that a provider merely a little
    // slower than same-origin still wins its hosts; short enough that one which
    // hangs -- the case this whole thing exists for -- doesn't hold up a grid.
    const DIRECT_GRACE_MS = 200;

    const imageHostOf = function(url) {
        try {
            return new URL(url, window.location.href).host;
        } catch (err) {
            return '';
        }
    };

    // Where a thumbnail from this host should be fetched from. Answers with the
    // provider while the host is still unknown -- the optimistic route, and the
    // one a race starts on anyway.
    App.videos.thumbnailUrl = function(url) {
        if (!url) return '';
        return imageRoutes.get(imageHostOf(url)) === IMAGE_PROXY
            ? (App.videos.buildImageProxyUrl(url) || url)
            : url;
    };

    // A src-less <img> counts as "unavailable", and the browser paints its alt
    // text across the thumbnail box. Since a thumbnail now waits for its host's
    // route before it gets a src, the caption is held back in a data attribute
    // and put on only once there is an image to caption -- otherwise every card
    // spells out its own title over the placeholder while the host is being
    // decided, and permanently for an item that has no thumbnail at all.
    // `token` is the generation of the attachThumbnail call that started this
    // work. A card can be recycled while its thumbnail is still being decided,
    // and the callbacks that eventually fire still hold the old element -- so
    // anything arriving for a generation the element has moved past is dropped
    // rather than painted onto whatever video the card now shows.
    const showThumbnail = function(img, url, token) {
        if (token !== undefined && img.dataset.thumbToken !== token) return;
        if (img.dataset.alt !== undefined) {
            img.alt = img.dataset.alt;
            delete img.dataset.alt;
        }
        img.src = url;
    };

    // Last resort on a route that normally works: one expired or missing image
    // shouldn't be left broken just because its host is fine in general.
    const attachProxyFallback = function(img, proxyUrl, token) {
        if (!proxyUrl) return;
        // Checked here too, not just in showThumbnail: this *replaces* whatever
        // fallback the image currently has, so a call arriving for a generation
        // the element has moved past would take away the live one and leave a
        // dead one -- the recycled card's thumbnail would then have no fallback
        // at all if it failed.
        if (token !== undefined && img.dataset.thumbToken !== token) return;
        // Held on the element so detachThumbnail can take it off again. On the
        // happy path it never fires and `once` never collects it, so a pooled
        // image would otherwise accumulate one closure per mount it has served.
        detachProxyFallback(img);
        const onError = () => { showThumbnail(img, proxyUrl, token); };
        img._thumbFallback = onError;
        img.addEventListener('error', onError, { once: true });
    };

    const detachProxyFallback = function(img) {
        if (img && img._thumbFallback) {
            img.removeEventListener('error', img._thumbFallback);
            img._thumbFallback = null;
        }
    };

    // Releases the images held for `host`. `route` is the winner, or null when
    // the race told us nothing (both routes failed, or it stalled) -- in which
    // case they take the optimistic route with the proxy behind it, exactly as
    // an undecided host used to.
    const releaseWaiting = function(host, route) {
        const waiting = imageWaiting.get(host);
        if (!waiting) return;
        imageWaiting.delete(host);
        waiting.forEach((entry) => {
            if (route === IMAGE_PROXY) {
                showThumbnail(entry.img, entry.proxyUrl, entry.token);
                return;
            }
            if (route !== IMAGE_DIRECT) attachProxyFallback(entry.img, entry.proxyUrl, entry.token);
            showThumbnail(entry.img, entry.directUrl, entry.token);
        });
    };

    // Two questions, and they don't have the same answer:
    //
    //   which is quicker *now*  -> what this image should display
    //   does direct work at all -> what the host is remembered as
    //
    // The proxy often wins the first question purely because it's same-origin:
    // the browser already holds that connection, while the provider costs a
    // fresh DNS lookup and TLS handshake. That says nothing about the provider,
    // and pinning a host to the proxy over it would push every thumbnail on the
    // page through our own server for no reason. So speed decides the pixels,
    // and capability decides the memory: direct is remembered whenever it works
    // at all, because it costs no server hop.
    //
    // Both routes are therefore fetched off-screen, and the visible image is
    // pointed at the first one home. Racing on the visible element instead
    // would abort the loser -- and the loser is the request that answers the
    // second question.
    const raceThumbnail = function(img, directUrl, proxyUrl, host, token) {
        let shown = false;
        let outstanding = 2;
        let routeFinal = false;      // the direct verdict is in; nothing can revise it
        let abandoned = false;       // took too long; a later race owns the host now
        let directSettled = false;
        let patience = null;
        let grace = null;

        const show = function(url) {
            if (shown) return;
            shown = true;
            showThumbnail(img, url, token);  // a cache hit; the probe has the bytes
        };

        // Records the host's route and lets go of everything held for it. The
        // direct verdict is final; a route taken because direct was too slow to
        // wait for is not, so a direct probe that comes home late still upgrades
        // the host rather than leaving it on the proxy for the whole session.
        //
        // Crucially this happens the moment direct answers, not when both probes
        // have finished: every thumbnail attached in the meantime is queued on
        // exactly this answer, and making them wait on the *other* probe too
        // leaves them blank for no reason.
        const settleRoute = function(route, final) {
            if (abandoned || routeFinal) return;
            routeFinal = !!final;
            if (final && patience) { clearTimeout(patience); patience = null; }
            imageRoutes.set(host, route);
            imageRacing.delete(host);
            releaseWaiting(host, route);
        };

        // Nothing usable came home in time. Show whatever the host settled on --
        // broken rather than blank, as it would have been without any of this --
        // and keep the proxy behind an untested direct.
        const giveUp = function() {
            if (shown) return;
            shown = true;
            if (imageRoutes.get(host) === IMAGE_PROXY) {
                showThumbnail(img, proxyUrl, token);
                return;
            }
            attachProxyFallback(img, proxyUrl, token);
            showThumbnail(img, directUrl, token);
        };

        const decide = function() {
            if (--outstanding > 0) return;
            if (patience) { clearTimeout(patience); patience = null; }
            if (grace) { clearTimeout(grace); grace = null; }
            giveUp();                       // no-op if either route came home
        };

        // Off-screen, and low priority: neither may take bandwidth from anything
        // the reader is already looking at.
        const newProbe = function() {
            const image = new Image();
            image.decoding = 'async';
            image.fetchPriority = 'low';
            return image;
        };

        const directProbe = newProbe();
        directProbe.referrerPolicy = 'no-referrer';
        // The direct verdict alone decides the route -- either way round. One
        // probe discovers the host's answer and every held image acts on it,
        // instead of each rediscovering it at the cost of its own request.
        directProbe.onload = function() {
            directSettled = true;
            if (grace) { clearTimeout(grace); grace = null; }
            show(directUrl);
            settleRoute(IMAGE_DIRECT, true);
            decide();
        };
        directProbe.onerror = function() {
            directSettled = true;
            if (grace) { clearTimeout(grace); grace = null; }
            // Direct is out for this host, so the proxy is the answer even if it
            // hasn't reported yet -- there is nothing else left to be.
            settleRoute(IMAGE_PROXY, true);
            decide();
        };

        const proxyProbe = newProbe();
        proxyProbe.onload = function() {
            show(proxyUrl);       // first one home gets the pixels on screen
            // Don't strand anything behind a provider that may never answer:
            // give it the grace window, then take the route that works. Marked
            // provisional, so a slow-but-working provider still wins its host
            // when it finally reports.
            if (!directSettled && !grace) {
                grace = setTimeout(function() {
                    grace = null;
                    settleRoute(IMAGE_PROXY, false);
                }, DIRECT_GRACE_MS);
            }
            decide();
        };
        proxyProbe.onerror = function() { decide(); };

        imageRacing.add(host);
        // A probe that never answers -- a hung connection rather than a refused
        // one -- must not leave the host mid-race forever, with every later
        // thumbnail queueing behind a decision that will never come. Once that
        // happens this race stops touching the shared maps entirely: the next
        // thumbnail starts a fresh one, and a late answer here must not reach in
        // and overwrite what *that* race decides.
        patience = setTimeout(function() {
            patience = null;
            if (grace) { clearTimeout(grace); grace = null; }
            if (!routeFinal) {
                abandoned = true;
                imageRacing.delete(host);
                releaseWaiting(host, imageRoutes.get(host) || null);
            }
            giveUp();
        }, RACE_PATIENCE_MS);

        directProbe.src = directUrl;
        proxyProbe.src = proxyUrl;
    };

    // Points `img` at `url` by whichever route is known to work for its host,
    // racing the two the first time that host is seen.
    App.videos.attachThumbnail = function(img, url) {
        const directUrl = url || (img && img.dataset.thumb) || '';
        if (!img) return;
        // Held back until there is an image to caption -- see showThumbnail. An
        // item with no thumbnail keeps an empty alt: the card's own title sits
        // directly beneath the box, so there is nothing for it to add.
        if (img.alt && img.dataset.alt === undefined) {
            img.dataset.alt = img.alt;
            img.alt = '';
        }
        if (!directUrl) return;
        // A cross-origin Referer is what most hotlink protection keys on, and an
        // image needs none. Sending none is what lets the direct route work at
        // all on a fair number of providers -- and the direct route is the one
        // that costs us no server hop.
        img.referrerPolicy = 'no-referrer';

        const proxyUrl = App.videos.buildImageProxyUrl(directUrl);
        const host = imageHostOf(directUrl);
        const route = imageRoutes.get(host);
        // Every attach is a new generation, so work started for a previous one
        // stops being able to touch this element.
        const token = String(++thumbSeq);
        img.dataset.thumbToken = token;

        if (route === IMAGE_PROXY) {
            showThumbnail(img, proxyUrl || directUrl, token);
            return;
        }
        if (imageRacing.has(host)) {
            // A race is already deciding for this host. Wait for it rather than
            // guessing: guessing wrong costs this image a whole failed request
            // before it even asks the route that was about to be proven.
            const waiting = imageWaiting.get(host) || [];
            waiting.push({ img: img, directUrl: directUrl, proxyUrl: proxyUrl, token: token });
            imageWaiting.set(host, waiting);
            return;
        }
        if (route === IMAGE_DIRECT || !host || !proxyUrl) {
            // Known good, or nothing to race against: take the provider and keep
            // the proxy as this image's own fallback.
            attachProxyFallback(img, proxyUrl, token);
            showThumbnail(img, directUrl, token);
            return;
        }
        raceThumbnail(img, directUrl, proxyUrl, host, token);
    };

    // Voids whatever is still in flight for this element's thumbnail. Its
    // generation moves on, so a race that settles later, or a proxy fallback
    // that fires later, finds a token that no longer matches and does nothing.
    App.videos.detachThumbnail = function(img) {
        if (!img) return;
        img.dataset.thumbToken = String(++thumbSeq);
        delete img.dataset.alt;
        detachProxyFallback(img);
    };

    // Each channel in a group sends back a different number of videos per
    // page, so a small per-channel count keeps any one channel from
    // dominating a single interleaved batch.
    const GROUP_CHANNEL_PAGE_SIZE = 4;

    // Fetches one page from every channel in a group and zips the results
    // together round-robin so the feed alternates between sources instead of
    // running through one channel's videos before moving to the next.
    const fetchGroupBatch = async function(session, signal) {
        const group = session.channel;
        const searchInput = document.getElementById('search-input');
        const query = searchInput ? searchInput.value : "";

        // Honor the per-group "Channels" multi-select filter so disabled
        // channels are skipped. Falls back to the full group when nothing is
        // selected (e.g. older sessions without the filter).
        const selectedChannels = session.options ? session.options[App.session.GROUP_CHANNELS_OPTION_ID] : null;
        const enabledIds = (Array.isArray(selectedChannels) && selectedChannels.length > 0 ?
            selectedChannels.map((opt) => opt.id) :
            group.channelIds).filter((id) => group.channelIds.includes(id));
        const signature = enabledIds.join(',');

        if (!state.groupCursors || state.groupCursors.groupId !== group.id ||
            state.groupCursors.query !== query || state.groupCursors.signature !== signature) {
            state.groupCursors = {
                groupId: group.id,
                query: query,
                signature: signature,
                channels: enabledIds.map((id) => ({ id, page: 1, hasNextPage: true }))
            };
        }

        const active = state.groupCursors.channels.filter((cursor) => cursor.hasNextPage);
        if (active.length === 0) {
            return { items: [], hasNextPage: false };
        }

        const results = await Promise.all(active.map(async (cursor) => {
            const response = await fetch('/api/videos', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    channel: cursor.id,
                    query: query || "",
                    page: cursor.page,
                    perPage: GROUP_CHANNEL_PAGE_SIZE,
                    server: session.server
                }),
                signal: signal
            });
            const data = await response.json();
            const items = data && Array.isArray(data.items) ? data.items : [];
            cursor.page++;
            cursor.hasNextPage = items.length > 0 && (data && data.pageInfo ? data.pageInfo.hasNextPage !== false : true);
            return items;
        }));

        const interleaved = [];
        const maxLen = results.reduce((max, items) => Math.max(max, items.length), 0);
        for (let i = 0; i < maxLen; i++) {
            results.forEach((items) => {
                if (items[i]) interleaved.push(items[i]);
            });
        }

        return {
            items: interleaved,
            hasNextPage: state.groupCursors.channels.some((cursor) => cursor.hasNextPage)
        };
    };

    const fetchChannelBatch = async function(session, signal) {
        const searchInput = document.getElementById('search-input');
        const query = searchInput ? searchInput.value : "";

        const body = {
            channel: session.channel.id,
            query: query || "",
            page: state.currentPage,
            perPage: state.perPage,
            server: session.server
        };

        Object.entries(session.options).forEach(([key, value]) => {
            if (Array.isArray(value)) {
                body[key] = value.map((entry) => entry.id).join(", ");
            } else if (value && value.id) {
                body[key] = value.id;
            }
        });

        const response = await fetch('/api/videos', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(body),
            signal: signal
        });
        const videos = await response.json();
        state.currentPage++;
        return {
            items: videos && Array.isArray(videos.items) ? videos.items : [],
            hasNextPage: videos && videos.pageInfo ? videos.pageInfo.hasNextPage !== false : true
        };
    };

    const fetchNextBatch = function(session, signal) {
        return session.channel.isGroup
            ? fetchGroupBatch(session, signal)
            : fetchChannelBatch(session, signal);
    };

    // ---------------------------------------------------------------------
    // Next-page prefetch
    //
    // The page after the visible one is fetched, and its thumbnails decoded,
    // as soon as the current one renders -- but it is held back until the
    // reader reaches the second-to-last row (see the virtualizer's update()).
    // So the cards that come into view are complete on arrival instead of
    // shimmering their way in while the request is still on the wire.
    // ---------------------------------------------------------------------
    const prefetch = {
        batch: null,        // fetched + warmed, waiting for the reader
        inFlight: null,     // promise of the fetch currently running
        controller: null
    };

    // One slow thumbnail must not hold a whole page back.
    const WARM_TIMEOUT_MS = 8000;

    const idle = function(fn) {
        if (typeof requestIdleCallback === 'function') requestIdleCallback(fn, { timeout: 1000 });
        else setTimeout(fn, 0);
    };

    const warmThumbnails = function(items) {
        // Warm down the route the host has already settled on -- warming a URL
        // the cards won't ask for would leave them waiting anyway.
        const urls = (items || [])
            .map((v) => v && App.videos.thumbnailUrl(v.thumb))
            .filter(Boolean);
        if (!urls.length) return Promise.resolve();
        const loads = urls.map((url) => new Promise((resolve) => {
            // Off-screen and not needed yet: low priority, started when the
            // browser is idle, so warming a page the reader hasn't reached
            // never competes with the cards (or requests) in front of them.
            idle(() => {
                const img = new Image();
                img.decoding = 'async';
                img.fetchPriority = 'low';
                // Same terms the card and the probe fetch on. Warming with a
                // Referer the real request won't send would warm the wrong
                // thing: on a hotlink-protecting host it earns a 403, which is
                // both a wasted warm and a cached refusal the probe may then be
                // handed -- pinning a host to the proxy that works direct.
                img.referrerPolicy = 'no-referrer';
                img.onload = resolve;
                img.onerror = resolve;   // the card's own retry handles failures
                img.src = url;
            });
        }));
        return Promise.race([
            Promise.all(loads),
            new Promise((resolve) => setTimeout(resolve, WARM_TIMEOUT_MS))
        ]);
    };

    const commitBatch = function(batch) {
        if (!batch) return;
        App.videos.renderVideos({ items: batch.items });
        state.hasNextPage = batch.hasNextPage;
        App.videos.updateLoadMoreState();
        App.videos.ensureViewportFilled();
        App.videos.prefetchNextBatch();   // stay one page ahead again
    };

    App.videos.prefetchNextBatch = function() {
        if (prefetch.batch || prefetch.inFlight) return Promise.resolve();
        if (!state.hasNextPage) return Promise.resolve();
        const session = App.storage.getSession();
        if (!session || !session.channel) return Promise.resolve();

        prefetch.controller = new AbortController();
        const signal = prefetch.controller.signal;
        prefetch.inFlight = (async () => {
            try {
                const batch = await fetchNextBatch(session, signal);
                await warmThumbnails(batch.items);
                if (!signal.aborted) prefetch.batch = batch;
            } catch (err) {
                if (err.name !== 'AbortError') {
                    console.error("Failed to prefetch videos:", err);
                }
            } finally {
                prefetch.inFlight = null;
                prefetch.controller = null;
            }
        })();
        return prefetch.inFlight;
    };

    // Throws away a video's resolved formats and asks the server again. Media
    // URLs are commonly signed with an expiry (`?secure=<unix ts>-<token>`), so
    // formats resolved earlier -- in a long-open tab, or held in the session
    // cache -- eventually start returning 403 even though nothing is wrong with
    // the video itself. The player calls this once before giving up.
    App.videos.refreshFormats = function(video) {
        if (!video || typeof video !== 'object') return Promise.resolve(null);
        const cacheKey = video.id || video.url;
        if (cacheKey) metaCache.delete(cacheKey);
        video.meta = null;
        return App.videos.ensureFormats(video);
    };

    // Called by the virtualizer once the reader is within two rows of the end.
    App.videos.releasePrefetched = function() {
        if (!prefetch.batch || state.isLoading) return false;
        const batch = prefetch.batch;
        prefetch.batch = null;
        commitBatch(batch);
        return true;
    };

    // Drops anything in flight or held, for when the result set changes out
    // from under it (new search, channel, or filters).
    App.videos.resetPrefetch = function() {
        if (prefetch.controller) prefetch.controller.abort();
        prefetch.batch = null;
        prefetch.inFlight = null;
        prefetch.controller = null;
    };

    // Is the reader actually out of content? True when nothing is rendered yet,
    // when the page is too short to scroll, or when they're already in the last
    // two rows. Anything else -- the sentinel firing from a stale observation at
    // startup, most of all -- means the prefetched page stays held.
    const needsContentNow = function() {
        if (!state.loadedVideos.length) return true;
        const docHeight = document.documentElement.scrollHeight;
        if (docHeight <= (window.innerHeight || 0) + 120) return true;
        return !!(App.virtualGrid && App.virtualGrid.isNearEnd && App.virtualGrid.isNearEnd());
    };

    // Guards the whole of loadVideos, including the awaits before the fetch
    // starts. state.isLoading can't do this job: it is the UI's "a request is
    // out" signal and is only raised around the fetch itself, so every caller
    // that arrived while we were waiting on the prefetch would sail past it and
    // start a duplicate page load -- each of which renders, refills the
    // viewport, and calls back in here. On a short desktop page that amplifies
    // until the tab stops responding.
    let loadRunning = false;

    // Renders the next page: the prefetched one when it's ready (the common
    // case), otherwise fetched here and rendered as it lands. `opts.force` is for
    // callers that know they need content and can't be judged by where the grid
    // is scrolled -- the reels feed running out of slides, or the Load more
    // button being pressed.
    App.videos.loadVideos = async function(opts) {
        const force = !!(opts && opts.force);
        // The favorites grid pages out of localStorage, not the server, but
        // rides the same sentinel and load-more button to get there.
        if (App.favoritesView && App.favoritesView.isActive()) {
            App.favoritesView.loadNext();
            return;
        }
        const session = App.storage.getSession();
        if (!session || !session.channel) return;
        if (loadRunning || state.isLoading) return;
        loadRunning = true;

        try {
            if (prefetch.batch || prefetch.inFlight) {
                // A page is already here or on its way; revealing it before the
                // reader gets near the end would defeat the point of holding it.
                if (!force && !needsContentNow()) return;
                if (App.videos.releasePrefetched()) return;
                if (prefetch.inFlight) {
                    // Wait for it rather than asking for the same page twice --
                    // the fetch advances the page cursor, so a second request
                    // here would skip a page entirely.
                    await prefetch.inFlight;
                    if (App.videos.releasePrefetched()) return;
                }
            }
            if (!state.hasNextPage) return;

            state.isLoading = true;
            App.videos.updateLoadMoreState();
            state.currentLoadController = new AbortController();
            const batch = await fetchNextBatch(session, state.currentLoadController.signal);
            state.isLoading = false;
            commitBatch(batch);
        } catch (err) {
            if (err.name !== 'AbortError') {
                console.error("Failed to load videos:", err);
            }
        } finally {
            loadRunning = false;
            state.isLoading = false;
            state.currentLoadController = null;
            App.videos.updateLoadMoreState();
        }
    };

    // ---------------------------------------------------------------------
    // Cards
    //
    // A card is built once and then reused: the virtualizer keeps a pool of
    // them and rebinds one to a new video rather than constructing another
    // (see acquire/release in App.virtualGrid). Two things follow from that,
    // and both are load-bearing.
    //
    // Nothing on a card may close over the video it is currently showing --
    // the card outlives the video. Every interaction is therefore handled by
    // one delegated listener per event type on the grid, which resolves the
    // video from the card under the pointer (see bindGridDelegation).
    //
    // And every card has the same shape whatever video it shows: the optional
    // parts -- live badge, uploader, duration, tags -- are always present and
    // hidden when unused, so any pooled card fits any video.
    // ---------------------------------------------------------------------
    const CARD_TEMPLATE_HTML = `
        <span class="live-badge" hidden>● LIVE</span>
        <button class="favorite-btn" type="button" data-action="favorite" aria-pressed="false" aria-label="Add to favorites">♡</button>
        <button class="video-menu-btn" type="button" data-action="menu" aria-haspopup="true" aria-expanded="false" aria-label="More options">⋯</button>
        <div class="video-menu" role="menu">
            <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>
        <div class="video-thumb">
            <img alt="" loading="lazy" decoding="async">
            <div class="video-loading" aria-hidden="true">
                <div class="video-loading-spinner"></div>
            </div>
            <button class="video-uploader uploader-link" type="button" data-action="uploader" hidden></button>
            <span class="video-duration" hidden></span>
        </div>
        <h4 class="video-title"><span class="video-title-text"></span></h4>
        <div class="video-tags" hidden></div>
    `;

    // Parsed once. Cloning this is roughly six times cheaper than asking the
    // parser to read the same markup again for every card.
    let cardTemplate = null;

    // The parts bindCard writes to, found once when the card is created rather
    // than looked up again on every rebind. Searching the subtree seven times
    // per mount was most of what rebinding cost.
    const cardRefs = function(card) {
        if (!card._refs) {
            card._refs = {
                live: card.querySelector('.live-badge'),
                favorite: card.querySelector('.favorite-btn'),
                title: card.querySelector('.video-title-text'),
                uploader: card.querySelector('.video-uploader'),
                duration: card.querySelector('.video-duration'),
                tags: card.querySelector('.video-tags'),
                img: card.querySelector('img')
            };
        }
        return card._refs;
    };

    const createCardShell = function() {
        if (!cardTemplate) {
            cardTemplate = document.createElement('template');
            cardTemplate.innerHTML = `<div class="video-card">${CARD_TEMPLATE_HTML}</div>`;
        }
        const card = cardTemplate.content.firstElementChild.cloneNode(true);
        cardRefs(card);
        return card;
    };

    // Tag buttons are the only part whose *count* varies, so they are adjusted
    // rather than rebuilt: usually the card already has the right number.
    const bindTags = function(container, tags) {
        const list = Array.isArray(tags) ? tags.filter((tag) => tag) : [];
        container.hidden = list.length === 0;
        while (container.childElementCount > list.length) {
            container.removeChild(container.lastElementChild);
        }
        while (container.childElementCount < list.length) {
            const button = document.createElement('button');
            button.className = 'video-tag';
            button.type = 'button';
            button.dataset.action = 'tag';
            container.appendChild(button);
        }
        // Only the label is written: the delegated handler reads the tag off
        // the button's own text. Writing it a second time into a data attribute
        // cost more than everything else in a rebind put together -- dataset is
        // a proxy, and this runs once per tag per card.
        list.forEach((tag, index) => {
            const button = container.children[index];
            if (button.textContent !== tag) button.textContent = tag;
        });
    };

    // Points an existing card at `v`. This is the whole per-mount cost.
    App.videos.bindCard = function(card, v) {
        const refs = cardRefs(card);
        card.dataset.videoId = v.id;
        cardVideo.set(card, v);

        refs.live.hidden = !v.isLive;

        const favoriteKey = App.favorites.getKey(v);
        refs.favorite.dataset.favKey = favoriteKey || '';
        refs.favorite.dataset.favUrl = v.url || '';
        // By either identity: a favorite imported from a backup is keyed by its
        // URL, not by the id this card carries.
        App.favorites.setButtonState(refs.favorite, !!favoriteKey && App.favorites.has(v));

        refs.title.textContent = v.title || '';

        const uploaderText = v.uploader || '';
        refs.uploader.hidden = !uploaderText;
        refs.uploader.textContent = uploaderText;
        refs.uploader.dataset.uploader = uploaderText;

        const durationText = App.videos.formatDuration(v.duration);
        refs.duration.hidden = !durationText;
        refs.duration.textContent = durationText;

        bindTags(refs.tags, v.tags);

        // Set before attachThumbnail, which holds the caption back until there
        // is an image to caption.
        refs.img.alt = v.title || '';
        return card;
    };

    // A card ready to show `v`, thumbnail and all.
    App.videos.buildCard = function(v, options) {
        const card = App.videos.bindCard(createCardShell(), v);
        // The layout probe (see shapeHeight) needs the card's shape, never its
        // pixels: it measures against the CSS 16:9 placeholder and is removed in
        // the same frame, so loading a thumbnail for it -- let alone racing one
        // -- would be pure waste.
        if (!(options && options.skipThumbnail)) {
            App.videos.attachThumbnail(cardRefs(card).img, v.thumb);
        }
        return card;
    };

    // Returns a card to a state where it shows nothing and remembers nothing,
    // ready to be bound to another video. Anything left behind here surfaces as
    // one video's content on another video's card.
    App.videos.resetCard = function(card) {
        card.classList.remove('is-loading', 'is-title-active', 'is-revealing', 'is-previewing');
        delete card.dataset.videoId;
        delete card.dataset.titleFocused;
        delete card.dataset.titleHovered;
        delete card.dataset.titlePrimary;
        // The player stamps this to recognise the card it was opened from; a
        // recycled card must stop answering to it.
        delete card.dataset.playerToken;

        // Added by favorites.toggle and normally taken off by animationend --
        // which never fires here, because release() detaches the card first and
        // a detached element runs no animations. Left on, the next video this
        // card shows replays a "just favourited" pop nobody asked for.
        const favorite = cardRefs(card).favorite;
        if (favorite) favorite.classList.remove('just-favorited');

        const menu = card.querySelector('.video-menu');
        if (menu) menu.classList.remove('open');
        const menuBtn = card.querySelector('.video-menu-btn');
        if (menuBtn) menuBtn.setAttribute('aria-expanded', 'false');

        const titleWrap = card.querySelector('.video-title');
        if (titleWrap) titleWrap.classList.remove('has-marquee');
        const titleText = card.querySelector('.video-title-text');
        if (titleText) {
            titleText.style.removeProperty('--marquee-distance');
            titleText.style.removeProperty('--marquee-duration');
        }

        // The hover preview (enhance.js) parks a <video> inside the card.
        const preview = card.querySelector('.card-preview');
        if (preview) {
            try { preview.pause(); } catch (err) { /* ignore */ }
            preview.remove();
        }

        const img = cardRefs(card).img;
        if (img) {
            // Voids anything still in flight for the old thumbnail -- a pending
            // race, a proxy fallback -- so it cannot land on the next video.
            App.videos.detachThumbnail(img);
            if (img._revealHandler) {
                img.removeEventListener('load', img._revealHandler);
                img._revealHandler = null;
            }
            img.classList.remove('is-loaded');
            img.style.removeProperty('aspect-ratio');
            img.removeAttribute('src');
            img.alt = '';
        }
        return card;
    };

    // One listener per event type, on the grid, for every card in it.
    let gridDelegated = false;

    const cardFor = function(target) {
        const card = target && target.closest ? target.closest('.video-card') : null;
        return card && cardVideo.has(card) ? card : null;
    };

    const bindGridDelegation = function() {
        if (gridDelegated) return;
        const grid = document.getElementById('video-grid');
        if (!grid) return;
        gridDelegated = true;

        grid.addEventListener('click', (event) => {
            const card = cardFor(event.target);
            if (!card) return;
            const v = cardVideo.get(card);
            const actionEl = event.target.closest('[data-action]');
            const action = actionEl && card.contains(actionEl) ? actionEl.dataset.action : '';
            if (action) {
                // The document-level handler closes every open menu; stopping
                // here is what lets the menu this click just opened stay open.
                event.stopPropagation();
            }
            switch (action) {
                case 'favorite':
                    App.favorites.toggle(v);
                    return;
                case 'uploader':
                    App.videos.handleSearch(actionEl.dataset.uploader || actionEl.textContent || '');
                    return;
                case 'tag':
                    App.videos.handleSearch(actionEl.textContent || '');
                    return;
                case 'menu':
                    App.videos.toggleMenu(card.querySelector('.video-menu'), actionEl);
                    return;
                case 'info':
                    App.videos.closeAllMenus();
                    App.ui.openInfo(v);
                    return;
                case 'download':
                    App.videos.closeAllMenus();
                    App.videos.downloadVideo(v);
                    return;
            }
            if (card.classList.contains('is-loading')) return;
            card.classList.add('is-loading');
            App.player.open(v, { originEl: card });
        });

        const setTitleFlag = function(event, flag, value) {
            const card = cardFor(event.target);
            if (!card) return;
            // pointerover/pointerout also fire while moving between a card's own
            // children; only a crossing of the card's own edge counts.
            if (event.relatedTarget && card.contains(event.relatedTarget)) return;
            card.dataset[flag] = value;
            updateTitleActive(card);
        };

        grid.addEventListener('focusin', (event) => setTitleFlag(event, 'titleFocused', '1'));
        grid.addEventListener('focusout', (event) => setTitleFlag(event, 'titleFocused', '0'));
        if (titleEnv.useHoverFocus) {
            // mouseenter/mouseleave don't bubble, so they can't be delegated;
            // pointerover/pointerout do, and the containment check above turns
            // them into the same thing.
            grid.addEventListener('pointerover', (event) => setTitleFlag(event, 'titleHovered', '1'));
            grid.addEventListener('pointerout', (event) => setTitleFlag(event, 'titleHovered', '0'));
        }
    };

    // Appends a freshly-loaded page of videos. The card DOM is *not* built here;
    // we only grow the data buffer, extend the masonry layout for the new
    // items, then let the virtualizer mount whatever currently falls inside the
    // viewport window.
    App.videos.renderVideos = function(videos) {
        const grid = document.getElementById('video-grid');
        if (!grid) return;
        App.virtualGrid.ensureInit();

        const items = videos && Array.isArray(videos.items) ? videos.items : [];
        // The server's copy of a video it already has saved is the better one,
        // so bring the favorites up to date from it. Skipped while the favorites
        // grid is the thing being rendered -- those items *are* the favorites,
        // reshaped for the grid, and reconciling them against themselves would
        // only write back what they came from.
        if (App.favorites && typeof App.favorites.reconcile === 'function' &&
            !(App.favoritesView && App.favoritesView.isActive())) {
            App.favorites.reconcile(items);
        }
        const startLen = state.loadedVideos.length;
        items.forEach((v) => {
            if (state.renderedVideoIds.has(v.id)) return;
            state.renderedVideoIds.add(v.id);
            state.loadedVideos.push(v);
        });
        if (state.loadedVideos.length > startLen) {
            App.virtualGrid.packFrom(startLen);
        }
        App.virtualGrid.update();

        if (App.feed && typeof App.feed.renderSlides === 'function') {
            App.feed.renderSlides();
        }
        App.videos.ensureViewportFilled();
    };

    // Finds whichever rendered video card is closest to the viewport's
    // vertical center, used to open feed mode on the video the user is
    // currently looking at instead of always starting from the top.
    App.videos.getFocusedVideoId = function() {
        const grid = document.getElementById('video-grid');
        if (!grid) return null;
        const cards = Array.from(grid.querySelectorAll('.video-card'));
        if (!cards.length) return null;

        const viewportCenter = window.innerHeight / 2;
        let best = null;
        let bestDistance = Infinity;
        cards.forEach((card) => {
            const rect = card.getBoundingClientRect();
            if (rect.bottom <= 0 || rect.top >= window.innerHeight) return;
            const distance = Math.abs((rect.top + rect.height / 2) - viewportCenter);
            if (distance < bestDistance) {
                bestDistance = distance;
                best = card;
            }
        });

        return (best || cards[0]).dataset.videoId || null;
    };

    App.videos.handleSearch = function(value) {
        if (typeof value === 'string') {
            const searchInput = document.getElementById('search-input');
            if (searchInput && searchInput.value !== value) {
                searchInput.value = value;
            }
            // Keep the clear button in sync without re-dispatching an `input`
            // event (which would re-trigger the debounced reload listener).
            const clearBtn = document.getElementById('search-clear-btn');
            if (searchInput && clearBtn) {
                const hasValue = searchInput.value.trim().length > 0;
                clearBtn.classList.toggle('is-visible', hasValue);
                clearBtn.disabled = !hasValue;
            }
        }
        // A search is a new result set, so it leaves the favorites grid.
        if (App.favoritesView && App.favoritesView.isActive()) {
            App.favoritesView.close({ silent: true });
        }
        App.videos.resetGrid();
        App.videos.loadVideos();
    };

    // Empties the grid back to "nothing loaded yet", without deciding what
    // fills it next -- the caller does that.
    App.videos.resetGrid = function() {
        // The held/in-flight page belongs to the old result set.
        App.videos.resetPrefetch();
        state.currentPage = 1;
        state.hasNextPage = true;
        state.renderedVideoIds.clear();
        state.loadedVideos = [];
        state.groupCursors = null;
        App.virtualGrid.reset();
        if (App.feed && typeof App.feed.reset === 'function') {
            App.feed.reset();
        }
        App.videos.updateLoadMoreState();
    };

    App.videos.resetAndReload = function() {
        if (state.currentLoadController) {
            state.currentLoadController.abort();
            state.currentLoadController = null;
            state.isLoading = false;
        }
        // Switching source/channel/filters means leaving the favorites grid.
        if (App.favoritesView && App.favoritesView.isActive()) {
            App.favoritesView.close({ silent: true });
        }
        App.videos.resetGrid();
        App.videos.loadVideos();
    };

    App.videos.ensureViewportFilled = function() {
        if (!state.hasNextPage || state.isLoading) return;
        const grid = document.getElementById('video-grid');
        if (!grid) return;
        const docHeight = document.documentElement.scrollHeight;
        if (docHeight <= window.innerHeight + 120) {
            window.setTimeout(() => App.videos.loadVideos(), 0);
        }
    };

    // ---------------------------------------------------------------------
    // Virtualized masonry grid
    //
    // The full set of loaded videos lives in state.loadedVideos. Only the cards
    // whose computed position falls within the viewport (plus an overscan
    // buffer) are kept in the DOM; the rest are unmounted. The container is
    // given an explicit pixel height and every card is absolutely positioned at
    // a precomputed (top,left), so:
    //   * the scrollbar and scroll position are identical to a fully-rendered
    //     grid, and
    //   * mounting/unmounting a card never moves any other card -- positions are
    //     assigned once and never change -- so there is no scroll jank.
    //
    // Thumbnails keep their natural aspect ratio (not cropped), so a card's real
    // height isn't known until its image loads. We place each card with a 16:9
    // estimate first, then once the image loads we correct that card's height
    // and shift only the cards below it *in the same column* (each column is an
    // independent vertical stack), so a correction never disturbs other columns
    // or anything above it. Columns are assigned once and never change.
    // ---------------------------------------------------------------------
    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
        const aspectCache = new Map(); // video id -> thumbnail width/height, once loaded
        let colItems = [];           // col -> ordered list of item indices in that column
        let colBottoms = [];         // running bottom y of each column
        let cols = 0, colWidth = 0, gap = 16, padX = 24, padY = 24;
        let initialized = false;
        let rafPending = false;
        let lastAnchor = null;       // reader's place, refreshed on every scroll pass
        let heldAnchor = null;       // anchor frozen while a resize settles
        // Viewports of cards kept mounted off-screen. Narrowing this during a
        // fling looks like an obvious saving and measures as the opposite: a
        // tight window means cards leave and re-enter it as the viewport moves,
        // and the remounting costs far more than the painting it avoids. Tried
        // at 0.25 -- mounts went from 88 to 155 and blocked time from 3.6s to
        // 4.3s. It stays generous on purpose.
        const OVERSCAN = 1.2;

        const grid = () => document.getElementById('video-grid');

        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);
            padX = mobile ? 16 : (large ? 48 : 24);
            padY = mobile ? 16 : (large ? 32 : 24);
            // We own positioning, so neutralize the CSS grid + padding and read
            // the resulting content width (which still honors max-width:auto
            // centering).
            el.style.display = 'block';
            el.style.position = 'relative';
            el.style.padding = '0';
            const inner = el.clientWidth - padX * 2;
            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.
            // 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;
        };

        const signatureOf = function(v) {
            const hasTags = Array.isArray(v.tags) && v.tags.some((t) => t);
            return [Math.round(colWidth), v.isLive ? 1 : 0, hasTags ? 1 : 0,
                v.uploader ? 1 : 0, (v.duration > 0) ? 1 : 0].join('|');
        };

        // Height of a card of `v`'s shape at the current column width, using the
        // CSS 16:9 thumbnail placeholder (the image isn't loaded in the probe).
        // Measured once per shape, then cached.
        const shapeHeight = function(v) {
            const sig = signatureOf(v);
            const cached = heightCache.get(sig);
            if (cached != null) return cached;
            const el = grid();
            if (!el) return 240;
            const probe = App.videos.buildCard(v, { skipThumbnail: true });
            probe.style.position = 'absolute';
            probe.style.visibility = 'hidden';
            probe.style.left = '-99999px';
            probe.style.top = '0';
            probe.style.width = colWidth + 'px';
            el.appendChild(probe);
            const h = probe.getBoundingClientRect().height;
            el.removeChild(probe);
            heightCache.set(sig, h || 240);
            return h || 240;
        };

        // Estimated height of item `v`. Once a thumbnail has loaded we know its
        // real aspect ratio (recorded in aspectCache by mount()), which is
        // column-width independent -- so we swap the shape probe's 16:9
        // placeholder for the real thumbnail height instead of falling back to
        // the 16:9 guess. That matters most on a re-pack (orientation change):
        // without it every card above the viewport reverts to a guess, and the
        // corrections trickling back in as images reload drag the page out from
        // under the reader. The per-card correct() below still fixes whatever is
        // left (title wrapping, tag rows).
        const heightOf = function(v) {
            const base = shapeHeight(v);
            const aspect = (v && v.id != null) ? aspectCache.get(String(v.id)) : null;
            if (!aspect) return base;
            return Math.max(1, base - colWidth * 9 / 16 + colWidth / aspect);
        };

        const setContainerHeight = function() {
            const el = grid();
            if (!el) return;
            const maxBottom = colBottoms.length ? Math.max.apply(null, colBottoms) : padY;
            el.style.height = Math.max(0, maxBottom - gap + padY) + 'px';
        };

        // Assigns positions to items [start, end). Earlier items keep their
        // positions because colBottoms carries forward unchanged. Each item is
        // assigned to the currently-shortest column and stays there for good.
        const packFrom = function(start) {
            if (!cols) { if (!measureMetrics()) return; }
            if (!colBottoms.length) colBottoms = new Array(cols).fill(padY);
            if (!colItems.length) colItems = Array.from({ length: cols }, () => []);
            for (let i = start; i < state.loadedVideos.length; i++) {
                const v = state.loadedVideos[i];
                const h = heightOf(v);
                let col = 0;
                for (let c = 1; c < cols; c++) {
                    if (colBottoms[c] < colBottoms[col]) col = c;
                }
                const top = colBottoms[col];
                layout[i] = {
                    top,
                    left: padX + col * (colWidth + gap),
                    width: colWidth,
                    height: h,
                    col,
                    posInCol: colItems[col].length
                };
                colItems[col].push(i);
                colBottoms[col] = top + h + gap;
            }
            setContainerHeight();
            // A page has just landed -- its JSON and thumbnails were prefetched,
            // so build its cards too while there is time, rather than when the
            // reader arrives at them.
            prepareAhead();
        };

        // Replaces item i's estimated height with its real (post-image-load)
        // height and slides every card below it in the same column by the delta.
        // Other columns and everything above are untouched -> no global reflow.
        const correct = function(i) {
            const card = mounted.get(i);
            const l = layout[i];
            if (!card || !l) return;
            const real = card.getBoundingClientRect().height;
            if (!real || Math.abs(real - l.height) < 1) return;
            const delta = real - l.height;
            l.height = real;
            const list = colItems[l.col];
            for (let k = l.posInCol + 1; k < list.length; k++) {
                const j = list[k];
                layout[j].top += delta;
                const mc = mounted.get(j);
                if (mc) mc.style.top = layout[j].top + 'px';
            }
            colBottoms[l.col] += delta;
            setContainerHeight();
            scheduleUpdate();
        };

        const place = function(card, l) {
            card.style.position = 'absolute';
            card.style.top = l.top + 'px';
            card.style.left = l.left + 'px';
            card.style.width = l.width + 'px';
        };

        // Cards are pooled, not thrown away: building one costs ~250us of
        // parsing and allocation, rebinding an existing one ~4us, and scrolling
        // a grid does nothing but mount and unmount. Bounded at roughly twice
        // the mounted window so a long session can't grow the pool without end.
        const pool = [];
        const POOL_MAX = 60;
        let builtCards = 0;
        let recycledCards = 0;
        let preparedCards = 0;

        // ---------------------------------------------------------------
        // Flinging
        //
        // A card that flies past costs far more than it costs to build. Its
        // thumbnail is a request, a decode and a height correction; its title
        // is a forced layout; its formats are a yt-dlp extraction on the
        // server. Every one of those is work for a video the reader has not
        // looked at, and during a fast scroll there are dozens of them.
        //
        // So a mount while flinging only *places* the card -- it takes its
        // space in the layout, at the right size, with its text. Everything
        // that costs is deferred to the moment the scroll settles, and only
        // for the cards still on screen by then. Anything scrolled past in the
        // meantime is unmounted having cost almost nothing.
        // ---------------------------------------------------------------
        const FLING_PX_PER_MS = 1.6;   // ~1600px/s, well past a deliberate scroll
        const SETTLE_MS = 140;
        let flinging = false;
        let lastScrollY = 0;
        let lastScrollAt = 0;
        let settleTimer = null;
        const unfilled = new Set();    // mounted indices still waiting to be filled

        const noteScroll = function() {
            const now = performance.now();
            const y = window.scrollY;
            const dt = now - lastScrollAt;
            if (dt > 0 && lastScrollAt) {
                flinging = (Math.abs(y - lastScrollY) / dt) > FLING_PX_PER_MS;
            }
            lastScrollY = y;
            lastScrollAt = now;
            if (settleTimer) clearTimeout(settleTimer);
            settleTimer = setTimeout(settle, SETTLE_MS);
        };

        // DOM work cannot leave the main thread -- no worker can touch it -- so
        // "smooth" is not a matter of doing it elsewhere but of never holding
        // the thread long enough to miss a frame. Both queues below are
        // therefore drained against a budget: a few cards per frame, the rest
        // carried to the next one. Total work is unchanged; what changes is
        // that it stops arriving in one lump.
        const FRAME_BUDGET_MS = 4;

        const settle = function() {
            settleTimer = null;
            flinging = false;
            drainFills();
            warmPool();
            prepareAhead();
        };

        // Filling every deferred card at once -- which is what settling used to
        // do -- just moves the stall from during the fling to the end of it.
        const drainFills = function() {
            const started = performance.now();
            const queued = Array.from(unfilled);
            for (let k = 0; k < queued.length; k++) {
                if (performance.now() - started >= FRAME_BUDGET_MS) break;
                const i = queued[k];
                const card = mounted.get(i);
                if (card) fill(i, card, state.loadedVideos[i]);
                else unfilled.delete(i);
            }
            if (unfilled.size) requestAnimationFrame(drainFills);
        };

        // Cards entering the window, mounted a few per frame. A fast scroll can
        // bring a dozen or more into range at once, and mounting them in one
        // callback is a frame missed no matter how cheap each card is.
        let mountQueue = [];

        const drainMounts = function() {
            const started = performance.now();
            // One insertion for the whole frame's worth of cards rather than one
            // per card: the browser gets a single subtree to take in.
            const batch = document.createDocumentFragment();
            const placed = [];
            while (mountQueue.length && performance.now() - started < FRAME_BUDGET_MS) {
                const i = mountQueue.shift();
                const card = mount(i, batch);
                if (card) placed.push([i, card]);
            }
            if (placed.length) grid().appendChild(batch);
            // Filling reads layout, so it happens after the batch is in.
            placed.forEach(([i, card]) => {
                const v = state.loadedVideos[i];
                if (flinging) unfilled.add(i);
                else fill(i, card, v);
            });
            if (mountQueue.length) requestAnimationFrame(drainMounts);
        };

        // Cards built ahead of being needed, while nothing else is happening,
        // so a mount during a scroll is always the cheap rebind and never the
        // expensive construction. The page already prefetches the next page's
        // JSON and thumbnails (see prefetchNextBatch); this is the same idea
        // applied to the DOM those items will need.
        const POOL_WARM_TARGET = 24;

        const warmPool = function() {
            if (pool.length >= POOL_WARM_TARGET) return;
            idle(() => {
                const deadline = performance.now() + 3;
                while (pool.length < POOL_WARM_TARGET && performance.now() < deadline) {
                    pool.push(createCardShell());
                }
                if (pool.length < POOL_WARM_TARGET) warmPool();
            });
        };

        // Cards for videos just past the window, built and bound to their video
        // ahead of time. This is as close to "prepare the next page off-thread"
        // as a browser allows: the DOM itself can only ever be built on the main
        // thread, so the saving comes from doing it while nothing else is
        // happening rather than during the scroll that needs it.
        const PREPARE_AHEAD = 12;
        const prepared = new Map();   // video id -> card, ready to place

        let preparing = false;

        const prepareAhead = function() {
            if (preparing) return;      // one idle pass at a time, not one per call
            preparing = true;
            idle(() => {
                preparing = false;
                const videos = state.loadedVideos;
                if (!videos.length) return;
                // Start from the last mounted index: the cards after it are the
                // ones the reader is heading towards.
                let highest = -1;
                mounted.forEach((card, i) => { if (i > highest) highest = i; });
                const deadline = performance.now() + 3;
                for (let i = highest + 1; i < videos.length && i <= highest + PREPARE_AHEAD; i++) {
                    if (performance.now() >= deadline) break;
                    const v = videos[i];
                    if (!v || mounted.has(i) || prepared.has(String(v.id))) continue;
                    const card = pool.pop() || createCardShell();
                    App.videos.bindCard(card, v);
                    prepared.set(String(v.id), card);
                }
            });
        };

        // Hands back a card already bound to this video, if one was prepared.
        const takePrepared = function(v) {
            const key = String(v.id);
            const card = prepared.get(key);
            if (!card) return null;
            prepared.delete(key);
            // Favouriting may have happened since it was prepared, and the heart
            // is the one part of a card that changes without the video changing.
            App.favorites.setButtonState(cardRefs(card).favorite,
                !!App.favorites.getKey(v) && App.favorites.has(v));
            return card;
        };

        const dropPrepared = function() {
            prepared.forEach((card) => {
                App.videos.resetCard(card);
                if (pool.length < POOL_MAX) pool.push(card);
            });
            prepared.clear();
        };

        const acquire = function(v) {
            const ready = takePrepared(v);
            if (ready) {
                preparedCards++;
                return ready;
            }
            const card = pool.pop();
            if (!card) {
                builtCards++;
                return App.videos.buildCard(v, { skipThumbnail: true });
            }
            recycledCards++;
            App.videos.bindCard(card, v);
            return card;
        };

        const release = function(card) {
            resolveObserver.unobserve(card);
            if (titleObserver) {
                titleObserver.unobserve(card);
                titleVisibility.delete(card);
            }
            if (card._revealAnim) {
                card.removeEventListener('animationend', card._revealAnim);
                card._revealAnim = null;
            }
            card.remove();
            cardVideo.delete(card);
            App.videos.resetCard(card);
            if (pool.length < POOL_MAX) pool.push(card);
        };

        const mount = function(i, batch) {
            if (mounted.has(i)) return null;
            const v = state.loadedVideos[i];
            const l = layout[i];
            if (!v || !l) return null;
            const card = acquire(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');
                // Kept so release can take it off again: a card recycled before
                // the animation ends would otherwise carry the listener for the
                // rest of its life.
                const onRevealEnd = () => card.classList.remove('is-revealing');
                card._revealAnim = onRevealEnd;
                card.addEventListener('animationend', onRevealEnd, { once: true });
            }
            (batch || grid()).appendChild(card);
            mounted.set(i, card);
            if (batch) return card;      // the caller fills, once the batch is in
            if (flinging) unfilled.add(i);
            else fill(i, card, v);
            return card;
        };

        // The part of a mount that costs: the thumbnail, the title measurement
        // and the format resolve the observer triggers.
        const fill = function(i, card, v) {
            if (!card || !v) return;
            unfilled.delete(i);
            const img = cardRefs(card).img;
            App.videos.attachThumbnail(img, v.thumb);
            // Once the thumbnail loads, drop the 16:9 placeholder so it shows at
            // its true aspect ratio, clear the shimmer, then correct the height.
            if (img) {
                const reveal = () => {
                    // Release nulls this, so a reveal already queued for a frame
                    // that lands after the card was rebound does nothing --
                    // covers the requestAnimationFrame path, which unlike the
                    // load listener cannot simply be removed.
                    if (img._revealHandler !== reveal) return;
                    img.style.aspectRatio = 'auto';
                    img.classList.add('is-loaded');
                    // Remember the real aspect ratio so any later re-pack (see
                    // heightOf) can place this card at its true height straight
                    // away instead of re-guessing 16:9.
                    if (v.id != null && img.naturalWidth && img.naturalHeight) {
                        aspectCache.set(String(v.id), img.naturalWidth / img.naturalHeight);
                    }
                    if (mounted.get(i) === card) correct(i);
                };
                // Held on the element so release can remove it: this closes
                // over `v` and `i`, and a recycled image firing it again would
                // file the new picture's dimensions under the old video's id.
                img._revealHandler = reveal;
                if (img.complete && img.naturalHeight > 0) requestAnimationFrame(reveal);
                else img.addEventListener('load', reveal);
            }
            // Marquee + direct-playability probe only matter for on-screen cards.
            requestAnimationFrame(() => { if (mounted.get(i) === card) measureTitle(card); });
            resolveObserver.observe(card);
        };

        const unmount = function(i) {
            const card = mounted.get(i);
            if (!card) return;
            mounted.delete(i);
            unfilled.delete(i);
            release(card);
        };

        // Mounts cards intersecting the viewport window, unmounts the rest.
        const update = function() {
            const el = grid();
            if (!el || !state.loadedVideos.length) return;
            const rectTop = el.getBoundingClientRect().top; // container top vs viewport
            const vh = window.innerHeight || 800;
            const viewTop = -rectTop;                       // viewport top in container space
            const start = viewTop - vh * OVERSCAN;
            const end = viewTop + vh * (1 + OVERSCAN);
            let anchorIndex = -1;
            let anchorTop = Infinity;
            // Everything leaving the window is released before anything entering
            // it is mounted, so the cards just freed are available to the cards
            // arriving. Mounting first -- which is what walking the list in
            // index order does when scrolling up -- finds the pool empty and
            // builds a card it was about to be handed.
            const entering = [];
            for (let i = 0; i < layout.length; i++) {
                const l = layout[i];
                if (!l) continue;
                const visible = l.top < end && (l.top + l.height) > start;
                if (visible) {
                    if (!mounted.has(i)) entering.push(i);
                } else if (mounted.has(i)) {
                    unmount(i);
                }
                // Topmost card still crossing the viewport top: the reader's
                // place in the list, kept fresh on every scroll pass (see
                // lastAnchor).
                if (l.top + l.height > viewTop && l.top < anchorTop) {
                    anchorTop = l.top;
                    anchorIndex = i;
                }
            }
            // Unmounting already happened above, so the pool is stocked before
            // anything asks it for a card.
            mountQueue = entering;
            drainMounts();
            // Frozen while a resize settles: the browser moves the scroll
            // position itself during a rotation, and tracking that would replace
            // the reader's real place with wherever the browser landed.
            if (!heldAnchor) {
                lastAnchor = anchorIndex >= 0 ? { index: anchorIndex, offsetTop: anchorTop - viewTop } : null;
            }
            // Hand the prefetched page over once the reader reaches the
            // second-to-last row: it was fetched and its thumbnails decoded a
            // page ago, so the new cards appear finished rather than loading.
            if (App.videos.releasePrefetched && isNearEnd(viewTop, vh)) {
                App.videos.releasePrefetched();
            }
        };

        // True once the second-to-last row has come into view. Deliberately not
        // "the topmost visible card is in the last two rows": a desktop viewport
        // shows several rows at once, so by that measure the reader would hit the
        // bottom of the list without the test ever passing.
        const isNearEnd = function(viewTop, vh) {
            const el = grid();
            if (!el || !cols || !layout.length) return false;
            if (viewTop == null) viewTop = -el.getBoundingClientRect().top;
            if (vh == null) vh = window.innerHeight || 800;
            let tailTop = Infinity;
            for (let i = Math.max(0, layout.length - cols * 2); i < layout.length; i++) {
                const l = layout[i];
                if (l && l.top < tailTop) tailTop = l.top;
            }
            return tailTop !== Infinity && viewTop + vh >= tailTop;
        };

        const onScroll = function() {
            noteScroll();
            scheduleUpdate();
        };

        const scheduleUpdate = function() {
            if (rafPending) return;
            rafPending = true;
            requestAnimationFrame(() => { rafPending = false; update(); });
        };

        // Full re-pack + remount, used when the column geometry changes.
        const relayout = function() {
            if (!measureMetrics()) return;
            // Every card is about to move, so the raw scroll position stops
            // meaning anything: hold the reader's place and put them back on it
            // once the new positions exist. Applies to every re-pack, not just
            // rotation -- changing card size or density moves the grid too.
            const anchor = heldAnchor || lastAnchor;
            heightCache.clear();             // colWidth changed -> heights differ
            mounted.forEach((card, i) => unmount(i));
            layout.length = 0;
            colBottoms = new Array(cols).fill(padY);
            colItems = Array.from({ length: cols }, () => []);
            packFrom(0);
            restoreAnchor(anchor);
            update();
        };

        // Scrolls so the anchored card sits at the same viewport offset it had
        // before the re-pack, keeping the user's place across the layout change.
        // The anchor is the topmost card crossing the viewport top (rather than
        // the centred one), which is independent of the viewport height -- and
        // that height has already changed by the time we hear about a rotation.
        const restoreAnchor = function(anchor) {
            if (!anchor) return;
            const el = grid();
            const l = layout[anchor.index];
            if (!el || !l) return;
            const gridTopDoc = el.getBoundingClientRect().top + window.scrollY;
            const target = gridTopDoc + l.top - anchor.offsetTop;
            const clamped = Math.max(0, Math.min(target,
                Math.max(0, document.documentElement.scrollHeight - (window.innerHeight || 0))));
            if (Math.abs(clamped - window.scrollY) > 1) window.scrollTo(0, clamped);
        };

        // A rotation re-packs every column, so the raw scrollTop afterwards
        // points at a different video. Restoring the anchor once, in the frame
        // after `resize`, isn't enough on a phone: the browser fires `resize`
        // partway through the rotation animation (with metrics that are still
        // changing) and then adjusts the scroll position itself *after* our
        // handler has run, overwriting our restore. So we hold the anchor taken
        // *before* the change and re-assert it across a short settling window,
        // re-packing on each tick only if the column geometry actually moved.
        // The window ends early the moment the user scrolls, so we never fight
        // a real gesture.
        const SETTLE_TICKS = [0, 60, 150, 300, 500];
        let settleTimers = [];

        const endSettle = function() {
            settleTimers.forEach(clearTimeout);
            settleTimers = [];
            heldAnchor = null;
        };

        const settleTick = function() {
            const prevCols = cols;
            const prevWidth = colWidth;
            if (measureMetrics() && (cols !== prevCols || Math.abs(colWidth - prevWidth) > 0.5)) {
                relayout();                  // re-packs and restores the anchor
            }
            if (heldAnchor) restoreAnchor(heldAnchor);
        };

        // A soft keyboard opening also fires `resize` (and moves the scroll
        // position deliberately, to reveal the focused field): leave that alone.
        const isTypingTarget = function() {
            const el = document.activeElement;
            if (!el) return false;
            return el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.isContentEditable;
        };

        let settleWidth = 0;

        const beginSettle = function(event) {
            if (isTypingTarget()) return;
            // Only a width change moves cards: their positions are absolute
            // pixels in the grid's own space, so a height-only resize -- the
            // mobile URL bar collapsing as you scroll, most of all -- leaves the
            // layout (and therefore the scroll position) exactly right. Settling
            // on those was actively harmful: a URL-bar resize landing mid-flick
            // re-asserted an anchor captured before the flick and yanked the
            // page back, killing the momentum scroll.
            const width = window.innerWidth || 0;
            const widthChanged = width !== settleWidth;
            settleWidth = width;
            const rotating = !!(event && event.type === 'orientationchange');
            if (!widthChanged && !rotating) {
                // One exception: a scrollbar appearing/disappearing changes the
                // grid's inner width while window.innerWidth stays put. Re-pack
                // if the columns really moved (relayout keeps the reader's
                // place); otherwise leave the scroll completely alone.
                const prevCols = cols;
                const prevColWidth = colWidth;
                if (measureMetrics() && (cols !== prevCols || Math.abs(colWidth - prevColWidth) > 0.5)) {
                    relayout();
                }
                return;
            }
            if (!heldAnchor) heldAnchor = lastAnchor;
            settleTimers.forEach(clearTimeout);
            settleTimers = SETTLE_TICKS.map((ms) => setTimeout(settleTick, ms));
            settleTimers.push(setTimeout(endSettle, SETTLE_TICKS[SETTLE_TICKS.length - 1] + 100));
        };

        const ensureInit = function() {
            if (!cols) measureMetrics();
            bindGridDelegation();
            if (initialized) return;
            initialized = true;
            settleWidth = window.innerWidth || 0;
            warmPool();
            window.addEventListener('scroll', onScroll, { passive: true });
            // orientationchange fires first (before the viewport metrics change),
            // which is exactly when the pre-rotation anchor is still valid.
            window.addEventListener('orientationchange', beginSettle);
            window.addEventListener('resize', beginSettle);
            // Deliberately not on visualViewport: that also fires for pinch-zoom
            // and keyboard insets, where pinning the scroll position would fight
            // the user. A rotation always fires the window events above.
            // Any real scroll gesture (including a pinch) ends the window early.
            ['wheel', 'touchmove', 'keydown'].forEach((evt) => {
                window.addEventListener(evt, endSettle, { passive: true });
            });
        };

        const reset = function() {
            // Releases rather than discards: a new result set is about to mount
            // its own cards, and these are exactly the right shape for it.
            mounted.forEach((card, i) => unmount(i));
            mounted.clear();
            unfilled.clear();
            dropPrepared();
            mountQueue = [];
            flinging = false;
            revealed.clear();           // new result set should animate in again
            layout.length = 0;
            colBottoms = [];
            colItems = [];
            const el = grid();
            if (el) { el.style.height = '0px'; }
        };

        // Removes a single video's card from the grid: its DOM element is
        // unmounted directly (so it's gone even if the re-pack below can't run),
        // then the remaining cards are re-packed against the now-shorter queue.
        // The caller must have already removed the video from state.loadedVideos.
        const removeVideo = function(videoId) {
            const id = String(videoId);
            mounted.forEach((card, i) => {
                if (card.dataset.videoId === id) unmount(i);
            });
            relayout();
        };

        const stats = function() {
            return { built: builtCards, recycled: recycledCards, prepared: preparedCards,
                     pooled: pool.length, readied: prepared.size,
                     unfilled: unfilled.size, flinging: flinging };
        };

        return { ensureInit, packFrom, update: scheduleUpdate, relayout, removeVideo, reset, isNearEnd, stats };
    })();

    App.videos.updateLoadMoreState = function() {
        const loadMoreBtn = document.getElementById('load-more-btn');
        if (!loadMoreBtn) return;
        loadMoreBtn.disabled = state.isLoading || !state.hasNextPage;
        loadMoreBtn.style.display = state.hasNextPage ? 'flex' : 'none';
    };

    // Context menu helpers for per-card actions.
    App.videos.closeAllMenus = function() {
        document.querySelectorAll('.video-menu.open').forEach((menu) => {
            menu.classList.remove('open');
        });
        document.querySelectorAll('.video-menu-btn[aria-expanded="true"]').forEach((btn) => {
            btn.setAttribute('aria-expanded', 'false');
        });
    };

    App.videos.toggleMenu = function(menu, button) {
        const isOpen = menu.classList.contains('open');
        App.videos.closeAllMenus();
        if (!isOpen) {
            menu.classList.add('open');
            if (button) {
                button.setAttribute('aria-expanded', 'true');
            }
        }
    };

    App.videos.coerceNumber = function(value) {
        if (value === null || value === undefined) return 0;
        if (typeof value === 'number') return Number.isFinite(value) ? value : 0;
        if (typeof value === 'string') {
            const parsed = parseFloat(value);
            return Number.isFinite(parsed) ? parsed : 0;
        }
        return 0;
    };

    const headerValue = function(headers, name) {
        if (!headers) return '';
        return headers[name] || headers[name.toLowerCase()] || '';
    };

    // Merge the resource-level (meta) and format-level http_headers into a single
    // map so every upstream header the extractor attached (Referer, User-Agent,
    // Cookie, etc.) can be relayed to the stream proxy. Format-level headers win
    // on conflict since they describe the specific media URL.
    const mergeHeaders = function(metaHeaders, fmtHeaders) {
        const merged = {};
        [metaHeaders, fmtHeaders].forEach((headers) => {
            if (!headers || typeof headers !== 'object') return;
            Object.keys(headers).forEach((name) => {
                const value = headers[name];
                if (value === undefined || value === null || value === '') return;
                merged[name] = String(value);
            });
        });
        return merged;
    };

    const deriveReferer = function(url) {
        if (!url) return '';
        try {
            return `${new URL(url).origin}/`;
        } catch (err) {
            return '';
        }
    };

    // Ranks the playable formats best-first so callers can fall back to the
    // next candidate when a URL fails. Quality is the primary key; when several
    // formats share the same quality the one that appears later in the source
    // list is preferred (start with the last one). When a preferred height is
    // set, formats at or below it come first (best of those first), followed by
    // anything above it ordered closest-to-preferred first as a last resort.
    App.videos.rankFormats = function(formats, preferredHeight) {
        if (!Array.isArray(formats) || formats.length === 0) return [];
        const candidates = formats
            .map((fmt, index) => ({ fmt, index }))
            .filter((entry) => entry.fmt && entry.fmt.url);
        if (!candidates.length) return [];
        const videoCandidates = candidates.filter((entry) => {
            const videoExt = String(entry.fmt.video_ext || '').toLowerCase();
            const vcodec = String(entry.fmt.vcodec || '').toLowerCase();
            if (videoExt && videoExt !== 'none') return true;
            if (vcodec && vcodec !== 'none') return true;
            return false;
        });
        const pool = videoCandidates.length ? videoCandidates : candidates;
        const score = (fmt) => {
            const height = App.videos.coerceNumber(fmt.height || fmt.quality);
            const width = App.videos.coerceNumber(fmt.width);
            const size = height || width;
            const bitrate = App.videos.coerceNumber(fmt.tbr || fmt.bitrate);
            const fps = App.videos.coerceNumber(fmt.fps);
            return [size, bitrate, fps];
        };
        // Tie-break on the original index so equal-quality formats start with
        // the last one in the source list.
        const compare = (a, b, descending) => {
            const sa = score(a.fmt);
            const sb = score(b.fmt);
            for (let i = 0; i < sa.length; i++) {
                if (sa[i] !== sb[i]) return descending ? sb[i] - sa[i] : sa[i] - sb[i];
            }
            return b.index - a.index;
        };
        if (preferredHeight) {
            const atOrBelow = [];
            const above = [];
            pool.forEach((entry) => {
                const size = score(entry.fmt)[0];
                if (size > 0 && size <= preferredHeight) {
                    atOrBelow.push(entry);
                } else {
                    above.push(entry);
                }
            });
            atOrBelow.sort((a, b) => compare(a, b, true));
            above.sort((a, b) => compare(a, b, false));
            return atOrBelow.concat(above).map((entry) => entry.fmt);
        }
        return pool.slice().sort((a, b) => compare(a, b, true)).map((entry) => entry.fmt);
    };

    App.videos.pickBestFormat = function(formats, preferredHeight) {
        const ranked = App.videos.rankFormats(formats, preferredHeight);
        return ranked.length ? ranked[0] : null;
    };

    // Resolves an ordered list of stream source candidates (best first). The
    // player walks this list and falls back to the next entry when a URL fails.
    App.videos.resolveStreamSources = function(videoOrUrl, options) {
        const applyPreferredQuality = !options || options.applyPreferredQuality !== false;
        const isLive = !!(videoOrUrl && typeof videoOrUrl === 'object' &&
            (videoOrUrl.isLive || (videoOrUrl.meta && videoOrUrl.meta.isLive)));
        if (typeof videoOrUrl === 'string') {
            return videoOrUrl ? [{ url: videoOrUrl, referer: deriveReferer(videoOrUrl), userAgent: '', isLive, refererRequired: false }] : [];
        }
        if (!videoOrUrl || typeof videoOrUrl !== 'object') return [];

        const meta = videoOrUrl.meta || videoOrUrl;
        const metaReferer = headerValue(meta.http_headers, 'Referer');
        const metaUserAgent = headerValue(meta.http_headers, 'User-Agent');
        let preferredHeight = null;
        if (applyPreferredQuality) {
            const preferredQuality = App.storage.getPreferredQuality();
            preferredHeight = preferredQuality === 'auto' ? null : App.videos.coerceNumber(preferredQuality);
            // A caller showing this in a fraction of the screen -- a split reels
            // panel -- caps it further. Decoding a 1080p stream into a quarter
            // of a phone screen costs the same as decoding it full size, and
            // four of those at once is what makes a split view stutter.
            const maxHeight = App.videos.coerceNumber(options && options.maxHeight);
            if (maxHeight > 0) {
                preferredHeight = preferredHeight ? Math.min(preferredHeight, maxHeight) : maxHeight;
            }
        }

        const sources = App.videos.rankFormats(meta.formats, preferredHeight).map((fmt) => {
            // An *explicit* Referer (from the extractor) signals the upstream
            // enforces it; deriveReferer is only a best-effort fallback. The
            // browser can't set a cross-origin Referer, so refererRequired tells
            // callers (the probe) that direct playback can't work.
            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);
            // `protocol` is the extractor's own word for how this format is
            // delivered ('https', 'm3u8_native', ...). Carrying it through lets
            // the player skip its content-type sniff -- a full round trip
            // through the proxy -- for URLs whose extension gives nothing away.
            return {
                url: fmt.url, referer, userAgent, headers, isLive,
                refererRequired: !!explicitReferer,
                protocol: fmt.protocol || ''
            };
        });

        if (!sources.length) {
            const fallbackUrl = meta.url || videoOrUrl.url || '';
            if (fallbackUrl) {
                sources.push({
                    url: fallbackUrl,
                    referer: metaReferer || deriveReferer(fallbackUrl),
                    userAgent: metaUserAgent,
                    headers: mergeHeaders(meta.http_headers, null),
                    isLive,
                    refererRequired: !!metaReferer
                });
            }
        }
        return sources;
    };

    App.videos.resolveStreamSource = function(videoOrUrl, options) {
        const sources = App.videos.resolveStreamSources(videoOrUrl, options);
        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,
            protocol: fmt.protocol || ''
        };
    };

    // How does this source play -- an HLS manifest, or a media file the <video>
    // element can take directly? Answered from the strongest evidence at hand:
    // a live stream is always a manifest here, then the extractor's `protocol`,
    // then the URL's extension. When none of them says (a signed CDN link with
    // no extension and no protocol), the caller is left to sniff the content
    // type over the network, which is why `protocol` is worth carrying around.
    App.videos.classifySource = function(resolved) {
        const url = (resolved && resolved.url) || '';
        let isHls = /\.m3u8($|\?)/i.test(url);
        let isDirectMedia = /\.(mp4|m4v|m4s|webm|ts|mov)($|\?)/i.test(url);
        const protocol = String((resolved && resolved.protocol) || '').toLowerCase();
        if (protocol.indexOf('m3u8') >= 0) {
            isHls = true;
            isDirectMedia = false;
        } else if (protocol === 'https' || protocol === 'http') {
            // A plain HTTP(S) download: one file, played as-is. Anything else
            // yt-dlp names (http_dash_segments, ism, ...) stays unknown here.
            isDirectMedia = true;
        }
        if (resolved && resolved.isLive) {
            isHls = true;
            isDirectMedia = false;
        }
        return { isHls, isDirectMedia };
    };

    // 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
    // (CORS allowed, not blocked/403), playing it directly works and the proxy
    // is pure overhead. CORS is an origin-level policy, so the answer is the
    // same for every media URL served by a given host: we probe (and cache)
    // once per host and let the player skip the proxy for any URL on a host
    // that's been proven.
    const DIRECT_PROBE_TIMEOUT_MS = 8000;

    const directHostOf = (url) => {
        try { return new URL(url).host; } catch (err) { return ''; }
    };

    // host -> true (proven directly playable) | false (proven not). Absent
    // means unknown/unprobed, in which case the proxy is used.
    App.videos._directStatus = new Map();
    const directPending = new Map();

    App.videos.isDirectProven = function(url) {
        return App.videos._directStatus.get(directHostOf(url)) === true;
    };

    App.videos.probeDirect = function(url) {
        if (!url) return Promise.resolve(false);
        const host = directHostOf(url);
        if (!host) return Promise.resolve(false);
        if (App.videos._directStatus.has(host)) {
            return Promise.resolve(App.videos._directStatus.get(host));
        }
        if (directPending.has(host)) {
            return directPending.get(host);
        }
        const promise = (async () => {
            const controller = new AbortController();
            const timer = setTimeout(() => controller.abort(), DIRECT_PROBE_TIMEOUT_MS);
            let ok = false;
            let detail = '';
            try {
                // A simple GET (no custom headers) avoids a CORS preflight.
                const res = await fetch(url, {
                    method: 'GET',
                    mode: 'cors',
                    credentials: 'omit',
                    signal: controller.signal
                });
                if (!(res.ok || res.status === 206)) {
                    ok = false;
                    detail = `HTTP ${res.status}`;
                } else if (res.body && typeof res.body.getReader === 'function') {
                    // Run it until actual media bytes arrive. A readable status
                    // line is weaker evidence than it looks: the question is
                    // whether this origin will hand *the player* video data
                    // cross-origin, and that isn't settled until some has
                    // arrived. Then stop -- the rest of the file is not our
                    // business, and it can be a whole film.
                    const reader = res.body.getReader();
                    const chunk = await reader.read();
                    const bytes = (!chunk.done && chunk.value && chunk.value.length) || 0;
                    ok = bytes > 0;
                    detail = `HTTP ${res.status}, ${bytes} bytes`;
                    reader.cancel().catch(() => {});
                } else {
                    // No readable stream to sample (an old browser): the status
                    // line is all the evidence on offer.
                    ok = true;
                    detail = `HTTP ${res.status}, headers only`;
                }
                controller.abort();
            } catch (err) {
                // A CORS refusal lands here as a TypeError with no status --
                // the browser won't say more than "failed" about a response it
                // wouldn't let us read.
                ok = false;
                detail = (err && err.name === 'AbortError') ? 'timeout' : (err && err.message) || 'blocked (CORS)';
            } finally {
                clearTimeout(timer);
            }
            App.videos._directStatus.set(host, ok);
            directPending.delete(host);
            console.log(`[direct-probe] ${ok ? 'DIRECT' : 'PROXY '} (${detail}) ${host}`);
            return ok;
        })();
        directPending.set(host, promise);
        return promise;
    };

    // Listing items arrive without formats (meta is null) -- only a page URL --
    // so this resolves a video's real media formats via the backend (yt-dlp) and
    // attaches them as `video.meta`, which is what playback, the quality menu
    // and the hover preview all need. Resolution is per-video and deduped: it
    // runs at most once per video, triggered lazily by hover/scroll so we don't
    // resolve cards the user never looks at.
    //
    // It deliberately does *not* test direct playability. That question belongs
    // to the video actually being played (see raceDirect in player.js): a
    // provider can spread its media over several CDNs, so an answer taken from
    // whichever card happened to scroll past need not hold for the one the
    // reader picks.
    const cardVideo = new WeakMap();

    // Session cache of `/api/resolve` results, keyed by video id (falling back
    // to the page URL). Keyed rather than per-object so any *other* object
    // describing the same video -- a favorites entry rebuilt from localStorage,
    // a feed slide, a re-rendered card -- gets the formats attached too instead
    // of silently skipping the fetch because some earlier object already ran it.
    // Failures resolve to null and are cached the same way, so a broken video is
    // attempted once per session.
    const metaCache = new Map();

    const hasFormats = (meta) => !!(meta && Array.isArray(meta.formats) && meta.formats.length);

    // Resolves a video's real media formats (once per session) and attaches them
    // as `video.meta`. Returns the resolved meta, or null when it can't be had.
    // Mirrors the backend's is_direct_media(): a URL whose path (query ignored,
    // trailing slash tolerated) already names a media file.
    const DIRECT_MEDIA_RE = /\.(mp4|m4v|m4s|webm|mov|ts|m3u8|mpd)$/i;

    const isDirectMediaUrl = function(url) {
        if (!url) return false;
        try {
            return DIRECT_MEDIA_RE.test(new URL(url, window.location.href).pathname.replace(/\/+$/, ''));
        } catch (err) {
            return false;
        }
    };

    App.videos.ensureFormats = function(video) {
        if (!video || typeof video !== 'object') return Promise.resolve(null);
        if (hasFormats(video.meta)) return Promise.resolve(video.meta);
        const cacheKey = video.id || video.url;
        if (!cacheKey || !video.url) return Promise.resolve(null);

        // Some channels hand back the media URL itself as the item URL. Sending
        // that to /api/resolve makes yt-dlp fetch the media just to tell us what
        // we already know: slow, and on a signed URL it's a second request
        // against a link that may be single-use or IP-bound -- after which the
        // one that matters, the actual playback fetch, is refused. Play it as-is.
        if (isDirectMediaUrl(video.url)) {
            const meta = { url: video.url, formats: [{ url: video.url }], http_headers: {} };
            video.meta = meta;
            return Promise.resolve(meta);
        }

        let promise = metaCache.get(cacheKey);
        if (!promise) {
            promise = (async () => {
                try {
                    const response = await fetch('/api/resolve', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ url: video.url })
                    });
                    if (!response.ok) return null;
                    const data = await response.json();
                    return hasFormats(data) ? data : null;
                } catch (err) {
                    // Best-effort: playback still works through the proxy.
                    return null;
                }
            })();
            metaCache.set(cacheKey, promise);
        }
        return promise.then((data) => {
            if (data) video.meta = data;
            return data;
        });
    };

    // Everything the extractor knows about a video, for the Show info panel:
    // description, dates, counts, categories, thumbnails, every field of every
    // format. Deliberately not `ensureFormats`' payload and deliberately not
    // attached to `video.meta` -- meta is fetched for every card that scrolls
    // past and is kept small on purpose, and it names things playback's way
    // (`isLive`) rather than the extractor's (`is_live`). Cached per video for
    // the session, like meta, so reopening the panel is free.
    const fullInfoCache = new Map();

    App.videos.fetchFullInfo = function(video) {
        if (!video || typeof video !== 'object' || !video.url) return Promise.resolve(null);
        // Same reasoning as ensureFormats: a URL that already names a media file
        // has nothing to extract, and re-fetching a signed one can burn a
        // single-use link that playback still needs.
        if (isDirectMediaUrl(video.url)) return Promise.resolve(null);

        const cacheKey = video.id || video.url;
        let promise = fullInfoCache.get(cacheKey);
        if (!promise) {
            promise = (async () => {
                try {
                    const response = await fetch('/api/resolve', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ url: video.url, full: '1' })
                    });
                    if (!response.ok) return null;
                    const data = await response.json();
                    if (!data || typeof data !== 'object' || !Object.keys(data).length) return null;
                    return data;
                } catch (err) {
                    // Best-effort: the panel still shows what the client holds.
                    return null;
                }
            })();
            fullInfoCache.set(cacheKey, promise);
        }
        return promise;
    };

    const resolveObserver = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (!entry.isIntersecting) return;
            resolveObserver.unobserve(entry.target);
            const video = cardVideo.get(entry.target);
            if (video) App.videos.ensureFormats(video);
        });
    }, { rootMargin: '200px' });



    // Builds a proxied stream URL. Extra params other than `url` are forwarded
    // by the backend as request headers, so use real header names here.
    App.videos.buildStreamUrlFromSource = function(resolved) {
        if (!resolved || !resolved.url) return '';
        const params = [];
        // Referer keeps its dedicated lowercase param (the backend maps it back to
        // `Referer`) so the derived-referer fallback in resolveStreamSources is
        // honoured even when no explicit Referer header was present.
        if (resolved.referer) params.push(`referer=${encodeURIComponent(resolved.referer)}`);
        if (resolved.userAgent) params.push(`User-Agent=${encodeURIComponent(resolved.userAgent)}`);
        // Relay every other upstream header the extractor attached (e.g. Cookie).
        // Referer/User-Agent are already emitted above, so skip them here to avoid
        // duplicating the same header under two query keys.
        const headers = resolved.headers;
        if (headers && typeof headers === 'object') {
            Object.keys(headers).forEach((name) => {
                const lower = name.toLowerCase();
                if (lower === 'referer' || lower === 'user-agent') return;
                const value = headers[name];
                if (value === undefined || value === null || value === '') return;
                params.push(`${encodeURIComponent(name)}=${encodeURIComponent(value)}`);
            });
        }
        if (resolved.isLive) params.push('live=1');
        const query = params.length ? `&${params.join('&')}` : '';
        return `/api/stream?url=${encodeURIComponent(resolved.url)}${query}`;
    };

    App.videos.buildStreamUrl = function(videoOrUrl, options) {
        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 });
        if (!streamUrl) return;
        const link = document.createElement('a');
        link.href = streamUrl;
        const rawName = (video.title || video.id || 'video').toString();
        const safeName = rawName.replace(/[^a-z0-9]+/gi, '_').replace(/^_+|_+$/g, '').slice(0, 80);
        link.download = safeName ? `${safeName}.mp4` : 'video.mp4';
        document.body.appendChild(link);
        link.click();
        link.remove();
    };
})();