peter
a20e27800c
Plex now has the same personal-views system as the feed — the rail header icon opens the quick-pick popover, the rail title opens the manager modal (list / create / rename / delete / reorder / set-default / apply), and the active view leads the chip row with a "modified" dot. One SavedViewsProvider serves both modules: it switches `source` (feed ⟷ plex) by the active page (both filter providers are global, so it reads whichever the page owns) and runs the same logic on per-source wiring — the live filters, apply, a stable signature (feed filtersToParams / plex plexFiltersSignature), coercion (asFilters / coercePlexFilters), and what to strip on save. Moved below PlexProvider in the tree so it can read plex state; resets sticky/modal on a source switch. The shared popover/modal/chip are unchanged; the modal describes a plex view's captured filters via a pure buildPlexActiveFilters (extracted from usePlexActiveFilters — no duplication). api.savedViews/createView take a source; `SavedView.filters` is now an opaque blob. New coercePlexFilters/plexFilters- Signature (also dedups PlexProvider's collection migration). Empty-state copy genericised (no longer says "feed"). A Plex view captures the rail filters (not watch-state/sort/scope). Verified end-to-end on localdev: create/apply/preview/default/delete on plex, feed views stay separate + unregressed (402 vitest), no console errors.
94 lines
4.2 KiB
TypeScript
94 lines
4.2 KiB
TypeScript
import React, { lazy, Suspense } from "react";
|
|
import { createRoot } from "react-dom/client";
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
import { FloatingTree } from "@floating-ui/react";
|
|
import ErrorBoundary from "./components/ErrorBoundary";
|
|
import { ConfirmProvider } from "./components/ConfirmProvider";
|
|
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";
|
|
|
|
// Split by top-level route so each entry point is its own chunk: a public /watch share link or a
|
|
// legal page never downloads the authenticated app bundle, and the app never carries them either.
|
|
// The legal pages live outside the App tree (no /api/me) so Google's consent screen and reviewers
|
|
// can fetch them directly; the watch page is a login-free public player. Reached by full-page
|
|
// navigation (plain <a href>), so a simple pathname switch is enough — no router needed.
|
|
const App = lazy(() => import("./App"));
|
|
const PrivacyPolicy = lazy(() => import("./components/legal/PrivacyPolicy"));
|
|
const Terms = lazy(() => import("./components/legal/Terms"));
|
|
const WatchPage = lazy(() => import("./components/WatchPage"));
|
|
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: { queries: { retry: false, staleTime: 30_000, refetchOnWindowFocus: false } },
|
|
});
|
|
|
|
// Baseline theme so the token CSS vars (--bg/--surface/--accent/…) resolve on first paint — including
|
|
// the standalone public pages (/watch, /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 root =
|
|
path === "/privacy" ? (
|
|
<PrivacyPolicy />
|
|
) : path === "/terms" ? (
|
|
<Terms />
|
|
) : path.startsWith("/watch/") ? (
|
|
// FloatingTree so the public player's own popovers dispatch Escape/outside-press topmost-only.
|
|
<FloatingTree>
|
|
<WatchPage />
|
|
</FloatingTree>
|
|
) : (
|
|
<QueryClientProvider client={queryClient}>
|
|
<ErrorBoundary>
|
|
{/* One tree for the whole app: every anchored popover registers as a node so Escape and
|
|
outside-press act only on the topmost layer (S3 folds the Modal + players in). */}
|
|
<FloatingTree>
|
|
<ConfirmProvider>
|
|
<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>
|
|
<App />
|
|
</WizardProvider>
|
|
</PrefsProvider>
|
|
</FeedViewProvider>
|
|
</ChannelsProvider>
|
|
</SavedViewsProvider>
|
|
</PlexViewBridge>
|
|
</PlexProvider>
|
|
</PlaylistsProvider>
|
|
</FeedFiltersProvider>
|
|
</NavigationProvider>
|
|
</ConfirmProvider>
|
|
</FloatingTree>
|
|
</ErrorBoundary>
|
|
</QueryClientProvider>
|
|
);
|
|
|
|
createRoot(document.getElementById("root")!).render(
|
|
<React.StrictMode>
|
|
<Suspense fallback={<div style={{ minHeight: "100vh" }} />}>{root}</Suspense>
|
|
</React.StrictMode>,
|
|
);
|