diff --git a/client/src/views/player/Player.css b/client/src/views/player/Player.css index ab8be56..421805d 100644 --- a/client/src/views/player/Player.css +++ b/client/src/views/player/Player.css @@ -16,6 +16,15 @@ object-fit: contain; } +/* Toggled alongside .bottomBar.minimal (see Player.ts's scheduleControlsHide/ + showControls) - a mouse cursor left sitting over the video is the same + kind of clutter the bar itself was, once there's nothing left under it + to interact with. Any pointermove/pointerdown anywhere in .playerWrap + already calls showControls(), so the cursor reappears the instant the + mouse moves again - same convention as any other video player's + auto-hiding controls. */ +.playerWrap.cursorHidden { cursor: none; } + /* Two stacked rows, both part of the same top gradient overlay: the action bar (title/members/next/settings/leave) and, below it, the presence avatars - see .presenceOverlay in styles/presence.css. Stacking them in diff --git a/client/src/views/player/Player.ts b/client/src/views/player/Player.ts index 269e62d..d5b80f8 100644 --- a/client/src/views/player/Player.ts +++ b/client/src/views/player/Player.ts @@ -530,7 +530,11 @@ function renderVideoPlayer(root: HTMLElement, partyId: string, party: PartyPubli * sitting on the bar itself, and re-arms on every discrete playback * event too (onDriverStateChanged above), not just raw pointer * activity - resuming from pause has to restart the countdown, not - * leave the bar stuck open forever. + * leave the bar stuck open forever. .playerWrap also gets + * .cursorHidden alongside .minimal (see Player.css) - asked for + * directly too: a mouse cursor left sitting over the video is exactly + * the same kind of clutter the bar itself was, once there's nothing + * left under it to interact with. */ function clearControlsHideTimer() { if (controlsHideTimer) { @@ -544,11 +548,13 @@ function renderVideoPlayer(root: HTMLElement, partyId: string, party: PartyPubli controlsHideTimer = window.setTimeout(() => { if (activeDriver.paused || isPointerOverBottomBar) return; bottomBar.classList.add('minimal'); + playerWrap.classList.add('cursorHidden'); }, CONTROLS_HIDE_DELAY_MS); } function showControls() { bottomBar.classList.remove('minimal'); + playerWrap.classList.remove('cursorHidden'); scheduleControlsHide(); }