diff --git a/client/src/views/player/Player.css b/client/src/views/player/Player.css index 089a9b7..e31fe2f 100644 --- a/client/src/views/player/Player.css +++ b/client/src/views/player/Player.css @@ -139,7 +139,12 @@ comment, and docs/architecture.md for the exact bug this avoided: a

's default margin silently throwing off a hand-picked bottom offset on the element above it - not repeatable once nothing is positioned - independently any more). */ + independently any more). Centered on purpose - this is exactly where + a native subtitle renders too, but both children here are + passive text (a transient banner, a static notice), not something a + viewer needs to click through subtitle text to reach - unlike + .requestToolbar below, which used to live in this same column and + was moved out for exactly that reason. */ .bottomOverlay { position: absolute; bottom: 20px; @@ -174,10 +179,25 @@ Player.ts's requestPauseBtn/requestResumeBtn. Pill buttons matching the banner/notice's own dark-overlay look above, not the plain-text .linklike used in the (opaque) top action bar - this sits directly on - top of the video image, same as the rest of .bottomOverlay. */ + top of the video image, same as .bottomOverlay. + Its own bottom-RIGHT corner, independently of .bottomOverlay - + deliberately not centered-bottom any more (see .bottomOverlay's own + comment): that's also where a native subtitle renders, and + these are real buttons someone needs to read and click, not passive + text a subtitle could just as easily sit behind. Stacked as a column + (not a row, unlike the old centered layout) so two pill buttons next + to each other never has to fight a narrow phone screen for width - + each just takes however much it needs, right-aligned under the other. */ .requestToolbar { + position: absolute; + right: 16px; + bottom: 20px; + z-index: 6; display: flex; + flex-direction: column; + align-items: flex-end; gap: 8px; + max-width: calc(50% - 16px); } .requestBtn { @@ -186,6 +206,7 @@ padding: 8px 14px; border-radius: 20px; font-size: 12.5px; + white-space: nowrap; /* keeps the pill shape even in .requestToolbar's own narrow corner on a phone-width screen */ } .requestBtn:hover { background: rgba(0, 0, 0, .8); } diff --git a/client/src/views/player/Player.html b/client/src/views/player/Player.html index 3b51e05..fa79e74 100644 --- a/client/src/views/player/Player.html +++ b/client/src/views/player/Player.html @@ -31,16 +31,21 @@ + transient banner and the passive notice always sit in the right + order relative to each other regardless of which is visible at a + given moment, instead of each guessing a fixed pixel offset from + the bottom edge. The request toolbar (the actual buttons) used to + live here too, third in this same column - moved out to its own + bottom-right corner instead (see .requestToolbar in Player.css): + centered-bottom is also where a native subtitle renders, + and the buttons sat right on top of it. -->

L'hôte contrôle la lecture.

-
- - -
+
+ +
+ +
diff --git a/client/src/views/player/Player.ts b/client/src/views/player/Player.ts index b969e4e..ae37a15 100644 --- a/client/src/views/player/Player.ts +++ b/client/src/views/player/Player.ts @@ -636,11 +636,14 @@ function renderVideoPlayer(root: HTMLElement, partyId: string, party: PartyPubli showRequestBanner(msg.userId, msg.userName, 'une reprise'); } - // The toolbar itself - see .bottomOverlay/.requestToolbar in Player.css - // for why this replaced the old "click your own avatar" affordance. - // Each button has its own client-side cooldown (mirroring the server's - // own independent per-request throttle in SocketGateway) purely so a - // rapid double-click doesn't even bother emitting the second request. + // The toolbar itself - see .requestToolbar in Player.css for why this + // replaced the old "click your own avatar" affordance, and for why it + // sits in its own bottom-right corner rather than centered-bottom like + // .bottomOverlay next to it (that's also where a native + // subtitle renders). Each button has its own client-side cooldown + // (mirroring the server's own independent per-request throttle in + // SocketGateway) purely so a rapid double-click doesn't even bother + // emitting the second request. requestPauseBtn.addEventListener('click', () => { const now = Date.now(); if (now < pauseRequestCooldownUntil || !conn) return; diff --git a/docs/architecture.md b/docs/architecture.md index 013221f..54587a6 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -409,6 +409,25 @@ button's own client-side cooldown collapses a rapid double-click to one `requestResume` emission; a pushed `resumeRequested` shows the banner with the right text and highlights the right avatar. +**Much later still: moved the toolbar off the subtitle zone.** Asked +for directly - `.requestToolbar` shared `.bottomOverlay`'s centered +column with the banner/follower-notice above, which is also exactly +where a native `` subtitle renders (see "Player track +selection" below): real, clickable buttons sitting on top of subtitle +text, for the whole session, is a worse problem than a transient +banner or static notice occasionally doing the same. Pulled `#request +Toolbar` out into its own sibling block in `Player.html`, positioned +independently in the bottom-right corner (`position: absolute; right: +16px; bottom: 20px`) and stacked as a column instead of a row (`align- +items: flex-end`) so two pill buttons never have to fight a narrow +phone screen for width side by side. `.bottomOverlay` itself is +untouched - still centered-bottom, still just the banner and the +notice, neither of which is something a viewer needs to click through +subtitle text to reach. Verified against the real bundle at both +desktop and phone width: the two buttons render bottom-right, +non-overlapping with the (still centered) follower notice, in both +widths. + ## Player track selection: forcing our pick onto Emby's own negotiation First real-world bug report once someone actually watched something end to