From 02587632ff365763a73b729428645d515d14d24d Mon Sep 17 00:00:00 2001
From: Nicolas <nicolaslef53@gmail.com>
Date: Sun, 13 Sep 2026 22:57:06 +0200
Subject: [PATCH] Fix tile sizing, move player options into a gear menu,
 surface player errors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. Carousel/grid tiles had inconsistent widths - classic flexbox/grid
   "min-width: auto" pitfall: a long title (or an image's intrinsic
   size before load) could force a tile wider than its declared
   flex-basis/track size. Fixed with min-width: 0 on .tile. Verified:
   three tiles (one with a deliberately very long title) now measure
   exactly 160px each.

2. Player language/subtitle/quality controls were three always-visible
   dropdowns floating over the video. Moved behind a small gear-icon
   button in the action bar that opens a compact popup panel
   (closes on outside click or on selecting an option) - host-only,
   same as before.

3. Sidebar library entries no longer get an emoji prefix - plain names.

4. Player failures were silent (a caught error with just a code
   comment, or hls.js failing with nothing shown). Added: a loading
   notice while the stream loads, an on-screen error box (with a
   Réessayer button) for fatal hls.js errors and native <video> errors,
   and console.error logging of the technical detail. Confirmed
   working live during testing - a real hls.js fatal error (no live
   Emby stream available in the test environment) was caught and
   displayed correctly instead of failing silently. This is meant to
   turn "the player doesn't work" into an actual diagnosable error
   message next time it happens for real.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 client/css/app.css        | 72 +++++++++++++++++++++++++++------
 client/js/shell.js        |  4 +-
 client/js/views/player.js | 85 ++++++++++++++++++++++++++++++++++-----
 3 files changed, 135 insertions(+), 26 deletions(-)

diff --git a/client/css/app.css b/client/css/app.css
index ab24f12..ab469f6 100644
--- a/client/css/app.css
+++ b/client/css/app.css
@@ -277,6 +277,11 @@ button.linklike:hover { background: none; color: var(--accent-bright); }
   display: flex;
   flex-direction: column;
   gap: 6px;
+  /* Without this, a long title (or an image's intrinsic size before it
+     loads) can force this flex/grid item wider than its declared size -
+     the classic "min-width: auto" flexbox/grid pitfall. Every tile must
+     stay exactly the track/flex-basis size regardless of content. */
+  min-width: 0;
 }
 
 .tile img {
@@ -437,19 +442,38 @@ button.linklike:hover { background: none; color: var(--accent-bright); }
 .overlay .itemTitle { font-weight: 600; }
 .overlay .members { color: var(--muted); flex: 1; }
 
-.hostControls {
-  position: absolute;
-  top: 64px;
-  right: 16px;
-  display: flex;
-  gap: 10px;
-  background: rgba(0, 0, 0, .6);
-  padding: 10px;
-  border-radius: 10px;
-  font-size: 12px;
+/* Settings: a small gear icon in the action bar, not a permanently-visible
+   block of dropdowns - opens a compact popup on click. */
+.settingsWrap { position: relative; }
+
+.iconBtn {
+  background: none;
+  padding: 4px 8px;
+  font-size: 16px;
+  line-height: 1;
+  border-radius: 6px;
 }
 
-.hostControls label {
+.iconBtn:hover { background: rgba(255, 255, 255, .12); }
+
+.settingsPanel {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: var(--bg-header);
+  padding: 12px;
+  border-radius: 10px;
+  font-size: 12px;
+  min-width: 180px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
+  z-index: 5;
+}
+
+.settingsPanel label {
   color: var(--muted);
   margin-bottom: 0;
   display: flex;
@@ -457,7 +481,7 @@ button.linklike:hover { background: none; color: var(--accent-bright); }
   gap: 4px;
 }
 
-.hostControls select {
+.settingsPanel select {
   background: var(--panel);
   color: var(--text);
   border: 1px solid #3a3a3a;
@@ -466,6 +490,30 @@ button.linklike:hover { background: none; color: var(--accent-bright); }
   font-size: 12px;
 }
 
+.loadingNotice {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--muted);
+  font-size: 14px;
+  margin: 0;
+}
+
+.playerError {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 360px;
+  text-align: center;
+  background: rgba(0, 0, 0, .75);
+  padding: 20px;
+  border-radius: 10px;
+}
+
+.playerError p { color: var(--danger); font-size: 14px; margin: 0 0 10px; }
+
 .followerNotice {
   position: absolute;
   bottom: 24px;
diff --git a/client/js/shell.js b/client/js/shell.js
index 9eba509..7d5361b 100644
--- a/client/js/shell.js
+++ b/client/js/shell.js
@@ -3,8 +3,6 @@
 // inside #mainContent - see app.js's boot().
 import { auth, logout, getLibraries } from './embyApi.js';
 
-const COLLECTION_ICONS = { movies: '🎬', tvshows: '📺', music: '🎵' };
-
 export async function renderShell(appEl) {
   appEl.innerHTML = `
     <div class="appShell">
@@ -37,7 +35,7 @@ export async function renderShell(appEl) {
       const a = document.createElement('a');
       a.href = `#/library/${lib.id}`;
       a.className = 'navItem';
-      a.textContent = `${COLLECTION_ICONS[lib.collectionType] || '📁'} ${lib.name}`;
+      a.textContent = lib.name;
       nav.appendChild(a);
     });
   } catch (err) {
diff --git a/client/js/views/player.js b/client/js/views/player.js
index 81b5c80..4b6d222 100644
--- a/client/js/views/player.js
+++ b/client/js/views/player.js
@@ -22,34 +22,60 @@ export function renderPartyPlayer(root, params) {
   root.innerHTML = `
     <div class="playerWrap">
       <video id="video" playsinline></video>
+
+      <p id="loadingNotice" class="loadingNotice">Chargement du flux...</p>
+      <div id="playerError" class="playerError hide">
+        <p id="playerErrorText"></p>
+        <button id="playerErrorRetry" class="linklike">Réessayer</button>
+      </div>
+
       <div class="overlay">
         <span id="itemTitle" class="itemTitle"></span>
         <span>Code: <span id="code" class="code"></span></span>
         <span id="members" class="members"></span>
         <button id="nextBtn" class="linklike hide">Épisode suivant &rarr;</button>
+
+        <div id="settingsWrap" class="settingsWrap hide">
+          <button id="settingsBtn" class="iconBtn" title="Paramètres de lecture" aria-label="Paramètres de lecture">&#9881;</button>
+          <div id="settingsPanel" class="settingsPanel hide">
+            <label>Langue <select id="audioSelect"></select></label>
+            <label>Sous-titres <select id="subtitleSelect"><option value="">Aucun</option></select></label>
+            <label>Qualité <select id="qualitySelect"></select></label>
+          </div>
+        </div>
+
         <button id="leaveBtn" class="linklike">Quitter</button>
       </div>
-      <div id="hostControls" class="hostControls hide">
-        <label>Langue <select id="audioSelect"></select></label>
-        <label>Sous-titres <select id="subtitleSelect"><option value="">Aucun</option></select></label>
-        <label>Qualité <select id="qualitySelect"></select></label>
-      </div>
+
       <p id="followerNotice" class="followerNotice hide">L'hôte contrôle la lecture.</p>
     </div>`;
 
   const video = root.querySelector('#video');
+  const loadingNotice = root.querySelector('#loadingNotice');
+  const errorBox = root.querySelector('#playerError');
+  const errorText = root.querySelector('#playerErrorText');
   const itemTitleEl = root.querySelector('#itemTitle');
   const codeEl = root.querySelector('#code');
   const membersEl = root.querySelector('#members');
   const nextBtn = root.querySelector('#nextBtn');
   const followerNotice = root.querySelector('#followerNotice');
-  const hostControls = root.querySelector('#hostControls');
+  const settingsWrap = root.querySelector('#settingsWrap');
+  const settingsBtn = root.querySelector('#settingsBtn');
+  const settingsPanel = root.querySelector('#settingsPanel');
   const audioSelect = root.querySelector('#audioSelect');
   const subtitleSelect = root.querySelector('#subtitleSelect');
   const qualitySelect = root.querySelector('#qualitySelect');
 
   qualitySelect.innerHTML = QUALITY_PRESETS.map((q) => `<option value="${q.value}">${q.label}</option>`).join('');
 
+  settingsBtn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    settingsPanel.classList.toggle('hide');
+  });
+  document.addEventListener('click', (e) => {
+    if (!settingsWrap.contains(e.target)) settingsPanel.classList.add('hide');
+  });
+
   let isHost = false;
   let ws = null;
   let hls = null;
@@ -58,6 +84,17 @@ export function renderPartyPlayer(root, params) {
   let heartbeat = null;
   let hasNextQueued = false;
 
+  function showError(message, detail) {
+    loadingNotice.classList.add('hide');
+    errorText.textContent = message;
+    errorBox.classList.remove('hide');
+    console.error('[watchparty player]', message, detail || '');
+  }
+
+  function clearError() {
+    errorBox.classList.add('hide');
+  }
+
   function applyRemoteState(msg) {
     suppressLocalEvents = true;
     const targetSeconds = msg.positionTicks / TICKS_PER_SECOND;
@@ -83,12 +120,16 @@ export function renderPartyPlayer(root, params) {
       subtitleSelect.innerHTML = '<option value="">Aucun</option>' +
         options.subtitleTracks.map((t) => `<option value="${t.index}">${escapeHtml(t.label)}</option>`).join('');
     } catch (err) {
-      // Non-fatal: playback still works with Emby's own defaults, just without a picker.
+      console.error('[watchparty player] playback-options failed', err);
+      // Non-fatal: playback can still work with Emby's own defaults, just without a picker.
     }
   }
 
   function loadVideo(itemId, resumeSeconds, wasPlaying) {
     currentItemId = itemId;
+    clearError();
+    loadingNotice.classList.remove('hide');
+
     if (hls) {
       hls.destroy();
       hls = null;
@@ -101,18 +142,33 @@ export function renderPartyPlayer(root, params) {
     });
 
     const resume = () => {
+      loadingNotice.classList.add('hide');
       if (resumeSeconds) video.currentTime = resumeSeconds;
       if (wasPlaying) video.play().catch(() => {});
     };
 
     if (window.Hls && window.Hls.isSupported()) {
       hls = new window.Hls();
+      hls.on(window.Hls.Events.MANIFEST_PARSED, resume);
+      hls.on(window.Hls.Events.ERROR, (event, data) => {
+        if (!data.fatal) return;
+        showError(
+          "Erreur de lecture (HLS) - le flux n'a pas pu être chargé depuis Emby.",
+          data
+        );
+      });
       hls.loadSource(src);
       hls.attachMedia(video);
-      hls.once(window.Hls.Events.MANIFEST_PARSED, resume);
-    } else {
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+      // Safari plays HLS natively - no hls.js involved, so wire the plain
+      // <video> element's own error event instead.
       video.src = src;
       video.addEventListener('loadedmetadata', resume, { once: true });
+      video.addEventListener('error', () => {
+        showError('Erreur de lecture vidéo.', video.error);
+      });
+    } else {
+      showError("Ce navigateur ne sait pas lire de flux HLS et hls.js n'a pas pu se charger.");
     }
   }
 
@@ -124,7 +180,14 @@ export function renderPartyPlayer(root, params) {
   }
 
   [audioSelect, subtitleSelect, qualitySelect].forEach((sel) => {
-    sel.addEventListener('change', reloadWithCurrentOptions);
+    sel.addEventListener('change', () => {
+      settingsPanel.classList.add('hide');
+      reloadWithCurrentOptions();
+    });
+  });
+
+  root.querySelector('#playerErrorRetry').addEventListener('click', () => {
+    if (currentItemId) loadVideo(currentItemId, video.currentTime, true);
   });
 
   async function onItemChanged(msg) {
@@ -149,7 +212,7 @@ export function renderPartyPlayer(root, params) {
     itemTitleEl.textContent = party.itemName || '';
     codeEl.textContent = party.joinCode;
     video.controls = isHost;
-    hostControls.classList.toggle('hide', !isHost);
+    settingsWrap.classList.toggle('hide', !isHost);
     followerNotice.classList.toggle('hide', isHost);
     hasNextQueued = !!party.hasNext;
     nextBtn.classList.toggle('hide', !(isHost && hasNextQueued));