Streams: one our live server has ended reads ended, whatever its last announcement says (an app closed mid-stream never says so, and it read live for an hour with no way to stop it); its host gets End — on the stream and on their profile — which publishes the ended announcement with the recording. Each announcement is now newer than the last to the second (an ended stamped the same second as the live before it lost to it). A recording that is a web page (zap.stream's Rumble links) gets a Watch the recording link instead of a player that can't play it.

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

3 files changed, 75 insertions, 6 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index c82670b..b39bd02 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -54,7 +54,7 @@ import { SIGNER_SILENT } from '../dm.js';
 import { cacheStorage, onCacheReady, cacheIsReady } from '../cache-store.js';
 import { dlog } from '../debug.js';
 import { createCalls, openCall, wrapCall, CALL_WRAP, RING_S } from '../calls.js';
-import { LIVE_KIND, LIVE_CHAT_KIND, LIVE_RELAYS, liveAddr, liveHost, liveTitle, liveSummary, liveImage, liveViewers, liveStarts, liveStream, liveRecording, liveStatus, isLiveNow, liveRelays, newestByAddr, zapLine, setZapAddr } from '../live.js';
+import { LIVE_KIND, LIVE_CHAT_KIND, LIVE_RELAYS, liveAddr, liveHost, liveTitle, liveSummary, liveImage, liveViewers, liveStarts, liveStream, liveRecording, liveStatus as announcedStatus, isLiveNow as isLiveAnnounced, liveRelays, newestByAddr, zapLine, setZapAddr } from '../live.js';
 import { qrSvg } from '../qr.js';
 
 // The coinos community's join material lives in ../community.js — shared
@@ -8514,6 +8514,50 @@ export function messagesFeature(ctx) {
   // who is on now (host -> their stream), for the rings round faces: worked
   // out again when a stream changes and every half minute (one goes stale)
   let liveHostsAt = 0, liveHosts = new Map();
+  // Our own live server knows better than an announcement: a stream it
+  // carries that it says is over (or taken down) is over, whatever its last
+  // 30311 claims — an app closed mid-stream never says `ended`, and the
+  // announcement reads live for an hour. Asked at most every 20 s a stream.
+  const OUR_LIVE = /^(https:\/\/v3\.coinos\.io|http:\/\/(localhost|127\.0\.0\.1)(:\d+)?)\/live\/[0-9a-f]{16}\/live\.m3u8$/;
+  const liveServerSays = new Map(); // stats url -> { state, seconds, at, asking }
+  function liveServerState(ev) {
+    const url = liveStream(ev) || '';
+    if (!OUR_LIVE.test(url)) return null;
+    const u = url.replace(/live\.m3u8$/, 'stats');
+    let k = liveServerSays.get(u);
+    if (!k) liveServerSays.set(u, k = { state: null, at: 0, asking: false });
+    if (!k.asking && Date.now() - k.at > 20_000) {
+      k.asking = true;
+      fetch(u, { cache: 'no-store' })
+        .then((r) => (r.status === 404 ? { state: 'ended' } : r.json()))
+        .then((j) => { const was = k.state; k.state = j.state || null; k.seconds = j.seconds; if (was !== k.state) { liveHostsAt = 0; scheduleRepaint(); } })
+        .catch(() => {}).finally(() => { k.asking = false; k.at = Date.now(); });
+    }
+    return k.state;
+  }
+  const serverOver = (ev) => { const st = liveServerState(ev); return st === 'ended' || st === 'removed'; };
+  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
+  // closed, reloaded, or lost it): end the announcement, its recording kept.
+  async function endAnnounced(ev) {
+    if (!confirm(t('goLiveEndAsk'))) return;
+    try {
+      const id = await requireIdentity();
+      if (id.pubkey !== ev.pubkey) { toast(t('liveNotYours')); return; }
+      const now = Math.floor(Date.now() / 1000);
+      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')]);
+      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]);
+      liveHostsAt = 0;
+      render();
+      await publishOn([...new Set([...LIVE_RELAYS, ...liveRelays(ev), ...wallet.nostrRelays()])], evt);
+    } catch (e) { toast(e.message || String(e)); }
+  }
   function liveHostNow(pk) {
     if (!liveSeen.size) return null;
     if (Date.now() - liveHostsAt > 30_000) {
@@ -8635,7 +8679,14 @@ export function messagesFeature(ctx) {
   function liveBanner(pk) {
     askLiveOf(pk);
     const ev = liveNowOf(pk);
-    if (!ev) return null;
+    if (!ev) {
+      // yours, still announced live, but nothing's going out: say so, and End it
+      const stale = pk === mePk() && !(bc && bc.phase === 'live') && [...liveSeen.values()]
+        .find((x) => x.pubkey === pk && liveHost(x) === pk && isLiveAnnounced(x) && serverOver(x));
+      return stale ? h('div', { class: 'live-banner', 'data-key': 'live-stale:' + liveAddr(stale) },
+        h('span', { class: 'live-banner-title' }, t('liveStaleMine', { title: liveTitle(stale) || t('liveUntitled') })),
+        h('button', { class: 'btn-sm live-end-stale', onClick: () => endAnnounced(stale) }, t('goLiveEnd'))) : null;
+    }
     return h('button', { type: 'button', class: 'live-banner', 'data-key': 'live-banner:' + liveAddr(ev), onClick: () => openLive(ev) },
       h('span', { class: 'live-badge live' }, t('liveBadge')),
       h('span', { class: 'live-banner-title' }, liveTitle(ev) || t('liveUntitled')),
@@ -8705,7 +8756,12 @@ export function messagesFeature(ctx) {
     stopLivePlayer(w);
   }
   // What to play: the stream while it's on, its recording once it's over.
-  const livePlayable = (ev) => (isLiveNow(ev) ? liveStream(ev) : liveStatus(ev) === 'ended' ? liveRecording(ev) : '');
+  // A recording is played here only when it's video (HLS, MP4, WebM); some
+  // services name a web page instead (zap.stream streams kept on Rumble), and
+  // 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) => (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).
@@ -8818,6 +8874,9 @@ export function messagesFeature(ctx) {
           mine ? h('button', { class: 'iconbtn chat-back', onClick: () => { if (confirm(t('goLiveEndAsk'))) endBroadcast(); } }, '‹')
             : backBtn(() => { ui.liveStream = null; }),
           h('h3', { class: 'live-title' }, liveTitle(ev) || t('liveUntitled')),
+          // yours, said to be on, but not going out from here: End it
+          !mine && ev.pubkey === mePk() && announcedStatus(ev) === 'live'
+            ? h('button', { class: 'btn-sm live-end-stale', onClick: () => endAnnounced(ev) }, t('goLiveEnd')) : null,
           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)),
@@ -8834,7 +8893,9 @@ export function messagesFeature(ctx) {
           src && !w.err
             ? h('div', { class: 'live-frame', 'data-key': 'live-frame:' + src },
                 h('video', { class: 'live-video', controls: '', playsinline: '', autoplay: '', poster: liveImage(ev) || undefined }))
-            : h('div', { class: 'live-cover live-still', 'data-key': 'live-still', style: liveCoverStyle(ev) }, h('span', { class: 'live-say' }, say))),
+            : h('div', { class: 'live-cover live-still', 'data-key': 'live-still', style: liveCoverStyle(ev) },
+                h('span', { class: 'live-say' }, say),
+                !src && liveRecordingPage(ev) ? h('a', { class: 'btn-sm live-rec-link', href: liveRecordingPage(ev), target: '_blank', rel: 'noopener noreferrer' }, t('liveWatchRecording')) : null)),
         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)),
@@ -9009,7 +9070,11 @@ export function messagesFeature(ctx) {
     if (status === 'live' && b.viewers != null) tags.push(['current_participants', String(b.viewers)]);
     if (status === 'ended') tags.push(['ends', String(Math.floor(Date.now() / 1000))]);
     if (status === 'ended' && b.recording) tags.push(['recording', b.recording]);
-    const partial = { kind: LIVE_KIND, content: '', created_at: Math.floor(Date.now() / 1000), tags };
+    // each copy newer than the last, to the second: an `ended` stamped the
+    // same second as the `live` before it lost to it (relays keep the lower
+    // id on a tie) and the stream read live for good
+    const prev = liveSeen.get(LIVE_KIND + ':' + id.pubkey + ':' + b.id);
+    const partial = { kind: LIVE_KIND, content: '', created_at: Math.max(Math.floor(Date.now() / 1000), prev ? prev.created_at + 1 : 0), tags };
     const evt = id.signer instanceof Uint8Array ? finalizeEvent(partial, id.signer) : await id.signer.signEvent(partial);
     takeLive([evt]);
     if (bc === b) b.ev = evt;
diff --git a/src/i18n.js b/src/i18n.js
index 998d233..e0d7aa5 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -463,6 +463,9 @@ const STR = {
     livePlanned: 'SOON',
     liveEnded: 'ENDED',
     livePast: 'Past streams',
+    liveWatchRecording: 'Watch the recording',
+    liveStaleMine: '“{title}” still says live, but nothing is going out.',
+    liveNotYours: 'Only the account that started this stream can end it.',
     liveRecordingBadge: 'RECORDING',
     liveUntitled: 'Live stream',
     liveWatching: '{n} watching',
diff --git a/src/style.css b/src/style.css
index 95ce04c..e462ad3 100644
--- a/src/style.css
+++ b/src/style.css
@@ -923,7 +923,8 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; }
 .live-player { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; }
 .live-frame { width: 100%; height: 100%; }
 .live-video { width: 100%; height: 100%; display: block; background: #000; }
-.live-still { border-radius: 0; height: 100%; display: flex; align-items: center; justify-content: center; }
+.live-still { border-radius: 0; height: 100%; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; }
+.live-rec-link { background: var(--paper); color: var(--ink); text-decoration: none; }
 .live-say { padding: 6px 12px; border-radius: 8px; color: #fff; background: rgba(0, 0, 0, .65); font-size: 14px; text-align: center; }
 /* the top padding is headroom for a hat on the first line's face: a scroller clips what rises out of it */
 .live-chat { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; padding-top: 12px; }