simon/jacuzzi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tick the playing quality, and hide the menu with the HUD

Browse Source 
The quality menu now marks the format that is actually on screen when it
opens, read live from the player rather than recorded at bind time, so the
tick follows an automatic pick or a fallback after a failed candidate, not
only a manual choice.

Labels drop the container (mp4 told the viewer nothing about a quality
choice) and gain the extractor's format_note when it says something the
quality doesn't already.

The menu sits outside .cp-hud so it can escape the bar's overflow, which
means the idle fade never reached it -- the player and the reels feed now
close it along with the rest of the HUD. Opening it restarts the idle
countdown (the feed's window is only a second), and on desktop a mouse
resting on the open menu holds the HUD up, same as the bars.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QBDkEXP4htyXTCZUwMLphd
This commit is contained in:
Simon
2026-09-05 22:57:04 +00:00
parent d508263946
commit 52d7802491
4 changed files with 87 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/js/player.js
View File

@@ -24,6 +24,7 @@ App.player = App.player || {};
idleTimer: null,
originEl: null,
hudHovered: false, // mouse resting on the controls (desktop)
activeUrl: '', // media URL actually playing, for the format menu's tick
attemptToken: 0 // bumps on every open()/format switch to void stale async callbacks
};
@@ -104,7 +105,7 @@ App.player = App.player || {};
</div>
</div>
</div>
<div class="cp-format-menu" hidden></div>
<div class="cp-format-menu" role="menu" hidden></div>
`;
return container;
}
@@ -152,6 +153,11 @@ App.player = App.player || {};
return;
}
if (cp.container) cp.container.classList.add('cp-hud-idle');
// The quality menu lives outside .cp-hud (it must escape the bar's
// overflow), so the idle fade doesn't reach it -- close it by hand
// rather than leave it floating over a bare video.
const menu = q('.cp-format-menu');
if (menu) menu.hidden = true;
}, HUD_IDLE_MS);
}
@@ -497,7 +503,9 @@ App.player = App.player || {};
// The bars, not .cp-hud itself: the HUD wrapper is pointer-events:none
// (so it never eats gestures over the video) and only its children are
// hit-testable.
const bars = [q('.cp-top-bar'), q('.cp-bottom-bar')].filter(Boolean);
// The open quality menu counts as "the controls" too: a mouse resting
// on it must not let the HUD fade the menu out from under the cursor.
const bars = [q('.cp-top-bar'), q('.cp-bottom-bar'), q('.cp-format-menu')].filter(Boolean);
bars.forEach((bar) => {
bar.addEventListener('pointerenter', onEnterHud);
bar.addEventListener('pointerleave', onLeaveHud);
@@ -756,6 +764,9 @@ App.player = App.player || {};
const startPlayback = () => {
if (playbackStarted) return;
playbackStarted = true;
// Whichever candidate got this far is the one on screen -- not
// necessarily the one the ranking (or the viewer) asked for.
cp.activeUrl = resolved.url || '';
clearLoading();
hideError();
showBuffering(false);
@@ -864,6 +875,7 @@ App.player = App.player || {};
cp.container = buildContainer();
cp.video = q('.cp-video');
cp.formatOverride = null;
cp.activeUrl = '';
const isLive = !!(source && typeof source === 'object' &&
(source.isLive || (source.meta && source.meta.isLive)));
@@ -897,7 +909,7 @@ App.player = App.player || {};
cp.formatOverride = fmt;
const resumeAt = cp.video.currentTime || 0;
playSources(source, { resumeAt, originEl: cp.originEl });
});
}, { getCurrentUrl: () => cp.activeUrl, onOpen: wakeHud });
let destroyFormatMenu = bindFormats();
addCleanup(() => destroyFormatMenu());
const meta = (source && typeof source === 'object') ? (source.meta || source) : null;
@@ -977,5 +989,6 @@ App.player = App.player || {};
cp.data = null;
cp.source = null; // voids a still-pending format resolve for this open
cp.formatOverride = null;
cp.activeUrl = '';
};
})();