How to "automatically set language" for each client?

[cdytoby]

Had a party yesterday, and I somehow set the preferred language of landing page to Chinese. However, not all people in the party know this language. How can I set the language, so that when people scan the qr code, the page they got is in the language their smartphone/browser appointed?

[vicwomg]

Unfortunately the language is set on the locale of the server, not the individual clients. Due to how pybabel works, I'm not sure how to make this work for you

[cdytoby]

I remember it was like this before around 1.16 (some versions back, I can't remember which version exactly, but it was November last year). We were also different people with different languages, and for some smartphone it was English and some were Chinese.

But I could be wrong. If this is intended, then it's a feature request.

I'm talking about UI language. For me it's standard feature that a website/application has localized texts for individual people, and it use default language based on browser language or OS language, not server language.

[safepay]

User Preferences Modal (Name + Language)

Context

Currently, PiKaraoke uses a bare window.prompt() to ask users their name before queueing songs. Language is system-wide only (config.ini), with no per-user override. This change replaces the prompt with a Bulma modal that serves as a "User Preferences" section containing name and language, extensible for future preferences. Per-user language is stored in a cookie and takes priority over the system-wide setting.

Files to Modify

File	Change
pikaraoke/app.py	Add context processor for LANGUAGES; reorder get_locale() to check preferred_lang cookie first
pikaraoke/templates/base.html	Add modal HTML + JS; replace setUserCookie() with modal-based version; make navbar link always visible
pikaraoke/static/spa-navigation.js	Simplify initUsernameHandler() to call openPreferencesModal()
pikaraoke/templates/files.html	Wrap enqueue handler with setUserCookie(callback) pattern
pikaraoke/templates/search.html	Adjust setUserCookie() call for async modal flow

Implementation Steps

1. app.py - Context processor + locale reorder

Add context processor (after line 106) to inject LANGUAGES into all templates:

@app.context_processor
def inject_languages():
    return {"languages": LANGUAGES}

Reorder get_locale() (lines 109-132) - new priority:

1. preferred_lang cookie (per-user, from modal)
2. System-wide preferred_language from config.ini
3. URL ?lang= param / session
4. Browser Accept-Language header

def get_locale() -> str | None:
    # 1. Per-user cookie
    user_lang = request.cookies.get("preferred_lang")
    if user_lang and user_lang in LANGUAGES:
        return user_lang
    # 2. System-wide preference (existing logic)
    # 3-4. URL param / browser header (existing logic)

2. base.html - Navbar link (always visible)

Change #current-user (line 225) from is-hidden to always visible:

• Before name is set: Show mic icon + translated "Set Name" text
• After name is set: Show mic icon + user's name (current behavior)
• Clicking always opens the preferences modal

The $(function() {...}) block (lines 132-138) updates the text from "Set Name" to the user's name if the cookie exists.

3. base.html - Modal HTML

Add a Bulma modal (inside {% if not blank_page %}, before closing </div>) with:

• Name text input (#pref-username)
• Language dropdown (#pref-user-language) with "System Default" as the first option (value ""), followed by an <optgroup> separator or disabled divider option, then all languages from languages context variable
• Save button in footer (no Cancel -- modal closes on background click or X button)
• All strings wrapped in {% trans %} for i18n

4. base.html - Modal JavaScript

Replace setUserCookie() (lines 82-97) and add:

• openPreferencesModal(callback) - Pre-fills current values from cookies, stores optional callback (for enqueue flow), shows modal
• closePreferencesModal() - Hides modal, clears callback
• savePreferences() - Saves name to user cookie, language to preferred_lang cookie, updates navbar text (name or "Set Name"), updates .song_added_by if present, executes pending callback, reloads page if language changed
• setUserCookie(callback) - If no user cookie, opens modal with callback and returns false. If cookie exists, calls callback immediately and returns true.

Remove promptChangeUsername from window.i18n (no longer needed).

5. spa-navigation.js - Simplify username handler

Replace initUsernameHandler() (lines 78-101): remove window.prompt() logic, just call openPreferencesModal() on #current-user click.

6. files.html - Async enqueue flow

Wrap the enqueue click handler (lines 16-30) to use callback pattern:

$("a.add-song-link").click(function (e) {
    e.preventDefault();
    var link = this;
    setUserCookie(function() {
        var user = Cookies.get("user");
        $.get(link.href + encodeURIComponent(user), function (data) { ... });
    });
});

7. search.html - Async first-visit flow

Keep eager setUserCookie() call (line 422) so the modal appears on page load if no cookie. The .song_added_by field is populated inside savePreferences() (which checks if the element exists).

Key Design Decisions

• Always-visible navbar link - Shows "Set Name" (translated) before preferences are set, user's name after. Ensures discoverability for language changes on mobile.
• Cookie storage (preferred_lang, 10-year expiry) - matches existing user cookie pattern, readable server-side via request.cookies
• "System Default" as first dropdown option - empty value means no cookie set, falls through to system-wide preference or browser header. Visually separated from language list with a divider.
• Save button - saves both name and language together; reloads page if language changed
• Page reload on language change - Flask-Babel renders server-side, so new locale requires a fresh request
• Modal in base.html - persists across SPA navigations (modal is outside the .box content area that gets swapped)

Verification

1. First visit (no cookie): Navbar shows mic icon + "Set Name". Clicking it opens preferences modal.
2. Save name only: Enter name, save -> cookie set, navbar switches to showing the name, no reload
3. Save language: Select a language, save -> page reloads in new language, all UI translated
4. Change preferences: Click name in navbar -> modal opens pre-filled with current values
5. Enqueue without name: Try to add a song on Browse/Search with no cookie -> modal appears, enqueue proceeds after save
6. System default fallback: Select "System Default" for language -> falls back to system-wide setting or browser header
7. Multiple devices: Two browsers with different language selections should each see their own language