+ 
+ 
+ 
+ 
+ 
+ 
+
-
-
- {activeCategoryLabel}
-
-
- {visibleChannels.length} {visibleChannels.length === 1 ? "channel" : "channels"}
+ () }));
+vi.mock("../use-now-next.js", () => ({
+ useNowNext: (_source: unknown, channel: { id: string } | null) => {
+ const title = channel ? nowNext.byChannel.get(channel.id) : undefined;
+ return { nowNext: title ? { now: { title } } : null, isLoading: false };
+ },
+}));
+
+const source: PlaylistSource = { kind: "xtream", id: "src-1", name: "My Source", baseUrl: "http://example.com", username: "u", password: "p" };
+const profile: Profile = { id: "profile-1", name: "Alex", avatarUrl: "avatar/toon_1.png" };
+
+function record(kind: "vod" | "series", streamId: string, name: string, groupTitle: string): CatalogRecord {
+ return { id: `${source.id}:${streamId}`, sourceId: source.id, streamId, name, nameLower: name.toLowerCase(), groupTitle, streamUrl: kind === "vod" ? "x" : undefined, generation: 1 };
+}
+
+async function seed(movies: CatalogRecord[], series: CatalogRecord[]): Promise {
+ const catalogDb = await openCatalogDb();
+ await putRecordsBatch(catalogDb, "vod", movies);
+ await putRecordsBatch(catalogDb, "series", series);
+ await putSyncMeta(catalogDb, { key: `vod:${source.id}`, lastSyncedAt: Date.now(), recordCount: movies.length, generation: 1 });
+ await putSyncMeta(catalogDb, { key: `series:${source.id}`, lastSyncedAt: Date.now(), recordCount: series.length, generation: 1 });
+}
+
+async function seedChannels(names: string[]): Promise {
+ const liveDb = await openLiveDb();
+ await putChannels(
+ liveDb,
+ names.map((name, position) => ({ id: `ch-${position}`, name, streamUrl: `http://x/${position}`, kind: "live" as const, sourceId: source.id, position, generation: 1 })),
+ );
+ await putLiveSyncMeta(liveDb, { sourceId: source.id, lastSyncedAt: Date.now(), generation: 1, channelCount: names.length });
+}
+
+function press(key: string): void {
+ act(() => {
+ fireEvent.keyDown(document, { key });
+ fireEvent.keyUp(document, { key });
+ });
+}
+/** Types on a physical keyboard, which goes straight into the query. */
+function type(text: string): void {
+ for (const key of text) press(key);
+}
+const focusedId = () => useFocusStore.getState().focusedId;
+
+function renderSearch(overrides: Partial[0]> = {}) {
+ const props = { source, platform: "web" as const, profile, onPlayMovie: vi.fn(), onPlayChannel: vi.fn(), onOpenSeries: vi.fn(), onContinueSeries: vi.fn(), onBack: vi.fn(), ...overrides };
+ return { ...render().mock.calls[0];
+ expect(channel).toMatchObject({ id: "ch-2", name: "BBC Two", number: 3 });
+ expect(lineup.lineup.map((c: { name: string }) => c.name)).toEqual(["BBC One", "BBC Two"]);
+ expect(lineup.directory).toHaveLength(3);
+ });
+
+ it("orders the rows by their best match", async () => {
+ await seed([record("vod", "1", "News Of The World", "cat-1")], [record("series", "2", "Newsroom", "cat-s")]);
+ await seedChannels(["Sky News HD"]);
+ await runIndexJobs(await openCatalogDb(), [{ sourceId: source.id, kind: "live" }], { paceMs: 0, shouldStop: () => false, sleep: () => Promise.resolve() });
+ renderSearch();
+ type("news of");
+ await screen.findByText("News Of The World");
+ // Movies has the only title starting with the query; Series and Live TV don't match at all.
+ expect(screen.getAllByRole("heading", { level: 2 }).map((h) => h.textContent)).toEqual(["Movies"]);
+
+ act(() => useFocusStore.getState().focus("kb:clear"));
+ press("Enter");
+ type("news");
+ await screen.findByText("Sky News HD"); // found by its second word, once indexed
+ // Movies and Series start with "news"; the channel only has it as a later word.
+ await vi.waitFor(() => expect(screen.getAllByRole("heading", { level: 2 }).map((h) => h.textContent)).toEqual(["Movies", "Series", "Live TV"]));
+ });
+
+ it("remembers what was searched once a result is opened, and offers it again before anything is typed", async () => {
+ await seed([record("vod", "1", "Matrix Reloaded", "cat-1")], []);
+ const first = renderSearch();
+ type("mat");
+ await screen.findByText("Matrix Reloaded");
+ expect(loadRecentSearches(profile.id, source.id)).toEqual([]); // typing alone records nothing
+
+ act(() => useFocusStore.getState().focus("search:vod:1"));
+ press("Enter");
+ expect(loadRecentSearches(profile.id, source.id)).toEqual(["mat"]);
+ first.unmount();
+ __resetSearchMemoryForTests();
+
+ renderSearch();
+ expect(screen.getByRole("heading", { name: "Recent searches" })).toBeTruthy();
+ act(() => useFocusStore.getState().focus("search:recent:0"));
+ press("Enter");
+ expect(screen.getByRole("searchbox").textContent).toBe("mat");
+ expect(await screen.findByText("Matrix Reloaded")).toBeTruthy();
+ });
+
+ it("shows Recently Watched before anything is typed, and opens from it", async () => {
+ await seed([], []);
+ recordWatchHistory({ profileId: profile.id, sourceId: source.id, kind: "movie", contentId: "9", title: "Heat", streamUrl: "http://x/9", positionSeconds: 60, durationSeconds: 600 });
+ const { props } = renderSearch();
+ expect(await screen.findByRole("heading", { name: "Recently Watched" })).toBeTruthy();
+
+ act(() => useFocusStore.getState().focus("search:history:movie:9"));
+ press("Enter");
+ expect(props.onPlayMovie).toHaveBeenCalledWith(expect.objectContaining({ id: "9", name: "Heat" }), { resume: true });
+ });
+});
diff --git a/src/screens/SearchScreen.tsx b/src/screens/SearchScreen.tsx
new file mode 100644
index 0000000..297bea1
--- /dev/null
+++ b/src/screens/SearchScreen.tsx
@@ -0,0 +1,562 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { Channel, PlatformId, PlaylistSource, Profile, SeriesInfo, WatchHistoryEntry } from "@core";
+import { Search } from "lucide-react";
+import {
+ FocusCard,
+ Focusable,
+ LoadingState,
+ MeshBackground,
+ SearchKeyboard,
+ SECTION_ICONS,
+ SeeAllCard,
+ Shelf,
+ buildGridFocusGraph,
+ buildShelfFocusGraph,
+ searchKeyId,
+ useFocusStore,
+ useIsFocused,
+ useRemoteInput,
+ BROWSE_GAP,
+ BROWSE_ROW_GAP,
+ TV_HEADING,
+ TV_TEXT,
+ type FocusNode,
+} from "@ui";
+import { withChannelNumbers, type ChannelLineup } from "../channel-lineup.js";
+import { loadSeriesCategories, loadVodCategories } from "../content-loader.js";
+import { useContentPolicy } from "../content-policy.js";
+import { loadWatchHistory } from "../profile-store.js";
+import { loadRecentSearches, recordRecentSearch } from "../search/recent-searches.js";
+import { searchCatalog, searchChannels, type SearchCatalogResult } from "../search/search-index.js";
+import { useCachedContent } from "../use-cached-content.js";
+import { useSearchQuery } from "../use-debounced-value.js";
+import { useKidsAllowedKeys } from "../use-kids-allowed.js";
+import { useLocalCatalogReady } from "../use-local-catalog-ready.js";
+import { useNowNext } from "../use-now-next.js";
+import { usePolicyLiveChannels } from "../use-policy-live-channels.js";
+import { ChannelTile } from "./ListTiles.js";
+
+export interface SearchScreenProps {
+ source: PlaylistSource;
+ platform: PlatformId;
+ profile: Profile;
+ onPlayMovie: (movie: Channel, options?: { resume?: boolean }) => void;
+ onPlayChannel: (channel: Channel, lineup: ChannelLineup) => void;
+ onOpenSeries: (seriesId: string) => void;
+ /** Recently Watched: carries on with a series' next episode. */
+ onContinueSeries: (entry: WatchHistoryEntry) => void;
+ onBack: () => void;
+ /** True while PlayerScreen is open on top of this screen — see VodScreen's identical prop. */
+ isPlaybackOpen?: boolean;
+}
+
+type SeriesSummary = Pick;
+/** The three kinds of result, each its own row. */
+type ResultKind = "live" | "vod" | "series";
+type ResultItem = Channel | SeriesSummary;
+
+interface ResultRow {
+ items: T[];
+ hasMore: boolean;
+ bestScore: number;
+ isLoading: boolean;
+}
+
+const ROW_LIMIT = 20;
+/** A See all grid shows up to this many matches, best first. */
+const SEE_ALL_LIMIT = 200;
+const POSTER_CARD_WIDTH = "12rem";
+const CHANNEL_TILE_WIDTH = "18rem";
+const KEYBOARD_PANEL_WIDTH = "30rem";
+/**
+ * Left inset of everything in the results column. A result row scrolls
+ * sideways, so it clips whatever sticks out of it — the inset is what gives
+ * the first card room to grow when it's focused (as BROWSE_CONTENT_LEFT
+ * does on the browse pages).
+ */
+const RESULTS_INSET = "2rem";
+const CONTENT_SCOPE = "content";
+const EMPTY_CATEGORIES: Awaited> = [];
+const EMPTY_ROW: ResultRow = { items: [], hasMore: false, bestScore: 0, isLoading: false };
+/** Rows tied on their best match keep this order. */
+const KIND_ORDER: ResultKind[] = ["live", "vod", "series"];
+const KIND_TITLES: Record = { live: "Live TV", vod: "Movies", series: "Series" };
+const GRID_COLUMNS: Record = { live: 3, vod: 5, series: 5 };
+const RECENTLY_WATCHED_LIMIT = 20;
+
+const resultId = (kind: ResultKind, id: string) => `search:${kind}:${id}`;
+const seeAllId = (kind: ResultKind) => `search:see-all:${kind}`;
+const gridId = (kind: ResultKind, id: string) => `search-grid:${kind}:${id}`;
+const recentId = (index: number) => `search:recent:${index}`;
+const historyId = (entry: WatchHistoryEntry) => `search:history:${entry.kind}:${entry.contentId}`;
+
+function historyChannel(entry: WatchHistoryEntry): Channel {
+ return { id: entry.contentId, name: entry.title, streamUrl: entry.streamUrl ?? "", logoUrl: entry.imageUrl, kind: "live", number: entry.channelNumber };
+}
+
+/**
+ * What each profile last searched in each playlist, and the result it had
+ * focused — so returning from a series' detail page (or the player) puts
+ * the user back where they were. Module-level, like VodScreen's category
+ * memory: it outlives the screen, not an app restart.
+ */
+const searchMemory = new Map();
+
+/** Test-only. */
+export function __resetSearchMemoryForTests(): void {
+ searchMemory.clear();
+}
+
+/**
+ * Global search: one place to find Live TV channels, Movies and Series in
+ * the active playlist, reached from Home's top bar, Kids Home's first tile,
+ * and the Search button on the Movies and Series pages (see
+ * docs/global-search-plan.md).
+ *
+ * An on-screen keyboard on the left, results on the right updating as the
+ * user types — one row per kind, the row with the best match first, each
+ * ending in a See all card that opens that kind's full result grid. Before
+ * anything is typed: this profile's recent searches in this playlist, and
+ * its Recently Watched. Reads only local data; a kind that isn't
+ * downloaded yet is left out rather than fetched.
+ */
+export function SearchScreen({ source, platform, profile, onPlayMovie, onPlayChannel, onOpenSeries, onContinueSeries, onBack, isPlaybackOpen = false }: SearchScreenProps): JSX.Element {
+ const setGraph = useFocusStore((state) => state.setGraph);
+ const clearGraph = useFocusStore((state) => state.clearGraph);
+ const memoryKey = `${profile.id}:${source.id}`;
+ const [query, setQuery] = useState(() => searchMemory.get(memoryKey)?.query ?? "");
+ const returnFocusIdRef = useRef(searchMemory.get(memoryKey)?.focusId ?? null);
+ const activeQuery = useSearchQuery(query);
+ const [seeAll, setSeeAll] = useState(null);
+
+ useEffect(() => {
+ const previous = searchMemory.get(memoryKey);
+ searchMemory.set(memoryKey, { query, focusId: previous?.focusId ?? null });
+ }, [memoryKey, query]);
+
+ // Kids profiles only find what they're allowed to browse (docs/kids-profile.md §6).
+ const policy = useContentPolicy(profile, source.id);
+ const hasSeriesApi = source.kind === "xtream";
+ const loadMovieCategories = useCallback(() => loadVodCategories(source), [source]);
+ const loadShowCategories = useCallback(() => loadSeriesCategories(source), [source]);
+ const { data: movieCategories } = useCachedContent(`vod-categories:${source.id}`, "category", loadMovieCategories, EMPTY_CATEGORIES);
+ const { data: seriesCategories } = useCachedContent(`series-categories:${source.id}`, "category", loadShowCategories, EMPTY_CATEGORIES, {
+ enabled: hasSeriesApi,
+ });
+ const movieFilter = useMemo(() => policy.catalogFilter("vod", movieCategories), [policy, movieCategories]);
+ const seriesFilter = useMemo(() => policy.catalogFilter("series", seriesCategories), [policy, seriesCategories]);
+ const { channels: allowedChannels } = usePolicyLiveChannels(source, policy);
+ const channels = useMemo(() => withChannelNumbers(allowedChannels), [allowedChannels]);
+
+ const moviesStatus = useLocalCatalogReady(source.id, "vod");
+ const seriesStatus = useLocalCatalogReady(source.id, "series");
+ const canSearch: Record = {
+ live: channels.length > 0,
+ vod: moviesStatus === "ready",
+ series: hasSeriesApi && seriesStatus === "ready",
+ };
+ const isCheckingTables = moviesStatus === "checking" || (hasSeriesApi && seriesStatus === "checking");
+
+ // Result rows, and the See all grid (the same search with a higher limit).
+ const runSearch = useCallback(
+ (kind: ResultKind, limit: number): Promise> => {
+ if (kind === "live") return searchChannels(source.id, channels, activeQuery, { limit });
+ if (kind === "vod") return searchCatalog(source.id, "vod", activeQuery, { limit, filter: movieFilter });
+ return searchCatalog(source.id, "series", activeQuery, { limit, filter: seriesFilter });
+ },
+ [source.id, channels, activeQuery, movieFilter, seriesFilter],
+ );
+ const filterKey = `${movieFilter?.key ?? ""}|${seriesFilter?.key ?? ""}|${channels.length}`;
+ const live = useResult(runSearch, "live", ROW_LIMIT, canSearch.live && seeAll === null, activeQuery, filterKey);
+ const movies = useResult(runSearch, "vod", ROW_LIMIT, canSearch.vod && seeAll === null, activeQuery, filterKey);
+ const series = useResult(runSearch, "series", ROW_LIMIT, canSearch.series && seeAll === null, activeQuery, filterKey);
+ const grid = useResult(runSearch, seeAll ?? "vod", SEE_ALL_LIMIT, seeAll !== null, activeQuery, filterKey);
+
+ // A new query always starts from the result rows.
+ useEffect(() => setSeeAll(null), [activeQuery]);
+
+ // Before anything is typed: recent searches, and Recently Watched (Kids-filtered, like the Recently Watched page).
+ const recentSearches = useMemo(() => (activeQuery ? [] : loadRecentSearches(profile.id, source.id)), [profile.id, source.id, activeQuery]);
+ const fullHistory = useMemo(() => loadWatchHistory(profile.id, source.id), [profile.id, source.id]);
+ const savedItems = useMemo(() => fullHistory.map((e) => ({ kind: e.kind, id: e.contentId })), [fullHistory]);
+ const allowedHistoryKeys = useKidsAllowedKeys(source, policy, savedItems);
+ const recentlyWatched = useMemo(
+ () => (allowedHistoryKeys ? fullHistory.filter((e) => allowedHistoryKeys.has(`${e.kind}:${e.contentId}`)) : fullHistory).slice(0, RECENTLY_WATCHED_LIMIT),
+ [fullHistory, allowedHistoryKeys],
+ );
+
+ // Opening anything: remember the query and the focused result for coming back, and the query as a recent search.
+ const beforeOpening = useCallback(() => {
+ searchMemory.set(memoryKey, { query, focusId: useFocusStore.getState().focusedId });
+ if (activeQuery) recordRecentSearch(profile.id, source.id, activeQuery);
+ }, [memoryKey, query, activeQuery, profile.id, source.id]);
+ const directory = channels;
+ const openResult = useCallback(
+ (kind: ResultKind, item: ResultItem, lineup: Channel[]) => {
+ beforeOpening();
+ if (kind === "live") onPlayChannel(item as Channel, { lineup, directory });
+ else if (kind === "vod") onPlayMovie(item as Channel);
+ else onOpenSeries(item.id);
+ },
+ [beforeOpening, onPlayChannel, onPlayMovie, onOpenSeries, directory],
+ );
+ const openHistory = useCallback(
+ (entry: WatchHistoryEntry) => {
+ beforeOpening();
+ if (entry.kind === "live") {
+ const recentChannels = recentlyWatched.filter((e) => e.kind === "live").map(historyChannel);
+ onPlayChannel(historyChannel(entry), { lineup: recentChannels, directory: recentChannels });
+ } else if (entry.kind === "movie") {
+ onPlayMovie({ id: entry.contentId, name: entry.title, streamUrl: entry.streamUrl ?? "", logoUrl: entry.imageUrl, kind: "movie" }, { resume: !entry.finished });
+ } else if (entry.finished) {
+ onOpenSeries(entry.contentId);
+ } else {
+ onContinueSeries(entry);
+ }
+ },
+ [beforeOpening, recentlyWatched, onPlayChannel, onPlayMovie, onOpenSeries, onContinueSeries],
+ );
+
+ const typeCharacter = useCallback((character: string) => setQuery((current) => (current.length === 0 && character === " " ? current : current + character)), []);
+ const deleteCharacter = useCallback(() => setQuery((current) => current.slice(0, -1)), []);
+ const clearQuery = useCallback(() => setQuery(""), []);
+
+ // Rows with matches, the best match first; ties keep Live TV, Movies, Series.
+ const rows = useMemo(() => {
+ const byKind: Record> = { live, vod: movies, series };
+ return KIND_ORDER.filter((kind) => byKind[kind].items.length > 0)
+ .map((kind) => ({ kind, ...byKind[kind] }))
+ .sort((a, b) => b.bestScore - a.bestScore || KIND_ORDER.indexOf(a.kind) - KIND_ORDER.indexOf(b.kind));
+ }, [live, movies, series]);
+
+ const showEmptyState = activeQuery.length === 0 && seeAll === null;
+ const gridIds = useMemo(() => (seeAll ? grid.items.map((item) => gridId(seeAll, item.id)) : []), [grid, seeAll]);
+
+ // The focusable content right of the keyboard, as rows of ids with what each does.
+ const contentRows = useMemo((): Array void }>> => {
+ if (seeAll) {
+ const columns = GRID_COLUMNS[seeAll];
+ const cells = grid.items.map((item) => ({ id: gridId(seeAll, item.id), onSelect: () => openResult(seeAll, item, grid.items as Channel[]) }));
+ return Array.from({ length: Math.ceil(cells.length / columns) }, (_, row) => cells.slice(row * columns, (row + 1) * columns));
+ }
+ if (showEmptyState) {
+ return [
+ recentSearches.map((term, index) => ({ id: recentId(index), onSelect: () => setQuery(term) })),
+ recentlyWatched.map((entry) => ({ id: historyId(entry), onSelect: () => openHistory(entry) })),
+ ].filter((row) => row.length > 0);
+ }
+ return rows.map((row) => [
+ ...row.items.map((item) => ({ id: resultId(row.kind, item.id), onSelect: () => openResult(row.kind, item, row.items as Channel[]) })),
+ ...(row.hasMore ? [{ id: seeAllId(row.kind), onSelect: () => setSeeAll(row.kind) }] : []),
+ ]);
+ }, [seeAll, grid, showEmptyState, recentSearches, recentlyWatched, rows, openResult, openHistory]);
+ const firstContentId = contentRows[0]?.[0]?.id;
+
+ // Focus graph right of the keyboard: Left from each row's first item goes back to the keyboard.
+ useEffect(() => {
+ const keyboardEdge = (row: number) => searchKeyId("abcdefghijklmnopqrstuvwxyz0123456789"[Math.min(row, 5) * 6 + 5]);
+ const actions = new Map(contentRows.flat().map((cell) => [cell.id, cell.onSelect]));
+ const base: FocusNode[] = seeAll ? buildGridFocusGraph(gridIds, GRID_COLUMNS[seeAll]) : buildShelfFocusGraph(contentRows.map((row) => row.map((cell) => cell.id)));
+ const rowOf = new Map(contentRows.flatMap((row, index) => row.map((cell) => [cell.id, index] as const)));
+ const rowStarts = new Set(contentRows.map((row) => row[0]?.id));
+ const nodes = base.map((node) => ({
+ ...node,
+ neighbors: { ...node.neighbors, left: rowStarts.has(node.id) ? keyboardEdge(rowOf.get(node.id) ?? 0) : node.neighbors.left },
+ onSelect: actions.get(node.id),
+ }));
+ setGraph(CONTENT_SCOPE, nodes);
+
+ const { focusedId, nodes: registered } = useFocusStore.getState();
+ const returnTo = returnFocusIdRef.current;
+ if (returnTo && registered[returnTo]) {
+ returnFocusIdRef.current = null;
+ useFocusStore.getState().focus(returnTo);
+ } else if (focusedId === null || !registered[focusedId]) {
+ // Opening the screen, or the focused result just dropped out of the results: back to the keyboard.
+ useFocusStore.getState().focus(searchKeyId("a"));
+ }
+ }, [contentRows, seeAll, gridIds, setGraph]);
+ useEffect(() => () => clearGraph(CONTENT_SCOPE), [clearGraph]);
+
+ // A physical keyboard (a desktop browser, or one paired with the TV) types straight into the query.
+ useEffect(() => {
+ if (isPlaybackOpen) return;
+ function onKeyDown(event: KeyboardEvent): void {
+ if (event.ctrlKey || event.metaKey || event.altKey) return;
+ if (event.key === "Backspace") {
+ if (query.length === 0) return; // an empty query: Backspace goes Back as usual
+ event.preventDefault();
+ event.stopImmediatePropagation();
+ deleteCharacter();
+ return;
+ }
+ if (/^[a-z0-9 ]$/i.test(event.key)) {
+ event.preventDefault();
+ typeCharacter(event.key.toLowerCase());
+ }
+ }
+ window.addEventListener("keydown", onKeyDown, true);
+ return () => window.removeEventListener("keydown", onKeyDown, true);
+ }, [isPlaybackOpen, query, deleteCharacter, typeCharacter]);
+
+ useRemoteInput(
+ platform,
+ {
+ onBack: () => {
+ if (seeAll) {
+ const kind = seeAll;
+ setSeeAll(null);
+ returnFocusIdRef.current = seeAllId(kind);
+ return;
+ }
+ searchMemory.set(memoryKey, { query, focusId: null });
+ onBack();
+ },
+ },
+ !isPlaybackOpen,
+ );
+
+ const isWaitingForResults = activeQuery.length > 0 && (live.isLoading || movies.isLoading || series.isLoading) && rows.length === 0;
+ const nothingSearchable = !isCheckingTables && !canSearch.live && !canSearch.vod && !canSearch.series;
+ const searchableKinds = hasSeriesApi ? "channels, movies and series" : "channels and movies";
+
+ let results: JSX.Element;
+ if (seeAll) {
+ results = Your playlist is still downloading. You can search it once it's ready. ;
+ } else if (activeQuery.length === 0 && query.trim().length > 0) {
+ results = Keep typing… ;
+ } else if (showEmptyState) {
+ results = (
+ <>
+ {`Search ${searchableKinds} by title.`}
+ {recentSearches.length > 0 && (
+
+
+ )}
+ {recentlyWatched.length > 0 && (
+ {`No matches for “${activeQuery}” in ${source.name}. Check the spelling or try fewer letters.`} ;
+ } else {
+ results = (
+ <>
+ {rows.map((row) => (
+ resultId(row.kind, item.id)}
+ leftInset={RESULTS_INSET}
+ trailing={
+ row.hasMore ? (
+ setSeeAll(row.kind)}
+ />
+ ) : undefined
+ }
+ trailingId={row.hasMore ? seeAllId(row.kind) : undefined}
+ renderItem={(item) => openResult(row.kind, item, row.items as Channel[])} />}
+ />
+ ))}
+
+ );
+ }
+
+ return (
+
+ {/* The gap plus RESULTS_INSET is the space between the keyboard and the results. */}
+
+ );
+}
+
+/** One kind's matches for the query (a row, or with a higher limit a See all grid) — see search-index.ts. */
+function useResult(
+ run: (kind: ResultKind, limit: number) => Promise>,
+ kind: ResultKind,
+ limit: number,
+ enabled: boolean,
+ query: string,
+ filterKey: string,
+): ResultRow {
+ const [row, setRow] = useState>(EMPTY_ROW);
+ const runRef = useRef(run);
+ runRef.current = run;
+
+ useEffect(() => {
+ if (!enabled || query.length === 0) {
+ setRow(EMPTY_ROW);
+ return;
+ }
+ let cancelled = false;
+ setRow((current) => ({ ...current, isLoading: true }));
+ runRef
+ .current(kind, limit)
+ .then(({ items, hasMore, bestScore }) => {
+ if (!cancelled) setRow({ items, hasMore, bestScore, isLoading: false });
+ })
+ .catch(() => {
+ if (!cancelled) setRow(EMPTY_ROW);
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, [kind, limit, enabled, query, filterKey]);
+
+ return row;
+}
+
+/** A result: a channel tile with what's on now, or a movie or series poster. */
+function ResultCard({ source, kind, id, item, onSelect, fill = false }: { source: PlaylistSource; kind: ResultKind; id: string; item: ResultItem; onSelect: () => void; fill?: boolean }): JSX.Element {
+ if (kind === "live") return
+
+
+ );
+}
+
+function Message({ children }: { children: React.ReactNode }): JSX.Element {
+ return
+
+ );
+}
diff --git a/src/screens/SeriesScreen.test.tsx b/src/screens/SeriesScreen.test.tsx
index c2b3f64..1c48283 100644
--- a/src/screens/SeriesScreen.test.tsx
+++ b/src/screens/SeriesScreen.test.tsx
@@ -68,16 +68,17 @@ async function resetScreenState(): Promise {
describe("SeriesScreen while the series table is still being built", () => {
beforeEach(resetScreenState);
- it("asks the sync manager for the series table and shows its progress — never downloading the catalog itself", async () => {
+ it("asks the sync manager for the series table and says it's on its way, without a row count — never downloading the catalog itself", async () => {
const { loadSeriesList } = await import("../content-loader.js");
const { syncSource } = await import("../sync/sync-manager.js");
- render( {}} onBack={() => {}} />);
+ render( {}} source={source} platform="web" profile={profile} onPlayEpisode={() => {}} onBack={() => {}} />);
await vi.waitFor(() => expect(syncSource).toHaveBeenCalledWith(source, { trigger: "first-run", stages: ["series"] }));
expect(await screen.findByText("Getting your series ready…")).not.toBeNull();
act(() => useSyncStore.getState().setStage(source.id, "series", { status: "running", done: 800 }));
- expect(screen.getByText("800 so far")).not.toBeNull();
+ expect(screen.queryByText(/800/)).toBeNull();
+ expect(screen.getByText("Getting your series ready…")).not.toBeNull();
expect(loadSeriesList).not.toHaveBeenCalled();
});
@@ -87,7 +88,7 @@ describe("SeriesScreen while the series table is still being built", () => {
Promise.resolve(categoryId === "cat-1" ? [{ id: "s1", name: "Drama Show", groupTitle: "cat-1" }] : []),
);
- render( {}} onBack={() => {}} />);
+ render( {}} source={source} platform="web" profile={profile} onPlayEpisode={() => {}} onBack={() => {}} />);
fireEvent.click(await screen.findByRole("button", { name: "Drama" })); // the category rail row
expect(await screen.findByText("Drama Show")).not.toBeNull();
@@ -100,7 +101,7 @@ describe("SeriesScreen while the series table is still being built", () => {
const { syncSource } = await import("../sync/sync-manager.js");
const m3u: PlaylistSource = { kind: "m3u-url", id: "src-m3u", name: "M3U", url: "http://example.com/list.m3u" };
- render( {}} onBack={() => {}} />);
+ render( {}} source={m3u} platform="web" profile={profile} onPlayEpisode={() => {}} onBack={() => {}} />);
expect(await screen.findByText("This playlist has no series.")).not.toBeNull();
expect(syncSource).not.toHaveBeenCalled();
});
@@ -119,37 +120,28 @@ describe("SeriesScreen with a synced local catalog", () => {
const { loadSeriesList } = await import("../content-loader.js");
render(
- {}} onBack={() => {}} />,
+ {}} source={source} platform="web" profile={profile} onPlayEpisode={() => {}} onBack={() => {}} />,
);
expect(await screen.findByText("Drama Show")).not.toBeNull();
expect(loadSeriesList).not.toHaveBeenCalled();
});
- it("search reads a prefix match from the local table", async () => {
- const catalogDb = await openCatalogDb();
- await putRecordsBatch(catalogDb, "series", [
- { id: `${source.id}:1`, sourceId: source.id, streamId: "1", name: "Breaking News", nameLower: "breaking news", generation: 1 },
- { id: `${source.id}:2`, sourceId: source.id, streamId: "2", name: "Comedy Hour", nameLower: "comedy hour", generation: 1 },
- ]);
- await putSyncMeta(catalogDb, { key: `series:${source.id}`, lastSyncedAt: Date.now(), recordCount: 2, generation: 1 });
-
- render(
- {}} onBack={() => {}} />,
- );
- const searchInput = await screen.findByPlaceholderText("Search series");
-
- fireEvent.change(searchInput, { target: { value: "break" } });
- await flush();
+ it("the header's Search button opens the Search screen instead of filtering the page", async () => {
+ await seedSeries([{ id: "1", name: "Breaking News", groupTitle: "cat-1" }]);
+ const onOpenSearch = vi.fn();
+ render( {}} onBack={() => {}} onOpenSearch={onOpenSearch} />);
- expect(await screen.findByText("Breaking News")).not.toBeNull();
- expect(screen.queryByText("Comedy Hour")).toBeNull();
+ await screen.findByText("Breaking News");
+ expect(screen.queryByRole("textbox")).toBeNull(); // no search field in the header any more
+ fireEvent.click(screen.getByRole("button", { name: "Search" }));
+ expect(onOpenSearch).toHaveBeenCalledTimes(1);
});
});
describe("SeriesScreen at catalog scale", () => {
- // Zero-padded ids: the table returns rows in key order, and "s10" would otherwise sort before "s2".
- const manySeries = Array.from({ length: 500 }, (_, i) => ({ id: `s${String(i).padStart(3, "0")}`, name: i % 2 ? `Drama Show ${i}` : `Comedy Hour ${i}`, groupTitle: "cat-1" }));
+ // Ids descend so series 0 is the newest, which pages list first.
+ const manySeries = Array.from({ length: 500 }, (_, i) => ({ id: `s${999 - i}`, name: i % 2 ? `Drama Show ${i}` : `Comedy Hour ${i}`, groupTitle: "cat-1" }));
beforeEach(async () => {
await resetScreenState();
@@ -161,13 +153,13 @@ describe("SeriesScreen at catalog scale", () => {
Array.from(container.querySelectorAll('[role="button"]')).filter((el) => !el.textContent?.startsWith("See all")).length;
it("caps each All Categories shelf at 20 cards instead of mounting the whole catalog", async () => {
- const { container } = render( {}} onBack={() => {}} />);
+ const { container } = render( {}} source={source} platform="web" profile={profile} onPlayEpisode={() => {}} onBack={() => {}} />);
await screen.findByText("Comedy Hour 0");
expect(cardCount(container)).toBe(20);
});
it("renders a picked category a page (60) at a time", async () => {
- const { container } = render( {}} onBack={() => {}} />);
+ const { container } = render( {}} source={source} platform="web" profile={profile} onPlayEpisode={() => {}} onBack={() => {}} />);
await screen.findByText("Comedy Hour 0");
fireEvent.click(await screen.findByRole("button", { name: "Drama" })); // the category rail row (categories may land after the list)
@@ -175,38 +167,22 @@ describe("SeriesScreen at catalog scale", () => {
});
it("keeps focus where it is when the next page of a category loads", async () => {
- const { container } = render( {}} onBack={() => {}} />);
+ const { container } = render( {}} source={source} platform="web" profile={profile} onPlayEpisode={() => {}} onBack={() => {}} />);
await screen.findByText("Comedy Hour 0");
fireEvent.click(await screen.findByRole("button", { name: "Drama" }));
await vi.waitFor(() => expect(cardCount(container)).toBe(60));
// The last row of the first page is the "load more" trigger zone.
- act(() => useFocusStore.getState().focus("series-grid:s057"));
+ act(() => useFocusStore.getState().focus("series-grid:s942"));
await vi.waitFor(() => expect(cardCount(container)).toBe(120));
- expect(useFocusStore.getState().focusedId).toBe("series-grid:s057");
+ expect(useFocusStore.getState().focusedId).toBe("series-grid:s942");
});
- it("debounces search and ignores single-character queries", async () => {
- const { container } = render( {}} onBack={() => {}} />);
- await screen.findByText("Comedy Hour 0");
- const input = container.querySelector("input") as HTMLInputElement;
- const shelfCount = () => container.querySelectorAll("section").length;
-
- fireEvent.change(input, { target: { value: "d" } });
- await new Promise((resolve) => setTimeout(resolve, 400));
- expect(shelfCount()).toBe(1); // one letter: still browsing shelves, no search ran
-
- fireEvent.change(input, { target: { value: "dr" } });
- expect(shelfCount()).toBe(1); // not yet — waits for typing to pause
- await vi.waitFor(() => expect(shelfCount()).toBe(0));
- expect(await screen.findByText("Drama Show 1")).toBeTruthy(); // read from the table's name index
- expect(screen.queryByText("Comedy Hour 0")).toBeNull();
- await vi.waitFor(() => expect(cardCount(container)).toBe(60)); // 250 matches, first page only
- });
});
describe("SeriesScreen category rail", () => {
- const manySeries = Array.from({ length: 100 }, (_, i) => ({ id: `s${i}`, name: `Drama Show ${i}`, groupTitle: "cat-1" }));
+ // Ids descend so show 0 is the newest, which pages list first.
+ const manySeries = Array.from({ length: 100 }, (_, i) => ({ id: `s${999 - i}`, name: `Drama Show ${i}`, groupTitle: "cat-1" }));
beforeEach(async () => {
await resetScreenState();
@@ -224,21 +200,21 @@ describe("SeriesScreen category rail", () => {
Array.from(container.querySelectorAll('[role="button"]')).filter((el) => !el.textContent?.startsWith("See all")).length;
it("opens with focus on the content, not the rail", async () => {
- render( {}} onBack={() => {}} />);
+ render( {}} source={source} platform="web" profile={profile} onPlayEpisode={() => {}} onBack={() => {}} />);
await screen.findByText("Drama Show 0");
- await vi.waitFor(() => expect(focusedId()).toBe("s0"));
+ await vi.waitFor(() => expect(focusedId()).toBe("s999"));
});
it("Left from the first column opens the rail; Back goes content → rail → leaves the screen", async () => {
const onBack = vi.fn();
- render( {}} onBack={onBack} />);
+ render( {}} source={source} platform="web" profile={profile} onPlayEpisode={() => {}} onBack={onBack} />);
await screen.findByText("Drama Show 0");
- await vi.waitFor(() => expect(focusedId()).toBe("s0"));
+ await vi.waitFor(() => expect(focusedId()).toBe("s999"));
press("ArrowLeft");
expect(focusedId()).toBe("rail:__all__");
press("ArrowRight");
- expect(focusedId()).toBe("s0");
+ expect(focusedId()).toBe("s999");
press("Escape");
expect(focusedId()).toBe("rail:__all__");
@@ -247,8 +223,52 @@ describe("SeriesScreen category rail", () => {
expect(onBack).toHaveBeenCalledTimes(1);
});
+ /**
+ * Keeps a readwrite transaction open on the series table, as a sync writing
+ * batches does — reads queue behind it until release() is called.
+ */
+ async function holdSeriesTableBusy(): Promise<() => void> {
+ const catalogDb = await openCatalogDb();
+ let released = false;
+ const tx = catalogDb.db.transaction("series", "readwrite");
+ const store = tx.objectStore("series");
+ const spin = () => {
+ if (!released) store.count().onsuccess = spin;
+ };
+ spin();
+ return () => {
+ released = true;
+ };
+ }
+
+ it("while a sync keeps the table busy, the rail and Back still work instead of a dead full-screen loader", async () => {
+ const release = await holdSeriesTableBusy();
+ const onBack = vi.fn();
+ render( {}} source={source} platform="web" profile={profile} onPlayEpisode={() => {}} onBack={onBack} />);
+
+ await vi.waitFor(() => expect(focusedId()).toBe("series-search-button"));
+ expect(screen.getByText("Loading…")).toBeTruthy();
+ expect(screen.queryByText("Drama Show 0")).toBeNull();
+
+ press("ArrowLeft");
+ expect(focusedId()).toBe("rail:__all__");
+ press("Escape");
+ expect(onBack).toHaveBeenCalledTimes(1);
+ release();
+ });
+
+ it("hands focus to the content once it loads, if the user hasn't moved meanwhile", async () => {
+ const release = await holdSeriesTableBusy();
+ render( {}} source={source} platform="web" profile={profile} onPlayEpisode={() => {}} onBack={() => {}} />);
+ await vi.waitFor(() => expect(focusedId()).toBe("series-search-button"));
+
+ release();
+ await screen.findByText("Drama Show 0");
+ await vi.waitFor(() => expect(focusedId()).toBe("s999"));
+ });
+
it("ends each shelf with a See all card that opens the category and moves focus into it", async () => {
- const { container } = render( {}} onBack={() => {}} />);
+ const { container } = render( {}} source={source} platform="web" profile={profile} onPlayEpisode={() => {}} onBack={() => {}} />);
await screen.findByText("Drama Show 0");
expect(screen.getByRole("button", { name: /^See all/ })).toBeTruthy();
@@ -256,18 +276,19 @@ describe("SeriesScreen category rail", () => {
press("Enter");
await vi.waitFor(() => expect(posterCount(container)).toBe(60));
- await vi.waitFor(() => expect(focusedId()).toBe("series-grid:s0"));
- expect(screen.getByText("100 titles")).toBeTruthy();
+ await vi.waitFor(() => expect(focusedId()).toBe("series-grid:s999"));
+ expect(screen.getByText(/^100 titles · Updated just now$/)).toBeTruthy();
+ expect(screen.getByRole("button", { name: "Refresh" })).toBeTruthy(); // one category shown: it can be refreshed on its own
});
it("remembers the chosen category when the screen is opened again", async () => {
- const first = render( {}} onBack={() => {}} />);
+ const first = render( {}} source={source} platform="web" profile={profile} onPlayEpisode={() => {}} onBack={() => {}} />);
await screen.findByText("Drama Show 0");
fireEvent.click(await screen.findByRole("button", { name: "Drama" }));
await vi.waitFor(() => expect(posterCount(first.container)).toBe(60));
first.unmount();
- const second = render( {}} onBack={() => {}} />);
+ const second = render( {}} source={source} platform="web" profile={profile} onPlayEpisode={() => {}} onBack={() => {}} />);
await vi.waitFor(() => expect(posterCount(second.container)).toBe(60));
expect(second.container.querySelectorAll("section")).toHaveLength(0); // category grid, not Browse shelves
});
@@ -295,7 +316,7 @@ describe("SeriesScreen detail page", () => {
const focusedId = () => useFocusStore.getState().focusedId;
it("starts on Play and chains Down/Up through actions → season tabs → episodes", async () => {
- render( {}} onBack={() => {}} initialSelectedId="s0" />);
+ render( {}} source={source} platform="web" profile={profile} onPlayEpisode={() => {}} onBack={() => {}} initialSelectedId="s0" />);
await screen.findByRole("button", { name: "Play S1 E1" });
await vi.waitFor(() => expect(focusedId()).toBe("series-hero-play"));
@@ -315,7 +336,7 @@ describe("SeriesScreen detail page", () => {
localStorage.clear();
const { isFavorite } = await import("../profile-store.js");
const onPlayEpisode = vi.fn();
- render( {}} initialSelectedId="s0" />);
+ render( {}} source={source} platform="web" profile={profile} onPlayEpisode={onPlayEpisode} onBack={() => {}} initialSelectedId="s0" />);
await screen.findByRole("button", { name: "Play S1 E1" });
await vi.waitFor(() => expect(focusedId()).toBe("series-hero-play"));
@@ -332,7 +353,7 @@ describe("SeriesScreen detail page", () => {
});
it("switching season updates the episode row and Up from it returns to that season's tab", async () => {
- render( {}} onBack={() => {}} initialSelectedId="s0" />);
+ render( {}} source={source} platform="web" profile={profile} onPlayEpisode={() => {}} onBack={() => {}} initialSelectedId="s0" />);
await screen.findByRole("button", { name: "Play S1 E1" });
act(() => useFocusStore.getState().focus("season-tab:2"));
@@ -345,7 +366,7 @@ describe("SeriesScreen detail page", () => {
});
it("Back from the detail page returns focus to the series card that opened it", async () => {
- render( {}} onBack={() => {}} />);
+ render( {}} source={source} platform="web" profile={profile} onPlayEpisode={() => {}} onBack={() => {}} />);
await screen.findByText("Drama Show 3");
act(() => useFocusStore.getState().focus("s3"));
press("Enter");
diff --git a/src/screens/SeriesScreen.tsx b/src/screens/SeriesScreen.tsx
index 11cbf3a..1940ce1 100644
--- a/src/screens/SeriesScreen.tsx
+++ b/src/screens/SeriesScreen.tsx
@@ -1,7 +1,7 @@
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import type { PlatformId, PlaylistSource, Profile, SeriesDetails, SeriesEpisode } from "@core";
import type { FocusNode } from "@ui";
-import { Check, Play, Plus, RotateCcw, Search, Star, X } from "lucide-react";
+import { Check, Play, Plus, RefreshCw, RotateCcw, Star } from "lucide-react";
import {
CategoryRail,
categoryRailItemId,
@@ -12,14 +12,15 @@ import {
Focusable,
LiftSurface,
Shelf,
- ShelfRowSkeleton,
- Shimmer,
+ LoadingState,
URLImage,
buildGridFocusGraph,
buildShelfFocusGraph,
useFocusStore,
useRemoteInput,
- glassBlur,
+ SearchButton,
+ HeaderButton,
+ Toast,
useIsFocused,
BROWSE_CONTENT_LEFT,
BROWSE_GAP,
@@ -29,20 +30,20 @@ import {
POSTER_WIDTH,
TV_TEXT,
TV_HEADING,
- EPISODE_COLUMNS,
EPISODE_WIDTH,
SECTION_ICONS,
} from "@ui";
import { loadSeriesCategories, loadSeriesDetails, loadSeriesList } from "../content-loader.js";
import { toggleFavorite, loadContinueWatching, loadFavorites } from "../profile-store.js";
-import { useSearchQuery } from "../use-debounced-value.js";
import { useIncrementalList } from "../use-incremental-list.js";
import { useCachedContent } from "../use-cached-content.js";
import { useSeriesCatalogPage } from "../use-catalog-page.js";
import { syncSource } from "../sync/sync-manager.js";
import { useSourceSyncState } from "../sync/sync-store.js";
import { SyncNotice } from "./SyncNotice.js";
+import { frequentCategoryIds, recordCategoryUse, splitByFrequency } from "../category-usage-store.js";
import { useLocalCatalogReady } from "../use-local-catalog-ready.js";
+import { useCatalogFreshness } from "../use-catalog-freshness.js";
import { useCatalogShelves } from "../use-catalog-shelves.js";
import { getCatalogPage } from "../catalog-store.js";
import { useFavoritesRevision } from "../use-favorites-revision.js";
@@ -70,6 +71,14 @@ export interface SeriesScreenProps {
initialSelectedId?: string;
/** Fired whenever the open series changes (selecting one, or backing out to the shelf browser passes null) — lets App.tsx remember the last-viewed series across this screen's unmount/remount on tab switches. */
onSelectionChange?: (seriesId: string | null) => void;
+ /**
+ * Called instead of returning to the browse page when Back leaves a
+ * series' detail page — set when the series was opened from somewhere
+ * else (Search), so Back goes back there.
+ */
+ onCloseDetail?: () => void;
+ /** Opens the global Search screen (the header's Search button). */
+ onOpenSearch: () => void;
/** Bumped by App.tsx every time the player overlay closes after resumable playback — triggers re-reading Continue Watching, which upsertContinueWatching wrote to localStorage during playback without this screen (which stayed mounted underneath the overlay) otherwise finding out. */
continueWatchingVersion?: number;
/** True while PlayerScreen is open on top of this screen — disables this screen's own useRemoteInput so a single Back press doesn't both close the player and navigate this screen away. */
@@ -100,7 +109,8 @@ export function __resetCategoryMemoryForTests(): void {
}
/** Focus id of a shelf's trailing "See all" card. */
const seeAllId = (categoryId: string) => `seeall:${categoryId}`;
-const SEARCH_INPUT_ID = "series-search-input";
+const SEARCH_BUTTON_ID = "series-search-button";
+const REFRESH_BUTTON_ID = "series-refresh-button";
export function SeriesScreen({
source,
@@ -110,6 +120,8 @@ export function SeriesScreen({
onBack,
initialSelectedId,
onSelectionChange,
+ onCloseDetail,
+ onOpenSearch,
continueWatchingVersion,
isPlaybackOpen = false,
}: SeriesScreenProps): JSX.Element {
@@ -125,13 +137,6 @@ export function SeriesScreen({
}, [memoryKey, activeCategoryId]);
// Kids profiles only see what the content policy allows (docs/kids-profile.md §6); a standard profile's policy passes everything.
const policy = useContentPolicy(profile, source.id);
- const [searchQuery, setSearchQuery] = useState("");
- const searchInputRef = useRef(null);
-
- // The query that actually runs: debounced and ignored below 2 characters
- // (see useSearchQuery), so typing doesn't refilter/re-render the catalog
- // on every keystroke. searchQuery itself only drives the input's text.
- const trimmedQuery = useSearchQuery(searchQuery);
const isAllCategories = activeCategoryId === ALL_CATEGORIES_ID;
// Every read below comes from the local series table, which the sync
@@ -150,7 +155,7 @@ export function SeriesScreen({
// While the table is still being built, a single category is fetched with
// the provider's own category filter — see VodScreen's useCategoryFetch.
// Never for a Kids profile: unfiltered provider data must not render while the table is built.
- const useCategoryFetch = isAwaitingSync && !isAllCategories && !trimmedQuery && !policy.isKids;
+ const useCategoryFetch = isAwaitingSync && !isAllCategories && !policy.isKids;
const loadCategorySeries = useCallback(
() => loadSeriesList(source, isAllCategories ? undefined : activeCategoryId),
[source, isAllCategories, activeCategoryId],
@@ -168,7 +173,7 @@ export function SeriesScreen({
const visibleCategories = useMemo(() => policy.visibleCatalogCategories("series", categories), [policy, categories]);
const catalogFilter = useMemo(() => policy.catalogFilter("series", categories), [policy, categories]);
- // Local-table path: paginated grid/search reads, grown on demand (see
+ // Local-table path: paginated category grid reads, grown on demand (see
// use-catalog-page.ts) — this is what lets the grid render a very large
// catalog without ever holding it all in memory.
const {
@@ -179,9 +184,8 @@ export function SeriesScreen({
total: localGridTotal,
} = useSeriesCatalogPage(source.id, {
categoryId: isAllCategories ? undefined : activeCategoryId,
- namePrefix: trimmedQuery || undefined,
filter: catalogFilter,
- enabled: isLocalCatalogReady && (!isAllCategories || trimmedQuery.length > 0),
+ enabled: isLocalCatalogReady && !isAllCategories,
});
// Fixed TV poster density (see tv-metrics.ts) — the grid and the D-pad focus graph share this column count.
@@ -200,7 +204,7 @@ export function SeriesScreen({
"series",
visibleCategories,
mapShelfPage,
- isLocalCatalogReady && isAllCategories && !trimmedQuery,
+ isLocalCatalogReady && isAllCategories,
);
// The browse card that opened the detail page, so Back returns focus to
@@ -245,13 +249,18 @@ export function SeriesScreen({
);
const { details, episodes } = seriesData;
- const categoryItems = useMemo(
- () => [
- { id: ALL_CATEGORIES_ID, label: "Browse", count: undefined as number | undefined },
- ...visibleCategories.map((c) => ({ id: c.id, label: c.name, count: undefined as number | undefined })),
- ],
- [visibleCategories],
- );
+ // Most-opened categories first, under "Frequently used". Read once per
+ // visit (the screen remounts on every tab switch) so the rail doesn't
+ // reshuffle under the user while they browse.
+ const frequentIds = useMemo(() => frequentCategoryIds(profile.id, source.id, "series"), [profile.id, source.id]);
+ const { categoryItems, railSections } = useMemo(() => {
+ const { frequent, rest } = splitByFrequency(visibleCategories, frequentIds);
+ const toItem = (c: { id: string; name: string }) => ({ id: c.id, label: c.name, count: undefined as number | undefined });
+ return {
+ categoryItems: [{ id: ALL_CATEGORIES_ID, label: "Browse", count: undefined as number | undefined }, ...frequent.map(toItem), ...rest.map(toItem)],
+ railSections: frequent.length > 0 ? [{ at: 1, label: "Frequently used" }, { at: 1 + frequent.length, label: "Categories" }] : [{ at: 1, label: "Categories" }],
+ };
+ }, [visibleCategories, frequentIds]);
const activeCategoryLabel = categoryItems.find((c) => c.id === activeCategoryId)?.label ?? "Browse";
// A remembered category a parent has since hidden falls back to Browse.
@@ -260,40 +269,25 @@ export function SeriesScreen({
if (!visibleCategories.some((c) => c.id === activeCategoryId)) setActiveCategoryId(ALL_CATEGORIES_ID);
}, [policy.isKids, isAllCategories, categories.length, visibleCategories, activeCategoryId]);
- // A category other than "All Categories", or a non-empty search query,
- // replaces the shelf browser with a single flat, vertically-scrolling
- // grid — Netflix's own "browsing a category"/search-results behavior,
- // versus shelves' one-row-per-category layout which doesn't make sense
- // once there's only one category (or an arbitrary text match) to show.
- // Search takes priority over the category filter when both are active,
- // searching within the selected category rather than across all series.
+ // A category other than "All Categories" replaces the shelf browser with
+ // a single flat, vertically-scrolling grid — Netflix's own "browsing a
+ // category" behavior, versus shelves' one-row-per-category layout which
+ // doesn't make sense once there's only one category to show. Searching
+ // is the Search screen's job (the header's Search button).
// The filtering happens inside useSeriesCatalogPage's IndexedDB query;
// the category fetch is rendered a page at a time like the table path.
const categoryFetchPage = useIncrementalList(useCategoryFetch ? categoryFetchSeries : null);
- const gridSeries = isLocalCatalogReady ? (isAllCategories && !trimmedQuery ? null : localGridSeries) : (categoryFetchPage?.visible ?? null);
+ const gridSeries = isLocalCatalogReady ? (isAllCategories ? null : localGridSeries) : (categoryFetchPage?.visible ?? null);
const gridHasMore = isLocalCatalogReady ? localGridHasMore : (categoryFetchPage?.hasMore ?? false);
const loadMoreGrid = isLocalCatalogReady ? loadMoreLocalGrid : categoryFetchPage?.loadMore;
+ // The grid's query hasn't answered yet — a spinner, never a premature "No series in this category".
+ const isGridLoading = isLocalCatalogReady ? isLocalGridLoading : useCategoryFetch && isCategoryFetchLoading;
+ const isShelvesLoading = isLocalCatalogReady && isLocalShelvesLoading && shelves.length === 0;
// Nothing to browse yet: the table is still being built (Xtream), or the playlist simply has no series (M3U).
const showSyncNotice = isAwaitingSync && !useCategoryFetch;
const showNoSeries = localCatalogStatus === "not-synced" && !hasSeriesApi;
- const isBrowseLoading = isCheckingLocalCatalog
- ? true
- : isLocalCatalogReady
- ? isAllCategories && !trimmedQuery
- ? isLocalShelvesLoading
- : isLocalGridLoading
- : useCategoryFetch && isCategoryFetchLoading;
-
- // isBrowseLoading briefly flips true again on the local-table path on
- // every query change (each keystroke while searching, or a new category)
- // — see VodScreen's identical hasEverShownContentRef comment for why
- // gating the whole screen (search input included) on that would reset
- // mid-keystroke instead of showing an in-place update.
- const hasEverShownBrowseRef = useRef(false);
- if (!isBrowseLoading) hasEverShownBrowseRef.current = true;
- const showFullScreenBrowseSkeleton = isBrowseLoading && !hasEverShownBrowseRef.current;
const seasons = useMemo(() => Array.from(new Set(episodes.map((ep) => ep.season))).sort((a, b) => a - b), [episodes]);
const currentSeason = activeSeason ?? seasons[0] ?? null;
@@ -334,8 +328,12 @@ export function SeriesScreen({
// Header for the content area: the category (or search) being shown and,
// for a single category, how many titles it holds.
- const headerTitle = trimmedQuery ? `Results for "${trimmedQuery}"` : isAllCategories ? "Series" : activeCategoryLabel;
+ const headerTitle = isAllCategories ? "Series" : activeCategoryLabel;
const headerCount = gridSeries ? (isLocalCatalogReady ? localGridTotal : categoryFetchSeries.length) : null;
+ // "Updated 3h ago", and a Refresh for the one category on screen.
+ const freshness = useCatalogFreshness(source, "series", isAllCategories ? undefined : activeCategoryId, isLocalCatalogReady);
+ const { canRefresh, refresh: refreshCategory } = freshness;
+ const headerDetail = [headerCount != null ? `${headerCount} ${headerCount === 1 ? "title" : "titles"}` : null, freshness.updatedLabel].filter(Boolean).join(" · ");
const firstContentId = gridSeries ? (gridSeries[0] ? gridItemId(gridSeries[0].id) : undefined) : shelves[0]?.items[0]?.id;
const firstContentIdRef = useRef(firstContentId);
@@ -346,6 +344,8 @@ export function SeriesScreen({
// focus follows into the new content once its focus graph registers —
// see the browse graph effect below.
const focusContentOnNextGraphRef = useRef(false);
+ // Set when focus was parked on the Search button because there was nothing else to hold it (still loading).
+ const focusParkedRef = useRef(false);
const selectCategory = useCallback((id: string) => {
if (id === activeCategoryIdRef.current) {
@@ -354,28 +354,29 @@ export function SeriesScreen({
if (first) useFocusStore.getState().focus(first);
return;
}
+ if (id !== ALL_CATEGORIES_ID) recordCategoryUse(profile.id, source.id, "series", id);
focusContentOnNextGraphRef.current = true;
setActiveCategoryId(id);
- }, []);
+ }, [profile.id, source.id]);
- /** Moves focus into the category rail (which expands it), leaving the search box's native focus if it had it. */
+ /** Moves focus into the category rail (which expands it). */
const openCategoryRail = useCallback(() => {
- if (document.activeElement instanceof HTMLElement) document.activeElement.blur();
useFocusStore.getState().focus(categoryRailItemId(activeCategoryIdRef.current));
}, []);
- // Search input's proxy focus node — see SeriesSearchInput's doc comment
- // for why a native needs a Focusable stand-in rather than being a
- // spatial-nav node itself. Sits to the right of the category dropdown's
- // trigger in the same sticky bar.
+ // The header's buttons, beside the title — Refresh (one category shown) then Search: Left toward the category rail, Down into the content.
useEffect(() => {
if (selected) {
- clearGraph("chrome:series-search"); // no search box on the detail page
+ clearGraph("chrome:series-search"); // no Search button on the detail page
return;
}
- const node = { id: SEARCH_INPUT_ID, neighbors: { left: categoryRailItemId(activeCategoryId), down: firstContentId }, onSelect: () => searchInputRef.current?.focus() };
- setGraph("chrome:series-search", [node], undefined, { passive: true });
- }, [selected, activeCategoryId, firstContentId, setGraph, clearGraph]);
+ const railEntryId = categoryRailItemId(activeCategoryId);
+ const search = { id: SEARCH_BUTTON_ID, neighbors: { left: canRefresh ? REFRESH_BUTTON_ID : railEntryId, down: firstContentId }, onSelect: onOpenSearch };
+ const nodes = canRefresh
+ ? [{ id: REFRESH_BUTTON_ID, neighbors: { left: railEntryId, right: SEARCH_BUTTON_ID, down: firstContentId }, onSelect: refreshCategory }, search]
+ : [search];
+ setGraph("chrome:series-search", nodes, undefined, { passive: true });
+ }, [selected, activeCategoryId, firstContentId, onOpenSearch, canRefresh, refreshCategory, setGraph, clearGraph]);
// Rebuilds above replace the scope in place (setGraph is atomic); clearing
// it on every rebuild would drop focus for an instant and snap it back to
// the first node. Clear only when this component goes away.
@@ -384,8 +385,8 @@ export function SeriesScreen({
// Browse mode's focus graph: either the shelf browser (one row per
// category, plus a trailing "See all" card) or a single flat grid (one
- // category from the rail, or a search) — never both. Up from the top row
- // reaches the search box; Left from the first column opens the category
+ // category from the rail) — never both. Up from the top row reaches the
+ // Search button; Left from the first column opens the category
// rail on the active category.
useEffect(() => {
if (selected) return;
@@ -398,22 +399,39 @@ export function SeriesScreen({
useFocusStore.getState().focus(returnTo);
return;
}
- if (!focusContentOnNextGraphRef.current) return;
+ const parked = focusParkedRef.current && useFocusStore.getState().focusedId === SEARCH_BUTTON_ID;
+ focusParkedRef.current = false;
+ if (!focusContentOnNextGraphRef.current && !parked) return;
focusContentOnNextGraphRef.current = false;
useFocusStore.getState().focus(id);
};
+ // Nothing to focus in the content yet: hold focus in the top bar so Left
+ // (category rail) and Back still work, and hand it to the content once it loads.
+ const parkFocus = () => {
+ const { focusedId } = useFocusStore.getState();
+ // Only take focus nobody holds — or move focus this screen parked itself.
+ if (focusedId !== null && !(focusParkedRef.current && focusedId === SEARCH_BUTTON_ID)) return;
+ if (showSyncNotice || showNoSeries) {
+ focusParkedRef.current = false;
+ useFocusStore.getState().focus(railEntryId);
+ return;
+ }
+ useFocusStore.getState().focus(SEARCH_BUTTON_ID);
+ focusParkedRef.current = true;
+ };
if (gridSeries) {
const ids = gridSeries.map((item) => gridItemId(item.id));
if (ids.length === 0) {
setGraph(CONTENT_ENTRY_SCOPE, []);
+ parkFocus();
return;
}
const nodes = buildGridFocusGraph(ids, gridColumns).map((node, index) => ({
...node,
neighbors: {
...node.neighbors,
- up: index < gridColumns ? SEARCH_INPUT_ID : node.neighbors.up,
+ up: index < gridColumns ? SEARCH_BUTTON_ID : node.neighbors.up,
left: index % gridColumns === 0 ? railEntryId : node.neighbors.left,
},
}));
@@ -425,8 +443,7 @@ export function SeriesScreen({
const rows = shelves.map((shelf) => [...shelf.items.map((item) => item.id), seeAllId(shelf.id)]);
if (rows.length === 0) {
setGraph(CONTENT_ENTRY_SCOPE, []);
- // Nothing to browse (table still being built, or no series at all): the rail is the only thing to hold focus.
- if ((showSyncNotice || showNoSeries) && useFocusStore.getState().focusedId === null) useFocusStore.getState().focus(railEntryId);
+ parkFocus();
return;
}
const categoryBySeeAllId = new Map(shelves.map((shelf) => [seeAllId(shelf.id), shelf.id]));
@@ -437,7 +454,7 @@ export function SeriesScreen({
...node,
neighbors: {
...node.neighbors,
- up: index < rows[0].length ? SEARCH_INPUT_ID : node.neighbors.up,
+ up: index < rows[0].length ? SEARCH_BUTTON_ID : node.neighbors.up,
left: rowStarts.has(node.id) ? railEntryId : node.neighbors.left,
},
onSelect: seeAllCategory ? () => selectCategory(seeAllCategory) : undefined,
@@ -541,7 +558,10 @@ export function SeriesScreen({
onBack: () => {
// Detail view → back to browsing. Browsing: Back from the content
// opens the category rail first; Back from the rail leaves the screen.
- if (selected) setSelected(null);
+ if (selected) {
+ if (onCloseDetail) onCloseDetail();
+ else setSelected(null);
+ }
else if (useFocusStore.getState().focusedId?.startsWith("rail:")) onBack();
else openCategoryRail();
},
@@ -550,19 +570,21 @@ export function SeriesScreen({
);
// The browse grid/shelves, memoised so screen-level state that doesn't
- // change them — the category menu opening/closing, each raw keystroke in
- // the search box — doesn't re-render every card on screen.
+ // change them — e.g. the category menu opening/closing — doesn't
+ // re-render every card on screen.
const browseContent = useMemo(
() => (
<>
{showSyncNotice ? (
- 0} canPickCategory />
+
+
+
+
+ {activeCategoryLabel}
+
+
+ {visibleChannels.length} {visibleChannels.length === 1 ? "channel" : "channels"}
+
{visibleChannels.length === 0 ? (
@@ -294,6 +314,7 @@ export function LiveTvScreen({ source, platform, profile, onBack, onPlay, isPlay
onHighlight={handleHighlight}
onSelect={handleSelectChannel}
leftEntryId={categoryRailItemId(activeCategoryId)}
+ topEntryId={SEARCH_BUTTON_ID}
rightEntryId={previewChannel ? FAVORITE_BUTTON_ID : undefined}
/>
)}
diff --git a/src/screens/PlayerScreen.test.tsx b/src/screens/PlayerScreen.test.tsx
index 10d3e04..8c09df5 100644
--- a/src/screens/PlayerScreen.test.tsx
+++ b/src/screens/PlayerScreen.test.tsx
@@ -5,6 +5,7 @@ import { useFocusStore } from "../ui/focus/focus-store.js";
import { isFavorite } from "../profile-store.js";
import { PlayerScreen } from "./PlayerScreen.js";
import { updateSettings } from "../settings-store.js";
+import { workingLiveStreamFormat } from "../live-stream-url.js";
const guide = vi.hoisted(() => ({ nowNext: null as unknown }));
vi.mock("../use-now-next.js", () => ({
@@ -191,40 +192,115 @@ describe("PlayerScreen", () => {
expect(second.engine.load).toHaveBeenCalledWith("s", expect.objectContaining({ startPositionSeconds: undefined }));
});
- it("when an Xtream live channel fails, offers it in the other format first", async () => {
+ describe("live stream formats", () => {
const hls = "http://tv.example/live/me/pw/42.m3u8";
- const { engine, fail } = makeEngine(NaN);
- const onPlayAlternateStream = vi.fn();
- render( {}} title="News" isLive onPlayAlternateStream={onPlayAlternateStream} engineFactory={() => engine} />);
- await act(async () => {});
+ const ts = "http://tv.example/live/me/pw/42.ts";
+ beforeEach(() => localStorage.clear());
+
+ /** Engines handed out in order; `hang` ones never finish loading (a channel that doesn't start). */
+ function engineQueue(...hang: boolean[]) {
+ const engines = hang.map((hangOnLoad) => makeEngine(NaN, { hangOnLoad }));
+ let created = 0;
+ return { engines, factory: () => engines[created++].engine, created: () => created };
+ }
+ const loadedUrl = (engine: PlayerEngine) => (engine.load as ReturnType).mock.calls[0]?.[0];
- fail({ kind: "media", fatal: true, message: "unsupported" });
- expect(screen.getByText(/was playing as HLS\. Some providers stream more reliably as MPEG-TS/)).toBeDefined();
- expect(focusedId()).toBe("player-error-alternate");
- press("Enter");
- expect(onPlayAlternateStream).toHaveBeenCalledWith("http://tv.example/live/me/pw/42.ts");
+ it("Auto: a channel that fails before its first frame is quietly tried in the other format, which is remembered", async () => {
+ const { engines, factory } = engineQueue(true, false);
+ render( {}} title="News" isLive liveSourceId="src-1" engineFactory={factory} />);
+ await act(async () => {});
- press("ArrowRight");
- expect(focusedId()).toBe("player-error-retry");
- });
+ engines[0].fail({ kind: "manifest", fatal: true, message: "bad playlist" });
+ await act(async () => {});
- it("offers HLS when an MPEG-TS channel fails", async () => {
- const { engine, fail } = makeEngine(NaN);
- render(
- {}} title="News" isLive onPlayAlternateStream={() => {}} engineFactory={() => engine} />,
- );
- await act(async () => {});
- fail({ kind: "network", fatal: true, message: "gone" });
- expect(screen.getByRole("button", { name: "Try HLS" })).toBeDefined();
- });
+ expect(screen.queryByRole("alert")).toBeNull();
+ expect(loadedUrl(engines[1].engine)).toBe(ts);
+ expect(workingLiveStreamFormat("src-1")).toBe("ts");
+ });
- it("offers no other format for anything that isn't an Xtream live channel", async () => {
- const { engine, fail } = makeEngine(3600);
- render( {}} title="Film" onPlayAlternateStream={() => {}} engineFactory={() => engine} />);
- await act(async () => {});
- fail({ kind: "media", fatal: true, message: "codec" });
- expect(screen.queryByRole("button", { name: /Try (HLS|MPEG-TS)/ })).toBeNull();
- expect(focusedId()).toBe("player-error-retry");
+ it("Auto: a channel that hasn't started after 12 seconds is tried in the other format", async () => {
+ const { engines, factory } = engineQueue(true, true);
+ render( {}} title="News" isLive liveSourceId="src-1" engineFactory={factory} />);
+ await act(async () => {});
+
+ act(() => vi.advanceTimersByTime(11_000));
+ expect(engines[1].engine.load).not.toHaveBeenCalled();
+ act(() => vi.advanceTimersByTime(1_000));
+ await act(async () => {});
+ expect(loadedUrl(engines[1].engine)).toBe(ts);
+ });
+
+ it("Auto: the error shows only once both formats have failed; Try Again starts over in the first", async () => {
+ const { engines, factory } = engineQueue(true, true, false);
+ render( {}} title="News" isLive liveSourceId="src-1" engineFactory={factory} />);
+ await act(async () => {});
+ engines[0].fail({ kind: "network", fatal: true, message: "gone" });
+ await act(async () => {});
+ engines[1].fail({ kind: "network", fatal: true, message: "gone" });
+
+ expect(screen.getByRole("alert")).toBeDefined();
+ expect(screen.queryByRole("button", { name: /Try (HLS|MPEG-TS)/ })).toBeNull();
+ expect(screen.queryByText(/fixed in App Settings/)).toBeNull();
+ expect(focusedId()).toBe("player-error-retry");
+ expect(workingLiveStreamFormat("src-1")).toBeUndefined();
+
+ press("Enter");
+ await act(async () => {});
+ expect(loadedUrl(engines[2].engine)).toBe(hls);
+ });
+
+ it("a fixed format never switches by itself, and the error says where to change it", async () => {
+ updateSettings({ liveStreamFormat: "m3u8" });
+ const { engines, factory, created } = engineQueue(true, false);
+ render( {}} title="News" isLive liveSourceId="src-1" engineFactory={factory} />);
+ await act(async () => {});
+ engines[0].fail({ kind: "manifest", fatal: true, message: "bad playlist" });
+
+ expect(screen.getByRole("alert").textContent).toContain("Set it to Auto");
+ expect(created()).toBe(1);
+ });
+
+ it("a channel that drops after playing is reconnected in the same format, twice, before the error", async () => {
+ const { engines, factory } = engineQueue(false, false, false);
+ render( {}} title="News" isLive liveSourceId="src-1" engineFactory={factory} />);
+ await act(async () => {});
+
+ for (const index of [0, 1]) {
+ engines[index].fail({ kind: "network", fatal: true, message: "dropped" });
+ await act(async () => {});
+ expect(screen.queryByRole("alert")).toBeNull();
+ expect(loadedUrl(engines[index + 1].engine)).toBe(hls);
+ }
+ engines[2].fail({ kind: "network", fatal: true, message: "dropped" });
+ expect(screen.getByRole("alert")).toBeDefined();
+ });
+
+ it("the menu's Stream Format switches the channel by hand", async () => {
+ const { engines, factory } = engineQueue(false, false);
+ render( {}} title="News" isLive liveSourceId="src-1" engineFactory={factory} />);
+ await act(async () => {});
+ engines[0].tick(10);
+ press("ArrowRight");
+ press("Enter");
+ expect(screen.getByRole("button", { name: "HLS", pressed: true })).toBeDefined();
+
+ act(() => useFocusStore.getState().focus("player-stream-format:ts"));
+ press("Enter");
+ await act(async () => {});
+ expect(loadedUrl(engines[1].engine)).toBe(ts);
+ expect(screen.queryByRole("dialog")).toBeNull();
+ });
+
+ it("offers no format choice for anything that isn't an Xtream live channel", async () => {
+ const { engine, tick } = makeEngine(NaN);
+ render( {}} title="News" isLive engineFactory={() => engine} />);
+ await act(async () => {});
+ tick(10);
+ press("ArrowRight");
+ press("Enter");
+ expect(screen.getByRole("dialog", { name: "Audio & Subtitles" })).toBeDefined();
+ expect(screen.queryByText("Stream Format")).toBeNull();
+ });
});
it("shows an error for a fatal failure (not a recovering one); Try Again reloads from where it got to", async () => {
diff --git a/src/screens/PlayerScreen.tsx b/src/screens/PlayerScreen.tsx
index 1b08243..caff66e 100644
--- a/src/screens/PlayerScreen.tsx
+++ b/src/screens/PlayerScreen.tsx
@@ -17,8 +17,8 @@ import {
import { ArrowLeft, Play, RotateCcw, TriangleAlert } from "lucide-react";
import { isFavorite, toggleFavorite, upsertContinueWatching, type ResumePoint } from "../profile-store.js";
import { loadSettings } from "../settings-store.js";
-import { alternateLiveStream, LIVE_STREAM_FORMAT_LABELS } from "../live-stream-url.js";
-import { liveStreamFormatOf } from "@core";
+import { alternateLiveStream, LIVE_STREAM_FORMAT_LABELS, rememberWorkingLiveStreamFormat } from "../live-stream-url.js";
+import { liveStreamFormatOf, withLiveStreamFormat, type LiveStreamFormat } from "@core";
import { useFavoritesRevision } from "../use-favorites-revision.js";
import type { ChannelLineup } from "../channel-lineup.js";
import { useNowNext } from "../use-now-next.js";
@@ -71,11 +71,11 @@ export interface PlayerScreenProps {
/** What's playing, for Recently Watched (omitted for catch-up). */
watchTarget?: WatchTarget;
/**
- * Plays the same Xtream live channel in the other format (HLS ↔ MPEG-TS)
- * — offered on the error screen when this stream fails. Omitted: no
- * alternative is offered.
+ * Live TV: the playlist the channel belongs to. On the Auto live stream
+ * format, the format a channel starts in is remembered for it (see
+ * live-stream-url.ts), so the next channel starts in it too.
*/
- onPlayAlternateStream?: (streamUrl: string) => void;
+ liveSourceId?: string;
/** Test seam — see VideoSurface. */
engineFactory?: () => PlayerEngine;
}
@@ -92,6 +92,16 @@ const SEEK_COMMIT_MS = 800;
/** Buffering this long without recovering (a dead link, or a stream that stopped) is shown as an error. */
const STALL_TIMEOUT_MS = 30_000;
+/** Auto live format: a channel that hasn't started after this long is tried in the other format (HLS ↔ MPEG-TS). */
+const FORMAT_SWITCH_AFTER_MS = 12_000;
+
+/** A live channel that was playing and stalls this long is reconnected (in the same format)… */
+const LIVE_RECONNECT_STALL_MS = 15_000;
+/** …up to this many times in a row before the error is shown. */
+const MAX_LIVE_RECONNECTS = 2;
+/** Playing this long since the last reconnect makes the next drop a fresh one, with its reconnects available again. */
+const RECONNECT_RESET_MS = 60_000;
+
/** How long the channel banner stays up after changing channel. */
const CHANNEL_BANNER_MS = 5000;
@@ -117,7 +127,6 @@ const START_OVER_ID = "player-resume-start-over";
const ERROR_SCOPE = "player-error";
const RETRY_ID = "player-error-retry";
const ERROR_BACK_ID = "player-error-back";
-const ALTERNATE_STREAM_ID = "player-error-alternate";
/** Scrub step grows the longer Left/Right is held or tapped in a row: 10s, then 30s, then 60s. */
function seekStepFor(pressCount: number): number {
@@ -166,6 +175,14 @@ function describeFailure(failure: PlaybackFailure, isLive: boolean): string {
* engine error, or buffering for STALL_TIMEOUT_MS) it shows an error with
* Try Again, which reloads from where playback got to.
*
+ * Xtream live channels come as HLS or MPEG-TS. On the Auto format setting,
+ * a channel that fails before its first frame is quietly tried in the
+ * other format behind the loading screen, and the error only shows if that
+ * fails too. A channel that drops after it was playing is reconnected in
+ * the same format (MAX_LIVE_RECONNECTS times) — a drop mid-stream is
+ * usually the network, not the format. The Audio & Subtitles menu also
+ * lets the viewer switch format by hand.
+ *
* No on-screen volume control: TV playback uses the TV's own volume.
*/
export function PlayerScreen({
@@ -178,7 +195,7 @@ export function PlayerScreen({
onNextEpisode,
upNextEpisode,
isLive = false,
- onPlayAlternateStream,
+ liveSourceId,
liveChannel,
guideSource,
channelLineup,
@@ -217,13 +234,24 @@ export function PlayerScreen({
const startPositionSeconds =
startAt?.streamUrl === streamUrl ? startAt.seconds : autoResume && resumeFrom ? resumeFrom.positionSeconds : undefined;
const [attempt, setAttempt] = useState(0);
- // An Xtream live channel can also be played in the other format — offered if this one fails.
- const alternateStream = useMemo(() => alternateLiveStream(streamUrl), [streamUrl]);
- const currentFormat = liveStreamFormatOf(streamUrl);
+ // An Xtream live channel playing in the other format than it was opened
+ // in (Auto's fallback, or the viewer's pick) — tied to the URL it
+ // replaces, so a channel change drops it.
+ const [formatSwitch, setFormatSwitch] = useState<{ from: string; url: string } | null>(null);
+ const activeUrl = formatSwitch?.from === streamUrl ? formatSwitch.url : streamUrl;
+ const currentFormat = liveStreamFormatOf(activeUrl);
// App Settings → Playback, read for each stream (and each retry) so a change applies to the next thing played.
// eslint-disable-next-line react-hooks/exhaustive-deps
const playbackPrefs = useMemo(() => loadSettings(), [streamUrl, attempt]);
+ // Auto may switch format once per channel open (a manual pick counts as the switch).
+ const autoAlternate =
+ isLive && playbackPrefs.liveStreamFormat === "auto" && formatSwitch?.from !== streamUrl ? alternateLiveStream(activeUrl) : undefined;
const [failure, setFailure] = useState(null);
+ // The URL that has shown a frame since this channel opened: a failure
+ // before that is a startup failure (try the other format), after it a
+ // drop (reconnect in the same one).
+ const startedUrlRef = useRef(null);
+ const reconnectsRef = useRef({ count: 0, lastAt: 0 });
const [isPlaying, setIsPlaying] = useState(true);
const [positionSeconds, setPositionSeconds] = useState(0);
@@ -336,6 +364,8 @@ export function PlayerScreen({
panelRef.current = panel;
const stateRef = useRef({ isPlaying, isPanelOpen, areControlsVisible, positionSeconds, durationSeconds, pendingSeekSeconds, isShowingVideo, isPausedInfoShown, hasEpisodes });
stateRef.current = { isPlaying, isPanelOpen, areControlsVisible, positionSeconds, durationSeconds, pendingSeekSeconds, isShowingVideo, isPausedInfoShown, hasEpisodes };
+ const streamRef = useRef({ activeUrl, autoAlternate, isAutoFormat: playbackPrefs.liveStreamFormat === "auto", liveSourceId });
+ streamRef.current = { activeUrl, autoAlternate, isAutoFormat: playbackPrefs.liveStreamFormat === "auto", liveSourceId };
const hideTimerRef = useRef | null>(null);
const seekTimerRef = useRef | null>(null);
@@ -404,29 +434,87 @@ export function PlayerScreen({
[onNextEpisode, showControls],
);
- // Stable identity: VideoSurface reloads the stream when onError changes.
- const handleError = useCallback(
- (error: PlayerError) => {
- if (!error.fatal) return; // the engine is recovering; buffering covers it
+ /** A fresh engine on the current (or a switched-to) URL, behind the loading screen or banner. */
+ const reloadStream = useCallback(() => {
+ clearStallTimer();
+ setFailure(null);
+ setHasStarted(false);
+ sawBufferingRef.current = false;
+ setAttempt((n) => n + 1);
+ }, [clearStallTimer]);
+
+ /**
+ * A fatal error or a stall. Live channels get two chances before the
+ * error shows: before the first frame, Auto tries the other format; after
+ * it, the same stream is reconnected a couple of times.
+ */
+ const handleFailure = useCallback(
+ (failed: PlaybackFailure) => {
clearStallTimer();
- setFailure({ kind: error.kind });
+ const { activeUrl: url, autoAlternate: alternate } = streamRef.current;
+ const hasPlayed = startedUrlRef.current === url;
+ if (!hasPlayed && alternate) {
+ setFormatSwitch({ from: streamUrl, url: alternate.url });
+ reloadStream();
+ return;
+ }
+ if (hasPlayed && isLive) {
+ const reconnects = reconnectsRef.current;
+ const now = Date.now();
+ if (now - reconnects.lastAt > RECONNECT_RESET_MS) reconnects.count = 0;
+ if (reconnects.count < MAX_LIVE_RECONNECTS) {
+ reconnects.count += 1;
+ reconnects.lastAt = now;
+ reloadStream();
+ return;
+ }
+ }
+ setFailure(failed);
},
- [clearStallTimer],
+ [clearStallTimer, reloadStream, streamUrl, isLive],
);
+ const handleFailureRef = useRef(handleFailure);
+ handleFailureRef.current = handleFailure;
+
+ // Stable identity: VideoSurface reloads the stream when onError changes.
+ const handleError = useCallback((error: PlayerError) => {
+ if (!error.fatal) return; // the engine is recovering; buffering covers it
+ handleFailureRef.current({ kind: error.kind });
+ }, []);
const handleBufferingChange = useCallback(
(isBuffering: boolean) => {
clearStallTimer();
if (isBuffering) {
sawBufferingRef.current = true;
- stallTimerRef.current = setTimeout(() => setFailure({ kind: "network", stalled: true }), STALL_TIMEOUT_MS);
+ // A channel not yet started is given less time when Auto has another format to try; a dropped one is reconnected sooner.
+ const { activeUrl: url, autoAlternate: alternate } = streamRef.current;
+ const hasPlayed = startedUrlRef.current === url;
+ const timeout = !hasPlayed && alternate ? FORMAT_SWITCH_AFTER_MS : hasPlayed && isLive ? LIVE_RECONNECT_STALL_MS : STALL_TIMEOUT_MS;
+ stallTimerRef.current = setTimeout(() => handleFailureRef.current({ kind: "network", stalled: true }), timeout);
} else if (sawBufferingRef.current) {
setHasStarted(true); // the first load finished — the stream is playing
+ // A live channel that starts on Auto: remember its format for the playlist, so the next channel starts in it.
+ const { activeUrl: url, isAutoFormat, liveSourceId: sourceId } = streamRef.current;
+ startedUrlRef.current = url;
+ const format = liveStreamFormatOf(url);
+ if (isLive && isAutoFormat && format && sourceId) rememberWorkingLiveStreamFormat(sourceId, format);
}
},
- [clearStallTimer],
+ [clearStallTimer, isLive],
);
+ /** Stream Format in the menu: the same channel in the chosen format, now. */
+ function selectStreamFormat(format: LiveStreamFormat): void {
+ setPanel("none");
+ if (format === currentFormat) return;
+ const url = withLiveStreamFormat(streamUrl, format);
+ if (!url) return;
+ setFormatSwitch(url === streamUrl ? null : { from: streamUrl, url });
+ reloadStream();
+ showControls();
+ }
+
// A fresh stream (channel/episode change) starts with no known tracks
// until the new engine reports in — reset so the Audio & Subtitles panel
// doesn't briefly show the previous stream's tracks.
@@ -440,6 +528,8 @@ export function PlayerScreen({
setPanel("none");
setHasStarted(false);
sawBufferingRef.current = false;
+ startedUrlRef.current = null;
+ reconnectsRef.current = { count: 0, lastAt: 0 };
if (seekTimerRef.current) clearTimeout(seekTimerRef.current);
}, [streamUrl]);
@@ -455,10 +545,11 @@ export function PlayerScreen({
const { positionSeconds: position } = stateRef.current;
const from = isLive ? undefined : position > 0 ? position : startPositionSeconds;
setStartAt(from !== undefined ? { streamUrl, seconds: from } : null);
- setFailure(null);
- setHasStarted(false);
- sawBufferingRef.current = false;
- setAttempt((n) => n + 1);
+ // A fresh start: the channel's first format again, with Auto's switch and the reconnects available.
+ setFormatSwitch(null);
+ startedUrlRef.current = null;
+ reconnectsRef.current = { count: 0, lastAt: 0 };
+ reloadStream();
showControls();
}
@@ -711,7 +802,7 @@ export function PlayerScreen({
{failure === null && (
onNextEpisode?.()}
+ streamFormat={
+ isLive && currentFormat
+ ? {
+ options: (["m3u8", "ts"] as const).map((format) => ({ id: format, label: LIVE_STREAM_FORMAT_LABELS[format] })),
+ activeId: currentFormat,
+ onSelect: (id) => selectStreamFormat(id as LiveStreamFormat),
+ }
+ : undefined
+ }
/>
{panel === "episodes" && episodes && (
onPlayAlternateStream(alternateStream.url) : undefined}
onBack={onClose}
/>
)}
@@ -868,51 +966,24 @@ function ResumeChoice({
);
}
-/**
- * A failed stream. For an Xtream live channel it also offers the same
- * channel in the other format (HLS ↔ MPEG-TS) — first and focused, since
- * retrying the format that just failed usually fails the same way, and
- * which one a panel serves reliably varies.
- */
+/** Shown under a live channel's error when the format is fixed in App Settings — Auto would have tried the other one. */
+const LIVE_FORMAT_HINT = "Your Live Stream Format is fixed in App Settings. Set it to Auto to try the other format automatically.";
+
+/** A failed stream: Try Again (focused) or Back. */
function PlaybackError({
title,
message,
- alternate,
- currentFormatLabel,
+ hint,
onRetry,
- onAlternate,
onBack,
}: {
title?: string;
message: string;
- alternate?: { label: string };
- currentFormatLabel?: string;
+ hint?: string;
onRetry: () => void;
- onAlternate?: () => void;
onBack: () => void;
}): JSX.Element {
- const setGraph = useFocusStore((state) => state.setGraph);
- const clearGraph = useFocusStore((state) => state.clearGraph);
- const focus = useFocusStore((state) => state.focus);
- const latestRef = useRef({ onRetry, onAlternate, onBack });
- latestRef.current = { onRetry, onAlternate, onBack };
- const hasAlternate = Boolean(alternate && onAlternate);
-
- useEffect(() => {
- const ids = [...(hasAlternate ? [ALTERNATE_STREAM_ID] : []), RETRY_ID, ERROR_BACK_ID];
- const actions: Record void> = {
- [ALTERNATE_STREAM_ID]: () => latestRef.current.onAlternate?.(),
- [RETRY_ID]: () => latestRef.current.onRetry(),
- [ERROR_BACK_ID]: () => latestRef.current.onBack(),
- };
- setGraph(
- ERROR_SCOPE,
- ids.map((id, index) => ({ id, neighbors: { left: ids[index - 1], right: ids[index + 1] }, onSelect: actions[id] })),
- );
- // Other scopes (the controls) may still hold focus while unmounting.
- focus(ids[0]);
- return () => clearGraph(ERROR_SCOPE);
- }, [hasAlternate, setGraph, clearGraph, focus]);
+ useTwoButtonGraph(ERROR_SCOPE, RETRY_ID, ERROR_BACK_ID, onRetry, onBack);
return (
@@ -920,14 +991,9 @@ function PlaybackError({
diff --git a/src/screens/PlaylistCards.test.tsx b/src/screens/PlaylistCards.test.tsx
index 62f9f51..580f08a 100644
--- a/src/screens/PlaylistCards.test.tsx
+++ b/src/screens/PlaylistCards.test.tsx
@@ -120,7 +120,7 @@ describe("PlaylistCards", () => {
useSyncStore.getState().beginRun("a", "manual");
useSyncStore.getState().setStage("a", "vod", { status: "running", done: 1200 });
});
- expect(screen.getByText(`Syncing Movies… ${(1200).toLocaleString()}`)).toBeDefined();
+ expect(screen.getByText("Sync in progress…")).toBeDefined();
await act(async () => {
useSyncStore.getState().setStage("a", "vod", { status: "synced", count: 1200 });
diff --git a/src/screens/PlaylistCards.tsx b/src/screens/PlaylistCards.tsx
index 2c5825f..f39e3cd 100644
--- a/src/screens/PlaylistCards.tsx
+++ b/src/screens/PlaylistCards.tsx
@@ -344,7 +344,7 @@ function PlaylistCard({
// What's stored and how fresh — or, while this playlist syncs, its progress.
const syncState = useSourceSyncState(source.id);
const summary = useSyncSummary(source);
- const running = describeRunningSync(syncState, source);
+ const running = describeRunningSync(syncState);
const counts = formatCounts(summary);
const dim = isFocused ? "rgba(235,236,242,0.8)" : "rgba(235,236,242,0.6)";
diff --git a/src/screens/PlaylistPicker.tsx b/src/screens/PlaylistPicker.tsx
index d1ea5b7..9b79422 100644
--- a/src/screens/PlaylistPicker.tsx
+++ b/src/screens/PlaylistPicker.tsx
@@ -139,7 +139,7 @@ function PlaylistOption({ source, isActive, onSelect }: { source: PlaylistSource
const loadInfo = () => loadPlaylistInfo(source);
const { data: info } = useCachedContent(`playlist-info:${source.id}`, "playlist-info", loadInfo, EMPTY_PLAYLIST_INFO, { enabled: false });
- const running = describeRunningSync(syncState, source);
+ const running = describeRunningSync(syncState);
const expired = info.expiresAt !== null && info.expiresAt.getTime() < Date.now();
const counts = formatCounts(summary);
const status = expired
diff --git a/src/screens/SearchScreen.test.tsx b/src/screens/SearchScreen.test.tsx
new file mode 100644
index 0000000..f26669b
--- /dev/null
+++ b/src/screens/SearchScreen.test.tsx
@@ -0,0 +1,300 @@
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { PlaylistSource, Profile } from "@core";
+import { clearAllCachedContent } from "../content-cache.js";
+import { __clearCatalogDbForTests, __resetCatalogDbForTests, openCatalogDb, putRecordsBatch, putSyncMeta, type CatalogRecord } from "../core/storage/catalog-db.js";
+import { __clearLiveDbForTests, __resetLiveDbForTests, openLiveDb, putChannels, putLiveSyncMeta } from "../core/storage/live-db.js";
+import { __resetLiveStoreForTests } from "../live-store.js";
+import { recordWatchHistory } from "../profile-store.js";
+import { loadRecentSearches } from "../search/recent-searches.js";
+import { useFocusStore } from "../ui/focus/focus-store.js";
+import { runIndexJobs } from "../search/search-indexer.js";
+import { __resetSearchMemoryForTests, SearchScreen } from "./SearchScreen.js";
+
+vi.mock("../content-loader.js", () => ({
+ loadVodCategories: vi.fn().mockResolvedValue([
+ { id: "cat-1", name: "Action", kind: "movie" },
+ { id: "cat-kids", name: "Kids Movies", kind: "movie" },
+ ]),
+ loadSeriesCategories: vi.fn().mockResolvedValue([{ id: "cat-s", name: "Drama", kind: "series" }]),
+ loadLiveCategories: vi.fn().mockResolvedValue([]),
+}));
+// A playlist with no live list asks the sync manager for one; these tests cover what Search shows, not syncing.
+vi.mock("../sync/sync-manager.js", () => ({ syncSource: vi.fn().mockResolvedValue({ stages: {}, errors: {} }) }));
+const nowNext = vi.hoisted(() => ({ byChannel: new MapCan't play {title ? `“${title}”` : "this"}
{message}
- {hasAlternate && ( -- This channel was playing as {currentFormatLabel}. Some providers stream more reliably as {alternate!.label} — you can set the default in App Settings. -
- )} + {hint &&{hint}
}
- {hasAlternate &&
Recent searches
+
+ {recentSearches.map((term, index) => (
+ setQuery(term)} />
+ ))}
+
+
+
+ entry.kind === "live" ? (
+ openHistory(entry)} />
+ ) : (
+ openHistory(entry)}
+ />
+ )
+ }
+ />
+
+ )}
+
+ );
+ } else if (isCheckingTables || isWaitingForResults) {
+ results =
+
+
+
+
+
+ Searching “{source.name}”
+ {results} +{children}
; +} + +/** Every match of one kind (the best SEE_ALL_LIMIT) — what a row's See all card opens. */ +function SeeAllGrid({ source, kind, query, items, hasMore, isLoading }: { source: PlaylistSource; kind: ResultKind; query: string; items: ResultItem[]; hasMore: boolean; isLoading: boolean }): JSX.Element { + return ( +{KIND_TITLES[kind]}
++ {isLoading && items.length === 0 + ? `Matches for “${query}”` + : `${hasMore ? `The best ${items.length}` : items.length} ${items.length === 1 ? "match" : "matches"} for “${query}”`} +
+ {isLoading && items.length === 0 ? ( +
+ {/* Selecting goes through the focus graph (see contentRows), so the cards here only render. */}
+ {items.map((item) => (
+ {}} fill />
+ ))}
+
+ )}
+ This playlist has no series.
+ ) : isCheckingLocalCatalog || (gridSeries && isGridLoading) || (!gridSeries && isShelvesLoading) ? ( +- {trimmedQuery ? `No series match "${trimmedQuery}".` : "No series in this category."} + No series in this category.
) : ( ), - [gridSeries, shelves, trimmedQuery, favoriteSeriesIds, setSelected, selectCategory, showSyncNotice, showNoSeries, syncState], + [gridSeries, shelves, favoriteSeriesIds, setSelected, selectCategory, showSyncNotice, showNoSeries, syncState, isGridLoading, isShelvesLoading, isCheckingLocalCatalog, useCategoryFetch], ); if (selected) { @@ -640,11 +662,7 @@ export function SeriesScreen({
{isEpisodesLoading ? (
-
-
- );
- }
return (
@@ -690,10 +701,10 @@ export function SeriesScreen({
activeId={activeCategoryId}
onSelect={selectCategory}
rightEntryId={firstContentId}
- sectionBreakAt={1}
+ sections={railSections}
/>
- {/* Sticky so the title and search stay visible while shelves or a long grid scroll underneath, instead of scrolling away with the content. */}
+ {/* Sticky so the title and Search button stay visible while shelves or a long grid scroll underneath, instead of scrolling away with the content. */}
-
+ {freshness.result &&
- {Array.from({ length: EPISODE_COLUMNS }, (_, i) => (
-
+ No episodes available for this series yet.
) : ( @@ -669,13 +687,6 @@ export function SeriesScreen({ ); } - if (showFullScreenBrowseSkeleton) { - return ( -{headerTitle}
- {headerCount != null && (
-
- {headerCount} {headerCount === 1 ? "title" : "titles"}
-
+ {headerDetail && (
+ {headerDetail}
)}
-
{browseContent}
+ {canRefresh && (
+
@@ -1048,72 +1061,3 @@ function EpisodeCard({ episode, progress, onSelect }: { episode: SeriesEpisode;
);
}
-interface SeriesSearchInputProps {
- value: string;
- onChange: (value: string) => void;
-}
-
-/**
- * Plain native for filtering series by title — kept as a normal
- * focusable form control rather than a spatial-nav tile, same as
- * AddSourceScreen/ProfileForm's text fields: text entry on a TV remote goes
- * through the platform's own on-screen keyboard once the input has native
- * focus, and useRemoteInput steps aside from arrow keys/Enter while a text
- * field has focus (see its isTypingIntoTextField guard) so typing a query
- * doesn't fight D-pad navigation.
- *
- * The SEARCH_INPUT_ID Focusable is a thin proxy: pressing Select while it's
- * spatially focused hands off to the real input via its ref (same pattern
- * as ProfileForm's name field), rather than the input being a graph node
- * itself.
- */
-const SeriesSearchInput = forwardRef(function SeriesSearchInput({ value, onChange }, ref) {
- const isFocused = useIsFocused(SEARCH_INPUT_ID);
-
- return (
-
-
- );
-});
diff --git a/src/screens/SettingsScreen.test.tsx b/src/screens/SettingsScreen.test.tsx
index ee0d2d8..21e5c45 100644
--- a/src/screens/SettingsScreen.test.tsx
+++ b/src/screens/SettingsScreen.test.tsx
@@ -125,16 +125,19 @@ describe("SettingsScreen (App Settings)", () => {
press("ArrowRight");
expect(focusedId()).toBe("settings-update-on-launch:always");
press("ArrowDown");
+ expect(focusedId()).toBe("settings-catalog-refresh:72");
+ press("ArrowDown");
expect(focusedId()).toBe("settings-guide-refresh:24");
press("ArrowDown");
expect(focusedId()).toBe("settings-guide-days:7");
press("ArrowDown");
- expect(focusedId()).toBe("settings-live-format:ts"); // two options: the column clamps to the last
+ expect(focusedId()).toBe("settings-live-format:ts");
press("ArrowDown");
- expect(focusedId()).toBe("settings-playback-speed:1"); // …and stays clamped going down
+ expect(focusedId()).toBe("settings-playback-speed:1.25");
+ press("ArrowUp");
press("ArrowUp");
+ expect(focusedId()).toBe("settings-guide-days:7");
press("ArrowUp");
- expect(focusedId()).toBe("settings-guide-days:3");
press("ArrowUp");
press("ArrowUp");
press("ArrowUp");
@@ -143,10 +146,10 @@ describe("SettingsScreen (App Settings)", () => {
expect(focusedId()).toBe("settings-playlists-refresh:a"); // back into the playlist cards
});
- it("has no Video Quality setting, and plays live channels as HLS by default", () => {
+ it("has no Video Quality setting, and picks the live stream format automatically by default", () => {
renderSettings();
expect(screen.queryByText("Video Quality")).toBeNull();
- expect(screen.getByRole("button", { name: "HLS (.m3u8)", pressed: true })).toBeDefined();
+ expect(screen.getByRole("button", { name: "Auto (recommended)", pressed: true })).toBeDefined();
act(() => useFocusStore.getState().focus("settings-live-format:ts"));
press("Enter");
expect(loadSettings().liveStreamFormat).toBe("ts");
diff --git a/src/screens/SettingsScreen.tsx b/src/screens/SettingsScreen.tsx
index ee4fd70..891e71a 100644
--- a/src/screens/SettingsScreen.tsx
+++ b/src/screens/SettingsScreen.tsx
@@ -6,9 +6,10 @@ import {
loadSettings,
updateSettings,
type AppSettings,
+ type CatalogRefreshHours,
type GuideDaysToKeep,
type GuideRefreshHours,
- type LiveStreamFormat,
+ type LiveStreamFormatSetting,
type PlaybackSpeed,
type UpdateOnLaunch,
} from "../settings-store.js";
@@ -21,9 +22,10 @@ const AUTO_REFRESH_ID = "settings-auto-refresh";
const PARENTAL_ID = "settings-parental-controls";
const SCOPE = "settings";
const updateOnLaunchId = (value: UpdateOnLaunch) => `settings-update-on-launch:${value}`;
+const catalogRefreshId = (value: CatalogRefreshHours) => `settings-catalog-refresh:${value}`;
const guideRefreshId = (value: GuideRefreshHours) => `settings-guide-refresh:${value}`;
const guideDaysId = (value: GuideDaysToKeep) => `settings-guide-days:${value}`;
-const liveFormatId = (value: LiveStreamFormat) => `settings-live-format:${value}`;
+const liveFormatId = (value: LiveStreamFormatSetting) => `settings-live-format:${value}`;
const playbackSpeedId = (value: PlaybackSpeed) => `settings-playback-speed:${value}`;
interface Option {
@@ -37,6 +39,12 @@ const UPDATE_ON_LAUNCH_OPTIONS: Option[] = [
{ value: "always", label: "Always" },
];
+const CATALOG_REFRESH_OPTIONS: Option[] = [
+ { value: 24, label: "24 hours" },
+ { value: 48, label: "48 hours" },
+ { value: 72, label: "72 hours" },
+];
+
const GUIDE_REFRESH_OPTIONS: Option[] = [
{ value: 6, label: "6 hours" },
{ value: 12, label: "12 hours" },
@@ -49,7 +57,8 @@ const GUIDE_DAYS_OPTIONS: Option[] = [
{ value: 7, label: "7 days" },
];
-const LIVE_FORMAT_OPTIONS: Option[] = [
+const LIVE_FORMAT_OPTIONS: Option[] = [
+ { value: "auto", label: "Auto (recommended)" },
{ value: "m3u8", label: "HLS (.m3u8)" },
{ value: "ts", label: "MPEG-TS (.ts)" },
];
@@ -176,6 +185,7 @@ function SettingsView({
[{ id: AUTO_REFRESH_ID, onSelect: () => patch({ automaticRefresh: !settingsRef.current.automaticRefresh }) }],
...[
pickerRow(UPDATE_ON_LAUNCH_OPTIONS, updateOnLaunchId, "updateOnLaunch"),
+ pickerRow(CATALOG_REFRESH_OPTIONS, catalogRefreshId, "catalogRefreshHours"),
pickerRow(GUIDE_REFRESH_OPTIONS, guideRefreshId, "guideRefreshHours"),
pickerRow(GUIDE_DAYS_OPTIONS, guideDaysId, "guideDaysToKeep"),
pickerRow(LIVE_FORMAT_OPTIONS, liveFormatId, "liveStreamFormat"),
@@ -242,12 +252,24 @@ function SettingsView({
/>
patch({ updateOnLaunch: value })}
/>
+ patch({ catalogRefreshHours: value })}
+ />
0
- ? `${done.toLocaleString()} so far`
- : canPickCategory
+ : canPickCategory
? "You can already open a category from the list on the left."
: "This only takes a moment the first time.";
diff --git a/src/screens/VodScreen.test.tsx b/src/screens/VodScreen.test.tsx
index be5ba32..70672e4 100644
--- a/src/screens/VodScreen.test.tsx
+++ b/src/screens/VodScreen.test.tsx
@@ -57,21 +57,22 @@ async function resetScreenState(): Promise {
describe("VodScreen while the movie table is still being built", () => {
beforeEach(resetScreenState);
- it("asks the sync manager for the movie table and shows its progress — never downloading the catalog itself", async () => {
+ it("asks the sync manager for the movie table and says it's on its way, without a row count — never downloading the catalog itself", async () => {
const { loadChannelsByKind } = await import("../content-loader.js");
const { syncSource } = await import("../sync/sync-manager.js");
- render( {}} onBack={() => {}} />);
+ render( {}} source={source} platform="web" profile={profile} onPlay={() => {}} onBack={() => {}} />);
await vi.waitFor(() => expect(syncSource).toHaveBeenCalledWith(source, { trigger: "first-run", stages: ["vod"] }));
expect(await screen.findByText("Getting your movies ready…")).not.toBeNull();
act(() => useSyncStore.getState().setStage(source.id, "vod", { status: "running", done: 12400 }));
- expect(screen.getByText(`${(12400).toLocaleString()} so far`)).not.toBeNull();
+ expect(screen.queryByText(/12,?400/)).toBeNull();
+ expect(screen.getByText("Getting your movies ready…")).not.toBeNull();
expect(loadChannelsByKind).not.toHaveBeenCalled();
});
it("says why when the sync failed", async () => {
- render( {}} onBack={() => {}} />);
+ render( {}} source={source} platform="web" profile={profile} onPlay={() => {}} onBack={() => {}} />);
await screen.findByText("Getting your movies ready…");
act(() => useSyncStore.getState().setStage(source.id, "vod", { status: "failed", error: "The provider didn't respond within 120 seconds." }));
@@ -80,7 +81,7 @@ describe("VodScreen while the movie table is still being built", () => {
});
it("lets the rail hold focus while there's nothing to browse", async () => {
- render( {}} onBack={() => {}} />);
+ render( {}} source={source} platform="web" profile={profile} onPlay={() => {}} onBack={() => {}} />);
await screen.findByText("Getting your movies ready…");
await vi.waitFor(() => expect(useFocusStore.getState().focusedId).toBe("rail:__all__"));
});
@@ -91,7 +92,7 @@ describe("VodScreen while the movie table is still being built", () => {
Promise.resolve(categoryId === "cat-1" ? [{ id: "m1", name: "Action Movie", streamUrl: "x", kind: "movie" as const, groupTitle: "cat-1" }] : []),
);
- render( {}} onBack={() => {}} />);
+ render( {}} source={source} platform="web" profile={profile} onPlay={() => {}} onBack={() => {}} />);
fireEvent.click(await screen.findByRole("button", { name: "Action" })); // the category rail row
expect(await screen.findByText("Action Movie")).not.toBeNull();
@@ -104,7 +105,7 @@ describe("VodScreen while the movie table is still being built", () => {
const { syncSource } = await import("../sync/sync-manager.js");
const m3u: PlaylistSource = { kind: "m3u-url", id: "src-m3u", name: "M3U", url: "http://example.com/list.m3u" };
- render( {}} onBack={() => {}} />);
+ render( {}} source={m3u} platform="web" profile={profile} onPlay={() => {}} onBack={() => {}} />);
await vi.waitFor(() => expect(syncSource).toHaveBeenCalledWith(m3u, { trigger: "first-run", stages: ["live"] }));
});
});
@@ -122,7 +123,7 @@ describe("VodScreen with a synced local catalog", () => {
const { loadChannelsByKind } = await import("../content-loader.js");
const { syncSource } = await import("../sync/sync-manager.js");
- render( {}} onBack={() => {}} />);
+ render( {}} source={source} platform="web" profile={profile} onPlay={() => {}} onBack={() => {}} />);
await flush();
expect(await screen.findByText("Action Movie")).not.toBeNull();
@@ -130,22 +131,14 @@ describe("VodScreen with a synced local catalog", () => {
expect(syncSource).not.toHaveBeenCalled(); // keeping it fresh is the scheduler's job
});
- it("search reads a prefix match from the local table", async () => {
- const catalogDb = await openCatalogDb();
- await putRecordsBatch(catalogDb, "vod", [
- { id: `${source.id}:1`, sourceId: source.id, streamId: "1", name: "Matrix Reloaded", nameLower: "matrix reloaded", generation: 1 },
- { id: `${source.id}:2`, sourceId: source.id, streamId: "2", name: "Inception", nameLower: "inception", generation: 1 },
- ]);
- await putSyncMeta(catalogDb, { key: `vod:${source.id}`, lastSyncedAt: Date.now(), recordCount: 2, generation: 1 });
-
- render( {}} onBack={() => {}} />);
- const searchInput = await screen.findByPlaceholderText("Search movies");
-
- fireEvent.change(searchInput, { target: { value: "matrix" } });
- await flush();
+ it("the header's Search button opens the Search screen instead of filtering the page", async () => {
+ await putSyncMeta(await openCatalogDb(), { key: `vod:${source.id}`, lastSyncedAt: Date.now(), recordCount: 0, generation: 1 });
+ const onOpenSearch = vi.fn();
+ render( {}} onBack={() => {}} onOpenSearch={onOpenSearch} />);
- expect(await screen.findByText("Matrix Reloaded")).not.toBeNull();
- expect(screen.queryByText("Inception")).toBeNull();
+ expect(screen.queryByRole("textbox")).toBeNull(); // no search field in the header any more
+ fireEvent.click(await screen.findByRole("button", { name: "Search" }));
+ expect(onOpenSearch).toHaveBeenCalledTimes(1);
});
});
@@ -157,10 +150,11 @@ describe("VodScreen at catalog scale", () => {
await putRecordsBatch(
catalogDb,
"vod",
+ // Ids descend so movie 000 is the newest, which pages list first.
Array.from({ length: 300 }, (_, i) => ({
- id: `${source.id}:m${i}`,
+ id: `${source.id}:m${999 - i}`,
sourceId: source.id,
- streamId: `m${i}`,
+ streamId: `m${999 - i}`,
name: `Movie ${String(i).padStart(3, "0")}`,
nameLower: `movie ${String(i).padStart(3, "0")}`,
groupTitle: "cat-1",
@@ -170,7 +164,7 @@ describe("VodScreen at catalog scale", () => {
);
await putSyncMeta(catalogDb, { key: `vod:${source.id}`, lastSyncedAt: Date.now(), recordCount: 300, generation: 1 });
- const { container } = render( {}} onBack={() => {}} />);
+ const { container } = render( {}} source={source} platform="web" profile={profile} onPlay={() => {}} onBack={() => {}} />);
await screen.findByText("Movie 000");
const posters = Array.from(container.querySelectorAll('[role="button"]')).filter((el) => !el.textContent?.startsWith("See all"));
@@ -200,7 +194,7 @@ describe("VodScreen in a Kids profile", () => {
]);
await putSyncMeta(catalogDb, { key: `vod:${source.id}`, lastSyncedAt: Date.now(), recordCount: 3, generation: 1 });
- render( {}} onBack={() => {}} />);
+ render( {}} source={source} platform="web" profile={kid} onPlay={() => {}} onBack={() => {}} />);
expect(await screen.findByText("Frozen")).not.toBeNull();
expect(screen.getByRole("button", { name: "Kids Movies" })).not.toBeNull();
expect(screen.queryByRole("button", { name: "Action" })).toBeNull();
@@ -210,7 +204,7 @@ describe("VodScreen in a Kids profile", () => {
it("never falls back to an unfiltered provider fetch while the table is being built", async () => {
const { loadChannelsByKind } = await import("../content-loader.js");
- render( {}} onBack={() => {}} />);
+ render( {}} source={source} platform="web" profile={kid} onPlay={() => {}} onBack={() => {}} />);
await screen.findByText("Getting your movies ready…");
await flush();
expect(loadChannelsByKind).not.toHaveBeenCalled();
diff --git a/src/screens/VodScreen.tsx b/src/screens/VodScreen.tsx
index 0173a5f..4921176 100644
--- a/src/screens/VodScreen.tsx
+++ b/src/screens/VodScreen.tsx
@@ -1,22 +1,22 @@
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { RefreshCw } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import type { Channel, PlatformId, PlaylistSource, Profile } from "@core";
-import { Search, X } from "lucide-react";
import {
CategoryRail,
categoryRailItemId,
SeeAllCard,
FavoriteHeart,
- Focusable,
MeshBackground,
FocusCard,
Shelf,
- ShelfRowSkeleton,
+ LoadingState,
buildGridFocusGraph,
buildShelfFocusGraph,
useFocusStore,
useRemoteInput,
- glassBlur,
- useIsFocused,
+ SearchButton,
+ HeaderButton,
+ Toast,
BROWSE_CONTENT_LEFT,
BROWSE_GAP,
BROWSE_ROW_GAP,
@@ -28,13 +28,14 @@ import {
} from "@ui";
import { loadChannelsByKind, loadVodCategories } from "../content-loader.js";
import { loadFavorites, toggleFavorite } from "../profile-store.js";
-import { useSearchQuery } from "../use-debounced-value.js";
import { useIncrementalList } from "../use-incremental-list.js";
import { useCachedContent } from "../use-cached-content.js";
import { useVodCatalogPage } from "../use-catalog-page.js";
import { syncSource } from "../sync/sync-manager.js";
import { useSourceSyncState } from "../sync/sync-store.js";
+import { frequentCategoryIds, recordCategoryUse, splitByFrequency } from "../category-usage-store.js";
import { useLocalCatalogReady } from "../use-local-catalog-ready.js";
+import { useCatalogFreshness } from "../use-catalog-freshness.js";
import { useCatalogShelves } from "../use-catalog-shelves.js";
import { getCatalogPage } from "../catalog-store.js";
import { useFavoritesRevision } from "../use-favorites-revision.js";
@@ -47,6 +48,8 @@ export interface VodScreenProps {
profile: Profile;
onPlay: (movie: Channel) => void;
onBack: () => void;
+ /** Opens the global Search screen (the header's Search button). */
+ onOpenSearch: () => void;
/** True while PlayerScreen is open on top of this screen — disables this screen's own useRemoteInput so a single Back press doesn't both close the player and navigate this screen away. */
isPlaybackOpen?: boolean;
}
@@ -71,9 +74,10 @@ export function __resetCategoryMemoryForTests(): void {
}
/** Focus id of a shelf's trailing "See all" card. */
const seeAllId = (categoryId: string) => `seeall:${categoryId}`;
-const SEARCH_INPUT_ID = "vod-search-input";
+const SEARCH_BUTTON_ID = "vod-search-button";
+const REFRESH_BUTTON_ID = "vod-refresh-button";
-export function VodScreen({ source, platform, profile, onPlay, onBack, isPlaybackOpen = false }: VodScreenProps): JSX.Element {
+export function VodScreen({ source, platform, profile, onPlay, onBack, onOpenSearch, isPlaybackOpen = false }: VodScreenProps): JSX.Element {
const setGraph = useFocusStore((state) => state.setGraph);
const clearGraph = useFocusStore((state) => state.clearGraph);
const memoryKey = `${profile.id}:${source.id}`;
@@ -83,13 +87,6 @@ export function VodScreen({ source, platform, profile, onPlay, onBack, isPlaybac
}, [memoryKey, activeCategoryId]);
// Kids profiles only see what the content policy allows (docs/kids-profile.md §6); a standard profile's policy passes everything.
const policy = useContentPolicy(profile, source.id);
- const [searchQuery, setSearchQuery] = useState("");
- const searchInputRef = useRef(null);
-
- // The query that actually runs: debounced and ignored below 2 characters
- // (see useSearchQuery), so typing doesn't refilter/re-render the catalog
- // on every keystroke. searchQuery itself only drives the input's text.
- const trimmedQuery = useSearchQuery(searchQuery);
const isAllCategories = activeCategoryId === ALL_CATEGORIES_ID;
// Every read below comes from the local movie table (use-catalog-page.ts/
@@ -115,7 +112,7 @@ export function VodScreen({ source, platform, profile, onPlay, onBack, isPlaybac
// category_id filter — small, and it means picking a category isn't a
// dead end during a first sync.
// Never for a Kids profile: unfiltered provider data must not render while the table is built.
- const useCategoryFetch = isAwaitingSync && !isAllCategories && !trimmedQuery && source.kind === "xtream" && !policy.isKids;
+ const useCategoryFetch = isAwaitingSync && !isAllCategories && source.kind === "xtream" && !policy.isKids;
const loadCategoryMovies = useCallback(
() => loadChannelsByKind(source, "movie", isAllCategories ? undefined : activeCategoryId),
[source, isAllCategories, activeCategoryId],
@@ -133,7 +130,7 @@ export function VodScreen({ source, platform, profile, onPlay, onBack, isPlaybac
const visibleCategories = useMemo(() => policy.visibleCatalogCategories("vod", categories), [policy, categories]);
const catalogFilter = useMemo(() => policy.catalogFilter("vod", categories), [policy, categories]);
- // Local-table path: paginated grid/search reads, grown on demand (see
+ // Local-table path: paginated category grid reads, grown on demand (see
// use-catalog-page.ts) — this is what lets the grid render 100k+ catalogs
// without ever holding them all in memory.
const {
@@ -144,9 +141,8 @@ export function VodScreen({ source, platform, profile, onPlay, onBack, isPlaybac
total: localGridTotal,
} = useVodCatalogPage(source.id, {
categoryId: isAllCategories ? undefined : activeCategoryId,
- namePrefix: trimmedQuery || undefined,
filter: catalogFilter,
- enabled: isLocalCatalogReady && (!isAllCategories || trimmedQuery.length > 0),
+ enabled: isLocalCatalogReady && !isAllCategories,
});
// Fixed TV poster density (see tv-metrics.ts) — the grid and the D-pad focus graph share this column count.
@@ -181,16 +177,21 @@ export function VodScreen({ source, platform, profile, onPlay, onBack, isPlaybac
"vod",
visibleCategories,
mapShelfPage,
- isLocalCatalogReady && isAllCategories && !trimmedQuery,
+ isLocalCatalogReady && isAllCategories,
);
- const categoryItems = useMemo(
- () => [
- { id: ALL_CATEGORIES_ID, label: "Browse", count: undefined as number | undefined },
- ...visibleCategories.map((c) => ({ id: c.id, label: c.name, count: undefined as number | undefined })),
- ],
- [visibleCategories],
- );
+ // Most-opened categories first, under "Frequently used". Read once per
+ // visit (the screen remounts on every tab switch) so the rail doesn't
+ // reshuffle under the user while they browse.
+ const frequentIds = useMemo(() => frequentCategoryIds(profile.id, source.id, "vod"), [profile.id, source.id]);
+ const { categoryItems, railSections } = useMemo(() => {
+ const { frequent, rest } = splitByFrequency(visibleCategories, frequentIds);
+ const toItem = (c: { id: string; name: string }) => ({ id: c.id, label: c.name, count: undefined as number | undefined });
+ return {
+ categoryItems: [{ id: ALL_CATEGORIES_ID, label: "Browse", count: undefined as number | undefined }, ...frequent.map(toItem), ...rest.map(toItem)],
+ railSections: frequent.length > 0 ? [{ at: 1, label: "Frequently used" }, { at: 1 + frequent.length, label: "Categories" }] : [{ at: 1, label: "Categories" }],
+ };
+ }, [visibleCategories, frequentIds]);
const activeCategoryLabel = categoryItems.find((c) => c.id === activeCategoryId)?.label ?? "Browse";
// A remembered category a parent has since hidden falls back to Browse.
@@ -199,48 +200,43 @@ export function VodScreen({ source, platform, profile, onPlay, onBack, isPlaybac
if (!visibleCategories.some((c) => c.id === activeCategoryId)) setActiveCategoryId(ALL_CATEGORIES_ID);
}, [policy.isKids, isAllCategories, categories.length, visibleCategories, activeCategoryId]);
- // A category other than "All Categories", or a non-empty search query,
- // replaces the shelf browser with a single flat, vertically-scrolling
- // grid — same behavior as SeriesScreen's browse page. Search takes
- // priority over the category filter when both are active, searching
- // within the selected category. The filtering happens inside
+ // A category other than "All Categories" replaces the shelf browser with
+ // a single flat, vertically-scrolling grid — same behavior as
+ // SeriesScreen's browse page. The filtering happens inside
// useVodCatalogPage's IndexedDB query; the category fetch (see
// useCategoryFetch) is rendered a page at a time like the table path.
+ // Searching is the Search screen's job (the header's Search button).
const categoryFetchPage = useIncrementalList(useCategoryFetch ? categoryFetchMovies : null);
- const gridMovies = isLocalCatalogReady ? (isAllCategories && !trimmedQuery ? null : localGridMovies) : (categoryFetchPage?.visible ?? null);
+ const gridMovies = isLocalCatalogReady ? (isAllCategories ? null : localGridMovies) : (categoryFetchPage?.visible ?? null);
const gridHasMore = isLocalCatalogReady ? localGridHasMore : (categoryFetchPage?.hasMore ?? false);
const loadMoreGrid = isLocalCatalogReady ? loadMoreLocalGrid : categoryFetchPage?.loadMore;
+ // The grid's query hasn't answered yet — a spinner, never a premature "No movies in this category".
+ const isGridLoading = isLocalCatalogReady ? isLocalGridLoading : useCategoryFetch && isCategoryFetchLoading;
+ const isShelvesLoading = isLocalCatalogReady && isLocalShelvesLoading && shelves.length === 0;
// Nothing to browse yet: the table is still being built and this isn't the category-fetch exception.
const showSyncNotice = isAwaitingSync && !useCategoryFetch;
+ // Nothing to render until the local-catalog check answers. The screen's
+ // shell (category rail, Search button, Back) is always up meanwhile — a
+ // full-screen loader with nothing focusable left the user stuck while a
+ // sync kept the table busy.
const isInitialLoading = isCheckingLocalCatalog
? true
: isLocalCatalogReady
- ? isAllCategories && !trimmedQuery
+ ? isAllCategories
? isLocalShelvesLoading
: isLocalGridLoading
: useCategoryFetch && isCategoryFetchLoading;
- // isInitialLoading briefly flips true again on the local-table path every
- // time the query changes (each keystroke while searching, or picking a
- // new category) — useVodCatalogPage's own isInitialLoading resets for
- // each new filter.
- // Gating the *entire* screen (including the search input the user is
- // mid-keystroke in, and the category dropdown) on that would unmount and
- // reset them on every character typed — hasEverShownContent latches once
- // the shell has rendered at least once, so only the true first paint
- // (nothing to show at all yet) blocks on the full-screen skeleton; a
- // requery after that renders the existing shell with an in-place grid
- // loading state instead (see the grid's own isInitialLoading check below).
- const hasEverShownContentRef = useRef(false);
- if (!isInitialLoading) hasEverShownContentRef.current = true;
- const showFullScreenSkeleton = isInitialLoading && !hasEverShownContentRef.current;
-
- // Header for the content area: the category (or search) being shown and,
+ // Header for the content area: the category being shown and,
// for a single category, how many titles it holds.
- const headerTitle = trimmedQuery ? `Results for "${trimmedQuery}"` : isAllCategories ? "Movies" : activeCategoryLabel;
+ const headerTitle = isAllCategories ? "Movies" : activeCategoryLabel;
const headerCount = gridMovies ? (isLocalCatalogReady ? localGridTotal : categoryFetchMovies.length) : null;
+ // "Updated 3h ago", and a Refresh for the one category on screen.
+ const freshness = useCatalogFreshness(source, "vod", isAllCategories ? undefined : activeCategoryId, isLocalCatalogReady);
+ const { canRefresh, refresh: refreshCategory } = freshness;
+ const headerDetail = [headerCount != null ? `${headerCount} ${headerCount === 1 ? "title" : "titles"}` : null, freshness.updatedLabel].filter(Boolean).join(" · ");
const firstContentId = gridMovies ? (gridMovies[0] ? gridItemId(gridMovies[0].id) : undefined) : shelves[0]?.items[0]?.id;
const firstContentIdRef = useRef(firstContentId);
@@ -251,6 +247,8 @@ export function VodScreen({ source, platform, profile, onPlay, onBack, isPlaybac
// focus follows into the new content once its focus graph registers —
// see the browse graph effect below.
const focusContentOnNextGraphRef = useRef(false);
+ // Set when focus was parked on the Search button because there was nothing else to hold it (still loading).
+ const focusParkedRef = useRef(false);
const selectCategory = useCallback((id: string) => {
if (id === activeCategoryIdRef.current) {
@@ -259,24 +257,25 @@ export function VodScreen({ source, platform, profile, onPlay, onBack, isPlaybac
if (first) useFocusStore.getState().focus(first);
return;
}
+ if (id !== ALL_CATEGORIES_ID) recordCategoryUse(profile.id, source.id, "vod", id);
focusContentOnNextGraphRef.current = true;
setActiveCategoryId(id);
- }, []);
+ }, [profile.id, source.id]);
- /** Moves focus into the category rail (which expands it), leaving the search box's native focus if it had it. */
+ /** Moves focus into the category rail (which expands it). */
const openCategoryRail = useCallback(() => {
- if (document.activeElement instanceof HTMLElement) document.activeElement.blur();
useFocusStore.getState().focus(categoryRailItemId(activeCategoryIdRef.current));
}, []);
- // Search input's proxy focus node — see VodSearchInput's doc comment for
- // why a native needs a Focusable stand-in rather than being a
- // spatial-nav node itself. Sits to the right of the category dropdown's
- // trigger in the same sticky bar.
+ // The header's buttons, beside the title — Refresh (one category shown) then Search: Left toward the category rail, Down into the content.
useEffect(() => {
- const node = { id: SEARCH_INPUT_ID, neighbors: { left: categoryRailItemId(activeCategoryId), down: firstContentId }, onSelect: () => searchInputRef.current?.focus() };
- setGraph("chrome:vod-search", [node], undefined, { passive: true });
- }, [activeCategoryId, firstContentId, setGraph, clearGraph]);
+ const railEntryId = categoryRailItemId(activeCategoryId);
+ const search = { id: SEARCH_BUTTON_ID, neighbors: { left: canRefresh ? REFRESH_BUTTON_ID : railEntryId, down: firstContentId }, onSelect: onOpenSearch };
+ const nodes = canRefresh
+ ? [{ id: REFRESH_BUTTON_ID, neighbors: { left: railEntryId, right: SEARCH_BUTTON_ID, down: firstContentId }, onSelect: refreshCategory }, search]
+ : [search];
+ setGraph("chrome:vod-search", nodes, undefined, { passive: true });
+ }, [activeCategoryId, firstContentId, onOpenSearch, canRefresh, refreshCategory, setGraph, clearGraph]);
// Rebuilds above replace the scope in place (setGraph is atomic); clearing
// it on every rebuild would drop focus for an instant and snap it back to
// the first node. Clear only when this component goes away.
@@ -285,28 +284,45 @@ export function VodScreen({ source, platform, profile, onPlay, onBack, isPlaybac
// Browse mode's focus graph: either the shelf browser (one row per
// category, plus a trailing "See all" card) or a single flat grid (one
- // category from the rail, or a search) — never both. Up from the top row
- // reaches the search box; Left from the first column opens the category
+ // category from the rail) — never both. Up from the top row reaches the
+ // Search button; Left from the first column opens the category
// rail on the active category.
useEffect(() => {
const railEntryId = categoryRailItemId(activeCategoryId);
const claimFocus = (id: string) => {
- if (!focusContentOnNextGraphRef.current) return;
+ const parked = focusParkedRef.current && useFocusStore.getState().focusedId === SEARCH_BUTTON_ID;
+ focusParkedRef.current = false;
+ if (!focusContentOnNextGraphRef.current && !parked) return;
focusContentOnNextGraphRef.current = false;
useFocusStore.getState().focus(id);
};
+ // Nothing to focus in the content yet: hold focus in the top bar so Left
+ // (category rail) and Back still work, and hand it to the content once it loads.
+ const parkFocus = () => {
+ const { focusedId } = useFocusStore.getState();
+ // Only take focus nobody holds — or move focus this screen parked itself.
+ if (focusedId !== null && !(focusParkedRef.current && focusedId === SEARCH_BUTTON_ID)) return;
+ if (showSyncNotice) {
+ focusParkedRef.current = false;
+ useFocusStore.getState().focus(railEntryId);
+ return;
+ }
+ useFocusStore.getState().focus(SEARCH_BUTTON_ID);
+ focusParkedRef.current = true;
+ };
if (gridMovies) {
const ids = gridMovies.map((item) => gridItemId(item.id));
if (ids.length === 0) {
setGraph(CONTENT_ENTRY_SCOPE, []);
+ parkFocus();
return;
}
const nodes = buildGridFocusGraph(ids, gridColumns).map((node, index) => ({
...node,
neighbors: {
...node.neighbors,
- up: index < gridColumns ? SEARCH_INPUT_ID : node.neighbors.up,
+ up: index < gridColumns ? SEARCH_BUTTON_ID : node.neighbors.up,
left: index % gridColumns === 0 ? railEntryId : node.neighbors.left,
},
}));
@@ -318,8 +334,7 @@ export function VodScreen({ source, platform, profile, onPlay, onBack, isPlaybac
const rows = shelves.map((shelf) => [...shelf.items.map((item) => item.id), seeAllId(shelf.id)]);
if (rows.length === 0) {
setGraph(CONTENT_ENTRY_SCOPE, []);
- // Nothing to browse yet (the table is still being built): the rail is the only thing to hold focus.
- if (showSyncNotice && useFocusStore.getState().focusedId === null) useFocusStore.getState().focus(railEntryId);
+ parkFocus();
return;
}
const categoryBySeeAllId = new Map(shelves.map((shelf) => [seeAllId(shelf.id), shelf.id]));
@@ -330,7 +345,7 @@ export function VodScreen({ source, platform, profile, onPlay, onBack, isPlaybac
...node,
neighbors: {
...node.neighbors,
- up: index < rows[0].length ? SEARCH_INPUT_ID : node.neighbors.up,
+ up: index < rows[0].length ? SEARCH_BUTTON_ID : node.neighbors.up,
left: rowStarts.has(node.id) ? railEntryId : node.neighbors.left,
},
onSelect: seeAllCategory ? () => selectCategory(seeAllCategory) : undefined,
@@ -374,7 +389,7 @@ export function VodScreen({ source, platform, profile, onPlay, onBack, isPlaybac
if (isFocusInGridEndZone && gridHasMore) loadMoreGrid?.();
}, [isFocusInGridEndZone, gridMovies, gridHasMore, loadMoreGrid]);
- // Lookups (play/favourite) search whichever list is actually on screen.
+ // Lookups (play/favourite) look in whichever list is actually on screen.
const visibleMovies = useMemo(() => gridMovies ?? shelves.flatMap((shelf) => shelf.items), [gridMovies, shelves]);
useRemoteInput(
@@ -404,17 +419,19 @@ export function VodScreen({ source, platform, profile, onPlay, onBack, isPlaybac
// The grid/shelves, memoised so screen-level state that doesn't change
- // them — the category menu opening/closing, each raw keystroke in the
- // search box — doesn't re-render every card on screen.
+ // them — e.g. the category menu opening/closing — doesn't re-render every
+ // card on screen.
const browseContent = useMemo(
() => (
<>
{showSyncNotice ? (
- 0} canPickCategory={source.kind === "xtream"} />
+
-
- );
- }
return (
@@ -499,10 +509,10 @@ export function VodScreen({ source, platform, profile, onPlay, onBack, isPlaybac
activeId={activeCategoryId}
onSelect={selectCategory}
rightEntryId={firstContentId}
- sectionBreakAt={1}
+ sections={railSections}
/>
- {/* Sticky so the title and search stay visible while shelves or a long grid scroll underneath, instead of scrolling away with the content. */}
+ {/* Sticky so the title and Search button stay visible while shelves or a long grid scroll underneath, instead of scrolling away with the content. */}
-
+ {freshness.result && (function VodSearchInput({ value, onChange }, ref) {
- const isFocused = useIsFocused(SEARCH_INPUT_ID);
-
- return (
-
-
- );
-});
diff --git a/src/search/normalize.test.ts b/src/search/normalize.test.ts
new file mode 100644
index 0000000..919b1ed
--- /dev/null
+++ b/src/search/normalize.test.ts
@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vitest";
+import { indexTokens, queryTokens, scoreTitle, stripProviderTags, SCORE_EXACT, SCORE_STARTS_WITH, SCORE_WORDS_ANY_ORDER, SCORE_WORDS_IN_ORDER } from "./normalize.js";
+
+describe("stripProviderTags", () => {
+ it.each([
+ ["EN | Breaking Bad", "Breaking Bad"],
+ ["FR: Amélie", "Amélie"],
+ ["en | the office", "the office"],
+ ["[4K] Dune", "Dune"],
+ ["(MULTI) Dune", "Dune"],
+ ["4K - Dune Part Two", "Dune Part Two"],
+ ["UHD HD The Matrix", "The Matrix"],
+ ["EN | 4K | Avatar", "Avatar"],
+ ["VIP: DE | Tatort", "Tatort"],
+ ])("%s → %s", (title, expected) => {
+ expect(stripProviderTags(title)).toBe(expected);
+ });
+
+ it("leaves real words alone", () => {
+ expect(stripProviderTags("Up: The Movie")).toBe("Up: The Movie"); // "Up" isn't an upper-case code
+ expect(stripProviderTags("Heat")).toBe("Heat");
+ expect(stripProviderTags("HD")).toBe("HD"); // a title that is only a tag keeps it
+ expect(stripProviderTags("Hdtv Nights")).toBe("Hdtv Nights");
+ });
+});
+
+describe("tokens", () => {
+ it("folds case and accents, splits on punctuation, and drops stopwords", () => {
+ expect(indexTokens("EN | The Lord of the Rings: The Return of the King")).toEqual(["lord", "of", "rings", "return", "king"]);
+ expect(indexTokens("Amélie")).toEqual(["amelie"]);
+ expect(indexTokens("Spider-Man: No Way Home (2021)")).toEqual(["spider", "man", "no", "way", "home", "2021"]);
+ });
+
+ it("keeps a title or query made only of stopwords", () => {
+ expect(indexTokens("The The")).toEqual(["the"]);
+ expect(queryTokens("the")).toEqual(["the"]);
+ expect(queryTokens("The Matrix")).toEqual(["matrix"]);
+ });
+});
+
+describe("scoreTitle", () => {
+ const score = (query: string, title: string) => scoreTitle(queryTokens(query), title);
+
+ it("ranks exact, then starts-with, then words in order, then any order", () => {
+ expect(score("matrix", "The Matrix")).toBe(SCORE_EXACT);
+ expect(score("matrix re", "The Matrix Reloaded")).toBe(SCORE_STARTS_WITH);
+ expect(score("mat", "The Matrix")).toBe(SCORE_STARTS_WITH);
+ expect(score("breaking b", "EN | Breaking Bad")).toBe(SCORE_STARTS_WITH);
+ expect(score("break bad", "EN | Breaking Bad")).toBe(SCORE_WORDS_IN_ORDER); // "break" only starts "breaking"
+ expect(score("bad", "EN | Breaking Bad")).toBe(SCORE_WORDS_IN_ORDER);
+ expect(score("king return", "The Return of the King")).toBe(SCORE_WORDS_ANY_ORDER);
+ expect(score("xyz", "The Matrix")).toBe(0);
+ expect(score("atrix", "The Matrix")).toBe(0); // words match from their start only
+ });
+});
diff --git a/src/search/normalize.ts b/src/search/normalize.ts
new file mode 100644
index 0000000..186b911
--- /dev/null
+++ b/src/search/normalize.ts
@@ -0,0 +1,101 @@
+/**
+ * How titles and queries are turned into search words, and how well a title
+ * matches a query — shared by the background indexer (search-indexer.ts, in
+ * its worker) and the query side (search-index.ts), so both always agree.
+ * Pure functions, no I/O.
+ */
+
+/**
+ * Provider tags a title can start with: `EN |`, `FR:`, `[4K]`, `(MULTI)`,
+ * `4K`, `HD`… Only a leading run of them is stripped. The `XX:`/`XX |` form
+ * must be upper-case in the original title, so a real word such as "Up:"
+ * isn't mistaken for one.
+ */
+const BRACKETED_TAG = /^[[(][^\])]{1,12}[\])]\s*[-|:]?\s*/;
+const CODE_TAG = /^[A-Z0-9]{2,4}\s*[|:]\s*/;
+const CODE_TAG_PIPE = /^[a-zA-Z0-9]{2,4}\s*\|\s*/;
+const QUALITY_TAG = /^(?:4k|uhd|fhd|hd|sd|hevc|vip|multi)(?=[\s\-|:]|$)\s*[-|:]?\s*/i;
+
+/** Words that carry no meaning in a title search; left out of the index and of queries. */
+const STOPWORDS = new Set(["the", "a", "an", "le", "la", "les", "el", "los", "las", "der", "die", "das"]);
+
+/** A title's index gets at most this many words, so a very long name can't bloat the index. */
+const MAX_TOKENS = 12;
+
+/** Removes a leading run of provider tags; returns the title unchanged if that would leave nothing. */
+export function stripProviderTags(title: string): string {
+ let rest = title.trim();
+ for (;;) {
+ const match = BRACKETED_TAG.exec(rest) ?? CODE_TAG.exec(rest) ?? CODE_TAG_PIPE.exec(rest) ?? QUALITY_TAG.exec(rest);
+ if (!match || match[0].length === 0 || match[0].length >= rest.length) break;
+ rest = rest.slice(match[0].length);
+ }
+ return rest.length > 0 ? rest : title.trim();
+}
+
+/** Lower-cased, with accents removed ("Amélie" → "amelie"). */
+export function foldCase(text: string): string {
+ return text.normalize("NFKD").replace(/\p{M}+/gu, "").toLowerCase();
+}
+
+function words(text: string): string[] {
+ return foldCase(text)
+ .split(/[^\p{L}\p{N}]+/u)
+ .filter((word) => word.length > 0);
+}
+
+/** A title's words in order, provider tags and stopwords removed. */
+export function titleTokens(title: string): string[] {
+ const all = words(stripProviderTags(title));
+ const meaningful = all.filter((word) => !STOPWORDS.has(word));
+ return meaningful.length > 0 ? meaningful : all;
+}
+
+/** The distinct words a title is indexed under. */
+export function indexTokens(title: string): string[] {
+ return [...new Set(titleTokens(title))].slice(0, MAX_TOKENS);
+}
+
+/** A query's words in order, stopwords removed (unless that leaves nothing). */
+export function queryTokens(query: string): string[] {
+ const all = words(query);
+ const meaningful = all.filter((word) => !STOPWORDS.has(word));
+ return meaningful.length > 0 ? meaningful : all;
+}
+
+export const SCORE_EXACT = 100;
+export const SCORE_STARTS_WITH = 80;
+export const SCORE_WORDS_IN_ORDER = 60;
+export const SCORE_WORDS_ANY_ORDER = 40;
+
+/**
+ * How well `title` matches the query's words (every query word is treated
+ * as the start of a word, since the last one is usually still being typed):
+ *
+ * - 100: the title is the query
+ * - 80: the title starts with the query
+ * - 60: every query word starts a title word, in order
+ * - 40: every query word starts a title word, in any order
+ * - 0: no match
+ */
+export function scoreTitle(query: string[], title: string): number {
+ if (query.length === 0) return 0;
+ const tokens = titleTokens(title);
+ const joinedTitle = tokens.join(" ");
+ const joinedQuery = query.join(" ");
+ if (joinedTitle === joinedQuery) return SCORE_EXACT;
+ if (joinedTitle.startsWith(joinedQuery)) return SCORE_STARTS_WITH;
+
+ let from = 0;
+ let inOrder = true;
+ for (const word of query) {
+ const at = tokens.findIndex((token, index) => index >= from && token.startsWith(word));
+ if (at === -1) {
+ inOrder = false;
+ break;
+ }
+ from = at + 1;
+ }
+ if (inOrder) return SCORE_WORDS_IN_ORDER;
+ return query.every((word) => tokens.some((token) => token.startsWith(word))) ? SCORE_WORDS_ANY_ORDER : 0;
+}
diff --git a/src/search/recent-searches.test.ts b/src/search/recent-searches.test.ts
new file mode 100644
index 0000000..f5e145e
--- /dev/null
+++ b/src/search/recent-searches.test.ts
@@ -0,0 +1,33 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { deleteProfile, removeSourceUserData } from "../profile-store.js";
+import { loadRecentSearches, recordRecentSearch, RECENT_SEARCH_LIMIT } from "./recent-searches.js";
+
+beforeEach(() => localStorage.clear());
+
+describe("recent searches", () => {
+ it("keeps the newest first, without repeats, up to the limit", () => {
+ recordRecentSearch("p1", "s1", "Matrix");
+ recordRecentSearch("p1", "s1", "news");
+ recordRecentSearch("p1", "s1", " matrix ");
+ expect(loadRecentSearches("p1", "s1")).toEqual(["matrix", "news"]);
+
+ for (let i = 0; i < RECENT_SEARCH_LIMIT + 5; i++) recordRecentSearch("p1", "s1", `q${i}`);
+ expect(loadRecentSearches("p1", "s1")).toHaveLength(RECENT_SEARCH_LIMIT);
+ expect(loadRecentSearches("p1", "s1")[0]).toBe(`q${RECENT_SEARCH_LIMIT + 4}`);
+ });
+
+ it("keeps profiles and playlists apart, and is cleared with them", () => {
+ recordRecentSearch("p1", "s1", "a");
+ recordRecentSearch("p1", "s2", "b");
+ recordRecentSearch("p2", "s1", "c");
+ expect(loadRecentSearches("p2", "s2")).toEqual([]);
+
+ removeSourceUserData("s2");
+ expect(loadRecentSearches("p1", "s2")).toEqual([]);
+ expect(loadRecentSearches("p1", "s1")).toEqual(["a"]);
+
+ deleteProfile("p1");
+ expect(loadRecentSearches("p1", "s1")).toEqual([]);
+ expect(loadRecentSearches("p2", "s1")).toEqual(["c"]);
+ });
+});
diff --git a/src/search/recent-searches.ts b/src/search/recent-searches.ts
new file mode 100644
index 0000000..6c74bc8
--- /dev/null
+++ b/src/search/recent-searches.ts
@@ -0,0 +1,60 @@
+/**
+ * What each profile recently searched for in each playlist, newest first —
+ * the Search screen's empty state offers them again. Stored in localStorage
+ * (`iptv.recent-searches.v1`), keyed `${profileId}|${sourceId}`. A query is
+ * recorded when one of its results is opened, never per keystroke, so
+ * half-typed queries don't show up.
+ */
+
+const RECENT_SEARCHES_KEY = "iptv.recent-searches.v1";
+
+/** How many recent searches are kept per profile and playlist. */
+export const RECENT_SEARCH_LIMIT = 10;
+
+type RecentByScope = Record;
+
+const scopeKey = (profileId: string, sourceId: string) => `${profileId}|${sourceId}`;
+
+function read(): RecentByScope {
+ try {
+ const raw = localStorage.getItem(RECENT_SEARCHES_KEY);
+ return raw ? (JSON.parse(raw) as RecentByScope) : {};
+ } catch {
+ return {};
+ }
+}
+
+function write(value: RecentByScope): void {
+ try {
+ localStorage.setItem(RECENT_SEARCHES_KEY, JSON.stringify(value));
+ } catch {
+ // Storage full or unavailable — the empty state just shows fewer suggestions.
+ }
+}
+
+export function loadRecentSearches(profileId: string, sourceId: string): string[] {
+ return read()[scopeKey(profileId, sourceId)] ?? [];
+}
+
+export function recordRecentSearch(profileId: string, sourceId: string, query: string): void {
+ const normalized = query.trim().toLowerCase();
+ if (normalized.length === 0) return;
+ const all = read();
+ const key = scopeKey(profileId, sourceId);
+ all[key] = [normalized, ...(all[key] ?? []).filter((existing) => existing !== normalized)].slice(0, RECENT_SEARCH_LIMIT);
+ write(all);
+}
+
+function removeScopesMatching(matches: (profileId: string, sourceId: string) => boolean): void {
+ const all = read();
+ const kept = Object.fromEntries(Object.entries(all).filter(([key]) => !matches(...(key.split("|") as [string, string]))));
+ if (Object.keys(kept).length !== Object.keys(all).length) write(kept);
+}
+
+export function removeSourceRecentSearches(sourceId: string): void {
+ removeScopesMatching((_profileId, id) => id === sourceId);
+}
+
+export function removeProfileRecentSearches(profileId: string): void {
+ removeScopesMatching((id) => id === profileId);
+}
diff --git a/src/search/search-index-scheduler.test.ts b/src/search/search-index-scheduler.test.ts
new file mode 100644
index 0000000..d78fc65
--- /dev/null
+++ b/src/search/search-index-scheduler.test.ts
@@ -0,0 +1,158 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { __resetSyncStoreForTests, useSyncStore } from "../sync/sync-store.js";
+import type { SearchIndexRequest, SearchIndexResponse } from "../workers/search-index-protocol.js";
+import { pauseSearchIndexing, setSearchIndexPlaybackActive, startSearchIndexScheduler, type SearchIndexWorkerLike } from "./search-index-scheduler.js";
+
+/** A stand-in worker that records what it was told and answers when the test says so. */
+class FakeWorker implements SearchIndexWorkerLike {
+ messages: SearchIndexRequest[] = [];
+ terminated = false;
+ onmessage: ((event: MessageEvent) => void) | null = null;
+ onerror: ((event: ErrorEvent) => void) | null = null;
+ postMessage(message: SearchIndexRequest): void {
+ this.messages.push(message);
+ }
+ terminate(): void {
+ this.terminated = true;
+ }
+ reply(message: SearchIndexResponse): void {
+ this.onmessage?.({ data: message } as MessageEvent);
+ }
+ get types(): string[] {
+ return this.messages.map((m) => m.type);
+ }
+}
+
+const JOBS = [{ sourceId: "src-1", kind: "vod" as const }];
+let workers: FakeWorker[];
+let stop: () => void;
+
+function start(): void {
+ stop = startSearchIndexScheduler({
+ getJobs: () => JOBS,
+ createWorker: () => {
+ const worker = new FakeWorker();
+ workers.push(worker);
+ return worker;
+ },
+ idleMs: 3000,
+ pollMs: 1000,
+ paceMs: 150,
+ retryAfterMs: 60_000,
+ });
+}
+const latest = () => workers[workers.length - 1];
+const press = () => document.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown" }));
+
+beforeEach(() => {
+ vi.useFakeTimers();
+ workers = [];
+ __resetSyncStoreForTests();
+ setSearchIndexPlaybackActive(false);
+});
+afterEach(() => {
+ stop();
+ vi.useRealTimers();
+});
+
+describe("search index scheduler", () => {
+ it("waits for 3 s of quiet after launch, then runs the jobs in a worker", () => {
+ start();
+ vi.advanceTimersByTime(2000);
+ expect(workers).toHaveLength(0);
+ vi.advanceTimersByTime(1000);
+ expect(latest().messages).toEqual([{ type: "run", jobs: JOBS, paceMs: 150 }]);
+ });
+
+ it("a key press pauses the run straight away, and it resumes only after 3 s without one", () => {
+ start();
+ vi.advanceTimersByTime(3000);
+ press();
+ expect(latest().types).toEqual(["run", "pause"]);
+ latest().reply({ type: "paused" });
+
+ vi.advanceTimersByTime(2000);
+ press(); // still using the remote: the quiet period starts again
+ vi.advanceTimersByTime(2000);
+ expect(latest().types).toEqual(["run", "pause"]);
+ vi.advanceTimersByTime(1000);
+ expect(latest().types).toEqual(["run", "pause", "run"]);
+ });
+
+ it("never runs during playback or a sync, or while the app is hidden", () => {
+ start();
+ setSearchIndexPlaybackActive(true);
+ vi.advanceTimersByTime(10_000);
+ expect(workers).toHaveLength(0);
+ setSearchIndexPlaybackActive(false);
+
+ useSyncStore.getState().beginRun("src-1", "launch");
+ vi.advanceTimersByTime(10_000);
+ expect(workers).toHaveLength(0);
+ useSyncStore.getState().endRun("src-1");
+
+ Object.defineProperty(document, "visibilityState", { value: "hidden", configurable: true });
+ document.dispatchEvent(new Event("visibilitychange"));
+ vi.advanceTimersByTime(10_000);
+ expect(workers).toHaveLength(0);
+ Object.defineProperty(document, "visibilityState", { value: "visible", configurable: true });
+ document.dispatchEvent(new Event("visibilitychange"));
+
+ vi.advanceTimersByTime(3000);
+ expect(latest().types).toEqual(["run"]);
+ });
+
+ it("playback or a sync starting mid-run pauses it", () => {
+ start();
+ vi.advanceTimersByTime(3000);
+ setSearchIndexPlaybackActive(true);
+ expect(latest().types).toEqual(["run", "pause"]);
+ latest().reply({ type: "paused" });
+ setSearchIndexPlaybackActive(false);
+
+ vi.advanceTimersByTime(3000);
+ useSyncStore.getState().beginRun("src-1", "interval");
+ expect(latest().types).toEqual(["run", "pause", "run", "pause"]);
+ });
+
+ it("once everything is indexed the worker is shut down, and a finished sync makes it wanted again", () => {
+ start();
+ vi.advanceTimersByTime(3000);
+ const first = latest();
+ first.reply({ type: "done" });
+ expect(first.terminated).toBe(true);
+ vi.advanceTimersByTime(60_000);
+ expect(workers).toHaveLength(1); // nothing more to do
+
+ useSyncStore.getState().beginRun("src-1", "interval");
+ useSyncStore.getState().endRun("src-1");
+ vi.advanceTimersByTime(3000);
+ expect(workers).toHaveLength(2);
+ expect(latest().types).toEqual(["run"]);
+ });
+
+ it("after a failed run it waits before trying again", () => {
+ start();
+ vi.advanceTimersByTime(3000);
+ latest().reply({ type: "error", message: "boom" });
+ vi.advanceTimersByTime(30_000);
+ expect(workers).toHaveLength(1);
+ vi.advanceTimersByTime(30_000);
+ expect(workers).toHaveLength(2);
+ });
+
+ it("pauseSearchIndexing resolves once the worker has stopped", async () => {
+ start();
+ await expect(pauseSearchIndexing()).resolves.toBeUndefined(); // not running: straight away
+ vi.advanceTimersByTime(3000);
+
+ let resolved = false;
+ void pauseSearchIndexing().then(() => (resolved = true));
+ expect(latest().types).toEqual(["run", "pause"]);
+ await Promise.resolve();
+ expect(resolved).toBe(false);
+ latest().reply({ type: "paused" });
+ await Promise.resolve();
+ expect(resolved).toBe(true);
+ });
+});
diff --git a/src/search/search-index-scheduler.ts b/src/search/search-index-scheduler.ts
new file mode 100644
index 0000000..d647b62
--- /dev/null
+++ b/src/search/search-index-scheduler.ts
@@ -0,0 +1,193 @@
+import { LITE_EFFECTS } from "@ui";
+import { useSyncStore } from "../sync/sync-store.js";
+import type { SearchIndexRequest, SearchIndexResponse } from "../workers/search-index-protocol.js";
+import type { SearchIndexJob } from "./search-indexer.js";
+
+/**
+ * Decides when the background search indexer may run — the lowest-priority
+ * work in the app (docs/global-search-plan.md, "When the indexer may run").
+ * It runs only while all of these hold, and is paused the moment any stops
+ * holding, resuming once they've all held again for `idleMs`:
+ *
+ * - no remote or keyboard input,
+ * - nothing playing (the player needs the CPU for video),
+ * - no sync running for any playlist,
+ * - the app in the foreground.
+ *
+ * The main thread does no indexing work: it only tells the worker to run
+ * or pause. The worker is created on the first idle window and terminated
+ * once everything is indexed; a finished sync makes it wanted again.
+ */
+
+/** What the scheduler needs from a worker — a real Worker, or a stand-in in tests. */
+export interface SearchIndexWorkerLike {
+ postMessage(message: SearchIndexRequest): void;
+ terminate(): void;
+ onmessage: ((event: MessageEvent) => void) | null;
+ onerror: ((event: ErrorEvent) => void) | null;
+}
+
+export interface SearchIndexSchedulerOptions {
+ /** What to index, in order — read each time a run starts. */
+ getJobs: () => SearchIndexJob[];
+ /** Null where workers aren't available: then nothing is indexed (never on the main thread) and search stays on prefix matching. */
+ createWorker?: () => SearchIndexWorkerLike | null;
+ /** How long everything must have been quiet before a run starts. */
+ idleMs?: number;
+ /** How often to check whether a run may start. */
+ pollMs?: number;
+ /** The worker's pause after each unit. */
+ paceMs?: number;
+ /** After a failed run, wait this long before trying again. */
+ retryAfterMs?: number;
+}
+
+function createSearchIndexWorker(): SearchIndexWorkerLike | null {
+ if (typeof Worker === "undefined") return null;
+ return new Worker(new URL("../workers/search-index-worker.ts", import.meta.url), { type: "module" }) as unknown as SearchIndexWorkerLike;
+}
+
+let playbackActive = false;
+const playbackListeners = new Set<() => void>();
+
+/** App reports whether the player is open — indexing never runs during playback. */
+export function setSearchIndexPlaybackActive(active: boolean): void {
+ if (active === playbackActive) return;
+ playbackActive = active;
+ for (const listener of playbackListeners) listener();
+}
+
+let pauseCurrent: (() => Promise) | null = null;
+
+/**
+ * Pauses indexing and resolves once the worker has stopped (or straight
+ * away if it isn't running) — so removing a playlist can delete its rows
+ * without a unit still in flight writing some back.
+ */
+export function pauseSearchIndexing(): Promise {
+ return pauseCurrent ? pauseCurrent() : Promise.resolve();
+}
+
+/** How long pauseSearchIndexing waits for the worker before giving up on it. */
+const PAUSE_TIMEOUT_MS = 3000;
+
+export function startSearchIndexScheduler(options: SearchIndexSchedulerOptions): () => void {
+ const {
+ getJobs,
+ createWorker = createSearchIndexWorker,
+ idleMs = 3000,
+ pollMs = 1000,
+ paceMs = LITE_EFFECTS ? 400 : 150,
+ retryAfterMs = 60_000,
+ } = options;
+
+ let state: "idle" | "running" | "pausing" = "idle";
+ let wanted = true;
+ let lastBusyAt = Date.now(); // launch counts as activity: the app's own start-up comes first
+ let retryAt = 0;
+ let worker: SearchIndexWorkerLike | null = null;
+ let settledWaiters: Array<() => void> = [];
+
+ const anySyncRunning = () => Object.values(useSyncStore.getState().sources).some((source) => source.isRunning);
+ const isBusy = () => playbackActive || anySyncRunning() || document.visibilityState === "hidden";
+
+ function settle(): void {
+ state = "idle";
+ const waiters = settledWaiters;
+ settledWaiters = [];
+ for (const resolve of waiters) resolve();
+ }
+
+ function dropWorker(): void {
+ worker?.terminate();
+ worker = null;
+ }
+
+ function pause(): void {
+ if (state !== "running" || !worker) return;
+ state = "pausing";
+ worker.postMessage({ type: "pause" });
+ }
+
+ /** Something the user (or the app) is doing: pause now, and restart the quiet period. */
+ function markBusy(): void {
+ lastBusyAt = Date.now();
+ pause();
+ }
+
+ function onResponse(message: SearchIndexResponse): void {
+ if (message.type === "done") {
+ wanted = false;
+ dropWorker();
+ } else if (message.type === "error") {
+ retryAt = Date.now() + retryAfterMs;
+ dropWorker();
+ }
+ settle();
+ }
+
+ function tick(): void {
+ if (!wanted || state !== "idle") return;
+ const now = Date.now();
+ if (isBusy() || now - lastBusyAt < idleMs || now < retryAt) return;
+ const jobs = getJobs();
+ if (jobs.length === 0) {
+ wanted = false;
+ return;
+ }
+ if (!worker) {
+ worker = createWorker();
+ if (!worker) {
+ wanted = false;
+ return;
+ }
+ worker.onmessage = (event) => onResponse(event.data);
+ worker.onerror = () => onResponse({ type: "error", message: "Search index worker failed" });
+ }
+ state = "running";
+ worker.postMessage({ type: "run", jobs, paceMs });
+ }
+
+ const onInput = () => markBusy();
+ const onVisibility = () => markBusy();
+ const onPlayback = () => markBusy();
+ document.addEventListener("keydown", onInput, { capture: true, passive: true });
+ document.addEventListener("visibilitychange", onVisibility);
+ playbackListeners.add(onPlayback);
+ let wasSyncing = anySyncRunning();
+ const unsubscribeSync = useSyncStore.subscribe(() => {
+ const syncing = anySyncRunning();
+ if (syncing === wasSyncing) return;
+ wasSyncing = syncing;
+ markBusy();
+ if (!syncing) wanted = true; // a finished sync may have changed what's indexed
+ });
+ const interval = setInterval(tick, pollMs);
+
+ const pauseThis = () => {
+ if (state === "idle") return Promise.resolve();
+ pause();
+ return new Promise((resolve) => {
+ const timer = setTimeout(() => {
+ dropWorker(); // unresponsive: a terminated worker's open transaction is rolled back, never half-written
+ settle();
+ }, PAUSE_TIMEOUT_MS);
+ settledWaiters.push(() => {
+ clearTimeout(timer);
+ resolve();
+ });
+ });
+ };
+ pauseCurrent = pauseThis;
+
+ return () => {
+ clearInterval(interval);
+ document.removeEventListener("keydown", onInput, { capture: true });
+ document.removeEventListener("visibilitychange", onVisibility);
+ playbackListeners.delete(onPlayback);
+ unsubscribeSync();
+ dropWorker();
+ settle();
+ if (pauseCurrent === pauseThis) pauseCurrent = null;
+ };
+}
diff --git a/src/search/search-index.test.ts b/src/search/search-index.test.ts
new file mode 100644
index 0000000..d7454d5
--- /dev/null
+++ b/src/search/search-index.test.ts
@@ -0,0 +1,232 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import {
+ __clearCatalogDbForTests,
+ __resetCatalogDbForTests,
+ catalogSyncMetaKey,
+ openCatalogDb,
+ putRecordsBatch,
+ putSyncMeta,
+ queryPage,
+ SEARCH_TOKENS_STORE,
+ type CatalogDb,
+ type CatalogRecord,
+ writeCatalogChanges,
+} from "../core/storage/catalog-db.js";
+import { __clearLiveDbForTests, __resetLiveDbForTests, deleteStaleChannels, openLiveDb, putChannels, putLiveSyncMeta } from "../core/storage/live-db.js";
+import { deleteSearchIndexForSource, getSearchIndexMeta, searchIndexMetaKey } from "../core/storage/search-index-db.js";
+import type { Channel } from "@core";
+import { searchCatalog, searchChannels } from "./search-index.js";
+import { runIndexJobs, runIndexUnit } from "./search-indexer.js";
+
+const SOURCE = "src-1";
+const OTHER = "src-2";
+
+function movie(streamId: string, name: string, generation = 1, sourceId = SOURCE, groupTitle = "cat-1"): CatalogRecord {
+ return { id: `${sourceId}:${streamId.padStart(15, "0")}`, sourceId, streamId, name, nameLower: name.toLowerCase(), groupTitle, streamUrl: "x", generation };
+}
+
+async function seed(catalogDb: CatalogDb, records: CatalogRecord[], generation = 1, sourceId = SOURCE): Promise {
+ await putRecordsBatch(catalogDb, "vod", records);
+ await putSyncMeta(catalogDb, { key: catalogSyncMetaKey(sourceId, "vod"), lastSyncedAt: Date.now(), recordCount: records.length, generation });
+}
+
+const noSleep = () => Promise.resolve();
+async function indexAll(catalogDb: CatalogDb, sourceId = SOURCE): Promise {
+ await runIndexJobs(catalogDb, [{ sourceId, kind: "vod" }], { paceMs: 0, shouldStop: () => false, sleep: noSleep, unitSize: 2 });
+}
+async function names(query: string, limit = 20): Promise {
+ return (await searchCatalog(SOURCE, "vod", query, { limit })).items.map((m) => m.name);
+}
+function countSearchRows(catalogDb: CatalogDb): Promise {
+ return new Promise((resolve) => {
+ const request = catalogDb.db.transaction(SEARCH_TOKENS_STORE, "readonly").objectStore(SEARCH_TOKENS_STORE).count();
+ request.onsuccess = () => resolve(request.result);
+ });
+}
+
+beforeEach(async () => {
+ __resetCatalogDbForTests();
+ await __clearCatalogDbForTests();
+ __resetLiveDbForTests();
+ await __clearLiveDbForTests();
+});
+
+describe("search index", () => {
+ it("before indexing, search still finds titles by their start", async () => {
+ const catalogDb = await openCatalogDb();
+ await seed(catalogDb, [movie("1", "Matrix Reloaded"), movie("2", "The Matrix")]);
+ expect(await names("mat")).toEqual(["Matrix Reloaded"]);
+ });
+
+ it("once indexed, any word finds a title — provider tags and articles don't get in the way — best match first", async () => {
+ const catalogDb = await openCatalogDb();
+ await seed(catalogDb, [
+ movie("1", "Matrix Reloaded"),
+ movie("2", "The Matrix"),
+ movie("3", "EN | Breaking Bad"),
+ movie("4", "Bad Boys"),
+ movie("5", "Inception"),
+ ]);
+ await indexAll(catalogDb);
+
+ expect(await names("matrix")).toEqual(["The Matrix", "Matrix Reloaded"]); // exact before starts-with
+ expect(await names("breaking bad")).toEqual(["EN | Breaking Bad"]);
+ expect(await names("bad")).toEqual(["Bad Boys", "EN | Breaking Bad"]); // starts-with before a later word
+ expect(await names("zzz")).toEqual([]);
+ });
+
+ it("shows a title listed several times (under different ids) once — its best-ranked, newest entry", async () => {
+ const catalogDb = await openCatalogDb();
+ await seed(catalogDb, [movie("1", "The Matrix"), movie("7", "The matrix"), movie("3", "The Matrix Reloaded"), movie("5", "EN | The Matrix")]);
+ await indexAll(catalogDb);
+ const result = await searchCatalog(SOURCE, "vod", "matrix", { limit: 20 });
+ expect(result.items.map((m) => `${m.id} ${m.name}`)).toEqual(["7 The matrix", "5 EN | The Matrix", "3 The Matrix Reloaded"]);
+ expect(result.hasMore).toBe(false);
+ });
+
+ it("reports when there are more matches than asked for", async () => {
+ const catalogDb = await openCatalogDb();
+ await seed(catalogDb, [movie("1", "Star A"), movie("2", "Star B"), movie("3", "Star C")]);
+ await indexAll(catalogDb);
+ const result = await searchCatalog(SOURCE, "vod", "star", { limit: 2 });
+ expect(result.items).toHaveLength(2);
+ expect(result.hasMore).toBe(true);
+ });
+
+ it("applies a Kids filter", async () => {
+ const catalogDb = await openCatalogDb();
+ await seed(catalogDb, [movie("1", "Frozen", 1, SOURCE, "kids"), movie("2", "Fright Night", 1, SOURCE, "adult")]);
+ await indexAll(catalogDb);
+ const filter = { key: "k", accepts: (r: CatalogRecord) => r.groupTitle === "kids", isCategoryAllowed: () => true, pickedIds: [], moreForKids: false };
+ const result = await searchCatalog(SOURCE, "vod", "fr", { limit: 20, filter });
+ expect(result.items.map((m) => m.name)).toEqual(["Frozen"]);
+ });
+
+ it("works in small units, stops at a unit boundary and resumes from where it stopped", async () => {
+ const catalogDb = await openCatalogDb();
+ await seed(catalogDb, ["1", "2", "3", "4", "5"].map((id) => movie(id, `Film ${id}`)));
+
+ let units = 0;
+ const result = await runIndexJobs(catalogDb, [{ sourceId: SOURCE, kind: "vod" }], {
+ paceMs: 0,
+ sleep: noSleep,
+ unitSize: 2,
+ shouldStop: () => units++ >= 2, // two units, then stop
+ });
+ expect(result).toBe("stopped");
+ const meta = await getSearchIndexMeta(catalogDb, searchIndexMetaKey(SOURCE, "vod"));
+ expect(meta).toMatchObject({ phase: "index", lastKey: movie("4", "").id }); // exactly four records written, no partial unit
+ expect(await countSearchRows(catalogDb)).toBe(4);
+
+ await indexAll(catalogDb);
+ expect(await countSearchRows(catalogDb)).toBe(5);
+ expect(await getSearchIndexMeta(catalogDb, searchIndexMetaKey(SOURCE, "vod"))).toMatchObject({ phase: "done" });
+ expect(await runIndexUnit(catalogDb, { sourceId: SOURCE, kind: "vod" })).toBe("done");
+ });
+
+ it("a new catalog generation re-indexes from the start and sweeps rows for titles that went away", async () => {
+ const catalogDb = await openCatalogDb();
+ await seed(catalogDb, [movie("1", "Old Film"), movie("2", "Kept Film")]);
+ await indexAll(catalogDb);
+
+ // The table is rebuilt as generation 2 without "Old Film".
+ await seed(catalogDb, [movie("2", "Kept Film", 2), movie("3", "New Film", 2)], 2);
+ await writeCatalogChanges(catalogDb, "vod", { put: [], delete: [movie("1", "Old Film").id] });
+ // Until re-indexed: Kept Film is still found through its old row, Old Film's row points at nothing and is dropped,
+ // and New Film isn't indexed yet (nor does it start with "film").
+ expect(await names("film")).toEqual(["Kept Film"]);
+
+ await indexAll(catalogDb);
+ expect(await names("film")).toEqual(["New Film", "Kept Film"]);
+ expect(await countSearchRows(catalogDb)).toBe(2); // Old Film's row swept
+ });
+
+ it("indexing another playlist doesn't touch this one's, and removing a playlist deletes only its rows", async () => {
+ const catalogDb = await openCatalogDb();
+ await seed(catalogDb, [movie("1", "The Matrix")]);
+ await seed(catalogDb, [movie("1", "The Matrix", 1, OTHER)], 1, OTHER);
+ await indexAll(catalogDb);
+ await indexAll(catalogDb, OTHER);
+ expect(await countSearchRows(catalogDb)).toBe(2);
+
+ await deleteSearchIndexForSource(catalogDb, OTHER);
+ expect(await countSearchRows(catalogDb)).toBe(1);
+ expect(await getSearchIndexMeta(catalogDb, searchIndexMetaKey(OTHER, "vod"))).toBeUndefined();
+ expect(await names("matrix")).toEqual(["The Matrix"]);
+ });
+
+ it("indexing never blocks reads of the movie table (its own store)", async () => {
+ const catalogDb = await openCatalogDb();
+ await seed(catalogDb, [movie("1", "Heat")]);
+ // Hold a write transaction open on the search store, as a unit in flight would.
+ let released = false;
+ const tx = catalogDb.db.transaction(SEARCH_TOKENS_STORE, "readwrite");
+ const store = tx.objectStore(SEARCH_TOKENS_STORE);
+ const spin = () => {
+ if (!released) store.count().onsuccess = spin;
+ };
+ spin();
+
+ const page = await queryPage(catalogDb, "vod", { sourceId: SOURCE, offset: 0, limit: 10 });
+ expect(page.map((r) => r.name)).toEqual(["Heat"]);
+ released = true;
+ });
+});
+
+describe("live channel search", () => {
+ const list: Channel[] = [
+ { id: "a", name: "EN | Sky News HD", streamUrl: "x", kind: "live", number: 1 },
+ { id: "b", name: "News 24", streamUrl: "x", kind: "live", number: 2 },
+ { id: "c", name: "BBC One", streamUrl: "x", kind: "live", number: 3 },
+ { id: "b", name: "News 24", streamUrl: "y", kind: "live", number: 4 }, // an M3U's second entry for the same channel
+ ];
+
+ async function seedLive(generation = 1, channels = list): Promise {
+ const liveDb = await openLiveDb();
+ await putChannels(liveDb, channels.map((channel, position) => ({ ...channel, sourceId: SOURCE, position, generation })));
+ await putLiveSyncMeta(liveDb, { sourceId: SOURCE, lastSyncedAt: Date.now(), generation, channelCount: channels.length });
+ }
+ const channelNames = async (query: string) => (await searchChannels(SOURCE, list, query, { limit: 20 })).items.map((c) => `${c.number} ${c.name}`);
+
+ it("before indexing, finds channels by the start of their name — once each", async () => {
+ await seedLive();
+ expect(await channelNames("news")).toEqual(["2 News 24"]);
+ });
+
+ it("once indexed, any word finds a channel; the best match first, then channel order", async () => {
+ await seedLive();
+ await runIndexJobs(await openCatalogDb(), [{ sourceId: SOURCE, kind: "live" }], { paceMs: 0, shouldStop: () => false, sleep: noSleep, unitSize: 2 });
+ expect(await channelNames("news")).toEqual(["2 News 24", "1 EN | Sky News HD"]);
+ expect(await channelNames("sky")).toEqual(["1 EN | Sky News HD"]);
+ expect((await searchChannels(SOURCE, list, "news", { limit: 20 })).bestScore).toBe(80);
+ });
+
+ it("a channel name listed twice under different ids appears once", async () => {
+ const twice: Channel[] = [
+ { id: "x1", name: "BBC One", streamUrl: "x", kind: "live", number: 1 },
+ { id: "x2", name: "BBC One", streamUrl: "y", kind: "live", number: 2 },
+ ];
+ const result = await searchChannels(SOURCE, twice, "bbc", { limit: 20 });
+ expect(result.items.map((c) => c.id)).toEqual(["x1"]);
+ });
+
+ it("only channels in the list it's given are returned — a Kids-filtered list stays filtered", async () => {
+ await seedLive();
+ await runIndexJobs(await openCatalogDb(), [{ sourceId: SOURCE, kind: "live" }], { paceMs: 0, shouldStop: () => false, sleep: noSleep });
+ const allowed = list.filter((c) => c.id !== "a");
+ const result = await searchChannels(SOURCE, allowed, "news", { limit: 20 });
+ expect(result.items.map((c) => c.id)).toEqual(["b"]);
+ });
+
+ it("a new live list is re-indexed and channels that went away are swept", async () => {
+ await seedLive();
+ const catalogDb = await openCatalogDb();
+ await runIndexJobs(catalogDb, [{ sourceId: SOURCE, kind: "live" }], { paceMs: 0, shouldStop: () => false, sleep: noSleep });
+ expect(await countSearchRows(catalogDb)).toBe(4);
+
+ await seedLive(2, list.slice(0, 2)); // a shorter list: positions 0–1 rewritten…
+ await deleteStaleChannels(await openLiveDb(), SOURCE, 2); // …and 2–3 swept from the live table, as the live sync does
+ await runIndexJobs(catalogDb, [{ sourceId: SOURCE, kind: "live" }], { paceMs: 0, shouldStop: () => false, sleep: noSleep });
+ expect(await countSearchRows(catalogDb)).toBe(2);
+ });
+});
diff --git a/src/search/search-index.ts b/src/search/search-index.ts
new file mode 100644
index 0000000..238ef4b
--- /dev/null
+++ b/src/search/search-index.ts
@@ -0,0 +1,125 @@
+import type { Channel, SeriesInfo } from "@core";
+import { recordToChannel, recordToSeriesSummary } from "../catalog-store.js";
+import type { CatalogFilter } from "../content-policy.js";
+import { getRecordsByIds, openCatalogDb, queryPage, type CatalogKind, type CatalogRecord } from "../core/storage/catalog-db.js";
+import { findSearchCandidates } from "../core/storage/search-index-db.js";
+import { foldCase, queryTokens, scoreTitle } from "./normalize.js";
+
+/**
+ * The query side of search (docs/global-search-plan.md, "Querying"): word
+ * matches from the background index, merged with today's start-of-title
+ * matches — which are always complete, so search works fully before (and
+ * while) the index is built. Reads are a few short readonly transactions
+ * with capped sizes, so a query stays quick during indexing or a sync.
+ */
+
+/** Rows read from the word index per query. */
+const WORD_CANDIDATES = 500;
+/** Rows read from the start-of-title index per query. */
+const PREFIX_CANDIDATES = 100;
+/** Score for a start-of-title match that the word rules don't cover (e.g. a query that includes a provider tag). */
+const SCORE_RAW_PREFIX = 50;
+
+type SeriesSummary = Pick;
+
+/**
+ * Titles that read the same on screen. Providers often list one film,
+ * series or channel several times under different ids (in several
+ * categories, or as backup streams); browsing spreads those across
+ * categories, but search would show them side by side as identical cards
+ * — so each title appears once, as its best-ranked entry.
+ */
+function sameTitleKey(name: string): string {
+ return foldCase(name).replace(/\s+/g, " ").trim();
+}
+
+function uniqueByTitle(ranked: T[], nameOf: (entry: T) => string): T[] {
+ const seen = new Set();
+ return ranked.filter((entry) => {
+ const key = sameTitleKey(nameOf(entry));
+ if (seen.has(key)) return false;
+ seen.add(key);
+ return true;
+ });
+}
+
+export interface SearchCatalogOptions {
+ limit: number;
+ /** A Kids profile's filter (content-policy.ts); undefined for a standard profile. */
+ filter?: CatalogFilter;
+}
+
+export interface SearchCatalogResult {
+ items: T[];
+ /** More than `limit` matched. */
+ hasMore: boolean;
+ /** The best match's score (0 when nothing matched) — the Search screen orders its rows by it. */
+ bestScore: number;
+}
+
+export function searchCatalog(sourceId: string, kind: "vod", query: string, options: SearchCatalogOptions): Promise>;
+export function searchCatalog(sourceId: string, kind: "series", query: string, options: SearchCatalogOptions): Promise>;
+export async function searchCatalog(sourceId: string, kind: CatalogKind, query: string, { limit, filter }: SearchCatalogOptions): Promise> {
+ const words = queryTokens(query);
+ const rawPrefix = foldCase(query.trim());
+ if (words.length === 0 && rawPrefix.length === 0) return { items: [], hasMore: false, bestScore: 0 };
+
+ const catalogDb = await openCatalogDb();
+ // The longest word is the most selective one to look up; the rest are checked by scoring.
+ const lookup = words.reduce((longest, word) => (word.length > longest.length ? word : longest), "");
+ const [candidateIds, prefixRecords] = await Promise.all([
+ lookup ? findSearchCandidates(catalogDb, sourceId, kind, lookup, WORD_CANDIDATES) : Promise.resolve([]),
+ queryPage(catalogDb, kind, { sourceId, namePrefixLower: query.trim().toLowerCase(), predicate: filter?.accepts, offset: 0, limit: PREFIX_CANDIDATES }),
+ ]);
+
+ const prefixIds = new Set(prefixRecords.map((record) => record.id));
+ const missing = [...new Set(candidateIds)].filter((id) => !prefixIds.has(id));
+ // A title removed since it was indexed simply isn't found here.
+ const wordRecords = await getRecordsByIds(catalogDb, kind, missing);
+
+ const scored: Array<{ record: CatalogRecord; score: number }> = [];
+ for (const record of [...prefixRecords, ...wordRecords]) {
+ if (filter && !filter.accepts(record)) continue;
+ let score = scoreTitle(words, record.name);
+ if (score === 0 && prefixIds.has(record.id)) score = SCORE_RAW_PREFIX;
+ if (score > 0) scored.push({ record, score });
+ }
+ // Best match first; equally good ones newest first (record ids sort by stream id).
+ scored.sort((a, b) => b.score - a.score || (a.record.id < b.record.id ? 1 : a.record.id > b.record.id ? -1 : 0));
+ const unique = uniqueByTitle(scored, ({ record }) => record.name);
+
+ const top = unique.slice(0, limit).map(({ record }) => (kind === "vod" ? recordToChannel(record, "movie") : recordToSeriesSummary(record)));
+ return { items: top, hasMore: unique.length > limit, bestScore: unique[0]?.score ?? 0 };
+}
+
+/**
+ * Live channels matching `query`, from the channel list the caller already
+ * holds (Kids-filtered, numbered): word matches via the index, plus a
+ * starts-with match on the list itself, which is complete before the
+ * channels are indexed. Best match first; equally good ones in channel
+ * order. A channel listed twice (the same id, or the same name) appears once.
+ */
+export async function searchChannels(sourceId: string, channels: Channel[], query: string, { limit }: { limit: number }): Promise> {
+ const words = queryTokens(query);
+ const rawPrefix = query.trim().toLowerCase();
+ if (channels.length === 0 || (words.length === 0 && rawPrefix.length === 0)) return { items: [], hasMore: false, bestScore: 0 };
+
+ const lookup = words.reduce((longest, word) => (word.length > longest.length ? word : longest), "");
+ const candidateIds = new Set(lookup ? await findSearchCandidates(await openCatalogDb(), sourceId, "live", lookup, WORD_CANDIDATES) : []);
+
+ const scored: Array<{ channel: Channel; order: number; score: number }> = [];
+ const seen = new Set();
+ channels.forEach((channel, order) => {
+ if (seen.has(channel.id)) return;
+ const byPrefix = channel.name.toLowerCase().startsWith(rawPrefix);
+ if (!byPrefix && !candidateIds.has(channel.id)) return;
+ let score = scoreTitle(words, channel.name);
+ if (score === 0 && byPrefix) score = SCORE_RAW_PREFIX;
+ if (score === 0) return;
+ seen.add(channel.id);
+ scored.push({ channel, order, score });
+ });
+ scored.sort((a, b) => b.score - a.score || a.order - b.order);
+ const unique = uniqueByTitle(scored, ({ channel }) => channel.name);
+ return { items: unique.slice(0, limit).map((entry) => entry.channel), hasMore: unique.length > limit, bestScore: unique[0]?.score ?? 0 };
+}
diff --git a/src/search/search-indexer.ts b/src/search/search-indexer.ts
new file mode 100644
index 0000000..a0ea7cc
--- /dev/null
+++ b/src/search/search-indexer.ts
@@ -0,0 +1,131 @@
+import { catalogSyncMetaKey, getSyncMeta, type CatalogDb } from "../core/storage/catalog-db.js";
+import { getLiveSyncMeta, getSourceChannelsAfter, openLiveDb } from "../core/storage/live-db.js";
+import {
+ getSearchIndexMeta,
+ readCatalogRecordsAfter,
+ searchIndexMetaKey,
+ searchKey,
+ sweepStaleSearchRows,
+ writeSearchRows,
+ type SearchIndexMeta,
+ type SearchKind,
+ type SearchTokenRow,
+} from "../core/storage/search-index-db.js";
+import { indexTokens } from "./normalize.js";
+
+/**
+ * The background indexer's work, one small unit at a time (see
+ * docs/global-search-plan.md, "The indexer"). Runs inside
+ * workers/search-index-worker.ts, never on the main thread; kept here, free
+ * of any worker plumbing, so tests can drive it step by step.
+ */
+
+/** Titles per unit: small enough that a pause request is honoured within a moment. */
+export const INDEX_UNIT_SIZE = 100;
+
+export interface SearchIndexJob {
+ sourceId: string;
+ kind: SearchKind;
+}
+
+/** The generation to index against: the catalog's sync_meta, or the live list's. Undefined when it isn't downloaded (yet). */
+async function sourceGeneration(catalogDb: CatalogDb, { sourceId, kind }: SearchIndexJob): Promise {
+ if (kind === "live") return (await getLiveSyncMeta(await openLiveDb(), sourceId))?.generation;
+ return (await getSyncMeta(catalogDb, catalogSyncMetaKey(sourceId, kind)))?.generation;
+}
+
+/** The next unit's rows after `lastKey`, and the key to resume after them — empty when the list is finished. */
+async function readUnit(catalogDb: CatalogDb, { sourceId, kind }: SearchIndexJob, generation: number, lastKey: string | number | null, unitSize: number): Promise<{ rows: SearchTokenRow[]; lastKey: string | number | null }> {
+ if (kind === "live") {
+ const channels = await getSourceChannelsAfter(await openLiveDb(), sourceId, typeof lastKey === "number" ? lastKey : null, unitSize);
+ const rows = channels.map((channel) => ({
+ id: `live|${sourceId}:${channel.position}`,
+ sourceId,
+ kind,
+ recordId: channel.id,
+ generation,
+ keys: indexTokens(channel.name).map((word) => searchKey(sourceId, kind, word)),
+ }));
+ return { rows, lastKey: channels.length > 0 ? channels[channels.length - 1].position : null };
+ }
+ const records = await readCatalogRecordsAfter(catalogDb, kind, sourceId, typeof lastKey === "string" ? lastKey : null, unitSize);
+ const rows = records.map((record) => ({
+ id: `${kind}|${record.id}`,
+ sourceId,
+ kind,
+ recordId: record.id,
+ generation,
+ keys: indexTokens(record.name).map((word) => searchKey(sourceId, kind, word)),
+ }));
+ return { rows, lastKey: records.length > 0 ? records[records.length - 1].id : null };
+}
+
+/**
+ * Does one unit of work for a source and kind (a catalog, or the live
+ * channel list):
+ *
+ * - index: tokenizes the next INDEX_UNIT_SIZE records (or channels) and saves
+ * their rows together with the new position;
+ * - sweep: once every record is indexed, deletes up to INDEX_UNIT_SIZE rows
+ * left over from an older catalog generation;
+ * - done: nothing left until the catalog changes.
+ *
+ * A new catalog generation (a sync finished) starts the source and kind
+ * over from the beginning; its existing rows stay searchable meanwhile and
+ * are overwritten as it goes. Returns whether there's more to do.
+ */
+export async function runIndexUnit(catalogDb: CatalogDb, job: SearchIndexJob, unitSize = INDEX_UNIT_SIZE): Promise<"more" | "done"> {
+ const { sourceId, kind } = job;
+ const generation = await sourceGeneration(catalogDb, job);
+ if (generation === undefined) return "done"; // not downloaded (yet): nothing to index
+
+ const key = searchIndexMetaKey(sourceId, kind);
+ let meta: SearchIndexMeta | undefined = await getSearchIndexMeta(catalogDb, key);
+ if (!meta || meta.generation !== generation) meta = { key, generation, lastKey: null, phase: "index" };
+ if (meta.phase === "done") return "done";
+
+ if (meta.phase === "index") {
+ const unit = await readUnit(catalogDb, job, meta.generation, meta.lastKey, unitSize);
+ if (unit.rows.length === 0) {
+ await writeSearchRows(catalogDb, [], { ...meta, lastKey: null, phase: "sweep" });
+ return "more";
+ }
+ await writeSearchRows(catalogDb, unit.rows, { ...meta, lastKey: unit.lastKey });
+ return "more";
+ }
+
+ // Sweep: the meta written with the final chunk says "done", in the same transaction as the deletes.
+ const deleted = await sweepStaleSearchRows(catalogDb, sourceId, kind, meta.generation, unitSize, { ...meta, phase: "sweep" });
+ if (deleted < unitSize) {
+ await sweepStaleSearchRows(catalogDb, sourceId, kind, meta.generation, 0, { ...meta, phase: "done" });
+ return "done";
+ }
+ return "more";
+}
+
+export interface RunIndexJobsOptions {
+ /** Wait after each unit, so the indexer only ever takes a small share of the CPU. */
+ paceMs: number;
+ /** Checked between units — true stops the run at that boundary. */
+ shouldStop: () => boolean;
+ sleep?: (ms: number) => Promise;
+ unitSize?: number;
+}
+
+/**
+ * Works through `jobs` in order, one unit at a time with a pause after
+ * each, until they're all done or `shouldStop()` says to stop. Never
+ * interrupted mid-unit, so there's no partial state to repair.
+ */
+export async function runIndexJobs(catalogDb: CatalogDb, jobs: SearchIndexJob[], options: RunIndexJobsOptions): Promise<"done" | "stopped"> {
+ const sleep = options.sleep ?? ((ms: number) => new Promise((resolve) => setTimeout(resolve, ms)));
+ for (const job of jobs) {
+ for (;;) {
+ if (options.shouldStop()) return "stopped";
+ const result = await runIndexUnit(catalogDb, job, options.unitSize);
+ if (result === "done") break;
+ await sleep(options.paceMs);
+ }
+ }
+ return "done";
+}
diff --git a/src/settings-store.ts b/src/settings-store.ts
index 35119f2..0206a2f 100644
--- a/src/settings-store.ts
+++ b/src/settings-store.ts
@@ -2,44 +2,63 @@ export type PlaybackSpeed = 0.5 | 1 | 1.25 | 1.5 | 2;
/** What the launch sync does: nothing, only the parts that are out of date, or everything. */
export type UpdateOnLaunch = "off" | "when-stale" | "always";
export type GuideRefreshHours = 6 | 12 | 24;
+export type CatalogRefreshHours = 24 | 48 | 72;
export type GuideDaysToKeep = 1 | 3 | 7;
/** Container for Xtream live channels — HLS (.m3u8) or MPEG-TS (.ts). */
export type LiveStreamFormat = "m3u8" | "ts";
+/** "auto" starts with the format that last worked for the playlist and switches by itself if it fails; the others are fixed. */
+export type LiveStreamFormatSetting = "auto" | LiveStreamFormat;
export interface AppSettings {
/** Background checks while the app runs — every 30 min, on return to the foreground, and when the network comes back (see sync-scheduler.ts). */
automaticRefresh: boolean;
updateOnLaunch: UpdateOnLaunch;
+ /** Xtream movies and series are re-downloaded once they're older than this (see catalog-sync.ts). */
+ catalogRefreshHours: CatalogRefreshHours;
/** The programme guide is re-downloaded once it's older than this (see epg-sync.ts). */
guideRefreshHours: GuideRefreshHours;
/** How many days ahead of the guide are stored; applies from the next guide update. */
guideDaysToKeep: GuideDaysToKeep;
playbackSpeed: PlaybackSpeed;
- /** Xtream live channels only; the player offers the other format if a channel fails (see live-stream-url.ts). */
- liveStreamFormat: LiveStreamFormat;
+ /** Xtream live channels only (see live-stream-url.ts). */
+ liveStreamFormat: LiveStreamFormatSetting;
}
const SETTINGS_KEY = "iptv.settings.v1";
+/** Stored with the settings once liveStreamFormat can hold "auto" — see migrate. */
+const LIVE_STREAM_FORMAT_VERSION = 2;
export const DEFAULT_SETTINGS: AppSettings = {
automaticRefresh: true,
updateOnLaunch: "when-stale",
+ catalogRefreshHours: 48,
guideRefreshHours: 6,
guideDaysToKeep: 3,
playbackSpeed: 1,
- liveStreamFormat: "m3u8",
+ liveStreamFormat: "auto",
};
+/**
+ * Before "auto" existed the default was a stored "m3u8", indistinguishable
+ * from choosing HLS — so only "ts" (never the default) is kept as a
+ * deliberate choice, and everything else starts on Auto.
+ */
+function migrate({ liveStreamFormatVersion, ...stored }: Partial & { liveStreamFormatVersion?: number }): Partial {
+ if (liveStreamFormatVersion === LIVE_STREAM_FORMAT_VERSION) return stored;
+ const { liveStreamFormat, ...rest } = stored;
+ return liveStreamFormat === "ts" ? { ...rest, liveStreamFormat } : rest;
+}
+
/**
* App settings, persisted in localStorage. Each is read at the moment it
* matters, so a change applies without a restart: sync-scheduler.ts on each
- * trigger, epg-sync.ts on each guide check, and PlayerScreen each time a
+ * trigger, epg-sync.ts and catalog-sync.ts on each due check, and PlayerScreen each time a
* stream starts (speed for films/episodes/catch-up — live is always 1x).
*/
export function loadSettings(): AppSettings {
try {
const raw = localStorage.getItem(SETTINGS_KEY);
- return raw ? { ...DEFAULT_SETTINGS, ...(JSON.parse(raw) as Partial) } : DEFAULT_SETTINGS;
+ return raw ? { ...DEFAULT_SETTINGS, ...migrate(JSON.parse(raw) as Partial
-
- - {trimmedQuery ? `No movies match "${trimmedQuery}".` : "No movies in this category."} + No movies in this category.
) : ( ), - [gridMovies, shelves, trimmedQuery, favoriteMovieIds, onPlay, selectCategory, showSyncNotice, syncState, source.kind], + [gridMovies, shelves, favoriteMovieIds, onPlay, selectCategory, showSyncNotice, syncState, source.kind, isGridLoading, isShelvesLoading, isCheckingLocalCatalog, useCategoryFetch], ); // Only a category fetch that failed with nothing to show is a hard error. @@ -478,13 +495,6 @@ export function VodScreen({ source, platform, profile, onPlay, onBack, isPlaybac ); } - if (showFullScreenSkeleton) { - return ( -{headerTitle}
- {headerCount != null && (
-
- {headerCount} {headerCount === 1 ? "title" : "titles"}
-
+ {headerDetail && (
+ {headerDetail}
)}
-
{browseContent}
+ {canRefresh && (
+
-
-