Videos start the moment a swipe lands, and streams say who's watching.

- The pager's next clip gets a warm player: once its opening is in the cache it reads to its first frame (preload metadata: Chrome stops ~2-4 MB in at real link speeds) and waits paused, so landing on it is only play and sound. coinosPagerStarts() in the console times every landing (swipe to moving picture, warm or cold, host, size).
- A stream's "N watching" names who on hover, and a tap shows their faces: NIP-53 presence (kind 10312, as Shosho and zap.stream say it), fresh for half an hour. coinos says it too while a stream is open (every 5 min, with a key held here only, never for your own stream) and takes it back on leaving.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_013ZDf1cyCQLkfjftYhymZAg

4 files changed, 120 insertions, 9 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index 094de0d..dadd084 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -8911,8 +8911,57 @@ export function messagesFeature(ctx) {
     w.stops.push(subscribeOn(relays, { kinds: [LIVE_CHAT_KIND, 9735, 9737], '#a': [s.a], limit: 200 }, add));
     w.stops.push(subscribeOn(relays, { kinds: [7, 5], '#a': [s.a], limit: 1000 }, e => takeLiveAction(w, e)));
     w.stops.push(subscribeOn(relays, { kinds: [LIVE_KIND], authors: [pk], '#d': [d] }, (e) => { if (takeLive([e])) scheduleRepaint(); }));
+    // who's here: NIP-53 presence (kind 10312, the stream in its a tag) —
+    // Shosho, zap.stream and others say it, and so do we while it's open
+    w.here = new Map(); // pubkey -> when they last said so
+    w.stops.push(subscribeOn(relays, { kinds: [PRESENCE_KIND], '#a': [s.a], since: Math.floor(Date.now() / 1000) - PRESENCE_FRESH }, (e) => {
+      if (liveWatch !== w || (w.here.get(e.pubkey) || 0) >= e.created_at) return;
+      w.here.set(e.pubkey, e.created_at);
+      scheduleRepaint();
+    }));
+    sayHere(w);
     return w;
   }
+  // Presence counts for half an hour (some clients say it once, on joining);
+  // ours is said again every five minutes while the stream is open, and
+  // taken back (an empty one) on leaving. Only with a key held here: a
+  // signer app would be asked to sign every five minutes.
+  const PRESENCE_KIND = 10312, PRESENCE_FRESH = 1800;
+  async function presence(w, here) {
+    const id = await identity().catch(() => null);
+    if (!id || !(id.signer instanceof Uint8Array) || isVisitor()) return;
+    const ev = liveSeen.get(w.a);
+    if (here && (!ev || liveHost(ev) === id.pubkey || !isLiveNow(ev))) return; // not for your own, nor one that's over
+    const evt = finalizeEvent({ kind: PRESENCE_KIND, created_at: Math.floor(Date.now() / 1000), content: '',
+      tags: here ? [['a', w.a, w.relays[0] || '', 'root'], CLIENT_TAG] : [CLIENT_TAG] }, id.signer);
+    if (here) { w.here.set(evt.pubkey, evt.created_at); scheduleRepaint(); w.said = true; }
+    publishOn(w.relays, evt).catch(() => {});
+  }
+  function sayHere(w) {
+    presence(w, true);
+    w.hereTimer = setInterval(() => { if (liveWatch === w) presence(w, true); }, 5 * 60_000);
+  }
+  // the people known to be watching (fresh presence), newest first
+  const watchersOf = (w) => {
+    const since = Date.now() / 1000 - PRESENCE_FRESH;
+    return w && w.here ? [...w.here].filter(([, at]) => at >= since).sort((a, b) => b[1] - a[1]).map(([pk]) => pk) : [];
+  };
+  // "4 watching": hover names who (as many as are known), a tap shows their faces
+  function watchingLine(w, n, cls = 'small muted') {
+    const who = watchersOf(w);
+    const names = who.slice(0, 30).map((pk) => displayName(pk)).join(', ') + (who.length > 30 ? '…' : '');
+    return h('span', { class: cls + (who.length ? ' live-watching has-who' : ' live-watching'), title: who.length ? names : undefined,
+      role: who.length ? 'button' : undefined,
+      onClick: who.length ? (e) => { e.stopPropagation(); w.showWho = !w.showWho; render(); } : undefined },
+      t('liveWatching', { n: Math.max(n || 0, who.length) }));
+  }
+  function watchersRow(w) {
+    const who = watchersOf(w);
+    if (!w || !w.showWho || !who.length) return null;
+    return h('div', { class: 'live-who', 'data-key': 'live-who' },
+      ...who.slice(0, 60).map((pk) => h('button', { type: 'button', class: 'live-who-p', 'data-key': 'who:' + pk, title: displayName(pk), onClick: () => openProfile(pk) },
+        avatar(pk, 'chat-avatar mini', false), h('span', { class: 'small' }, displayName(pk)))));
+  }
   // Include reactions/receipts from clients that only tag the comment's e,
   // plus deletions of known reactions. Batch changes into one subscription.
   function watchLiveActions(w) {
@@ -9028,6 +9077,8 @@ export function messagesFeature(ctx) {
     if (w.actionStop) w.actionStop();
     if (w.sheet) ui.emojiPick = null;
     for (const stop of w.stops) { try { stop(); } catch {} }
+    clearInterval(w.hereTimer);
+    if (w.said) presence(w, false); // gone
     stopLivePlayer(w);
   }
   // What to play: the stream while it's on, its recording once it's over.
@@ -9222,7 +9273,7 @@ export function messagesFeature(ctx) {
           liveBadge(ev)),
         mine ? h('div', { class: 'row gap6 bc-bar', style: 'align-items:center' },
           h('span', { class: 'bc-clock' }, clockOf(Date.now() / 1000 - bc.starts)),
-          h('span', { class: 'small muted' }, t('liveWatching', { n: bc.viewers || 0 })),
+          watchingLine(w, bc.viewers || 0),
           bc.reconnecting ? h('span', { class: 'small', style: 'color:var(--red)' }, t('goLiveReconnecting'))
             : bc.behind ? h('span', { class: 'small', style: 'color:var(--red)' }, t('goLiveBehind')) : null,
           // camera ⇄ screen, without stopping the stream
@@ -9244,7 +9295,7 @@ export function messagesFeature(ctx) {
         h('div', { class: 'row gap6', style: 'align-items:center;flex-wrap:wrap' },
           avatar(host, 'chat-avatar mini'),
           h('a', { href: '#', class: 'quote-name', onClick: (e) => { e.preventDefault(); openProfile(host); } }, displayName(host)),
-          n != null && status === 'live' ? h('span', { class: 'small muted' }, t('liveWatching', { n })) : null,
+          n != null && status === 'live' ? watchingLine(w, n) : null,
           h('span', { style: 'margin-left:auto' }),
           canZapPk(host) ? h('button', { class: 'btn-sm', onClick: (e) => { setZapAddr(ev.id, s.a); zapNote(host, ev, e.currentTarget.getBoundingClientRect()); } }, '⚡ ' + t('liveZap')) : null,
           // ours to answer for: anyone signed in can report it, an admin can take it down
@@ -9260,6 +9311,7 @@ export function messagesFeature(ctx) {
             const url = location.origin + '/' + packNaddr(s.a);
             try { if (navigator.share) await navigator.share({ url }); else { await navigator.clipboard.writeText(url); toast(t('copied')); } } catch {}
           } }, h('span', { style: 'display:flex', html: '<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.6 13.5 6.8 4M15.4 6.5l-6.8 4"/></svg>' }))),
+        watchersRow(w),
         liveSummary(ev) ? h('div', { class: 'small muted', style: 'white-space:pre-wrap;overflow-wrap:anywhere' }, liveSummary(ev).slice(0, 600)) : null,
         ui.liveReport && ui.liveReport.a === s.a ? liveReportPanel(ev) : null),
       h('div', { class: 'card col', style: 'gap:8px' },
@@ -14516,8 +14568,20 @@ export function messagesFeature(ctx) {
       if (j === i) return;
       const v = s.querySelector('video.mp-media');
       if (eager && k >= 0) {
+        // the next clip: a player of its own, warm — once its opening is in
+        // the cache, given the file to read up to its first frame (preload
+        // 'metadata': Chrome reads ~2 s of it and stops) and paused there,
+        // so the swipe onto it is only play and sound (TikTok's trick). The
+        // others ahead get their opening only.
+        if (k === 0 && v.getAttribute('src')) return; // warm already
         pagerRelease(s);
-        headStart(playSrc(v.getAttribute('data-src')), k === 0 ? 1 : 0.5);
+        const head = headStart(playSrc(v.getAttribute('data-src')), k === 0 ? 1 : 0.5);
+        if (k === 0) head.then(() => {
+          if (!pager || !s.isConnected || pager.cur === s || v.getAttribute('src') || pagerAhead(pager.cur)[0] !== s) return;
+          v.preload = 'metadata';
+          v.muted = true;
+          pagerAttach(s);
+        });
         return;
       }
       if (k === 0) {
@@ -14716,6 +14780,7 @@ export function messagesFeature(ctx) {
       else v.addEventListener('loadedmetadata', () => { try { v.currentTime = at; } catch {} }, { once: true });
     }
     v.muted = !pagerLoud;
+    clockStart(slide, v);
     v.play().catch((err) => {
       // sound needs a tap the browser counted: play quietly, the button says so
       if (err && err.name === 'NotAllowedError' && !v.muted) {
@@ -14725,6 +14790,35 @@ export function messagesFeature(ctx) {
       }
     });
   }
+  // How long from landing on a clip to its picture moving, kept for the
+  // last hundred (coinosPagerStarts() in the console, and dlog), with what
+  // shape the player was in when the swipe landed (warm: it had its frame).
+  const pagerStarts = [];
+  function clockStart(slide, v) {
+    const t0 = slide._arriveAt;
+    slide._arriveAt = 0;
+    if (!t0) return;
+    const url = v.getAttribute('data-src') || '', warm = v.readyState >= 2;
+    const d = videoInfo.get(url) || {};
+    let host = ''; try { host = new URL(url).hostname; } catch {}
+    const done = () => {
+      const ms = Math.round(performance.now() - t0);
+      pagerStarts.push({ ms, warm, host, mb: d.size ? +(d.size / 1e6).toFixed(1) : null, faststart: d.faststart ?? null, src: (v.getAttribute('src') || '').startsWith(VMEDIA) ? 'copy' : 'original', url });
+      if (pagerStarts.length > 100) pagerStarts.shift();
+      dlog('pager start', ms + ' ms', warm ? 'warm' : 'cold', host);
+    };
+    const tick = () => {
+      if (!v.isConnected || performance.now() - t0 > 20000) return;
+      if (v.currentTime > 0 && !v.paused) { done(); return; }
+      if (v.requestVideoFrameCallback) v.requestVideoFrameCallback(tick); else requestAnimationFrame(tick);
+    };
+    tick();
+  }
+  if (typeof window !== 'undefined') window.coinosPagerStarts = () => {
+    const ms = pagerStarts.map((x) => x.ms).sort((a, b) => a - b);
+    const q = (f) => ms.length ? ms[Math.min(ms.length - 1, Math.floor(f * ms.length))] : null;
+    return { n: ms.length, median: q(0.5), p90: q(0.9), max: ms.at(-1) ?? null, warm: pagerStarts.filter((x) => x.warm).length, starts: pagerStarts.slice() };
+  };
   function pagerSound(on) {
     pagerLoud = on;
     if (!pager) return;
@@ -15133,6 +15227,7 @@ export function messagesFeature(ctx) {
       pager.cur = slide;
       pager.anchor = slide;
       pager.curAt = Date.now();
+      slide._arriveAt = performance.now();
       pagerSharpen(slide);
       pagerArrows(slide);
       pagerPosition();
diff --git a/src/style.css b/src/style.css
index e8a5379..4a5661e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1984,3 +1984,6 @@ html:has(.call-overlay:not(.call-min)) { overflow: hidden; scrollbar-gutter: aut
 
 .media-moment-detail { overflow-wrap: anywhere; max-height: 72px; overflow-y: auto; margin-top: 5px; }
 .media-moment-detail:empty { display: none; }
+.live-watching.has-who { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
+.live-who { display: flex; flex-wrap: wrap; gap: 6px; }
+.live-who-p { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--bg2, rgba(127,127,127,.12)); border: 0; color: inherit; cursor: pointer; }
diff --git a/tools/live-stream-test.js b/tools/live-stream-test.js
index 46fb7e9..ef76043 100644
--- a/tools/live-stream-test.js
+++ b/tools/live-stream-test.js
@@ -55,6 +55,9 @@ const pastPage = finalizeEvent({ kind: 30311, created_at: now - 50000, content:
   ['d', 'stream-p'], ['title', 'Zelda on Rumble'], ['status', 'ended'], ['streaming', STREAM], ['recording', 'https://rumble.com/v7gt2va-zelda.html'],
   ['ends', String(now - 50000)], ['p', HOST.pk, '', 'Host'],
 ] }, SERVICE.sk);
+// who's watching (NIP-53 presence): the fan, just now; someone two hours ago is gone
+const here = finalizeEvent({ kind: 10312, created_at: now - 60, content: '', tags: [['a', A, '', 'root']] }, FAN.sk);
+const longGone = finalizeEvent({ kind: 10312, created_at: now - 7200, content: '', tags: [['a', A, '', 'root']] }, STALE.sk);
 const reaction = finalizeEvent({kind:7,created_at:now-10,content:'👍',tags:[['e',chat.id],['p',FAN.pk],['k','1311']]},HOST.sk);
 const messageZap = finalizeEvent({kind:9737,created_at:now-9,content:'nice comment',tags:[['e',chat.id],['p',FAN.pk],['P',HOST.pk],['amount','5'],['network','regtest']]},HOST.sk);
 // and months of older ones, past the first ask's month: the grid pages back through them
@@ -62,7 +65,7 @@ const OLD = Array.from({ length: 130 }, (_, i) => finalizeEvent({ kind: 30311, c
   ['d', 'old-' + i], ['title', 'Old stream ' + i], ['status', 'ended'], ['streaming', STREAM], ['recording', STREAM],
   ['ends', String(now - 31 * 86400 - i * 3600)], ['p', HOST.pk, '', 'Host'],
 ] }, SERVICE.sk));
-const FIXTURES = [live, stale, past, pastPage, chat, zap, reaction, messageZap, ...OLD];
+const FIXTURES = [live, stale, past, pastPage, chat, zap, reaction, messageZap, here, longGone, ...OLD];
 const ended = finalizeEvent({ ...live, id: undefined, sig: undefined, created_at: now - 5, tags: live.tags.map((x) => (x[0] === 'status' ? ['status', 'ended'] : x)) }, SERVICE.sk);
 
 // the site as built (the split build: hls.js arrives as its own chunk)
@@ -206,6 +209,11 @@ try {
   // a stream that's on plays through hls.js (kept near the live edge), not Chrome's own player
   check('...through hls.js, kept near the live edge', await page.evaluate(() => document.querySelector('video.live-video').currentSrc.startsWith('blob:')));
   check('the chat shows what was said', await waitText('hello from the chat', 8000));
+  const who = () => page.evaluate(() => { const x = document.querySelector('.live-page .live-watching'); return x && { text: x.textContent, title: x.getAttribute('title') || '' }; });
+  check('"watching" names who, on hover: the fan and this viewer, not someone long gone', await waitFor(() => (document.querySelector('.live-page .live-watching')?.getAttribute('title') || '').split(', ').length === 2, 8000), JSON.stringify(await who()));
+  check('...this viewer said they\'re here (a 10312 for the stream)', await page.evaluate((a) => window.__published.some((e) => e.kind === 10312 && e.tags.some((t) => t[0] === 'a' && t[1] === a)), A));
+  await page.evaluate(() => document.querySelector('.live-page .live-watching').click());
+  check('...a tap shows their faces', await waitFor(() => document.querySelectorAll('.live-page .live-who .live-who-p').length === 2, 3000));
   check('...and the zap, its amount and words', await waitText('zapped 21 sats', 5000) && await waitText('great stream', 1000));
   const rowSel = '.live-message[data-key="' + chat.id + '"]';
   check('comments use the group-chat bubble and shared composer', await page.$(rowSel + ' .chat-bubble') && await page.$('.live-page coinos-text#msg-draft'));
@@ -253,6 +261,7 @@ try {
   console.log('\n[leaving]');
   await page.goBack();
   check('Back leaves the stream\'s page', await waitFor(() => !document.querySelector('.live-page'), 5000));
+  check('...and takes back this viewer\'s presence (an empty 10312)', await waitFor(() => window.__published.some((e) => e.kind === 10312 && !e.tags.some((t) => t[0] === 'a')), 3000));
   check('...and nothing plays on behind it', await page.evaluate(() => [...document.querySelectorAll('video')].every((v) => v.paused || !v.isConnected)));
   await page.evaluate(() => document.querySelector('.media-mode[data-mode="all"]').click());
   await waitFor(() => !!document.querySelector('.notes-feed .live-card'), 5000);
diff --git a/tools/pager-eager-test.js b/tools/pager-eager-test.js
index 15a5076..01c8dd6 100644
--- a/tools/pager-eager-test.js
+++ b/tools/pager-eager-test.js
@@ -88,7 +88,7 @@ async function run(saveData, slow = false) {
   const feedRow = (w) => page.evaluate((x) => { const r = [...document.querySelectorAll('.notes-feed [data-key]')].find((n) => n.textContent.includes(x)); r.querySelector('.note-video-box').scrollIntoView({ block: 'center' }); const v = r.querySelector('video.note-video').getBoundingClientRect(); return { cover: !!r.querySelector('.vid-heavy'), x: v.x + v.width * 0.2, y: v.y + v.height * 0.3 }; }, w);
   try {
     await page.setViewport({ width: 390, height: 844 });
-    pace = slow ? 375000 : 0;
+    pace = slow ? 375000 : 12_500_000; // 3 Mbps, or 100 (a loopback's speed is no link: Chrome reads a warm player's whole file before it can stop)
     await page.goto(server.url.href, { waitUntil: 'domcontentloaded' });
     await page.evaluate(() => localStorage.setItem('btc-wallet-network', 'regtest'));
     await page.reload({ waitUntil: 'domcontentloaded' }); await sleep(400);
@@ -123,14 +123,17 @@ async function run(saveData, slow = false) {
     const c1 = await slide('c1'), c2 = await slide('c2'), c3 = await slide('c3');
     let head1 = 0;
     if (!saveData) {
-      check('the next clips wait on their pictures, no cover, no player yet', c1 && !c1.src && !c1.cover && c2 && !c2.src, JSON.stringify([c1, c2]));
+      check('the next clip has a warm player: its file, read to its first frame and paused', c1 && c1.src && c1.preload === 'metadata' && !c1.playing && !c1.cover && await page.evaluate(() => { const s = [...document.querySelectorAll('.mp-slide')].find((x) => x.getAttribute('data-k').endsWith('/c1.webm')); return s.querySelector('video.mp-media').readyState >= 2; }), JSON.stringify(c1));
+      check('…the one after waits on its picture, no player yet', c2 && !c2.src && !c2.cover, JSON.stringify(c2));
       const hs = heads('c1'), h2 = heads('c2');
       head1 = hs.length ? hs[0].end + 1 : 0;
       const head2 = h2.length ? h2[0].end + 1 : 0;
       // before any measure of the link: two seconds' worth (the second clip ahead, half)
       check('the next clip\'s opening is fetched ahead: two seconds of it', hs.length === 1 && hs[0].start === 0 && near(head1, 2 * RATE), `${kb(head1)} (two seconds: ${kb(2 * RATE)})`);
       check('…and half that of the one after', h2.length === 1 && near(head2, RATE), `${kb(head2)}`);
-      check('nothing more than that ahead of time', sent('c1') <= head1 && sent('c2') <= head2 && sent('c3') === 0, `c1 ${kb(sent('c1'))}, c2 ${kb(sent('c2'))}, c3 ${kb(sent('c3'))} of ${kb(SIZE)} each`);
+      // the warm player reads on from the cached opening to its first frame and a little past, then stops
+      check('ahead of time: the next clip\'s opening and a few MB more for its warm player, the one after its opening only', sent('c1') <= head1 + 4 * 1024 * 1024 && sent('c2') <= head2 && sent('c3') === 0, `c1 ${kb(sent('c1'))}, c2 ${kb(sent('c2'))}, c3 ${kb(sent('c3'))} of ${kb(SIZE)} each`);
+      check('…the warm player took the opening from the cache, not the host', !log.some((e) => e.clip === 'c1' && e.dest === 'video' && e.start === 0), log.filter((e) => e.clip === 'c1').map((e) => e.dest + ':' + e.start).join(' '));
     } else {
       check('nothing loads ahead of a clip over budget', c1 && !c1.src && sent('c1') === 0, JSON.stringify(c1) + ' ' + kb(sent('c1')));
     }
@@ -139,8 +142,9 @@ async function run(saveData, slow = false) {
     const t0 = Date.now();
     if (!saveData) {
       check('swiped to, the next clip plays at once, no cover', await waitFor(() => { const s = [...document.querySelectorAll('.mp-slide')].find((x) => x.getAttribute('data-k').endsWith('/c1.webm')); const v = s.querySelector('video.mp-media'); return !s.querySelector('.vid-heavy') && !v.paused && v.currentTime > 0; }, null, 5000) && (Date.now() - t0) < (slow ? 3000 : 1500), (Date.now() - t0) + ' ms');
-      const after = log.slice(before).filter((e) => e.clip === 'c1' && e.dest === 'video');
-      check('…its player starting where the head start left off (the opening came from the cache)', after.length >= 1 && after[0].start === head1, 'the player asked for ' + (after.map((e) => e.start + '-').join(', ') || 'nothing') + ', head start ' + head1);
+      await waitFor(() => coinosPagerStarts().starts.some((x) => /c1\.webm$/.test(x.url)), null, 3000);
+      const st = await page.evaluate(() => coinosPagerStarts().starts.find((x) => /c1\.webm$/.test(x.url)));
+      check('…from its warm player, the clock says', st && st.warm && st.ms < 1000, JSON.stringify(st));
       await sleep(1500);
       const h3 = heads('c3'), head3 = h3.length ? h3[0].end + 1 : 0;
       check('…the next one gets its head start', h3.length === 1);