Streams: Delete recording, and Past streams that scroll on.

- **Delete recording:** your own ended stream's page has the button. The live server lets the recording go, and the stream is announced again without it, so other apps drop the link too. A deleted one leaves Past streams and says the streamer deleted it.
- **Admin:** the Take down button no longer shows on the admin's own streams.
- **Past streams** scroll on: 24 at a time as the grid's foot comes near, then older ones from the relays (before the oldest held), until a page brings nothing. They're no longer cut off at a month.

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

4 files changed, 120 insertions, 18 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index 969f0c1..1f728e5 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -8539,7 +8539,9 @@ export function messagesFeature(ctx) {
     }
     return k.state;
   }
-  const serverOver = (ev) => { const st = liveServerState(ev); return st === 'ended' || st === 'removed'; };
+  // taken down by an admin, or deleted by its streamer: nothing to play
+  const serverGone = (ev) => { const st = liveServerState(ev); return st === 'removed' || st === 'deleted'; };
+  const serverOver = (ev) => liveServerState(ev) === 'ended' || serverGone(ev);
   const liveStatus = (ev, now) => { const st = announcedStatus(ev, now); return st === 'live' && serverOver(ev) ? 'ended' : st; };
   const isLiveNow = (ev, now) => isLiveAnnounced(ev, now) && !serverOver(ev);
   // Your own stream announced live that this tab isn't sending (the app was
@@ -8553,7 +8555,7 @@ export function messagesFeature(ctx) {
       const tags = ev.tags.filter((x) => !['status', 'current_participants', 'ends', 'recording', 'client'].includes(x[0]))
         .concat([['status', 'ended'], ['ends', String(now)], CLIENT_TAG]);
       const k = liveServerSays.get((liveStream(ev) || '').replace(/live\.m3u8$/, 'stats'));
-      if (OUR_LIVE.test(liveStream(ev)) && k && k.state !== 'removed' && (k.seconds || 0) >= 6) tags.push(['recording', liveStream(ev).replace(/live\.m3u8$/, 'index.m3u8')]);
+      if (OUR_LIVE.test(liveStream(ev)) && k && k.state !== 'removed' && k.state !== 'deleted' && (k.seconds || 0) >= 6) tags.push(['recording', liveStream(ev).replace(/live\.m3u8$/, 'index.m3u8')]);
       const partial = { kind: LIVE_KIND, content: ev.content || '', created_at: Math.max(now, ev.created_at + 1), tags };
       const evt = id.signer instanceof Uint8Array ? finalizeEvent(partial, id.signer) : await id.signer.signEvent(partial);
       takeLive([evt]);
@@ -8609,6 +8611,28 @@ export function messagesFeature(ctx) {
       render();
     } catch (e) { toast(e.message || String(e)); }
   }
+  // Your own stream's recording, deleted: the server lets its files go, and the
+  // announcement is said again without it (other apps drop the link too).
+  async function deleteRecording(ev) {
+    if (!confirm(t('liveDeleteAsk'))) return;
+    try {
+      const id = await requireIdentity();
+      if (id.pubkey !== ev.pubkey) { toast(t('liveNotYours')); return; }
+      await livePost('/live/' + ourStreamId(ev) + '/delete', {});
+      const k = liveServerSays.get(liveStream(ev).replace(/live\.m3u8$/, 'stats'));
+      if (k) { k.state = 'deleted'; k.at = Date.now(); }
+      const now = Math.floor(Date.now() / 1000);
+      const tags = ev.tags.filter((x) => !['status', 'current_participants', 'recording', 'client'].includes(x[0]))
+        .concat([['status', 'ended'], CLIENT_TAG]);
+      if (!tags.some((x) => x[0] === 'ends')) tags.push(['ends', String(now)]);
+      const evt = await signAsMe({ kind: LIVE_KIND, content: ev.content || '', created_at: Math.max(now, ev.created_at + 1), tags });
+      takeLive([evt]);
+      liveHostsAt = 0;
+      publishOn([...new Set([...liveRelays(ev), ...LIVE_RELAYS, ...wallet.nostrRelays()])], evt).catch(() => {});
+      toast(t('liveDeleted'));
+      render();
+    } catch (e) { if (!(e instanceof NoIdentity)) toast(e.message || String(e)); }
+  }
   function liveHostNow(pk) {
     if (!liveSeen.size) return null;
     if (Date.now() - liveHostsAt > 30_000) {
@@ -8659,14 +8683,18 @@ export function messagesFeature(ctx) {
       .then((rs) => { if (takeLive(rs.flat())) scheduleRepaint(); })
       .finally(() => { pastAsking--; scheduleRepaint(); });
   }
-  const isPast = (ev) => liveStatus(ev) === 'ended' && !!liveRecording(ev) && ev.created_at >= pastSince() && liveServerState(ev) !== 'removed';
+  const isPast = (ev) => liveStatus(ev) === 'ended' && !!liveRecording(ev) && !serverGone(ev);
   const liveEndedAt = (ev) => +(ev.tags.find((x) => x[0] === 'ends') || [])[1] || ev.created_at;
-  function pastForFeed(def) {
+  const pastPeople = (def) => {
     const fol = followsNow().set;
     const people = def.all ? null : [...new Set([...feedAuthors(def), ...(def.follows ? fol : [])])];
-    if (people && !people.length) return [];
-    const ps = people && people.slice(0, 400);
-    askPast('feed:' + def.id, ps ? [{ authors: ps, limit: 200 }, { '#p': ps, limit: 200 }] : [{ limit: 300 }]);
+    return people && people.slice(0, 400);
+  };
+  const pastFilters = (ps, limit) => (ps ? [{ authors: ps, limit }, { '#p': ps, limit }] : [{ limit }]);
+  function pastForFeed(def) {
+    const ps = pastPeople(def);
+    if (ps && !ps.length) return [];
+    askPast('feed:' + def.id, pastFilters(ps, ps ? 200 : 300));
     const set = ps && new Set(ps);
     return [...liveSeen.values()]
       .filter((ev) => isPast(ev) && liveShowable(ev) && !liveNsfw(ev) && (!set || set.has(liveHost(ev)) || set.has(ev.pubkey)))
@@ -8695,17 +8723,54 @@ export function messagesFeature(ctx) {
     const s = liveStatus(ev);
     return h('span', { class: 'live-badge ' + s }, t(s === 'live' ? 'liveBadge' : s === 'planned' ? 'livePlanned' : 'liveEnded'));
   }
+  // Past streams scroll on: more tiles as the grid's foot comes near, and
+  // once those we hold run out, older ones from the relays (before the oldest
+  // asked so far) until a page brings nothing back.
+  const PAST_STEP = 24;
+  const pastPages = new Map(); // feed id -> { shown, until, end, busy }
+  const pastPage = (def) => { let p = pastPages.get(def.id); if (!p) pastPages.set(def.id, p = { shown: PAST_STEP, until: null, end: false, busy: false }); return p; };
+  function morePast() {
+    if (mediaMode !== 'live' || !ui.chatOpen || ui.msgView !== 'feed' || ui.profilePk || ui.noteThread || ui.liveStream) return;
+    const g = document.querySelector('.live-past') || document.querySelector('[data-key="live-past-wait"]');
+    if (!g || g.getBoundingClientRect().bottom > window.innerHeight * 2) return;
+    const def = feedDef(), p = pastPage(def), all = pastForFeed(def);
+    if (p.shown < all.length) { p.shown += PAST_STEP; scheduleRepaint(); return; }
+    if (p.end || p.busy || pastAsking) return;
+    const ps = pastPeople(def);
+    if (ps && !ps.length) { p.end = true; return; }
+    // older than the oldest we hold (the first ask's page may stop short of its month)
+    if (p.until == null) p.until = Math.min(Math.floor(Date.now() / 1000), ...all.map((e) => e.created_at));
+    p.busy = true;
+    scheduleRepaint();
+    Promise.all(pastFilters(ps, 100).map((f) => queryOn(LIVE_RELAYS, { kinds: [LIVE_KIND], until: p.until - 1, ...f }, 5000).catch(() => [])))
+      .then((rs) => {
+        const evs = rs.flat();
+        if (!evs.length) { p.end = true; return; }
+        p.until = Math.min(...evs.map((e) => e.created_at));
+        takeLive(evs);
+        p.shown += PAST_STEP;
+      })
+      .finally(() => { p.busy = false; scheduleRepaint(); setTimeout(morePast, 300); }); // still short of the screen: on
+  }
+  let pastScrollQueued = false;
+  if (typeof document !== 'undefined') document.addEventListener('scroll', () => {
+    if (pastScrollQueued || mediaMode !== 'live') return;
+    pastScrollQueued = true;
+    requestAnimationFrame(() => { pastScrollQueued = false; morePast(); });
+  }, { capture: true, passive: true });
   // the feed's Live chip: its streams on now, as a grid of tiles
   function liveGrid(def) {
     const evs = liveForFeed(def).slice(0, 60);
-    const past = pastForFeed(def).slice(0, 60);
+    const pp = pastPage(def);
+    const past = pastForFeed(def).slice(0, pp.shown);
+    setTimeout(morePast, 0); // a short grid fills the screen without a scroll
     return h('div', { class: 'col', style: 'gap:12px', 'data-key': 'live-view' },
       evs.length ? h('div', { class: 'live-grid', 'data-key': 'live-grid' }, ...evs.map(liveTile))
       : liveAsking ? h('div', { class: 'row gap6', 'data-key': 'live-empty', style: 'justify-content:center;padding:12px 0' }, h('span', { class: 'spinner sm' }))
       : h('div', { class: 'small faint', 'data-key': 'live-empty', style: 'text-align:center;padding:12px 0' }, t('mediaNoLive')),
       past.length ? h('h4', { class: 'live-past-title', 'data-key': 'live-past-title' }, t('livePast')) : null,
-      past.length ? h('div', { class: 'live-grid live-past', 'data-key': 'live-past' }, ...past.map(liveTile))
-      : pastAsking ? h('div', { class: 'row gap6', 'data-key': 'live-past-wait', style: 'justify-content:center;padding:8px 0' }, h('span', { class: 'spinner sm' })) : null);
+      past.length ? h('div', { class: 'live-grid live-past', 'data-key': 'live-past' }, ...past.map(liveTile)) : null,
+      pastAsking || pp.busy ? h('div', { class: 'row gap6', 'data-key': 'live-past-wait', style: 'justify-content:center;padding:8px 0' }, h('span', { class: 'spinner sm' })) : null);
   }
   // a stream's tile: on now (how many watch) or past (when it ended)
   function liveTile(ev) {
@@ -8923,7 +8988,7 @@ export function messagesFeature(ctx) {
   // that gets a link out — a player can't play a page.
   const videoFile = (u) => /\.(m3u8|mp4|m4v|webm|mov)(\?|#|$)/i.test(u || '');
   const liveRecordingPage = (ev) => { const u = liveRecording(ev); return u && !videoFile(u) ? u : ''; };
-  const livePlayable = (ev) => (liveServerState(ev) === 'removed' ? '' : isLiveNow(ev) ? liveStream(ev) : liveStatus(ev) === 'ended' && videoFile(liveRecording(ev)) ? liveRecording(ev) : '');
+  const livePlayable = (ev) => (serverGone(ev) ? '' : isLiveNow(ev) ? liveStream(ev) : liveStatus(ev) === 'ended' && videoFile(liveRecording(ev)) ? liveRecording(ev) : '');
   // The <video> is the page's own once it plays: Chrome takes the playlist as
   // its src; anywhere without HLS of its own, hls.js feeds it. The morph
   // leaves it alone from then on (it would strip the src hls.js set).
@@ -9080,7 +9145,7 @@ export function messagesFeature(ctx) {
     const lines = [...w.lines.values()].sort((a, b) => a.created_at - b.created_at).slice(-200).map(e => liveLine(e, w, reactions)).filter(Boolean);
     const draftKey = 'live:' + w.a;
     const reply = w.lines.get(w.reply);
-    const say = liveServerState(ev) === 'removed' ? t('liveRemoved') : w.err === 'offline' ? t('liveOffline') : w.err === 'noplayer' ? t('liveNoPlayer')
+    const say = liveServerState(ev) === 'removed' ? t('liveRemoved') : liveServerState(ev) === 'deleted' ? t('liveDeletedSay') : w.err === 'offline' ? t('liveOffline') : w.err === 'noplayer' ? t('liveNoPlayer')
       : !src ? (status === 'planned' ? t('liveStartsAt', { when: timeLabel(liveStarts(ev) * 1000) }) : t('liveOver')) : null;
     const send = () => {
       const text = draftFor(draftKey).trim();
@@ -9135,10 +9200,13 @@ export function messagesFeature(ctx) {
           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
-          ourStreamId(ev) && !mine && !isVisitor() && host !== mePk() && liveServerState(ev) !== 'removed'
+          ourStreamId(ev) && !mine && !isVisitor() && host !== mePk() && !serverGone(ev)
             ? h('button', { class: 'btn-sm live-report-btn', title: t('liveReport'), 'aria-label': t('liveReport'), onClick: () => { ui.liveReport = ui.liveReport ? null : { a: s.a, reason: null, text: '' }; render(); } }, '⚑') : null,
-          ourStreamId(ev) && mePk() === LIVE_ADMIN && liveServerState(ev) !== 'removed'
+          ourStreamId(ev) && mePk() === LIVE_ADMIN && host !== mePk() && !serverGone(ev)
             ? h('button', { class: 'btn-sm live-takedown', style: 'color:var(--red)', onClick: () => takeDown(ev) }, t('liveTakeDown')) : null,
+          // your own, over: its recording is yours to delete
+          ourStreamId(ev) && !mine && ev.pubkey === mePk() && status === 'ended' && !serverGone(ev)
+            ? h('button', { class: 'btn-sm live-delete', style: 'color:var(--red)', onClick: () => deleteRecording(ev) }, t('liveDelete')) : null,
           h('button', { class: 'btn-sm', title: t('postShare'), onClick: async () => {
             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 {}
diff --git a/src/i18n.js b/src/i18n.js
index 910cae4..f04dd82 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -481,6 +481,10 @@ const STR = {
     liveTakenDown: 'Taken down.',
     liveTakenDownBanned: 'Taken down, and the account can’t stream again.',
     liveRemoved: 'This stream was taken down.',
+    liveDelete: 'Delete recording',
+    liveDeleteAsk: 'Delete this stream’s recording? Nobody will be able to watch it again.',
+    liveDeleted: 'Recording deleted.',
+    liveDeletedSay: 'The streamer deleted this recording.',
     goLiveNewName: 'Your name can go live a day after you claimed it: from {when}.',
     goLiveBanned: 'This account can’t go live on coinos.',
     liveWatchRecording: 'Watch the recording',
diff --git a/tools/go-live-test.js b/tools/go-live-test.js
index 575f3ab..c3fc8e3 100644
--- a/tools/go-live-test.js
+++ b/tools/go-live-test.js
@@ -269,6 +269,16 @@ try {
   const endedEv = (await lives(page)).at(-1);
   check('...the same stream, with its recording', tag(endedEv, 'd') === tag(lost, 'd') && /index\.m3u8$/.test(tag(endedEv, 'recording') || ''), JSON.stringify(endedEv.tags));
   check('...and the End button goes', await waitFor(() => !document.querySelector('.live-end-stale'), 5000));
+
+  console.log('\n[deleting your recording]');
+  check('the streamer has Delete recording on their ended stream', await waitFor(() => !!document.querySelector('.live-delete'), 25000));
+  const n2 = (await lives(page)).length;
+  await page.evaluate(() => document.querySelector('.live-delete').click());
+  check('...deleting it says so, and the button goes', await waitFor(() => /deleted this recording/.test(document.body.innerText) && !document.querySelector('.live-delete'), 8000),
+    await page.evaluate(() => document.querySelector('.live-page')?.innerText.slice(0, 200)));
+  check('...the server has let it go (410)', (await fetch(tag(lost, 'streaming').replace('live.m3u8', 'index.m3u8'))).status === 410);
+  const redone = (await lives(page)).slice(n2).at(-1);
+  check('...and the stream is announced again, ended, with no recording', !!redone && tag(redone, 'd') === tag(lost, 'd') && tag(redone, 'status') === 'ended' && !redone.tags.some((x) => x[0] === 'recording'), JSON.stringify(redone && redone.tags));
   check('no page errors', !errs.length, errs.join(' | '));
 } catch (e) { console.error(e); ok = false; } finally {
   await browser.close(); server.stop(true); names.stop(true);
diff --git a/tools/live-stream-test.js b/tools/live-stream-test.js
index 440be36..4cd8337 100644
--- a/tools/live-stream-test.js
+++ b/tools/live-stream-test.js
@@ -57,7 +57,12 @@ const pastPage = finalizeEvent({ kind: 30311, created_at: now - 50000, content:
 ] }, SERVICE.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);
-const FIXTURES = [live, stale, past, pastPage, chat, zap, reaction, messageZap];
+// and months of older ones, past the first ask's month: the grid pages back through them
+const OLD = Array.from({ length: 130 }, (_, i) => finalizeEvent({ kind: 30311, created_at: now - 31 * 86400 - i * 3600, content: '', tags: [
+  ['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 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)
@@ -81,7 +86,7 @@ const relayStub = (fx) => {
   // a new event, to every open subscription it matches (a relay's live feed)
   window.__push = (e) => { for (const [ws, id, fs] of subs) if (ws.readyState === 1 && fs.some((f) => match(f, e))) ws.dispatchEvent(new MessageEvent('message', { data: JSON.stringify(['EVENT', id, e]) })); };
   const match = (f, e) => (!f.kinds || f.kinds.includes(e.kind)) && (!f.authors || f.authors.includes(e.pubkey))
-    && (!f.since || e.created_at >= f.since)
+    && (!f.since || e.created_at >= f.since) && (!f.until || e.created_at <= f.until)
     && Object.keys(f).filter((k) => k[0] === '#').every((k) => e.tags.some((x) => x[0] === k.slice(1) && f[k].includes(x[1])));
   const Real = window.WebSocket;
   window.WebSocket = function (...a) {
@@ -92,8 +97,9 @@ const relayStub = (fx) => {
         const m = JSON.parse(data);
         if (m[0] === 'REQ' && m[2]) {
           window.__reqs.push([a[0], ...m.slice(2)]);
-          subs.push([ws, m[1], m.slice(2).map((f) => ({ ...f, since: undefined, limit: undefined }))]);
-          const hits = [...fx, ...window.__published].filter((e) => m.slice(2).some((f) => match(f, e)));
+          subs.push([ws, m[1], m.slice(2).map((f) => ({ ...f, since: undefined, until: undefined, limit: undefined }))]);
+          // each filter its newest `limit`, as a relay answers
+          const hits = [...new Set(m.slice(2).flatMap((f) => [...fx, ...window.__published].filter((e) => match(f, e)).sort((x, y) => y.created_at - x.created_at).slice(0, f.limit || Infinity)))];
           if (hits.length) setTimeout(() => { for (const e of hits) ws.dispatchEvent(new MessageEvent('message', { data: JSON.stringify(['EVENT', m[1], e]) })); }, 0);
         }
         if (m[0] === 'EVENT' && m[1] && !window.__published.some(e => e.id === m[1].id)) { window.__published.push(m[1]); setTimeout(() => window.__push(m[1]), 0); }
@@ -168,6 +174,20 @@ try {
   check('...titled, marked LIVE, with how many watch and who', tile.length && /LIVE/.test(tile[0]) && /12 watching/.test(tile[0]) && /Building coinos live/.test(tile[0]), JSON.stringify(tile));
   check('past streams follow, the recording kept, its end time shown', await waitFor(() => [...document.querySelectorAll('.live-past .live-tile')].some((t) => /Yesterday on coinos/.test(t.innerText) && /RECORDING/.test(t.innerText)), 8000)
     && await page.evaluate(() => /Past streams/.test(document.body.innerText)));
+  console.log('\n[past streams scroll on]');
+  const pastCount = () => page.evaluate(() => document.querySelectorAll('.live-past .live-tile').length);
+  const first = await pastCount();
+  check('a page of them at first, not all', first > 0 && first <= 30, first + ' tiles');
+  let last = first;
+  for (let i = 0; i < 120 && !(await page.evaluate(() => document.body.innerText.includes('Old stream 129'))); i++) { // (this relay never says EOSE: each page waits out its 5 s)
+    await page.evaluate(() => window.scrollTo(0, document.documentElement.scrollHeight));
+    await sleep(250);
+    last = await pastCount();
+  }
+  check('scrolling down brings older ones, from the relays, back to the oldest', await page.evaluate(() => document.body.innerText.includes('Old stream 129')), last + ' tiles');
+  check('...asked for page by page (until the oldest so far)', await page.evaluate(() => window.__reqs.filter((r) => r.slice(1).some((f) => f.kinds && f.kinds.includes(30311) && f.until)).length >= 2));
+  check('...all of them there, once each', last === 132 && await page.evaluate(() => new Set([...document.querySelectorAll('.live-past .live-tile')].map((t) => t.dataset.key)).size === 132), last + ' tiles');
+  await page.evaluate(() => window.scrollTo(0, 0));
   check('...and a stream unrefreshed for two hours is not there', tile.length === 1 && !(await page.evaluate(() => document.body.innerText.includes('Forgotten stream'))));
   await page.evaluate(() => document.querySelector('.media-mode[data-mode="all"]').click());
   check('a post linking the stream shows it as a card', await waitFor(() => !!document.querySelector('.notes-feed .live-card'), 15000));