feat(music): network-adaptive prefetch depth, opt-in keep-screen-on toggle

Prefetch depth (music-player.js): 5 tracks ahead on Wi-Fi, 3 on cellular —
more runway through a screen-lock network gap when the connection is cheap
and fast, less when it's metered. navigator.connection is Chromium-only;
Firefox/Safari (where it's undefined) get the same conservative tier as an
unrecognized connection type, never assumed fast. MAX_CACHED_BLOBS raised
to 6 to hold the largest case (current + 5).

Keep-screen-on-during-audio (new user preference, off by default): a
Settings toggle, backed by a new whitelisted key on
/v1/users/me/preferences (music_keep_screen_on). music-player.js holds a
Screen Wake Lock only while a track is playing and only when the user has
opted in — unlike the video player's unconditional lock, this must not
fight the ordinary expectation (matching Spotify/Deezer) that the phone
locks on its own while listening.

1 files changed, 33 insertions, 0 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/app.js b/packages/meshbay-hub/src/meshbay_hub/static/app.js
index 5ec1ac8..446360c 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/app.js
@@ -1593,6 +1593,12 @@ function SettingsPage({ user, theme, onThemeChange, groups, onPrefsChange }) {
     () => Object.fromEntries((groups || []).map(g => [g.id, !!g.muted])));
   const [globalMute, setGlobalMute] = useState(false);
   const [defaultTab, setDefaultTab] = useState('chat');
+  // Off by default (musicbay.md §2.2): the ordinary expectation, matching
+  // Spotify/Deezer, is that the phone locks on its own idle timer while
+  // listening. This is for whoever would rather trade battery for it —
+  // e.g. to ride out the WebRTC screen-lock reconnect gap without waiting
+  // on the automatic recovery at all.
+  const [keepScreenOnAudio, setKeepScreenOnAudio] = useState(false);
 
   const onLocaleChange = useCallback((e) => {
     const code = e.target.value;
@@ -1610,10 +1616,29 @@ function SettingsPage({ user, theme, onThemeChange, groups, onPrefsChange }) {
       .then(prefs => {
         if (prefs.notifications_disabled === 'true') setGlobalMute(true);
         if (prefs.default_tab) setDefaultTab(prefs.default_tab);
+        if (prefs.music_keep_screen_on === 'true') setKeepScreenOnAudio(true);
       })
       .catch(() => {});
   }, [user.token]);
 
+  const toggleKeepScreenOnAudio = useCallback(async () => {
+    const next = !keepScreenOnAudio;
+    setKeepScreenOnAudio(next);
+    try {
+      await hubFetch('/v1/users/me/preferences/music_keep_screen_on', {
+        method: 'PUT', token: user.token,
+        body: { value: next ? 'true' : 'false' },
+      });
+      // A string, matching what a fresh page load reads from the hub
+      // (prefs.music_keep_screen_on === 'true' above) — music-player.js
+      // compares against that same string, and userPrefs is one shared bag
+      // fed from both this immediate update and that load.
+      if (onPrefsChange) onPrefsChange({ music_keep_screen_on: next ? 'true' : 'false' });
+    } catch (err) {
+      setKeepScreenOnAudio(!next);
+    }
+  }, [keepScreenOnAudio, user.token, onPrefsChange]);
+
   const toggleGlobalMute = useCallback(async () => {
     const next = !globalMute;
     setGlobalMute(next);
@@ -1802,6 +1827,14 @@ function SettingsPage({ user, theme, onThemeChange, groups, onPrefsChange }) {
           </select>
         </div>
         <p class="settings-hint">${t('settings.default_tab_hint')}</p>
+        <div class="settings-row">
+          <span class="settings-label">${t('settings.music_keep_screen_on')}</span>
+          <label class="settings-value" style="cursor:pointer">
+            <input type="checkbox" checked=${keepScreenOnAudio}
+              onChange=${toggleKeepScreenOnAudio} />
+          </label>
+        </div>
+        <p class="settings-hint">${t('settings.music_keep_screen_on_hint')}</p>
       </div>
 
       ${platform.isNative && html`