peter
4169cfe4ff
E5 S6 frontend half. Language threading (?lang=hu serves the HU overlay; en is the default): - api/plex.ts: `lang` on plexLibrary / plexFacets / plexItem / plexShow (only sent for hu, so EN URLs stay byte-stable); PlexItemDetail gains `rating`. - queryKeys: plexItem / plexShow take an optional trailing lang so a switch caches HU/EN separately; the ...rest keys (library/facets) already carry it. Prefix invalidations (qk.plexShow(id) / qk.plexItem(id)) still match either. - i18n: plexLang() collapses the UI language to en|hu for non-component code. - PlexBrowse / PlexSidebar: thread lang into the grid, facets, item and show queries (useTranslation re-renders on switch → the key changes → refetch). - plexPlayerHooks: the optimistic resume setQueryData now keys by plexLang() so it still lands on the language-keyed detail query. - Clear the genre-filter selection on a language switch — genre chips are language-specific strings, so a stale one silently empties the grid. IMDb-only rating badge (folded-in S5b review #5): - PlexInfo.tsx shows the IMDb badge + imdb.com link only when imdb_rating is present; otherwise it renders the Plex audience `rating` (no IMDb link/branding), so a non-IMDb score is never mislabelled. ratingMin filter keys off whichever score is shown. Tests: i18n parity.test.ts (en/hu key sets identical per namespace — currently green, no drift). FE gate green: tsc / knip / lint clean, 213 vitest tests pass.
67 lines
2.5 KiB
TypeScript
67 lines
2.5 KiB
TypeScript
import i18n from "i18next";
|
|
import { initReactI18next } from "react-i18next";
|
|
import { LS } from "../lib/storage";
|
|
|
|
// Endonyms (shown as-is regardless of the active language — the convention for language pickers).
|
|
export const LANGUAGES = [
|
|
{ code: "en", label: "English" },
|
|
{ code: "hu", label: "Magyar" },
|
|
] as const;
|
|
export type LangCode = (typeof LANGUAGES)[number]["code"];
|
|
const SUPPORTED = LANGUAGES.map((l) => l.code) as readonly string[];
|
|
const LANG_KEY = LS.lang;
|
|
|
|
// Auto-load every locale file (locales/<lang>/<area>.json) and merge each <area> under one
|
|
// `translation` namespace, so components use t("area.key") and adding an area needs no wiring.
|
|
const mods = import.meta.glob("./locales/*/*.json", { eager: true }) as Record<
|
|
string,
|
|
{ default: Record<string, unknown> }
|
|
>;
|
|
|
|
const resources: Record<string, { translation: Record<string, unknown> }> = {};
|
|
for (const [path, mod] of Object.entries(mods)) {
|
|
const m = path.match(/\/locales\/([a-z]{2})\/([a-zA-Z0-9_]+)\.json$/);
|
|
if (!m) continue;
|
|
const [, lang, area] = m;
|
|
if (!lang || !area) continue; // both groups are required by the regex; satisfies the checker
|
|
(resources[lang] ??= { translation: {} }).translation[area] = mod.default;
|
|
}
|
|
|
|
export function isSupported(code: string | null | undefined): code is LangCode {
|
|
return !!code && SUPPORTED.includes(code);
|
|
}
|
|
|
|
// Initial language before the server preference is known: stored choice, else the browser
|
|
// language, else English. (After login, App adopts the server-persisted preference.)
|
|
function detectInitialLang(): LangCode {
|
|
const stored = localStorage.getItem(LANG_KEY);
|
|
if (isSupported(stored)) return stored;
|
|
const nav = (navigator.language || "en").slice(0, 2).toLowerCase();
|
|
return isSupported(nav) ? nav : "en";
|
|
}
|
|
|
|
const initial = detectInitialLang();
|
|
void i18n.use(initReactI18next).init({
|
|
resources,
|
|
lng: initial,
|
|
fallbackLng: "en",
|
|
interpolation: { escapeValue: false },
|
|
returnNull: false,
|
|
});
|
|
document.documentElement.lang = initial;
|
|
|
|
export function setLanguage(code: LangCode): void {
|
|
void i18n.changeLanguage(code);
|
|
localStorage.setItem(LANG_KEY, code);
|
|
document.documentElement.lang = code;
|
|
}
|
|
|
|
// The Plex overlay serves only EN or HU metadata (E5 S6). Collapse the active UI language to one of
|
|
// those for the `?lang=` param / query keys. Components read `i18n.language` off useTranslation (which
|
|
// re-renders on switch); this singleton reader is for non-component code (e.g. plexPlayerHooks).
|
|
export function plexLang(): "en" | "hu" {
|
|
return i18n.language?.startsWith("hu") ? "hu" : "en";
|
|
}
|
|
|
|
export default i18n;
|