A language select on the player page and in the app

[alekswebnet]

Closes #53.

The element already shows H5P's own strings in its lang, from the runtime's 56 languages. The player page and the app never let a visitor choose: both played in English, the page's language.

Changes

• Player page: a Language select beside the Trusted/Untrusted switch. English by default, the page's own. Changing it plays the current package again, as the switch does. The note under the row says what it changes, and the log names the language for a load that is not English.
• App: a Language select at the bottom of the menu, with a line saying what it changes.
  • By default, the first of the browser's languages the runtime has, by the runtime's aliases and by dropping subtags, as its own lookup does; English when it has none.
  • The learner's pick is kept in localStorage and wins over the browser's on the next visit. Storage refused, as in some private windows, means the browser's language each time.
  • A change opens the current file again on the same screen and history step, where the learner was, since the content saves its state as its document goes.
  • The About section says what the menu's Language does, and that the content's own text stays as its author wrote it.
• apps/demo/demo/languages.js (new), shared by both: the list read from the runtime's l10n/index.json, so a language the weekly refresh adds appears with no change here. 1.9 kB gzipped, its own chunk, precached by the app.
  • Each language is labelled with its own name and the English one ("Deutsch — German"), in the order of the own names.
  • A name in its own language is used only where the browser has that language's data. Chromium has none for Albanian, Armenian, Basque and about a dozen more, and Intl.DisplayNames then answered in the browser's language: "Albanisch" in a German browser, shown as Albanian's own name in the first cut. Those now show the English name alone. Firefox and WebKit have the data, so the order differs a little by browser.
• AGENTS.md: the new file in the layout, and the select under the core's strings invariant.

What it does not change

The content's own text — a quiz's questions, its Check and Retry buttons — is written into the package by its author and stays as written. The select changes H5P's own strings: full screen, Reuse, Rights of use, Embed, the licence names, the "content has changed" dialog. The app shows no action bar, so there it is mostly the full-screen button and that dialog.

Testing

• New app test (apps/demo/tests/app.test.ts): with the browser in French, the app starts on French and the frame's H5P.t('fullscreen') is "Plein écran". German picked in the menu replays the quiz on the same screen and history step with "Vollbild", and a reload keeps German over the browser's French. Passes in Chromium, Firefox and WebKit; fails without the change in app.js.
• App tests: 16 of 16 in Chromium.
• Layout, measured in Chromium, Firefox and WebKit at 320, 360, 390 and 1200 px: no horizontal overflow on the player page, and the app's menu within the viewport. A fixed 16rem width overflowed by 40 px at 320 px in all three engines; the select is now 100% wide up to 16rem. Screenshots checked in light and dark.
• Played by hand on the dev server: the How it works sample switched to German shows Wiederverwenden, Nutzungsrechte and Einbetten in its action bar, with no page errors.
• pnpm build:demo passes, and the app's worker precaches the language chunk.
• pnpm --filter @missing-elements/h5p-demo typecheck passes.
• Not tested, by the rule for demo pages: the player page's select has no automated test.

Release

None: demo and app only. It ships with the deploy of the merge.

🤖 Generated with Claude Code

[alekswebnet]

Closed unmerged: a select can only make H5P's strings differ from the content's language, and the two should match. Replaced by #55, which has H5P's own strings follow the language the package declares.