refactor(frontend): the flat components/ folder moves into shell/, modules/<page>/ and features/<name>/
A pure move (git mv, history kept): 333 files leave components/, which now holds only the platform layer (ui/) and the legal pages. The shell is the frame (App, header, nav rail, palette, boot); each page lives in modules/<page>/ with its rail, store and tests; what several pages share sits in features/<name>/; the shared-link page is watch/. Domain-free helpers went straight to ui/ (ViewSwitcher, FilterRail, the confirm dialog, the language switcher, the copy rows). Every relative specifier was rewritten (imports, dynamic imports, vi.mock, new URL), and the contract tests that scan sources now scan the whole app source, not only components/ — each glob was counted before and after so none went green over fewer files. The locale-format rule matched `/src/components/` only, so the move would have taken ~300 files out from under its i18n-singleton check; it now covers every folder that holds components, with a test per folder.
This commit is contained in:
@@ -0,0 +1,481 @@
|
||||
// @vitest-environment jsdom
|
||||
//
|
||||
// The navigation actions against the overlay history stack: `setPage` and `openChannel` never push
|
||||
// under an open overlay — they close it and push once its Back-to-close entry is reclaimed — and
|
||||
// `setPage`'s same-page guard, which decides whether anything is pushed at all.
|
||||
//
|
||||
// The overlay half is what used to live at each call site (Shift+W in App, a toast's "View", the
|
||||
// palette, the player's channel link) and could be forgotten at any of them; it now lives in the two
|
||||
// actions, so this file is where it is pinned. The end-to-end gesture — Shift+W over the player,
|
||||
// then browser Back — is still checked in a real browser: jsdom reproduces history ordering only as
|
||||
// bookkeeping.
|
||||
import { describe, it, expect, afterEach, beforeEach, vi } from "vitest";
|
||||
import { renderHook, render as rtlRender, act, cleanup } from "@testing-library/react";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
// Partial: the provider reads `t` AND `i18n.language` (both feed the document-title effect), and the
|
||||
// import graph pulls in `src/i18n`, which initialises against the real `initReactI18next` — so a
|
||||
// wholesale mock throws before any test runs.
|
||||
vi.mock("react-i18next", async (importOriginal) => {
|
||||
const actual = await importOriginal<typeof import("react-i18next")>();
|
||||
return {
|
||||
...actual,
|
||||
useTranslation: () => ({ t: (k: string) => k, i18n: { language: "en" } }),
|
||||
};
|
||||
});
|
||||
|
||||
import { NavigationProvider } from "./NavigationProvider";
|
||||
import { useNavigation, useNavigationActions } from "./navigationContext";
|
||||
import { useBackToClose } from "../../lib/history";
|
||||
import { PageHeading } from "../../components/ui/Headings";
|
||||
|
||||
import { qk } from "../../lib/queryKeys";
|
||||
import { claimLocalData, getAccountRaw, LS, setAccountRaw } from "../../lib/storage";
|
||||
import { api } from "../../lib/api";
|
||||
import { PAGE_KEY } from "./navigationInit";
|
||||
|
||||
/** The Navigation API's view of the tab: `below` = whether each entry under the current one belongs
|
||||
* to this document, nearest first. jsdom has no Navigation API; Chrome's says this. */
|
||||
function stubNavigation(below: boolean[]) {
|
||||
const entries = [...below].reverse().map((sameDocument) => ({ sameDocument }));
|
||||
entries.push({ sameDocument: true });
|
||||
Object.defineProperty(window, "navigation", {
|
||||
configurable: true,
|
||||
value: { currentEntry: { index: entries.length - 1 }, entries: () => entries },
|
||||
});
|
||||
}
|
||||
afterEach(() => {
|
||||
Reflect.deleteProperty(window, "navigation");
|
||||
});
|
||||
|
||||
// The provider reads the signed-in account (the tab title) from the `me` cache.
|
||||
let qc = new QueryClient();
|
||||
const wrapper = ({ children }: { children: ReactNode }) => (
|
||||
<QueryClientProvider client={qc}>
|
||||
<NavigationProvider>{children}</NavigationProvider>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
const render = () =>
|
||||
renderHook(() => ({ ...useNavigation(), ...useNavigationActions() }), { wrapper });
|
||||
|
||||
const settle = () =>
|
||||
act(async () => {
|
||||
await new Promise((r) => setTimeout(r, 0));
|
||||
});
|
||||
|
||||
/** An open overlay (the player) whose close really unmounts it; its reclaiming back() is stubbed to
|
||||
* land its popstate at once. */
|
||||
async function openOverlay() {
|
||||
const back = vi.spyOn(window.history, "back").mockImplementation(() => {
|
||||
window.dispatchEvent(new PopStateEvent("popstate", { state: window.history.state }));
|
||||
});
|
||||
const holder: { unmount?: () => void } = {};
|
||||
const onClose = vi.fn(() => holder.unmount?.());
|
||||
const layer = renderHook(() => useBackToClose(onClose));
|
||||
holder.unmount = layer.unmount;
|
||||
await settle();
|
||||
return { back, onClose };
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
qc = new QueryClient();
|
||||
// An admin on a Plex-enabled instance: every module is open to it, so no gate moves a page here.
|
||||
qc.setQueryData(qk.me(), { id: 1, role: "admin", plex_enabled: true });
|
||||
localStorage.clear();
|
||||
claimLocalData(1); // the account's page memory
|
||||
window.history.replaceState({ sfPage: "feed" }, "", "/");
|
||||
});
|
||||
// Not automatic: vitest runs without `globals`, so RTL never registers its own afterEach — leaving a
|
||||
// provider (and its popstate listener) mounted for the next case. Same reason Home.dom.test.tsx does.
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
describe("NavigationProvider · the tab title", () => {
|
||||
// Prod UAT 2026-09-19: signed out, the tab read the Home page's question over the sign-in form.
|
||||
it("is the brand alone while nobody is signed in, the page's name once someone is", async () => {
|
||||
window.history.replaceState({ sfPage: "home" }, "", "/?page=home");
|
||||
qc.setQueryData(qk.me(), null);
|
||||
render();
|
||||
await settle();
|
||||
expect(document.title).toBe("Siftlode");
|
||||
|
||||
act(() => {
|
||||
qc.setQueryData(qk.me(), { id: 1 });
|
||||
});
|
||||
await settle();
|
||||
expect(document.title).not.toBe("Siftlode");
|
||||
expect(document.title.endsWith(" · Siftlode")).toBe(true);
|
||||
});
|
||||
|
||||
// The Feed's tab read a bare "Siftlode" — the one page that named no place.
|
||||
it("names the Feed like every other page", async () => {
|
||||
window.history.replaceState({ sfPage: "feed" }, "", "/?page=feed");
|
||||
render();
|
||||
await settle();
|
||||
expect(document.title).toBe("header.account.feed · Siftlode");
|
||||
});
|
||||
|
||||
// A channel opened from a link was "Channels · Siftlode", the same channel opened in the
|
||||
// app was named; a Plex title, person or collection only "Plex". The object is the view's heading.
|
||||
it("puts the open view's own heading before the place, and drops it when the view closes", async () => {
|
||||
window.history.replaceState({ sfPage: "plex" }, "", "/?page=plex");
|
||||
function View({ name }: { name: string | null }) {
|
||||
return name === null ? null : <PageHeading>{name}</PageHeading>;
|
||||
}
|
||||
const view = rtlRender(<View name="" />, { wrapper });
|
||||
await settle();
|
||||
expect(document.title).toBe("plex.navLabel · Siftlode"); // no title yet: the place alone
|
||||
|
||||
view.rerender(<View name="Nicolas Cage" />);
|
||||
await settle();
|
||||
expect(document.title).toBe("Nicolas Cage · plex.navLabel · Siftlode");
|
||||
|
||||
view.rerender(<View name={null} />);
|
||||
await settle();
|
||||
expect(document.title).toBe("plex.navLabel · Siftlode");
|
||||
});
|
||||
|
||||
it("takes a heading's tabTitle over its text", async () => {
|
||||
window.history.replaceState({ sfPage: "plex" }, "", "/?page=plex");
|
||||
rtlRender(<PageHeading tabTitle="Voyager · Season 1">Season 1</PageHeading>, { wrapper });
|
||||
await settle();
|
||||
expect(document.title).toBe("Voyager · Season 1 · plex.navLabel · Siftlode");
|
||||
});
|
||||
});
|
||||
|
||||
describe("NavigationProvider · setPage's same-page guard", () => {
|
||||
it("pushes an entry for a real page change", () => {
|
||||
const { result } = render();
|
||||
const push = vi.spyOn(window.history, "pushState");
|
||||
act(() => result.current.setPage("plex"));
|
||||
expect(push).toHaveBeenCalledTimes(1);
|
||||
expect(result.current.page).toBe("plex");
|
||||
});
|
||||
|
||||
it("leaves every page's own URL keys behind, the activity page's included", () => {
|
||||
window.history.replaceState(
|
||||
{ sfPage: "activity" },
|
||||
"",
|
||||
"/?page=activity&at=logs&aw=24h&au=none&aq=x&rjob=backfill&rst=error&aact=config_set" +
|
||||
"&lgrp=error&lreq=req-abcdef12&lrun=7&pscope=movie&ctab=hidden&keep=1",
|
||||
);
|
||||
const { result } = render();
|
||||
act(() => result.current.setPage("plex"));
|
||||
expect(window.location.search).toBe("?page=plex&keep=1");
|
||||
});
|
||||
|
||||
it("pushes nothing when it is already that page", () => {
|
||||
const { result } = render();
|
||||
act(() => result.current.setPage("plex"));
|
||||
const push = vi.spyOn(window.history, "pushState");
|
||||
act(() => result.current.setPage("plex"));
|
||||
expect(push).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("still navigates to the current page when a channel page is over it", () => {
|
||||
// The nav rail's own module while a channel page is open over it is a real navigation: it closes
|
||||
// the channel page. The `&& !channelViewRef.current` half of the guard is what makes it one.
|
||||
const { result } = render();
|
||||
// The page under test must be the one that is ALREADY current, or the guard's first conjunct is
|
||||
// false and this never reaches the clause it is named for — the mistake a review caught here: a
|
||||
// bare URL with cleared storage lands on "home" (navigationInit's default), not "feed", so
|
||||
// asking for "feed" was just an ordinary page change and deleting the clause left it green.
|
||||
const current = result.current.page;
|
||||
expect(current).toBe("home");
|
||||
act(() => result.current.openChannel("UC1", "A channel"));
|
||||
expect(result.current.channelView).not.toBeNull();
|
||||
|
||||
const push = vi.spyOn(window.history, "pushState");
|
||||
act(() => result.current.setPage(current));
|
||||
expect(push).toHaveBeenCalledTimes(1);
|
||||
expect(result.current.channelView).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("NavigationProvider · Back", () => {
|
||||
// A tab that had a since-removed module open, reloaded onto the new build: its older history
|
||||
// entries still name that page, and Back lands on one of them.
|
||||
it("lands on the feed when the entry names a page this build does not have", () => {
|
||||
const { result } = render();
|
||||
act(() => result.current.setPage("plex"));
|
||||
act(() => {
|
||||
window.history.replaceState({ sfPage: "messages" }, "", "/?page=messages&keep=1");
|
||||
window.dispatchEvent(new PopStateEvent("popstate", { state: { sfPage: "messages" } }));
|
||||
});
|
||||
expect(result.current.page).toBe("feed");
|
||||
// …and the entry says so too, so the address bar and a later Feed click agree with the screen.
|
||||
expect(window.history.state).toMatchObject({ sfPage: "feed" });
|
||||
expect(window.location.search).toBe("?keep=1");
|
||||
});
|
||||
|
||||
it("lands where a retired page's content went, and the entry names that page", () => {
|
||||
const { result } = render();
|
||||
act(() => result.current.setPage("plex"));
|
||||
act(() => {
|
||||
window.history.replaceState({ sfPage: "downloads" }, "", "/?page=downloads&keep=1");
|
||||
window.dispatchEvent(new PopStateEvent("popstate", { state: { sfPage: "downloads" } }));
|
||||
});
|
||||
expect(result.current.page).toBe("files");
|
||||
expect(window.history.state).toMatchObject({ sfPage: "files" });
|
||||
expect(window.location.search).toBe("?page=files&keep=1");
|
||||
});
|
||||
|
||||
// The audit log and the server log became the activity page's tabs: an old link, bookmark or entry
|
||||
// opens that tab, with the filters it carried.
|
||||
it("opens a retired page's tab on the page that replaced it", () => {
|
||||
window.history.replaceState(null, "", "/?page=audit&keep=1");
|
||||
const { result } = render();
|
||||
expect(result.current.page).toBe("activity");
|
||||
expect(window.location.search).toBe("?page=activity&keep=1&at=admin");
|
||||
});
|
||||
|
||||
it("keeps a retired page's own filter as it opens its tab", () => {
|
||||
window.history.replaceState(null, "", "/?page=logs&lreq=req-00000009");
|
||||
render();
|
||||
const url = new URLSearchParams(window.location.search);
|
||||
expect([url.get("page"), url.get("at"), url.get("lreq")]).toEqual([
|
||||
"activity",
|
||||
"logs",
|
||||
"req-00000009",
|
||||
]);
|
||||
});
|
||||
|
||||
it("carries an old server-log link's account, text and range onto the page's own filters", () => {
|
||||
window.history.replaceState(null, "", "/?page=logs&lu=3&lq=boom&lwin=1h");
|
||||
render();
|
||||
const url = new URLSearchParams(window.location.search);
|
||||
expect([url.get("at"), url.get("au"), url.get("aq"), url.get("aw")]).toEqual([
|
||||
"logs",
|
||||
"3",
|
||||
"boom",
|
||||
"1h",
|
||||
]);
|
||||
// …and the dead keys leave the address bar instead of riding along to every page after.
|
||||
expect(["lu", "lq", "lwin"].filter((k) => url.has(k))).toEqual([]);
|
||||
});
|
||||
|
||||
it("an old server-log link without a range keeps the one it meant", () => {
|
||||
window.history.replaceState(null, "", "/?page=logs");
|
||||
render();
|
||||
expect(new URLSearchParams(window.location.search).get("aw")).toBe("24h");
|
||||
});
|
||||
|
||||
it("a remembered retired page opens its tab", () => {
|
||||
qc.setQueryData(qk.me(), {
|
||||
id: 1,
|
||||
role: "admin",
|
||||
plex_enabled: true,
|
||||
preferences: { startOnHome: false },
|
||||
});
|
||||
setAccountRaw(PAGE_KEY, "logs");
|
||||
window.history.replaceState(null, "", "/");
|
||||
const { result } = render();
|
||||
expect(result.current.page).toBe("activity");
|
||||
expect(new URLSearchParams(window.location.search).get("at")).toBe("logs");
|
||||
});
|
||||
|
||||
// Start-on-Home is the account's preference. An opt-out this browser kept before the server held it
|
||||
// (the string "0") still counts, and reaches the server for the account's other devices.
|
||||
it("takes this browser's earlier opt-out of Home, and saves it to the account", () => {
|
||||
const save = vi.spyOn(api, "savePrefs").mockResolvedValue(undefined as never);
|
||||
qc.setQueryData(qk.me(), { id: 1, role: "admin", plex_enabled: true, preferences: {} });
|
||||
setAccountRaw(LS.startOnHome, "0");
|
||||
setAccountRaw(PAGE_KEY, "plex");
|
||||
window.history.replaceState(null, "", "/");
|
||||
const { result } = render();
|
||||
expect(result.current.page).toBe("plex");
|
||||
expect(save).toHaveBeenCalledWith({ startOnHome: false });
|
||||
});
|
||||
|
||||
it("opens a retired page's tab when Back lands on its entry", () => {
|
||||
const { result } = render();
|
||||
act(() => result.current.setPage("plex"));
|
||||
act(() => {
|
||||
window.history.replaceState({ sfPage: "audit" }, "", "/?page=audit");
|
||||
window.dispatchEvent(new PopStateEvent("popstate", { state: { sfPage: "audit" } }));
|
||||
});
|
||||
expect(result.current.page).toBe("activity");
|
||||
expect(window.location.search).toBe("?page=activity&at=admin");
|
||||
});
|
||||
|
||||
// lib/history's own listener takes a spent focus stamp off the entry it lands on; the rewrite must
|
||||
// not put it back, or the next landing there (an overlay closing) would refocus a stale item.
|
||||
it("does not put back the focus stamp the landing spent", () => {
|
||||
render();
|
||||
const st = { sfPage: "messages", sfNav: { list: 0, lists: 1 } };
|
||||
act(() => {
|
||||
window.history.replaceState(st, "", "/?page=messages");
|
||||
window.dispatchEvent(new PopStateEvent("popstate", { state: st }));
|
||||
});
|
||||
expect(window.history.state).toMatchObject({ sfPage: "feed" });
|
||||
expect(window.history.state).not.toHaveProperty("sfNav");
|
||||
});
|
||||
});
|
||||
|
||||
describe("NavigationProvider · a page the account cannot open", () => {
|
||||
const member = { id: 1, role: "user", plex_enabled: true };
|
||||
|
||||
// A member following a link to an admin page saw the feed with no rail row current: the page
|
||||
// stayed "scheduler" while only the content fell back.
|
||||
it("lands on the feed, and the address bar says so", () => {
|
||||
qc.setQueryData(qk.me(), member);
|
||||
window.history.replaceState(null, "", "/?page=scheduler&keep=1");
|
||||
const { result } = render();
|
||||
expect(result.current.page).toBe("feed");
|
||||
expect(window.location.search).toBe("?keep=1");
|
||||
expect(window.history.state).toMatchObject({ sfPage: "feed" });
|
||||
});
|
||||
|
||||
it("lands on the feed when Back reaches an entry naming one", () => {
|
||||
qc.setQueryData(qk.me(), member);
|
||||
const { result } = render();
|
||||
act(() => result.current.setPage("files"));
|
||||
act(() => {
|
||||
window.history.replaceState({ sfPage: "config" }, "", "/?page=config");
|
||||
window.dispatchEvent(new PopStateEvent("popstate", { state: { sfPage: "config" } }));
|
||||
});
|
||||
expect(result.current.page).toBe("feed");
|
||||
});
|
||||
|
||||
it("leaves the page it is on once the account loses it", async () => {
|
||||
window.history.replaceState(null, "", "/?page=users");
|
||||
const { result } = render();
|
||||
expect(result.current.page).toBe("users");
|
||||
act(() => {
|
||||
qc.setQueryData(qk.me(), member);
|
||||
});
|
||||
await settle();
|
||||
expect(result.current.page).toBe("feed");
|
||||
});
|
||||
|
||||
// Kept behind the feed, the lost page stayed in the address bar, a click on Feed did nothing (the
|
||||
// feed was already on screen), and a later grant switched the page unasked.
|
||||
it("gives the lost page up: the address bar, the remembered page and a later grant agree", async () => {
|
||||
window.history.replaceState({ sfPage: "users" }, "", "/?page=users");
|
||||
const { result } = render();
|
||||
expect(result.current.page).toBe("users");
|
||||
act(() => {
|
||||
qc.setQueryData(qk.me(), member);
|
||||
});
|
||||
await settle();
|
||||
expect(window.location.search).toBe("");
|
||||
expect(window.history.state).toMatchObject({ sfPage: "feed" });
|
||||
expect(getAccountRaw(PAGE_KEY)).toBe("feed");
|
||||
act(() => {
|
||||
qc.setQueryData(qk.me(), { ...member, role: "admin" });
|
||||
});
|
||||
await settle();
|
||||
expect(result.current.page).toBe("feed");
|
||||
});
|
||||
|
||||
it("closes a channel page open over the lost page, on screen and in the entry", async () => {
|
||||
window.history.replaceState({ sfPage: "users" }, "", "/?page=users");
|
||||
const { result } = render();
|
||||
act(() => result.current.openChannel("UC1", "One"));
|
||||
expect(window.location.search).toContain("chan=UC1");
|
||||
act(() => {
|
||||
qc.setQueryData(qk.me(), member);
|
||||
});
|
||||
await settle();
|
||||
expect(result.current.channelView).toBeNull();
|
||||
expect(window.location.search).toBe("");
|
||||
expect(window.history.state?._chan).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe("NavigationProvider · leaving a sub-view whose entry is the oldest of this document", () => {
|
||||
// A full tab can have dropped the entry under the one the channel page or the search pushed (see
|
||||
// lib/history's backStaysInDocument): leaving clears it in place instead of stepping out.
|
||||
it("closes the channel page in place", () => {
|
||||
const { result } = render();
|
||||
act(() => result.current.openChannel("UC1", "One"));
|
||||
stubNavigation([false]);
|
||||
const back = vi.spyOn(window.history, "back").mockImplementation(() => {});
|
||||
act(() => result.current.closeChannel());
|
||||
expect(back).not.toHaveBeenCalled();
|
||||
expect(result.current.channelView).toBeNull();
|
||||
expect(window.location.search).not.toContain("chan=");
|
||||
});
|
||||
|
||||
it("leaves the YouTube search in place", () => {
|
||||
const { result } = render();
|
||||
act(() => result.current.enterYtSearch("cats"));
|
||||
stubNavigation([false]);
|
||||
const back = vi.spyOn(window.history, "back").mockImplementation(() => {});
|
||||
act(() => result.current.exitYtSearch());
|
||||
expect(back).not.toHaveBeenCalled();
|
||||
expect(result.current.ytSearch).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("NavigationProvider · never under an open overlay", () => {
|
||||
it("setPage closes the overlay first and pushes only once its entry is reclaimed", async () => {
|
||||
const { result } = render();
|
||||
const { back, onClose } = await openOverlay();
|
||||
const push = vi.spyOn(window.history, "pushState");
|
||||
|
||||
act(() => result.current.setPage("plex"));
|
||||
expect(onClose).toHaveBeenCalledTimes(1);
|
||||
expect(push).not.toHaveBeenCalled(); // not while the player's entry is still current
|
||||
|
||||
await settle();
|
||||
await settle();
|
||||
expect(back).toHaveBeenCalledTimes(1);
|
||||
expect(push).toHaveBeenCalledTimes(1);
|
||||
expect(result.current.page).toBe("plex");
|
||||
expect(window.history.state).toMatchObject({ sfPage: "plex" });
|
||||
});
|
||||
|
||||
// `then` belongs to the NEW entry (the palette's "Meglepetés" token names it — lib/homeIntent), so
|
||||
// over an open player it must wait for the push, and with nothing to push it still runs.
|
||||
it("runs setPage's `then` after the push, on the entry the push made", async () => {
|
||||
const { result } = render();
|
||||
await openOverlay();
|
||||
const seen: unknown[] = [];
|
||||
expect(result.current.page).not.toBe("plex");
|
||||
act(() => result.current.setPage("plex", () => seen.push(window.history.state?.sfPage)));
|
||||
expect(seen).toEqual([]);
|
||||
await settle();
|
||||
await settle();
|
||||
expect(seen).toEqual(["plex"]);
|
||||
|
||||
act(() => result.current.setPage("plex", () => seen.push("again")));
|
||||
expect(seen).toEqual(["plex", "again"]);
|
||||
});
|
||||
|
||||
// Shift+W on Home with the player open (owner decision 2026-09-09): nothing to push, but the player
|
||||
// closes, and its entry is reclaimed rather than orphaned under a push that never happened.
|
||||
it("setPage to the current page closes the overlay and pushes nothing", async () => {
|
||||
const { result } = render();
|
||||
const { back, onClose } = await openOverlay();
|
||||
const push = vi.spyOn(window.history, "pushState");
|
||||
|
||||
act(() => result.current.setPage(result.current.page));
|
||||
await settle();
|
||||
await settle();
|
||||
expect(onClose).toHaveBeenCalledTimes(1);
|
||||
expect(back).toHaveBeenCalledTimes(1);
|
||||
expect(push).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
// The player's channel link and the palette's channel rows.
|
||||
it("openChannel closes the overlay first and pushes the channel once its entry is reclaimed", async () => {
|
||||
const { result } = render();
|
||||
const { back, onClose } = await openOverlay();
|
||||
const push = vi.spyOn(window.history, "pushState");
|
||||
|
||||
act(() => result.current.openChannel("UC1", "A channel"));
|
||||
expect(onClose).toHaveBeenCalledTimes(1);
|
||||
expect(push).not.toHaveBeenCalled();
|
||||
|
||||
await settle();
|
||||
await settle();
|
||||
expect(back).toHaveBeenCalledTimes(1);
|
||||
expect(push).toHaveBeenCalledTimes(1);
|
||||
expect(result.current.channelView).toEqual({ id: "UC1", name: "A channel" });
|
||||
expect(window.history.state).toMatchObject({ _chan: "UC1" });
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,302 @@
|
||||
import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
|
||||
import { useLatest } from "../../lib/useLatest";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useMe } from "../../lib/useMe";
|
||||
import { resolvePage, retiredParams, urlWithParams, type Page } from "../../lib/urlState";
|
||||
import { ACTIVITY_KEYS } from "../../lib/activityUrlState";
|
||||
import { pageTitleKey } from "../../lib/pageMeta";
|
||||
import { useDocumentObjectTitle } from "../../lib/documentTitle";
|
||||
import { getAccountRaw, setAccountRaw } from "../../lib/storage";
|
||||
import {
|
||||
backStaysInDocument,
|
||||
closeOverlaysThenNavigate,
|
||||
nextNavId,
|
||||
notifyNav,
|
||||
rememberNavPosition,
|
||||
} from "../../lib/history";
|
||||
import { reachablePage } from "../../lib/modules";
|
||||
import {
|
||||
channelViewFrom,
|
||||
loadInitialPage,
|
||||
PAGE_KEY,
|
||||
START_ON_HOME_OPTIONS,
|
||||
START_ON_HOME_PREF,
|
||||
type ChannelView,
|
||||
} from "./navigationInit";
|
||||
import { usePref } from "../../lib/usePref";
|
||||
import {
|
||||
NavigationActionsContext,
|
||||
NavigationStateContext,
|
||||
type NavigationActions,
|
||||
type NavigationState,
|
||||
} from "./navigationContext";
|
||||
|
||||
// Owns the app's navigation + browser-history state, lifted out of the App god component so pages
|
||||
// consume it via a hook instead of prop-drilling `page`/`setPage`/`onOpenChannel` through the tree.
|
||||
// Mirrors ConfirmProvider (context + default value + one-line hooks); composed in main.tsx inside
|
||||
// ConfirmProvider, around <App/>.
|
||||
//
|
||||
// The contexts, their value types and the hooks live in navigationContext.ts.
|
||||
|
||||
/** The address bar of `page`'s root: the page (feed implicit) with every view-specific key cleared. */
|
||||
function pageRootParams(page: Page): Record<string, string | null> {
|
||||
return {
|
||||
page: page === "feed" ? null : page,
|
||||
chan: null,
|
||||
v: null,
|
||||
pl: null,
|
||||
pscope: null,
|
||||
psort: null,
|
||||
pshow: null,
|
||||
pf: null,
|
||||
ctab: null,
|
||||
csort: null,
|
||||
cf: null,
|
||||
...Object.fromEntries(ACTIVITY_KEYS.map((k) => [k, null])),
|
||||
};
|
||||
}
|
||||
|
||||
export function NavigationProvider({ children }: { children: ReactNode }) {
|
||||
const { t, i18n } = useTranslation();
|
||||
// Held here as well as in Settings: this is the instance mounted on every boot, so a value only
|
||||
// this browser held reaches the server at once.
|
||||
const [startOnHome] = usePref(START_ON_HOME_PREF, true, START_ON_HOME_OPTIONS);
|
||||
const [chosenPage, setPageState] = useState<Page>(() => loadInitialPage(startOnHome));
|
||||
// The page on screen: the chosen one when this account may open it, else the feed — derived, so a
|
||||
// link, a Back and a role taken away mid-session all land the same way, and the rail, the content
|
||||
// and the address bar (stamped from it below) agree.
|
||||
const me = useMe();
|
||||
const page = reachablePage(chosenPage, me);
|
||||
// Ephemeral: not persisted and not in the URL, so a reload returns to the normal feed (a search
|
||||
// spends quota, so we never auto-replay it) — UNLESS it was zero-quota scrape-sourced, which rides
|
||||
// in history.state and is free to re-fetch. The popstate handler derives it from history.state so
|
||||
// Back steps player → search → feed instead of the search vanishing without a history entry.
|
||||
const [ytSearch, setYtSearch] = useState<string | null>(() => {
|
||||
const st = window.history.state;
|
||||
return st?._yt && st?._ytScrape ? (st._yt as string) : null;
|
||||
});
|
||||
// The open channel page rides in history.state (_chan = id, _chanName = a name to show before the
|
||||
// detail loads) AND is mirrored to the address bar as ?chan=<id>, so Back closes it, a reload restores
|
||||
// it, and a bookmarked ?chan link opens it (unlike ytSearch, which is dropped). Reload of an in-app
|
||||
// entry reads history.state._chan; a fresh bookmark has only the ?chan param.
|
||||
const [channelView, setChannelView] = useState<ChannelView | null>(() =>
|
||||
channelViewFrom(window.history.state, window.location.search),
|
||||
);
|
||||
// A page this account can no longer open (a role taken away, a module switched off mid-session)
|
||||
// is given up, not kept behind the feed: kept, the address bar would go on naming it, a click on
|
||||
// Feed would be a no-op (setPage's same-page guard sees the feed already on screen), and a later
|
||||
// grant would switch the page by itself. A channel page open over it closes with it, as on any
|
||||
// page switch. Adjusted during render; the history entry and the remembered page follow in the
|
||||
// effect below.
|
||||
const [givenUp, setGivenUp] = useState(0);
|
||||
if (page !== chosenPage) {
|
||||
setPageState(page);
|
||||
setChannelView(null);
|
||||
setGivenUp((n) => n + 1);
|
||||
}
|
||||
|
||||
// Latest-value refs so the STABLE action callbacks can read the latest state without depending on
|
||||
// it — a dep would recreate them on every navigation and re-render every actions consumer (e.g.
|
||||
// VideoCard). Only READ in event handlers, after commit.
|
||||
const pageRef = useLatest(page);
|
||||
const channelViewRef = useLatest(channelView);
|
||||
|
||||
const setPage = useCallback(
|
||||
(next: Page, then?: () => void) =>
|
||||
// Never under an open overlay — see the interface doc. The refs are read when the push
|
||||
// actually happens, which over an open player is a moment after this call.
|
||||
closeOverlaysThenNavigate(() => {
|
||||
// A channel page overlays the content column, so a nav click must close it even when the
|
||||
// underlying page is unchanged (e.g. "Feed" while a channel opened from the feed).
|
||||
if (next === pageRef.current && !channelViewRef.current) {
|
||||
then?.();
|
||||
return;
|
||||
}
|
||||
setChannelView(null); // leave any open channel page when navigating via the rail
|
||||
setPageState(next);
|
||||
setAccountRaw(PAGE_KEY, next);
|
||||
// Push an in-app history entry so browser/mouse Back steps through pages instead of leaving
|
||||
// the app. A fresh { sfPage } (no carried-over _yt/_chan markers) so each page starts at its
|
||||
// root, and the address bar reflects the page (feed is implicit) while clearing the
|
||||
// view-specific params (chan/v/pl and the plex content keys pscope/psort/pshow/pf) — a page
|
||||
// switch resets to that module's root. Feed filters (owned by FeedFiltersProvider) are left
|
||||
// intact; the plex/channels keys re-mirror from PlexProvider / ChannelsProvider on return to
|
||||
// their page. The item it was opened from is still focused: the state setters above have not
|
||||
// re-rendered anything yet.
|
||||
rememberNavPosition();
|
||||
window.history.pushState(
|
||||
{ sfPage: next, sfScroll: nextNavId() },
|
||||
"",
|
||||
urlWithParams(pageRootParams(next)),
|
||||
);
|
||||
notifyNav();
|
||||
then?.();
|
||||
}),
|
||||
[pageRef, channelViewRef],
|
||||
);
|
||||
|
||||
// A sub-view (channel / YT search) is an OVERLAY, not a page change. Like setPage it never lands
|
||||
// under an open overlay: the player's channel link and the palette's channel rows call it from
|
||||
// inside one.
|
||||
const openChannel = useCallback((id: string, name?: string) => {
|
||||
closeOverlaysThenNavigate(() => {
|
||||
const url = urlWithParams({ chan: id });
|
||||
if (window.history.state?._chan) {
|
||||
const st = window.history.state;
|
||||
window.history.replaceState({ ...st, _chan: id, _chanName: name ?? null }, "", url);
|
||||
} else {
|
||||
const st = rememberNavPosition();
|
||||
window.history.pushState({ ...st, _chan: id, _chanName: name ?? null }, "", url);
|
||||
}
|
||||
setChannelView({ id, name });
|
||||
});
|
||||
}, []);
|
||||
|
||||
const closeChannel = useCallback(() => {
|
||||
if (window.history.state?._chan && backStaysInDocument()) window.history.back();
|
||||
else {
|
||||
// No owned history entry (e.g. opened straight from a ?chan bookmark), or none of this document
|
||||
// below it to step back to (a full tab, see backStaysInDocument): clear it in place — the
|
||||
// entry's channel marks and the ?chan param.
|
||||
setChannelView(null);
|
||||
const { _chan: _id, _chanName: _name, ...st } = window.history.state ?? {};
|
||||
window.history.replaceState(st, "", urlWithParams({ chan: null }));
|
||||
}
|
||||
}, []);
|
||||
|
||||
const enterYtSearch = useCallback((q: string) => {
|
||||
setYtSearch(q);
|
||||
// Drop any prior _ytScrape marker — the new search's source isn't known yet; Feed re-stamps it
|
||||
// once the results resolve, so a reload only restores a confirmed scrape-sourced search.
|
||||
const { _ytScrape: _drop, ...st } = window.history.state || {};
|
||||
if (st._yt)
|
||||
window.history.replaceState({ ...st, _yt: q }, ""); // refine current search
|
||||
else {
|
||||
// New sub-view entry.
|
||||
const { _ytScrape: _dropToo, ...left } = rememberNavPosition();
|
||||
window.history.pushState({ ...left, sfPage: "feed", _yt: q }, "");
|
||||
}
|
||||
}, []);
|
||||
|
||||
const exitYtSearch = useCallback(() => {
|
||||
// Pop our search entry (so Forward still works); fall back to a clear in place if we don't own
|
||||
// one, or there is no entry of this document below it (a full tab, see backStaysInDocument).
|
||||
if (window.history.state?._yt && backStaysInDocument()) window.history.back();
|
||||
else {
|
||||
setYtSearch(null);
|
||||
const { _yt: _q, _ytScrape: _scrape, ...st } = window.history.state ?? {};
|
||||
window.history.replaceState(st, "");
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Leaving the feed ends any live YouTube search, so coming back shows the normal feed. Adjusted
|
||||
// DURING the render that changes the page, against the page we were last on: as an effect it ran
|
||||
// after the new page had already committed, so for one frame a module rendered with a live search
|
||||
// still in the nav state. Keyed on the CHANGE rather than derived from `page`, because "ended" has
|
||||
// to be permanent — a derived null would quietly come back when you returned to the feed.
|
||||
const [pageSearchWasOn, setPageSearchWasOn] = useState(page);
|
||||
if (pageSearchWasOn !== page) {
|
||||
setPageSearchWasOn(page);
|
||||
if (page !== "feed") setYtSearch(null);
|
||||
}
|
||||
|
||||
// The browser tab names the place and the object in it (DESIGN § Composition, "Where am I"):
|
||||
// "<object> · <module> · Siftlode". The object is the open view's own heading (a channel, a Plex
|
||||
// title, a playlist — `PageHeading` reports it), so a channel opened from a link is named the same
|
||||
// as one opened in the app. Signed out, the page on screen is the public landing whatever `page`
|
||||
// says — the tab read "What should I watch?" over the sign-in form (prod UAT 2026-09-19).
|
||||
const signedIn = me != null;
|
||||
const objectTitle = useDocumentObjectTitle();
|
||||
useEffect(() => {
|
||||
const parts = signedIn ? [objectTitle, t(pageTitleKey(page))] : [];
|
||||
document.title = [...parts.filter(Boolean), "Siftlode"].join(" · ");
|
||||
}, [signedIn, page, objectTitle, i18n.language, t]);
|
||||
|
||||
// The page given up above is the feed, and the current entry says so (replaced, not pushed: no
|
||||
// step was taken). Its own keys go with it, and the channel page closed with it, as on any page
|
||||
// switch — left in the entry, a reload would reopen what the screen no longer shows.
|
||||
useEffect(() => {
|
||||
if (!givenUp) return;
|
||||
setAccountRaw(PAGE_KEY, "feed");
|
||||
const { _chan: _closedChan, _chanName: _closedName, ...rest } = window.history.state ?? {};
|
||||
window.history.replaceState(
|
||||
{ ...rest, sfPage: "feed" },
|
||||
"",
|
||||
urlWithParams(pageRootParams("feed")),
|
||||
);
|
||||
}, [givenUp]);
|
||||
|
||||
// The page this tab LOADED on. Frozen, because the stamp below belongs to the initial history
|
||||
// entry: every later page change writes its own entry through setPage.
|
||||
const [mountPage] = useState(page);
|
||||
|
||||
// In-app Back/Forward: stamp the initial entry with the current page (mirrored to the address bar),
|
||||
// then sync state from history.state on popstate — the browser restores each entry's URL for us, so
|
||||
// the popstate handler only needs to read history.state.
|
||||
useEffect(() => {
|
||||
// A reload drops a stale _yt EXCEPT when scrape-sourced (zero quota): then keep _yt + _ytScrape
|
||||
// so it restores and re-fetches free (ytSearch above already initialised from it). _chan/_chanName
|
||||
// are always kept so a channel page survives F5.
|
||||
const st = window.history.state || {};
|
||||
// Mirror the resolved initial page to the address bar (feed implicit) so a page reached from the
|
||||
// stored landing pref — not just from the URL — is itself bookmarkable. urlWithParams preserves any
|
||||
// ?chan / ?v / ?pl / filter params the loaders already read.
|
||||
// A retired page's link — or the remembered last page, when that is what opened — also opens its
|
||||
// part of the page that replaced it (an `at` tab).
|
||||
const linked = new URLSearchParams(window.location.search).get("page");
|
||||
const remembered = getAccountRaw(PAGE_KEY);
|
||||
const url = urlWithParams({
|
||||
...retiredParams(linked ?? (resolvePage(remembered) === mountPage ? remembered : null)),
|
||||
page: mountPage === "feed" ? null : mountPage,
|
||||
});
|
||||
if (st._yt && st._ytScrape) {
|
||||
window.history.replaceState({ ...st, sfPage: mountPage }, "", url);
|
||||
} else {
|
||||
const { _yt: _staleYt, _ytScrape: _staleScrape, ...rest } = st;
|
||||
window.history.replaceState({ ...rest, sfPage: mountPage }, "", url);
|
||||
}
|
||||
function onPop(e: PopStateEvent) {
|
||||
// An entry can name a page this build no longer has (one pushed before a module was removed,
|
||||
// reached by Back after a reload onto the new build); that lands where the page's content went
|
||||
// (`resolvePage`), else on the feed, not on a crash. The entry is rewritten to say so: left
|
||||
// alone, the address bar would keep naming the dead page and a click on the page it landed on
|
||||
// would be a no-op (setPage's same-page guard). It spreads the LIVE entry, not `e.state`:
|
||||
// lib/history's listener ran first and already took the spent `sfNav` off it.
|
||||
const sf: unknown = e.state?.sfPage;
|
||||
const p: Page = (typeof sf === "string" && resolvePage(sf)) || "feed";
|
||||
if (typeof sf === "string" && sf !== p)
|
||||
window.history.replaceState(
|
||||
{ ...window.history.state, sfPage: p },
|
||||
"",
|
||||
urlWithParams({ ...retiredParams(sf), page: p === "feed" ? null : p }),
|
||||
);
|
||||
setPageState(p);
|
||||
setAccountRaw(PAGE_KEY, p);
|
||||
// The YouTube-search sub-view and the channel page ride in history.state, so Back/Forward
|
||||
// restores or clears them to match the entry we landed on.
|
||||
setYtSearch((e.state?._yt as string) ?? null);
|
||||
// The channel page rides in history.state._chan, with a ?chan URL fallback for a fresh bookmark
|
||||
// entry (URL-only, no _chan) — reading e.state alone would wrongly close the channel when a
|
||||
// popstate lands here (e.g. after an overlay's programmatic history.back()). channelViewFrom
|
||||
// shares this resolution with the seed initializer above.
|
||||
setChannelView(channelViewFrom(e.state, window.location.search));
|
||||
}
|
||||
window.addEventListener("popstate", onPop);
|
||||
return () => window.removeEventListener("popstate", onPop);
|
||||
}, [mountPage]);
|
||||
|
||||
const state = useMemo<NavigationState>(
|
||||
() => ({ page, channelView, ytSearch }),
|
||||
[page, channelView, ytSearch],
|
||||
);
|
||||
const actions = useMemo<NavigationActions>(
|
||||
() => ({ setPage, openChannel, closeChannel, enterYtSearch, exitYtSearch }),
|
||||
[setPage, openChannel, closeChannel, enterYtSearch, exitYtSearch],
|
||||
);
|
||||
|
||||
return (
|
||||
<NavigationActionsContext.Provider value={actions}>
|
||||
<NavigationStateContext.Provider value={state}>{children}</NavigationStateContext.Provider>
|
||||
</NavigationActionsContext.Provider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
// @vitest-environment jsdom
|
||||
//
|
||||
// NavigationProvider's URL-derived seeds, backfilling a code review's deferred coverage:
|
||||
// • loadInitialPage — the bookmark deep-link precedence (?page > ?v > ?pl > filters/?chan > the
|
||||
// account's stored landing page > feed).
|
||||
// • channelViewFrom — the shared _chan/?chan resolver behind BOTH the channelView seed and the
|
||||
// onPop handler: a popstate landing on a URL-only bookmark entry must restore the
|
||||
// channel from ?chan, not close it.
|
||||
// Only getAccountRaw is stubbed (the page the account left open); everything else is real. Whether
|
||||
// to start on Home is the account's preference, handed in.
|
||||
import { describe, it, expect, beforeEach, vi } from "vitest";
|
||||
|
||||
const { stored } = vi.hoisted(() => ({ stored: {} as Record<string, string | null> }));
|
||||
vi.mock("../../lib/storage", async (importOriginal) => {
|
||||
const actual = await importOriginal<typeof import("../../lib/storage")>();
|
||||
return { ...actual, getAccountRaw: (k: string) => stored[k] ?? null };
|
||||
});
|
||||
|
||||
import { loadInitialPage, channelViewFrom } from "./navigationInit";
|
||||
import { LS } from "../../lib/storage";
|
||||
|
||||
const setUrl = (search: string) => window.history.replaceState(null, "", search || "/");
|
||||
|
||||
let startOnHome = true;
|
||||
|
||||
beforeEach(() => {
|
||||
setUrl("/");
|
||||
startOnHome = true;
|
||||
for (const k of Object.keys(stored)) delete stored[k];
|
||||
});
|
||||
|
||||
describe("loadInitialPage precedence", () => {
|
||||
it("?page wins and is validated", () => {
|
||||
setUrl("?page=stats");
|
||||
expect(loadInitialPage(startOnHome)).toBe("stats");
|
||||
});
|
||||
it("an invalid ?page falls back to feed", () => {
|
||||
setUrl("?page=bogus");
|
||||
expect(loadInitialPage(startOnHome)).toBe("feed");
|
||||
});
|
||||
it("?v implies the plex module", () => {
|
||||
setUrl("?v=show:1");
|
||||
expect(loadInitialPage(startOnHome)).toBe("plex");
|
||||
});
|
||||
it("?pl implies playlists", () => {
|
||||
setUrl("?pl=3");
|
||||
expect(loadInitialPage(startOnHome)).toBe("playlists");
|
||||
});
|
||||
it.each(["?folder=4", "?item=12", "?folder=all&item=12"])(
|
||||
"%s implies the Files page (a folder, or a file to arrive at)",
|
||||
(search) => {
|
||||
setUrl(search);
|
||||
expect(loadInitialPage(startOnHome)).toBe("files");
|
||||
},
|
||||
);
|
||||
it("a filter param implies the feed", () => {
|
||||
setUrl("?tags=1,2");
|
||||
expect(loadInitialPage(startOnHome)).toBe("feed");
|
||||
});
|
||||
it("?chan (the channel overlay) implies the feed", () => {
|
||||
setUrl("?chan=UC1");
|
||||
expect(loadInitialPage(startOnHome)).toBe("feed");
|
||||
});
|
||||
it("?page beats a lower-precedence param", () => {
|
||||
setUrl("?page=stats&v=show:1");
|
||||
expect(loadInitialPage(startOnHome)).toBe("stats");
|
||||
});
|
||||
it("?v beats ?pl and filters", () => {
|
||||
setUrl("?v=show:1&pl=3&tags=1");
|
||||
expect(loadInitialPage(startOnHome)).toBe("plex");
|
||||
});
|
||||
// A bare URL lands on Home, OVER the remembered module. Landing on
|
||||
// whatever you happened to close the app on is precisely the habit the anti-paralysis surface
|
||||
// exists to replace, so the remembered page only wins once the account opts out.
|
||||
it("a bare URL lands on Home even when another module is remembered", () => {
|
||||
stored[LS.page] = "plex";
|
||||
expect(loadInitialPage(startOnHome)).toBe("home");
|
||||
});
|
||||
it("opting out restores the account's stored landing page", () => {
|
||||
startOnHome = false;
|
||||
stored[LS.page] = "plex";
|
||||
expect(loadInitialPage(startOnHome)).toBe("plex");
|
||||
});
|
||||
// The Downloads page is gone; what it held is in Files. A bookmark and a remembered page both land
|
||||
// there instead of on the feed.
|
||||
it("a retired page lands where its content went — linked or remembered", () => {
|
||||
setUrl("?page=downloads");
|
||||
expect(loadInitialPage(startOnHome)).toBe("files");
|
||||
setUrl("/");
|
||||
startOnHome = false;
|
||||
stored[LS.page] = "downloads";
|
||||
expect(loadInitialPage(startOnHome)).toBe("files");
|
||||
});
|
||||
it("opted out with no / invalid stored page still defaults to feed", () => {
|
||||
startOnHome = false;
|
||||
expect(loadInitialPage(startOnHome)).toBe("feed");
|
||||
stored[LS.page] = "nope";
|
||||
expect(loadInitialPage(startOnHome)).toBe("feed");
|
||||
});
|
||||
it("a deep link still beats Home", () => {
|
||||
setUrl("?pl=3");
|
||||
expect(loadInitialPage(startOnHome)).toBe("playlists");
|
||||
});
|
||||
});
|
||||
|
||||
describe("channelViewFrom", () => {
|
||||
it("reads _chan (+ _chanName) from an in-app entry", () => {
|
||||
expect(channelViewFrom({ _chan: "UC1", _chanName: "Chan" }, "")).toEqual({
|
||||
id: "UC1",
|
||||
name: "Chan",
|
||||
});
|
||||
});
|
||||
it("_chan without a name yields an undefined name", () => {
|
||||
expect(channelViewFrom({ _chan: "UC1" }, "")).toEqual({ id: "UC1", name: undefined });
|
||||
});
|
||||
it("falls back to the ?chan URL param when the entry has no _chan (fresh bookmark)", () => {
|
||||
expect(channelViewFrom(null, "?chan=UC9")).toEqual({ id: "UC9", name: undefined });
|
||||
});
|
||||
it("prefers _chan over the URL param", () => {
|
||||
expect(channelViewFrom({ _chan: "UCstate" }, "?chan=UCurl")).toEqual({
|
||||
id: "UCstate",
|
||||
name: undefined,
|
||||
});
|
||||
});
|
||||
it("returns null when neither is present (channel closed)", () => {
|
||||
expect(channelViewFrom({}, "")).toBeNull();
|
||||
expect(channelViewFrom(null, "/")).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,56 @@
|
||||
import { createContext, useContext } from "react";
|
||||
import type { Page } from "../../lib/urlState";
|
||||
import type { ChannelView } from "./navigationInit";
|
||||
|
||||
// The navigation contexts + their hooks, split out of NavigationProvider so that file exports only
|
||||
// components (Fast Refresh can then hot-swap the provider without remounting the tree).
|
||||
//
|
||||
// TWO contexts on purpose: a STABLE actions context (setPage/openChannel/… never change reference)
|
||||
// and a CHANGING state context (page/channelView/ytSearch). Context consumers re-render whenever the
|
||||
// value changes, so deep memo'd leaves (VideoCard, PlayerModal) subscribe to actions ONLY and never
|
||||
// re-render on a page/channel switch — preserving the memo that keeps feed appends from re-rendering
|
||||
// every existing card.
|
||||
|
||||
export interface NavigationState {
|
||||
page: Page;
|
||||
/** The open channel page (null = none). Overlays `page`; rides in history.state._chan. */
|
||||
channelView: ChannelView | null;
|
||||
/** Live YouTube search term (null = normal feed). A feed sub-view; rides in history.state._yt. */
|
||||
ytSearch: string | null;
|
||||
}
|
||||
|
||||
export interface NavigationActions {
|
||||
/** Switch modules. Closes every open overlay first and pushes only once their history entries are
|
||||
* back (`lib/history.closeOverlaysThenNavigate`), so over an open player the push lands a moment
|
||||
* after the call; with nothing open it is synchronous. The requested page being already current
|
||||
* (with no channel page over it) pushes nothing — but the overlays still close.
|
||||
*
|
||||
* `then` runs once the navigation has happened (the push made, or found unnecessary) — for a
|
||||
* request that belongs to the NEW entry, which over an open player does not exist yet at the
|
||||
* call (`lib/homeIntent`). */
|
||||
setPage: (next: Page, then?: () => void) => void;
|
||||
openChannel: (id: string, name?: string) => void;
|
||||
closeChannel: () => void;
|
||||
enterYtSearch: (q: string) => void;
|
||||
exitYtSearch: () => void;
|
||||
}
|
||||
|
||||
export const NavigationStateContext = createContext<NavigationState>({
|
||||
page: "feed",
|
||||
channelView: null,
|
||||
ytSearch: null,
|
||||
});
|
||||
export const NavigationActionsContext = createContext<NavigationActions>({
|
||||
setPage: () => {},
|
||||
openChannel: () => {},
|
||||
closeChannel: () => {},
|
||||
enterYtSearch: () => {},
|
||||
exitYtSearch: () => {},
|
||||
});
|
||||
|
||||
export function useNavigation(): NavigationState {
|
||||
return useContext(NavigationStateContext);
|
||||
}
|
||||
export function useNavigationActions(): NavigationActions {
|
||||
return useContext(NavigationActionsContext);
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
// URL-derived navigation seeds, split out of NavigationProvider so they stay unit-testable AND the
|
||||
// provider file keeps react-refresh happy (component-only exports). `loadInitialPage` picks the landing
|
||||
// module from a bookmark's params; `channelViewFrom` is the shared _chan/?chan resolver behind BOTH the
|
||||
// channelView seed and the onPop handler.
|
||||
import { hasFilterParams, readPage, resolvePage, type Page } from "../../lib/urlState";
|
||||
import { getAccountRaw, LS } from "../../lib/storage";
|
||||
import type { UsePrefOptions } from "../../lib/usePref";
|
||||
|
||||
export const PAGE_KEY = LS.page;
|
||||
/** The landing preference — start on Home, or on the module left open — an account preference
|
||||
* (usePref). Settings → Appearance → Startup writes it and NavigationProvider reads it for
|
||||
* `loadInitialPage`, so its key and its reading are defined ONCE. A copy this browser kept before
|
||||
* the server held it is the string "0" (off) or "1". */
|
||||
export const START_ON_HOME_PREF = "startOnHome";
|
||||
export const START_ON_HOME_OPTIONS: UsePrefOptions<boolean> = {
|
||||
localKey: LS.startOnHome,
|
||||
parse: (raw) => raw !== false && raw !== "0" && raw !== 0,
|
||||
};
|
||||
|
||||
export interface ChannelView {
|
||||
id: string;
|
||||
name?: string;
|
||||
}
|
||||
|
||||
export function loadInitialPage(startOnHome: boolean): Page {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
if (params.has("page")) return readPage();
|
||||
// A view-specific param implies its page, so a bookmarked deep link lands on the right module even
|
||||
// without an explicit ?page. Feed filters (or a channel overlay) imply the feed.
|
||||
if (params.has("v")) return "plex";
|
||||
if (params.has("pl")) return "playlists";
|
||||
if (params.has("folder") || params.has("item")) return "files";
|
||||
if (hasFilterParams(params) || params.has("chan")) return "feed";
|
||||
// A bare URL → Home, the surface whose whole job is to answer "what should I watch" before
|
||||
// the user has to decide anything. It deliberately OVERRIDES the remembered last module: landing
|
||||
// on whatever you happened to close the app on is the behaviour the anti-paralysis epic exists to
|
||||
// replace. The account can opt out (Settings → Appearance → Startup) and get the remembered
|
||||
// module back.
|
||||
if (startOnHome) return "home";
|
||||
return resolvePage(getAccountRaw(PAGE_KEY)) ?? "feed";
|
||||
}
|
||||
|
||||
/** Resolve the open channel page from a landed history entry: the in-app `_chan` id (with its optional
|
||||
* `_chanName`), else the ?chan URL param — a fresh ?chan bookmark's entry is URL-only. The seed AND
|
||||
* the popstate handler share this ONE resolver so a popstate that lands on a bookmark entry (no
|
||||
* `_chan`) restores the channel from the URL instead of wrongly closing it. */
|
||||
export function channelViewFrom(
|
||||
state: { _chan?: unknown; _chanName?: unknown } | null | undefined,
|
||||
search: string,
|
||||
): ChannelView | null {
|
||||
const id =
|
||||
(state?._chan as string | undefined) ?? new URLSearchParams(search).get("chan") ?? undefined;
|
||||
return id ? { id, name: (state?._chanName as string) ?? undefined } : null;
|
||||
}
|
||||
Reference in New Issue
Block a user