peter
e886890d6e
A /watch link is opened by whoever it was sent to — signed out, often on a phone on mobile data — and it booted through main.tsx: every app provider, the app's i18n (every locale of every area), the flag sprites, ~392 KB gzip before the player could start. It now has its own HTML entry, watch.html → watchMain.tsx, which imports WatchPage and what it renders; the server hands every /watch/ path that page (the OG block injected as before), and vite dev does the same. Measured on the build: /watch JS 290 → 87 KB gzip, CSS 104 → 19 KB; the app's own bytes unchanged. Two leaks had to go for that: lib/format imported the app's i18n for one "just now" string (the relative-time formatters now take `t`, like the file's other t-formatters), and the boundary's crash copy came from the same i18n (CrashBoundary takes its copy; ErrorBoundary is the app's wrapper, the watch entry gives it the page's own strings). The page's popover tree went too: it renders no popover. Held by: a contract test walking the entry's runtime imports, naming the path to anything only the app may load (red on a planted i18n import in lib/format), and holding watch.html's head equal to index.html's; a DB-lane test that every /watch/ path gets the player's page with the link's OG tags and app paths get the app (red on the old routing). Screenshots at 375 px, EN and HU, video / audio / password / gone / wrong password / unlocked: identical to the old entry's, bar the video's buffered bar.
123 lines
6.2 KiB
TypeScript
123 lines
6.2 KiB
TypeScript
import React, { lazy, Suspense } from "react";
|
|
import { createRoot } from "react-dom/client";
|
|
import { QueryClientProvider } from "@tanstack/react-query";
|
|
import { createQueryClient } from "./lib/queryClient";
|
|
import { FloatingTree } from "@floating-ui/react";
|
|
import ErrorBoundary from "./components/ErrorBoundary";
|
|
import { ConfirmProvider } from "./components/ConfirmProvider";
|
|
import BootGate, { BootScreen } from "./components/BootGate";
|
|
import { NavigationProvider } from "./components/NavigationProvider";
|
|
import { FeedFiltersProvider } from "./components/FeedFiltersProvider";
|
|
import { SavedViewsProvider } from "./components/SavedViewsProvider";
|
|
import { PlaylistsProvider } from "./components/PlaylistsProvider";
|
|
import { PlexProvider } from "./components/PlexProvider";
|
|
import { PlexViewBridge } from "./components/PlexViewBridge";
|
|
import { ChannelsProvider } from "./components/ChannelsProvider";
|
|
import { FeedViewProvider } from "./components/FeedViewProvider";
|
|
import { PrefsProvider } from "./components/PrefsProvider";
|
|
import { WizardProvider } from "./components/WizardProvider";
|
|
import "./i18n";
|
|
import "./index.css";
|
|
import "flag-icons/css/flag-icons.min.css";
|
|
import { lazyWithPreload } from "./lib/lazyWithPreload";
|
|
import { installClientLog } from "./lib/logHooks";
|
|
import { installStaleBuildReload } from "./lib/staleBuild";
|
|
import { appCopyOf } from "./i18n/appCopy";
|
|
|
|
// First, before any render: a crash or a navigation during boot belongs in the log too.
|
|
installClientLog(appCopyOf);
|
|
// A tab from before the last release reloads onto the new build instead of crashing on a lazy chunk.
|
|
installStaleBuildReload();
|
|
|
|
// Split by top-level route so each entry point is its own chunk: a legal page never downloads the
|
|
// authenticated app bundle, and the app never carries it either. The legal pages live outside the
|
|
// App tree (no /api/me) so Google's consent screen and reviewers can fetch them directly. Reached by
|
|
// full-page navigation (plain <a href>), so a simple pathname switch is enough — no router needed.
|
|
// A public /watch link is not here at all: it has its own HTML entry (watch.html → watchMain.tsx),
|
|
// so the friend it was sent to never loads this file's providers, i18n or CSS imports.
|
|
const App = lazyWithPreload(() => import("./App"));
|
|
const PrivacyPolicy = lazy(() => import("./components/legal/PrivacyPolicy"));
|
|
const Terms = lazy(() => import("./components/legal/Terms"));
|
|
// The design lab: the living style guide, rendered with the app's real CSS so a design decision
|
|
// is taken on what will ship. DEV only — Vite folds the condition to `false` in a production build,
|
|
// the import becomes dead code and the chunk is never emitted (devOnlyGuard fails the build if it is).
|
|
const DesignLab = import.meta.env.DEV ? lazy(() => import("./design-lab/DesignLab")) : null;
|
|
|
|
const queryClient = createQueryClient();
|
|
|
|
// Baseline theme so the token CSS vars (--bg/--surface/--accent/…) resolve on first paint — including
|
|
// the standalone public pages (/privacy, /terms) that render outside <App> and never call
|
|
// applyTheme. The app overrides this with the user's saved theme once it mounts.
|
|
const de = document.documentElement.dataset;
|
|
de.theme ||= "dark";
|
|
de.scheme ||= "midnight";
|
|
|
|
const path = window.location.pathname;
|
|
const isLab = DesignLab !== null && path === "/design-lab";
|
|
const isPublicPage = path === "/privacy" || path === "/terms" || isLab;
|
|
// Fetch the app chunk NOW, alongside BootGate's identity probe, instead of only once the gate opens:
|
|
// the two waits then overlap rather than queue, and the gate usually opens straight onto the app. A
|
|
// failed fetch is left to the render's own load, which retries it and reports to the ErrorBoundary.
|
|
if (!isPublicPage) App.preload().catch(() => {});
|
|
const root =
|
|
isLab && DesignLab ? (
|
|
<FloatingTree>
|
|
<DesignLab />
|
|
</FloatingTree>
|
|
) : path === "/privacy" ? (
|
|
<PrivacyPolicy />
|
|
) : path === "/terms" ? (
|
|
<Terms />
|
|
) : (
|
|
<QueryClientProvider client={queryClient}>
|
|
{/* One tree for the whole app: every anchored popover registers as a node so Escape and
|
|
outside-press act only on the topmost popover. The Modal and the players are not nodes:
|
|
they order against the popovers through lib/layerStack. */}
|
|
<FloatingTree>
|
|
<ConfirmProvider>
|
|
{/* Nothing below renders until the tab knows which account it is: every provider
|
|
seeds per-account state in its initializer (see BootGate). */}
|
|
<BootGate>
|
|
<NavigationProvider>
|
|
<FeedFiltersProvider>
|
|
<PlaylistsProvider>
|
|
<PlexProvider>
|
|
<PlexViewBridge>
|
|
{/* SavedViewsProvider sits below BOTH filter providers so it can switch its
|
|
source (feed ⟷ plex) by the active page and read the right live filters. */}
|
|
<SavedViewsProvider>
|
|
<ChannelsProvider>
|
|
<FeedViewProvider>
|
|
<PrefsProvider>
|
|
<WizardProvider>
|
|
{/* The same quiet screen as the gate's, so a chunk that is still
|
|
loading when the gate opens continues it instead of blanking. */}
|
|
<Suspense fallback={<BootScreen />}>
|
|
<App />
|
|
</Suspense>
|
|
</WizardProvider>
|
|
</PrefsProvider>
|
|
</FeedViewProvider>
|
|
</ChannelsProvider>
|
|
</SavedViewsProvider>
|
|
</PlexViewBridge>
|
|
</PlexProvider>
|
|
</PlaylistsProvider>
|
|
</FeedFiltersProvider>
|
|
</NavigationProvider>
|
|
</BootGate>
|
|
</ConfirmProvider>
|
|
</FloatingTree>
|
|
</QueryClientProvider>
|
|
);
|
|
|
|
createRoot(document.getElementById("root")!).render(
|
|
<React.StrictMode>
|
|
{/* Around EVERY entry, the public ones too: a crash, or a chunk gone twice over after a release
|
|
(lib/staleBuild), left a blank white page with no way on. */}
|
|
<ErrorBoundary>
|
|
<Suspense fallback={<div style={{ minHeight: "100dvh" }} />}>{root}</Suspense>
|
|
</ErrorBoundary>
|
|
</React.StrictMode>,
|
|
);
|