From 694a3832f4b57d007b79b3b21dd47b55e6ef3c42 Mon Sep 17 00:00:00 2001 From: Christophe Besson Date: Mon, 28 Sep 2026 11:09:12 +0200 Subject: 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 --- .../src/meshbay_hub/static/group-page.js | 2 +- .../meshbay-hub/src/meshbay_hub/static/style.css | 14 ++ .../src/meshbay_hub/static/video-app.js | 19 +- .../src/meshbay_hub/static/video-player.js | 2 +- .../tests/harness/video_series_probe.py | 266 +++++++++++++++++++++ .../tests/test_video_series_stays_open.py | 74 ++++++ 6 files changed, 373 insertions(+), 4 deletions(-) create mode 100644 packages/meshbay-hub/tests/harness/video_series_probe.py create mode 100644 packages/meshbay-hub/tests/test_video_series_stays_open.py (limited to 'packages/meshbay-hub') 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`

`); + html`

`); 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({ `} ${s.episodes.map((ep) => html` -