feat(hub): keep a show's detail modal open under the player

Closing the player lands back on the season being watched, with the
episode just started marked. A film's modal still closes on Play.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

4 files changed, 33 insertions, 4 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/group-page.js b/packages/meshbay-hub/src/meshbay_hub/static/group-page.js
index eb012c3..0827104 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/group-page.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/group-page.js
@@ -17,7 +17,7 @@ import { lazy } from './lazy.js';
 
 // Fetched the first time a video is played / the Settings tab is opened.
 const VideoPlayer = lazy(() => import('./video-player.js'), 'VideoPlayer',
-  html`<div class="video-overlay"><p class="page-message"><span class="spinner"></span></p></div>`);
+  html`<div class="video-overlay video-player-overlay"><p class="page-message"><span class="spinner"></span></p></div>`);
 const GroupSettingsPanel = lazy(() => import('./group-settings.js'), 'GroupSettingsPanel');
 import { reportIndexPush } from './index-dock.js';
 import { clearPending, nodePkFromLink, pendingFor } from './invite-link.js';
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index 8433b1a..111c03d 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -1979,6 +1979,13 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   justify-content: center;
 }
 
+/* The player opens on top of a show's detail modal, which stays open under it
+   so the next episode is one click away when the player closes. Both are
+   `.video-overlay`; equal values would leave the order to where each happens
+   to sit in the DOM, which is not a decision. Below the operator's match
+   search (210), which only ever opens from the modal, never over the player. */
+.video-overlay.video-player-overlay { z-index: 205; }
+
 .video-top-bar {
   position: absolute;
   top: 0;
@@ -4135,6 +4142,13 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; }
   margin-bottom: 4px;
 }
 .video-episode-row:hover { border-color: var(--accent); color: var(--accent); }
+/* The episode last started from this modal, so the one to watch next is the
+   row under it. A border and a tint, not a colour change of the text alone,
+   so it does not read as the hover state left behind. */
+.video-episode-row.last-played {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+}
 .video-episode-row .icon { width: 14px; height: 14px; flex-shrink: 0; }
 .video-episode-thumb-slot { width: 64px; height: 40px; flex-shrink: 0; }
 .video-episode-thumb {
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/video-app.js b/packages/meshbay-hub/src/meshbay_hub/static/video-app.js
index 4c9f90c..9e2db1c 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/video-app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/video-app.js
@@ -619,6 +619,13 @@ function VideoDetailModal({
   const [selectedSeason, setSelectedSeason] = useState(null);
   useEffect(() => { setSelectedSeason(defaultSeason(show)); }, [show]);
 
+  // A show's modal stays open under the player (PosterGrid's onPlay), so
+  // closing the player lands back here. Marking the episode just started is
+  // what makes "the next one" the row under the mark, rather than a row the
+  // reader has to find again by its number.
+  const [lastPlayedId, setLastPlayedId] = useState(null);
+  useEffect(() => { setLastPlayedId(null); }, [show]);
+
   const showMultiSeason = Boolean(show && show.seasons.length > 1);
   const seasonMeta = useSeasonMeta(
     transportRef, confident ? meta.tmdb_id : null, selectedSeason,
@@ -708,7 +715,10 @@ function VideoDetailModal({
                     </div>
                   `}
                   ${s.episodes.map((ep) => html`
-                    <button class="video-episode-row" key=${ep.id} onClick=${() => onPlay(ep)}>
+                    <button key=${ep.id}
+                      class="video-episode-row ${ep.id === lastPlayedId ? 'last-played' : ''}"
+                      aria-current=${ep.id === lastPlayedId ? 'true' : undefined}
+                      onClick=${() => { setLastPlayedId(ep.id); onPlay(ep); }}>
                       <${LazyTile} cls="video-episode-thumb-slot">
                         <${MediaThumb} thumbHash=${ep.thumb_hash} alt=${ep.display_title || ep.name}
                           cls="video-episode-thumb" transportRef=${ep._tRef || transportRef} gekRef=${ep._gRef || gekRef}
@@ -857,13 +867,18 @@ function PosterGrid({
         </${LazyTile}>
       `; })}
     </div>
+    ${/* A show's modal is left open under the player: watching episode after
+          episode used to mean reopening the show and picking the season again
+          every time. A film has nothing left to pick, so its modal still
+          closes. The player stacks above it by its own z-index (style.css,
+          .video-player-overlay), not by DOM order. */''}
     ${detail && html`
       <${VideoDetailModal} title=${detail.title} meta=${detailMeta}
         repEntry=${detail.repEntry} show=${detail.show}
         transportRef=${detailTRef} gekRef=${detailGRef} isNodeAdmin=${isNodeAdmin}
         tmdbEnabled=${tmdbEnabled}
         onClose=${() => setDetail(null)}
-        onPlay=${(entry) => { setDetail(null); onPreview(entry); }} />
+        onPlay=${(entry) => { if (!detail.show) setDetail(null); onPreview(entry); }} />
     `}
   `;
 }
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/video-player.js b/packages/meshbay-hub/src/meshbay_hub/static/video-player.js
index 6eaacc5..2b274b5 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/video-player.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/video-player.js
@@ -1596,7 +1596,7 @@ function VideoPlayer({ entry, transportRef, gekRef, onClose, onDownload }) {
   }, []);
 
   return html`
-    <div class="video-overlay" onClick=${(e) => {
+    <div class="video-overlay video-player-overlay" onClick=${(e) => {
       if (e.target.classList.contains('video-overlay')) onClose();
     }}>
       <div class="video-top-bar">