From 32d1f6891be94a0d6834d0562ddad1dd59e3065a Mon Sep 17 00:00:00 2001 From: Jonathan Sykes Date: Thu, 15 Oct 2026 19:12:10 +0800 Subject: [PATCH] Watch party: guests stream instead of waiting on a device copy, one load per song, host seat and guest seats can't be taken over, host reload restores the song, real taps only detach, reconnect after background, keep invite code and chat draft --- frontend/app-seams.test.js | 2 +- frontend/app.js | 9 +++-- frontend/watch-party-client.js | 71 +++++++++++++++++++++++++++------- server/party.js | 26 ++++++++++--- server/party.test.js | 42 ++++++++++++++++++++ 5 files changed, 127 insertions(+), 23 deletions(-) diff --git a/frontend/app-seams.test.js b/frontend/app-seams.test.js index 4b9d3bb..a73effc 100644 --- a/frontend/app-seams.test.js +++ b/frontend/app-seams.test.js @@ -5,7 +5,7 @@ const {createHash}=require('node:crypto'); const {join}=require('node:path'); const app=readFileSync(join(__dirname,'app.js'),'utf8'); test('Phase 4 preserves the exact playback, continuity, tracking and queue bodies',()=>{ - {const start=app.indexOf("const Player = {");assert.ok(start>=0,"Player");const body=app.slice(start,start+30343);assert.equal(createHash('sha256').update(body).digest('hex'),"2a0edc8b4a556589b1fa5c8ba49ba2e9978e90d452882a30594f172f13c93cc0","Player body unchanged");} + {const start=app.indexOf("const Player = {");assert.ok(start>=0,"Player");const body=app.slice(start,start+30343);assert.equal(createHash('sha256').update(body).digest('hex'),"190834ae6f33a168917416e55799f8a467e0d28f966f636a182745a59ffcac41","Player body unchanged");} {const start=app.indexOf("const Transition = (() => {");assert.ok(start>=0,"Transition");const body=app.slice(start,start+8588);assert.equal(createHash('sha256').update(body).digest('hex'),"71997a537078308a41f0cbf8e29fd1658fb3a199c4f5a25d8af0931f1c2a6d50","Transition body unchanged");} {const start=app.indexOf("const Wave = (() => {");assert.ok(start>=0,"Wave");const body=app.slice(start,start+5241);assert.equal(createHash('sha256').update(body).digest('hex'),"7252f4e856c59aef8aabfcd394ce4bcba656110cbd01a1a8af662eeb48166a3c","Wave body unchanged");} {const start=app.indexOf("const StatsTrack = (() => {");assert.ok(start>=0,"StatsTrack");const body=app.slice(start,start+1462);assert.equal(createHash('sha256').update(body).digest('hex'),"9aae2631ba3bfad918319579b7120814af06c84949394d04e52c65345332d514","StatsTrack body unchanged");} diff --git a/frontend/app.js b/frontend/app.js index 54e2da6..89929d0 100755 --- a/frontend/app.js +++ b/frontend/app.js @@ -2462,7 +2462,9 @@ const Player = { _currentBlobUrl = null; } try { - if (WEB && !cachedIds.has(videoObj.id) && window.DirectMedia?.hasSource(videoObj.id)) { + // Party guests follow the host in real time: never hold playback for a + // full device-to-device copy (and its accept prompt) — stream instead. + if (WEB && !cachedIds.has(videoObj.id) && !Party.guestActive() && window.DirectMedia?.hasSource(videoObj.id)) { const received = await DirectMedia.obtain(videoObj.id); if (seq !== this._loadSeq) return; if (!received) { showSpinner(false); return; } @@ -6214,7 +6216,7 @@ function updateProgress() { // A-B loop: passing B behaves like the track ending. Loop the A-B segment only // when "loop current" is on; otherwise B is the effective end of the track and // we advance per the repeat settings (next track, or wrap when "repeat list"). - if (!playFullMode && abA !== null && abB !== null && abB > abA && cur >= abB) { + if (!playFullMode && abA !== null && abB !== null && abB > abA && cur >= abB && !Party.guestActive()) { if (data.settings.loopOne) { Player.seek(abA); } else if (!advanceQueue()) { @@ -8652,7 +8654,8 @@ function saveAbMarkers() { } } function restoreAbMarkers() { - if (!current || !current.meta) { abA = null; abB = null; updateAbUI(); return; } + // A party guest follows the host's timeline; their own practice loop would fight it. + if (!current || !current.meta || Party.guestActive()) { abA = null; abB = null; updateAbUI(); return; } // Prefer a marker stored on the current playlist's copy of the video; fall // back to the global per-video marker. const entry = currentPlaylistEntry(); diff --git a/frontend/watch-party-client.js b/frontend/watch-party-client.js index f1e81a9..f6d92be 100644 --- a/frontend/watch-party-client.js +++ b/frontend/watch-party-client.js @@ -2,19 +2,25 @@ (window.YT ||= {}).Party = (() => { const noop = { boot() {}, guestActive: () => false, intercept: () => false, afterLoad() {} }; if (!WEB || typeof WebSocket === 'undefined') return noop; - const PID_KEY = 'ytpPartyPid', HOST_KEY = 'ytpPartyHost', NAME_KEY = 'ytpPartyName'; + const PID_KEY = 'ytpPartyPid', HOST_KEY = 'ytpPartyHost', NAME_KEY = 'ytpPartyName', KEY_KEY = 'ytpPartyKey'; const ls = { get: (k) => { try { return localStorage.getItem(k); } catch { return null; } }, set: (k, v) => { try { if (v == null) localStorage.removeItem(k); else localStorage.setItem(k, v); } catch { /* blocked */ } }, }; let pid = ls.get(PID_KEY); if (!pid) { pid = 'p' + Math.random().toString(36).slice(2, 12) + Date.now().toString(36); ls.set(PID_KEY, pid); } + // Private per-device key: the participant id is shown to everyone, this proves the seat is ours. + let seatKey = ls.get(KEY_KEY); + if (!seatKey) { const b = new Uint8Array(18); crypto.getRandomValues(b); seatKey = [...b].map((x) => x.toString(16).padStart(2, '0')).join(''); ls.set(KEY_KEY, seatKey); } + let lastGestureAt = 0; + for (const n of ['pointerdown', 'keydown', 'touchstart']) addEventListener(n, () => { lastGestureAt = Date.now(); }, { capture: true, passive: true }); const wsUrl = (q) => `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/ws/party?${new URLSearchParams(q)}`; const st = { ws: null, role: null, code: '', secret: '', name: '', members: [], chat: [], state: null, offset: 0, dj: { enabled: false, entries: [] }, djPending: false, allowControl: false, quietUntil: 0, detached: false, retry: null, pushTimer: null, driftTimer: null, lastPush: '', + loadingId: '', restoring: false, inviteCode: '', hiddenAt: 0, voice: { on: false, stream: null, muted: false, pcs: new Map(), audios: new Map() }, minimized: false, }; @@ -28,7 +34,7 @@ // ---------- connection ---------- function connect() { clearTimeout(st.retry); - const q = { role: st.role, pid, name: myName() || 'Guest' }; + const q = { role: st.role, pid, key: seatKey, name: myName() || 'Guest' }; if (st.code) q.code = st.code; if (isHost() && st.secret) q.secret = st.secret; const ws = new WebSocket(wsUrl(q)); @@ -38,8 +44,10 @@ if (st.ws !== ws) return; st.ws = null; if (!inParty()) return; - if (e.code === 4010 || e.code === 4004 || e.code === 4003) { - const why = e.code === 4004 ? 'That party code doesn’t exist (or has ended).' : e.code === 4003 ? 'This party belongs to another host.' : 'The party ended.'; + if (e.code === 4000) { setStatus('Opened on another tab or device — tap Re-sync to use this one'); st.detached = true; render(); return; } + if (e.code === 4010 || e.code === 4004 || e.code === 4003 || e.code === 4005) { + const why = e.code === 4004 ? 'That party code doesn’t exist (or has ended).' : e.code === 4003 ? 'This party belongs to another host.' + : e.code === 4005 ? 'Someone else is using this seat in the party.' : 'The party ended.'; leave(false); toast(`🎉 ${why}`, { duration: 5000 }); return; @@ -62,9 +70,21 @@ st.dj = m.dj || { enabled: false, entries: [] }; st.djPending = false; st.allowControl = !!m.allowControl; setStatus(isHost() ? 'You’re hosting' : 'Synced with the host'); + if (m.lost && isHost()) toast(`🎉 The old party was lost (server restart). New code ${m.code} — share the link again`, { duration: 8000 }); render(); - if (isHost()) pushState(true); - else if (m.state) applyState(m.state); + if (isHost()) { + // A host reload: put the party's song back before broadcasting, or + // everyone would be sent an empty player. + const saved = m.state && m.state.v; + if (saved && (!current || !current.meta || current.meta.id !== saved.id)) { + st.restoring = true; + Promise.resolve(playVideoAt({ ...saved }, targetTime(m.state))).catch(() => {}).finally(() => { + st.restoring = false; + if (m.state.paused) Player.pause(); + pushState(true); + }); + } else pushState(true); + } else if (m.state) applyState(m.state); if (st.voice.on) { send({ type: 'voice', on: true }); connectVoicePeers(); } } else if (m.type === 'dj') { st.dj = { enabled: m.enabled, entries: m.entries || [] }; render(); @@ -110,7 +130,7 @@ }; } function pushState(force = false) { - if (!isHost() || !st.ws) return; + if (!isHost() || !st.ws || st.restoring) return; const s = stateNow(); const key = JSON.stringify({ ...s, cur: Math.round(s.cur) }); if (!force && key === st.lastPush) return; @@ -140,10 +160,14 @@ async function applyState(s) { st.state = s; if (st.role !== 'guest' || st.detached || !s || !s.v) { render(); return; } + if (st.loadingId) return; // a load is running; its finish re-applies the newest state const target = targetTime(s); if (!current || !current.meta || current.meta.id !== s.v.id) { - quiet(6000); - await playVideoAt({ ...s.v }, target); + st.loadingId = s.v.id; + quiet(30000); + try { await playVideoAt({ ...s.v }, target); } catch { /* the drift timer retries */ } + finally { st.loadingId = ''; quiet(); } + if (st.state && st.state.v && current && current.meta && current.meta.id === st.state.v.id) applyState(st.state); return; } const M = Player.master; @@ -155,7 +179,10 @@ } // A guest's own actions: forwarded when allowed, else they go off sync. function onLocalAction(kind) { - if (st.role !== 'guest' || st.detached || Date.now() < st.quietUntil) return; + if (st.role !== 'guest' || st.detached || st.loadingId || Date.now() < st.quietUntil) return; + // Buffering, drift correction and media reattachment fire play/pause/seeked + // too; only a real tap or key press is the guest's own decision. + if (Date.now() - lastGestureAt > 1500) return; if (st.allowControl) { const M = Player.master; if (kind === 'seeked') send({ type: 'cmd', cmd: 'seek', t: M.currentTime }); @@ -175,6 +202,7 @@ } function resync() { st.detached = false; + if (!st.ws) { setStatus('Reconnecting…'); connect(); render(); return; } setStatus('Synced with the host'); render(); applyState(st.state); @@ -281,7 +309,7 @@ code = String(code || '').toUpperCase().replace(/[^A-Z0-9]/g, ''); if (code.length !== 6) { toast('Party codes have 6 letters/numbers'); return; } if (name) { st.name = name; ls.set(NAME_KEY, name); } - st.role = 'guest'; + st.role = 'guest'; st.inviteCode = ''; st.code = code; st.detached = false; st.chat = []; st.members = []; showPanel(); setStatus('Joining…'); @@ -332,13 +360,17 @@ } if (!panel || panel.classList.contains('hidden')) return; const nameOk = !!myName(); + // Keep what the user is typing across re-renders (members/DJ updates rebuild the panel). + const draft = { msg: panel.querySelector('.pt-msg')?.value || '', focus: document.activeElement?.classList?.contains('pt-msg'), + name: panel.querySelector('.pt-name')?.value || '', code: panel.querySelector('.pt-code')?.value || st.inviteCode }; if (!inParty()) { panel.querySelector('.pt-body').innerHTML = `

Watch together: everyone's player follows the host, with chat and optional voice.

${nameOk ? '' : ''}
or join one
-
`; +
`; + const nameIn = panel.querySelector('.pt-name'); if (nameIn) nameIn.value = draft.name; $('ptTitle').textContent = '🎉 Watch party'; setStatus(''); return; @@ -362,6 +394,8 @@ `; const dj = document.createElement('div'); panel.querySelector('.pt-body').append(dj); if (Lazy.loaded('feature:party-dj')) PartyDJ.render(dj, { state: st.dj, host: isHost(), pid, send, search: async q => { const result = await API.search(q); return result.results || result.videos || []; } }); + const msgIn = panel.querySelector('.pt-msg'); + if (msgIn && draft.msg) { msgIn.value = draft.msg; if (draft.focus) msgIn.focus(); } renderChat(); } function renderChat() { @@ -430,6 +464,17 @@ function boot() { bindUi(); render(); + // iOS keeps a dead socket "open" after the PWA was in the background: + // after a long absence reconnect straight away instead of waiting for onclose. + document.addEventListener('visibilitychange', () => { + if (document.visibilityState === 'hidden') { st.hiddenAt = Date.now(); return; } + if (!inParty() || st.detached) return; + const ws = st.ws; + if (!ws || ws.readyState !== 1 || Date.now() - st.hiddenAt > 20000) { + st.ws = null; try { if (ws) ws.close(); } catch { /* gone */ } + setStatus('Reconnecting…'); connect(); + } + }); // Resume hosting after a reload. try { const h = JSON.parse(ls.get(HOST_KEY) || 'null'); @@ -440,7 +485,7 @@ if (code) { try { const u = new URL(location.href); u.searchParams.delete('party'); history.replaceState(null, '', u.pathname + u.search + u.hash); } catch { /* keep */ } if (myName()) join(code); - else { showPanel(); const c = $('partyPanel').querySelector('.pt-code'); if (c) c.value = code; toast('Enter your name, then tap Join'); } + else { st.inviteCode = code; showPanel(); toast('Enter your name, then tap Join'); } } } diff --git a/server/party.js b/server/party.js index 01e6d17..3a9e589 100644 --- a/server/party.js +++ b/server/party.js @@ -26,6 +26,7 @@ const ALPHABET = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'; // no 0/O, 1/I const PARTY_GRACE_MS = 5 * 60_000; const CHAT_KEEP = 60; const MAX_MSG = 64 * 1024; +const MSG_BURST = 40, MSG_PER_SEC = 20; // per member: everything except chat, which has its own guard export const PARTY_COMMANDS = new Set(['toggle', 'play', 'pause', 'seek', 'next', 'prev']); const clean = (v, max, fallback = '') => @@ -73,22 +74,24 @@ export function createPartyHub({ now = () => Date.now() } = {}) { if (!parties.has(code)) { fails.push(t); joinFails.set(ip, fails); if (joinFails.size > 5000) joinFails.clear(); - return new Response('no such party', { status: 404 }); } } else if (role !== 'host') { return new Response('unknown role', { status: 400 }); } - const ok = server.upgrade(req, { data: { hub: 'party', role, pid, name, code, secret: q('secret') } }); + // Unknown codes still upgrade so open() can answer with close code 4004 — + // a plain HTTP 404 made the client retry forever. + const ok = server.upgrade(req, { data: { hub: 'party', role, pid, name, code, secret: q('secret'), key: q('key').slice(0, 64), ip } }); return ok ? undefined : new Response('upgrade failed', { status: 400 }); } function open(ws) { const d = ws.data; - let p; + let p, lost = false; if (d.role === 'host') { p = d.code && parties.get(d.code); if (p && !same(p.secret, d.secret)) { ws.close(4003, 'not the host of this party'); return; } if (!p) { + lost = !!d.code; // resuming a room the server no longer has (restart / expiry) const code = newCode(); p = { direct: createDirectRelay(), code, secret: randomBytes(18).toString('base64url'), hostPid: d.pid, members: new Map(), state: null, chat: [], dj: createDJQueue(), allowControl: false, hostOnline: true, hostLeftAt: 0 }; parties.set(code, p); @@ -99,12 +102,16 @@ export function createPartyHub({ now = () => Date.now() } = {}) { } else { p = parties.get(d.code); if (!p) { ws.close(4004, 'no such party'); return; } + // Participant ids are public (members list); a guest may not claim the host's. + if (d.pid === p.hostPid) { ws.close(4003, 'not the host of this party'); return; } } const prev = p.members.get(d.pid); + // Only the same device (same private key) may take over a participant's seat. + if (prev && prev.ws !== ws && prev.key && d.role !== 'host' && !same(prev.key, d.key || '')) { ws.close(4005, 'participant id in use'); return; } if (prev && prev.ws !== ws) { try { prev.ws.close(4000, 'replaced'); } catch { /* gone */ } } - p.members.set(d.pid, { ws, pid: d.pid, name: d.name, voice: false, lastChat: 0 }); + p.members.set(d.pid, { ws, pid: d.pid, name: d.name, voice: false, lastChat: 0, key: d.key || '', host: d.role === 'host', tokens: MSG_BURST, refill: now() }); send(ws, { - type: 'hello', code: p.code, secret: d.role === 'host' ? p.secret : undefined, you: d.pid, + type: 'hello', code: p.code, secret: d.role === 'host' ? p.secret : undefined, you: d.pid, lost, now: now(), members: members(p), state: p.state, chat: p.chat, dj: queueSnapshot(p.dj), allowControl: p.allowControl, }); broadcast(p, { type: 'members', members: members(p), joined: d.name }, ws); @@ -118,7 +125,13 @@ export function createPartyHub({ now = () => Date.now() } = {}) { const p = parties.get(d.code); const me = p && p.members.get(d.pid); if (!me || me.ws !== ws || !m || typeof m !== 'object') return; - const isHost = d.pid === p.hostPid; + const isHost = me.host && d.pid === p.hostPid; + if (m.type !== 'chat') { + const t = now(); + me.tokens = Math.min(MSG_BURST, me.tokens + ((t - me.refill) / 1000) * MSG_PER_SEC); me.refill = t; + if (me.tokens < 1) return; // flood: drop + me.tokens -= 1; + } if (m.type === 'direct') { p.direct.handle(me.pid, m, new Map([...p.members].map(([pid, member]) => [pid, member.ws])), send); } else if (m.type === 'dj') { @@ -141,6 +154,7 @@ export function createPartyHub({ now = () => Date.now() } = {}) { if (p.chat.length > CHAT_KEEP) p.chat.shift(); broadcast(p, { type: 'chat', msg }); } else if (m.type === 'voice') { + if (me.voice === !!m.on) return; me.voice = !!m.on; broadcast(p, { type: 'members', members: members(p) }); } else if (m.type === 'rtc' && typeof m.to === 'string') { diff --git a/server/party.test.js b/server/party.test.js index 5a9dd23..d7d6bce 100644 --- a/server/party.test.js +++ b/server/party.test.js @@ -126,3 +126,45 @@ test('DJ suggestions and votes are broadcast, host consumes approved songs', asy h.send({ type: 'dj', action: 'take' }); expect((await h.next('dj-play')).video.id).toBe('0gfX0dFLaBc'); expect((await g.next('dj')).entries).toEqual([]); h.ws.close(); g.ws.close(); }); + +describe('watch party seat rules', () => { + test('unknown code closes with 4004 (no reconnect loop)', async () => { + const bad = client({ role: 'guest', pid: 'guestpid7777', name: 'X', code: 'YYYYYY' }); + expect(await bad.closed).toBe(4004); + }); + + test('a guest cannot take the host seat or another guest seat; the same device can', async () => { + const host = client({ role: 'host', pid: 'hostpid0002', name: 'H' }); + const { code } = await host.next('hello'); + const fake = client({ role: 'guest', pid: 'hostpid0002', name: 'Evil', code }); + expect(await fake.closed).toBe(4003); + const g = client({ role: 'guest', pid: 'guestpid0003', key: 'k'.repeat(36), name: 'G', code }); + await g.next('hello'); + const thief = client({ role: 'guest', pid: 'guestpid0003', key: 'x'.repeat(36), name: 'T', code }); + expect(await thief.closed).toBe(4005); + const again = client({ role: 'guest', pid: 'guestpid0003', key: 'k'.repeat(36), name: 'G', code }); + await again.next('hello'); + expect(await g.closed).toBe(4000); + host.send({ type: 'end' }); await host.closed; + }); + + test('a host resuming a room the server lost is told so', async () => { + const host = client({ role: 'host', pid: 'hostpid0004', name: 'H', code: 'QQQQQQ', secret: 'whatever-secret' }); + const hello = await host.next('hello'); + expect(hello.lost).toBe(true); + expect(hello.code).not.toBe('QQQQQQ'); + host.send({ type: 'end' }); await host.closed; + }); + + test('voice presence floods are dropped', async () => { + const host = client({ role: 'host', pid: 'hostpid0005', name: 'H' }); + const { code } = await host.next('hello'); + const g = client({ role: 'guest', pid: 'guestpid0006', key: 'k'.repeat(36), name: 'G', code }); + await g.next('hello'); host.drain('members'); + for (let i = 0; i < 400; i++) g.send({ type: 'voice', on: i % 2 === 0 }); + await Bun.sleep(300); + let n = 0; try { for (;;) { await host.next('members', 50); n++; } } catch { /* drained */ } + expect(n).toBeLessThanOrEqual(41); + host.send({ type: 'end' }); await host.closed; + }); +});