@@ -55,6 +73,8 @@ export function renderPartyPlayer(root, params) {
const errorText = root.querySelector('#playerErrorText');
const itemTitleEl = root.querySelector('#itemTitle');
const membersEl = root.querySelector('#members');
+ const presenceOverlay = root.querySelector('#presenceOverlay');
+ const pauseBanner = root.querySelector('#pauseRequestBanner');
const nextBtn = root.querySelector('#nextBtn');
const followerNotice = root.querySelector('#followerNotice');
const settingsWrap = root.querySelector('#settingsWrap');
@@ -90,6 +110,8 @@ export function renderPartyPlayer(root, params) {
let currentItemId = null;
let suppressLocalEvents = false; // avoid feeding our own correction back as a new event
let heartbeat = null;
+ let pauseRequestCooldownUntil = 0;
+ let pauseBannerTimer = null;
function showError(message, detail) {
loadingNotice.classList.add('hide');
@@ -233,6 +255,54 @@ export function renderPartyPlayer(root, params) {
loadVideo(msg.itemId, 0, true);
}
+ // Presence overlay: one semi-transparent circle per member, initials only
+ // (no photos - Emby accounts don't reliably have one). Your own circle
+ // doubles as the "request a pause" button when you're not the host - the
+ // host already has direct controls, so their own circle is just presence.
+ function renderMembers(members) {
+ membersEl.textContent = members
+ .map((m) => m.userName + (m.isHost ? ' (hôte)' : ''))
+ .join(', ');
+
+ presenceOverlay.innerHTML = members.map((m) => {
+ const isMe = m.userName === auth.userName;
+ const clickable = isMe && !m.isHost;
+ return `
+
${escapeHtml(initialsFor(m.userName))}
`;
+ }).join('');
+
+ if (isHost) return; // the host pauses directly, no need for the request affordance
+ const mine = presenceOverlay.querySelector('.avatarClickable');
+ if (mine) {
+ mine.addEventListener('click', () => {
+ const now = Date.now();
+ if (now < pauseRequestCooldownUntil || !conn) return;
+ pauseRequestCooldownUntil = now + PAUSE_REQUEST_COOLDOWN_MS;
+ conn.requestPause();
+ mine.classList.add('avatarSent');
+ setTimeout(() => mine.classList.remove('avatarSent'), PAUSE_REQUEST_COOLDOWN_MS);
+ });
+ }
+ }
+
+ function onPauseRequested(msg) {
+ pauseBanner.textContent = `${msg.userName} demande une pause`;
+ pauseBanner.classList.remove('hide');
+ if (pauseBannerTimer) clearTimeout(pauseBannerTimer);
+ pauseBannerTimer = setTimeout(() => pauseBanner.classList.add('hide'), 4000);
+
+ const avatar = presenceOverlay.querySelector(`.avatar[data-user-id="${CSS.escape(msg.userId)}"]`);
+ if (avatar) {
+ avatar.classList.add('avatarPulse');
+ setTimeout(() => avatar.classList.remove('avatarPulse'), 2000);
+ }
+ }
+
async function init() {
let party;
try {
@@ -255,6 +325,7 @@ export function renderPartyPlayer(root, params) {
onPlaystate: applyRemoteState,
onItemChanged,
onHostChanged: () => becomeHost(true),
+ onPauseRequested,
onError: (message) => alert(message),
onClose: () => {}
});
@@ -262,12 +333,6 @@ export function renderPartyPlayer(root, params) {
if (party.youAreHost) becomeHost(false);
}
- function renderMembers(members) {
- membersEl.textContent = members
- .map((m) => m.userName + (m.isHost ? ' (hôte)' : ''))
- .join(', ');
- }
-
nextBtn.addEventListener('click', () => { if (conn) conn.next(); });
root.querySelector('#leaveBtn').addEventListener('click', () => navigate('/home'));
@@ -279,6 +344,7 @@ export function renderPartyPlayer(root, params) {
// actual leak: previously, only the "Quitter" button ran any of this.
return function cleanup() {
if (heartbeat) clearInterval(heartbeat);
+ if (pauseBannerTimer) clearTimeout(pauseBannerTimer);
if (hls) hls.destroy();
document.removeEventListener('click', onDocumentClick);
if (conn) conn.leave();
diff --git a/docs/architecture.md b/docs/architecture.md
index 9430aab..8a86391 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -254,6 +254,74 @@ regardless of any ancestor's padding, and (like most players' theater mode)
covers the sidebar while watching - confirmed via computed style
(`position: fixed`, all four insets `0px`) rather than just asserted.
+## Presence overlay and "request pause"
+
+Requested as a pair: a semi-transparent overlay showing who's in the party,
+and a way for a non-host to ask the host to pause without a chat feature
+(deliberately out of scope — see Non-goals).
+
+- **Presence**: `client/js/views/player.js`'s `renderMembers()` — already
+ responsible for the text member list in the top bar — now also rebuilds
+ `#presenceOverlay`, one circle per member, positioned bottom-left so it
+ never fights the top action bar (which already wraps on narrow screens) or
+ the centered `.followerNotice` pill. Each circle shows the first two
+ characters of `userName`, uppercased (`initialsFor`), on a background color
+ picked deterministically from a small fixed palette by hashing the name
+ (`colorForName`) — same person, same color, every render, with no need for
+ the server to assign or track one. `opacity: .75` on `.avatar` is the
+ "semi transparence" itself, applied to the whole circle (initials included)
+ rather than just its background, since a chat-bubble-style translucent chip
+ reads clearly enough at that opacity and avoids converting the hash color
+ to an rgba string just to keep text fully opaque.
+- **Which circle is "yours"** is decided client-side by comparing
+ `member.userName === auth.userName` (the same `auth` singleton
+ `embyApi.js` already populates at login/session-restore) rather than
+ by `userId` — consistent with the rest of the client already treating
+ `userId` as a server/protocol-internal detail (see `hostChanged`'s empty
+ payload) and not something to key UI logic on directly.
+- **Request pause**: your own circle — only when you're *not* the host, the
+ host already has direct controls — gets `.avatarClickable` and a click
+ handler that calls the party connection's `requestPause()`
+ (`client/js/party.js` → `"requestPause"` socket event). The server
+ (`server/src/socketHandler.js`) broadcasts `"pauseRequested"
+ {userId, userName}` to **everyone** in the party, not just the host, so
+ the whole group sees why playback is about to pause, and throttles it
+ server-side per member (5s, `member.lastPauseRequestUtc`) independently of
+ the client's own identical cooldown (`PAUSE_REQUEST_COOLDOWN_MS` in
+ `player.js`) — the server-side one is the real guard (anyone poking the
+ socket directly bypasses a client-only check); the client one just avoids
+ a pointless click doing nothing.
+- Receiving `"pauseRequested"` shows a short banner
+ (`#pauseRequestBanner`, "`
` demande une pause", auto-clearing after
+ 4s) and pulses the matching person's circle (`.avatarPulse`, a 1s
+ box-shadow keyframe run twice, matched by the event's `userId` against
+ each circle's `data-user-id`) for every member, including the requester
+ and the host — deliberately not host-only, so a request landing while the
+ host isn't looking at the tab is still visible to everyone else, and the
+ requester gets confirmation their click registered beyond the local
+ `.avatarSent` feedback ring.
+- Nothing about this feature actually pauses anything automatically — "request"
+ is literal, the host still has to act on it. Adding an actual forced-pause
+ would be a real design decision (can any member override the host's
+ playback state? that cuts against "host drives, everyone follows") and
+ wasn't asked for.
+
+Verified end to end with mocked `members`/`pauseRequested` Socket.IO events
+against the real running local server (see session history): initials/colors
+render correctly for a two-member party, the host's circle never gets
+`.avatarClickable` (neither when viewed by themselves nor by others), rapid
+repeat clicks on your own circle within the cooldown collapse to exactly one
+`requestPause` emission (confirmed by issuing three synchronous clicks in one
+script and checking the emitted-event count increased by exactly one — an
+earlier two-separate-clicks check had looked like a cooldown failure at
+first, but that was real wall-clock time between two separate tool calls
+exceeding the 5s window, not a code bug), and a `pauseRequested` event
+correctly banners and pulses the matching circle. The host-only controls
+(`becomeHost`, settings menu, next-episode button) were re-checked after this
+change and still work — this pass only added to `renderMembers()` and the
+`connectParty(...)` callback list in `init()`, it didn't touch either of
+those paths.
+
## Assumptions to verify
**Confirmed against the real server** (not a guess — actually exercised,
diff --git a/server/src/socketHandler.js b/server/src/socketHandler.js
index be79f88..7ceda21 100644
--- a/server/src/socketHandler.js
+++ b/server/src/socketHandler.js
@@ -20,6 +20,8 @@ const { PartyManager } = require('./partyManager');
* "next" (host only - advance the queue)
* "itemChanged" (server -> client) {itemId, itemName, itemImageUrl, queueIndex, queueLength, hasNext}
* "hostChanged" (server -> client, to the new host only, no payload)
+ * "requestPause" (throttled per member - see below)
+ * "pauseRequested" (server -> client, everyone in the party) {userId, userName}
* "leave"
* "errorMessage" (server -> client) {message}
* ("error" is a reserved Socket.IO event name - using our own to avoid
@@ -86,6 +88,22 @@ function attachSocketServer(io, { parseCookies, getSession }) {
}
});
+ // Anyone (not just followers - harmless either way) can ask the host to
+ // pause; the presence overlay (client/js/views/player.js) is what
+ // triggers this. Broadcast to the whole party, not just the host, so
+ // everyone sees why playback is about to pause. Throttled per member
+ // server-side (not just the client's own cooldown, which a stray extra
+ // click - or anyone poking the socket directly - would bypass).
+ socket.on('requestPause', () => {
+ if (!party) return;
+ const member = party.members.get(userId);
+ if (!member) return;
+ const now = Date.now();
+ if (member.lastPauseRequestUtc && now - member.lastPauseRequestUtc < 5000) return;
+ member.lastPauseRequestUtc = now;
+ io.to(party.id).emit('pauseRequested', { userId, userName: member.userName });
+ });
+
socket.on('leave', () => {
if (!party) return;
applyLeave(io, party, userId);