1 files changed, 74 insertions, 10 deletions
diff --git a/src/features/messages.js b/src/features/messages.js
index 1f728e5..65507b0 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -1,3 +1,4 @@
+import { mediaMoment, momentTags, readMoment, mediaClock, mediaTimeline } from '../media-timeline.js';
 import { mediaServers } from '../media-servers.js';
 // Messages — Concord community chat (CORD-01..05) + NIP-17 private DMs.
 //
@@ -4507,7 +4508,56 @@ export function messagesFeature(ctx) {
 
   // Where an event about a note goes. A zap receipt is money and has its own
   // bookkeeping (see below); a like and a boost are just tallies of who.
+  const timedActivity = new Map();
+  function rememberMoment(ev) {
+    const moment = readMoment(ev);
+    if (!moment || ![1, 1111, 7, 9735, 9737].includes(ev.kind)) return;
+    const target = ev.tags.filter(x => x[0] === 'e' && x[3] !== 'mention').at(-1)?.[1];
+    if (!target) return;
+    if (!timedActivity.has(target)) timedActivity.set(target, new Map());
+    const items = timedActivity.get(target);
+    if (items.has(ev.id)) return;
+    items.set(ev.id, { id: ev.id, ev, moment,
+      icon: ev.kind === 7 ? ev.content || '♡' : [9735, 9737].includes(ev.kind) ? '⚡' : '↩',
+      text: [9735, 9737].includes(ev.kind) ? zapText(ev) : ev.content });
+    if (items.size > 300) items.delete(items.keys().next().value);
+    if (timedActivity.size > 200) timedActivity.delete(timedActivity.keys().next().value);
+    queueMicrotask(() => document.querySelectorAll('audio, video').forEach(v => { if (v._timeline) v.dispatchEvent(new Event('mediaactivity')); }));
+  }
+  function attachMediaTimeline(player, url, explicitEvent) {
+    if (player._timeline) return;
+    player._timeline = true;
+    const event = () => {
+      const ev = explicitEvent || noteInHand(player.closest('[data-zap-post]')?.getAttribute('data-zap-post'));
+      return ev && (String(ev.content || '').includes(url) || ev.tags.some(tag => tag.includes('url ' + url) || tag[1] === url)) ? ev : null;
+    };
+    const box = player.parentElement;
+    box._skipMorph = true;
+    box.append(mediaTimeline(player, url, { h, event, label: t,
+      moments: (id, file) => [...(timedActivity.get(id)?.values() || [])]
+        .filter(x => x.moment.url === mediaMoment(file, 0)?.url && !hiddenPk(x.ev.pubkey) && !isDeleted(x.ev))
+        .sort((a, b) => a.moment.seconds - b.moment.seconds)
+        .map(x => ({ ...x, text: displayName(x.ev.kind === 9735 || x.ev.kind === 9737 ? zapperOf(x.ev) || x.ev.pubkey : x.ev.pubkey) + ' · ' + String(x.text || x.icon).slice(0, 240) })),
+      action: (kind, ev, moment, button) => {
+        if (signinAsk()) return;
+        if (kind === 'comment') {
+          player.pause();
+          if (pager) leavePager();
+          replyToNote(ev, moment);
+        } else if (kind === 'reaction') {
+          ui.reactPick = { ...ev, mediaMoment: moment }; render();
+        } else {
+          if (wallet.watchOnly) { zapLockedAsk(); return; }
+          if (pager && !(ctx.zapDefaultSat && ctx.zapDefaultSat())) leavePager();
+          zapNote(ev.pubkey, ev, button.getBoundingClientRect(), moment);
+          recheckZap(ev.id);
+        }
+      },
+    }));
+    player.dispatchEvent(new Event('timeupdate'));
+  }
   function noteEvent(ev) {
+    rememberMoment(ev);
     if (ev.kind === 1 || ev.kind === 1111) { noteReply(ev); return; }
     if (EDIT_KINDS.includes(ev.kind)) { notePostEdit(ev); return; }
     if (ev.kind === 7 || ev.kind === 6) {
@@ -4545,6 +4595,7 @@ export function messagesFeature(ctx) {
   // root and reply (or the bare positional e tags of older clients), NIP-22's
   // E and e. A 'mention' e tag is a quote, not a reply.
   function noteReply(ev) {
+    rememberMoment(ev);
     let changed = false;
     for (const x of ev.tags || []) {
       if (!x[1] || x[1] === ev.id) continue;
@@ -4565,6 +4616,7 @@ export function messagesFeature(ctx) {
   }
 
   function noteReceipt(ev) {
+    rememberMoment(ev);
     const sats = receiptSats(ev);
     if (!sats) return;
     const my = myPubkeys();
@@ -8069,7 +8121,7 @@ export function messagesFeature(ctx) {
       preload: 'none', playsinline: true, muted: loud ? undefined : true,
       style: stable ? videoBoxStyle(feedMedia(url)) : undefined,
       // learned now, used by the next paint of any row with this clip
-      onLoadedmetadata: (e) => rememberVideo(url, e.target.videoWidth, e.target.videoHeight),
+      onLoadedmetadata: (e) => { rememberVideo(url, e.target.videoWidth, e.target.videoHeight); attachMediaTimeline(e.target, url); },
       // a touch's tap was taken at pointerup (below): its click, if one comes, is spent
       onClick: (e) => { if (Date.now() - (e.currentTarget._tapAt || 0) < 800) { e.stopPropagation(); e.preventDefault(); return; } videoTap(e, url); },
       onError: (e) => { if (!stable && !(e.target.getAttribute('src') || '').startsWith(VMEDIA)) { const b = e.target.parentElement; if (b) b.style.display = 'none'; } } });
@@ -10004,6 +10056,7 @@ export function messagesFeature(ctx) {
         h('span', { class: 'note-audio-ico', 'aria-hidden': 'true' }, '\u{1F3A7}'),
         h('a', { href: url, target: '_blank', rel: 'noopener noreferrer', class: 'small muted note-audio-name' }, name)),
       h('audio', {
+        onLoadedmetadata: e => attachMediaTimeline(e.target, url),
         controls: true, preload: 'none', src: url,
         onPlay: (e) => { const box = e.target.closest('.note-audio'); if (box) box._skipMorph = true; },
       }));
@@ -10400,15 +10453,15 @@ export function messagesFeature(ctx) {
     ui.screen = 'accounts';
     render();
   }
-  function zapNote(pk, ev, origin) {
+  function zapNote(pk, ev, origin, moment = null) {
     const npubStr = npubOf(pk);
     const def = ctx.zapDefaultSat ? ctx.zapDefaultSat() : 0;
     if (!def) { // the first tap ever sets the amount; the reader's place is kept for the way back
       let scrollY = 0; try { scrollY = window.scrollY || 0; } catch {}
-      ui.zapSetup = { pk, npub: npubStr, eventId: ev.id, amount: '21', origin, scrollY }; render(); return;
+      ui.zapSetup = { pk, npub: npubStr, eventId: ev.id, amount: '21', origin, scrollY, moment }; render(); return;
     }
     markZapPending(ev.id, def, origin); // strike now; settlement only corrects the tally
-    if (!hook('zapNpub', pk, npubStr, ev.id, def) && !hook('lnZapNpub', pk, npubStr, ev.id, def)) {
+    if (!hook('zapNpub', pk, npubStr, ev.id, def, moment) && !hook('lnZapNpub', pk, npubStr, ev.id, def, moment)) {
       settleZap(ev.id, false);
       toast('⚡ ' + t('lnZapFailed'), 4000);
     }
@@ -10450,7 +10503,7 @@ export function messagesFeature(ctx) {
       const { pk, npub, eventId } = s;
       closeZapSetup();
       markZapPending(eventId, n, s.origin);
-      if (!hook('zapNpub', pk, npub, eventId, n) && !hook('lnZapNpub', pk, npub, eventId, n)) {
+      if (!hook('zapNpub', pk, npub, eventId, n, s.moment) && !hook('lnZapNpub', pk, npub, eventId, n, s.moment)) {
         settleZap(eventId, false);
         toast('⚡ ' + t('lnZapFailed'), 4000);
       }
@@ -10504,13 +10557,14 @@ export function messagesFeature(ctx) {
   // A like is kind 7 on the note (NIP-25). Tapping it again withdraws it the
   // only way nostr has: a deletion request for the reaction we sent.
   // Reply: open (or re-aim) the thread and put the cursor in the box.
-  function replyToNote(ev) {
+  function replyToNote(ev, moment = null) {
     if (ui.noteThread && ui.noteThread.rootId === rootIdOf(ev)) {
       ui.noteThread.focusId = ev.id;
       ui.noteThread.seed = ev;
     } else ui.noteThread = { rootId: rootIdOf(ev), focusId: ev.id, seed: ev };
     const s = ui.noteThread;
     ui.profOverThread = false;
+    s.mediaMoment = moment;
     s.replying = true; // the box appears under this note
     s.scrollPending = false; // focus the composer, without a competing note scroll
     s.refocus = true;
@@ -10654,7 +10708,7 @@ export function messagesFeature(ctx) {
     const id = await requireIdentity();
     const partial = {
       kind: 7, content: emoji || '❤️', created_at: Math.floor(Date.now() / 1000),
-      tags: [['e', ev.id], ['p', ev.pubkey], ...reactEmojiTags(emoji), CLIENT_TAG],
+      tags: [['e', ev.id], ['p', ev.pubkey], ...momentTags(ev.mediaMoment), ...reactEmojiTags(emoji), CLIENT_TAG],
     };
     const evt = id.signer instanceof Uint8Array ? finalizeEvent(partial, id.signer) : await id.signer.signEvent(partial);
     myReactEv.set(ev.id, evt.id);
@@ -11830,6 +11884,12 @@ export function messagesFeature(ctx) {
         : foreign
           ? h('div', { class: 'note-text small muted', style: 'white-space:pre-wrap;overflow-wrap:anywhere' }, (ev.kind === 64 ? '\u265f ' : '') + altText)
           : h('div', { class: 'note-text', style: 'white-space:pre-wrap;overflow-wrap:anywhere' }, ...(ev.kind === ARTICLE ? (open ? [articleCard(ev)] : articleBody(ev)) : noteBody(shownTranslation(ev)?.text ?? noteText(ev), 0, noteEmojiTags(ev)))),
+        readMoment(ev) ? h('a', { class: 'small media-time-link', href: readMoment(ev).url + '#t=' + readMoment(ev).seconds, target: '_blank', rel: 'noopener noreferrer', onClick: e => {
+          e.stopPropagation();
+          const m = readMoment(ev);
+          const player = [...document.querySelectorAll('audio, video')].find(v => mediaMoment(v.dataset.clip || v.getAttribute('src'), 0)?.url === m.url);
+          if (player) { e.preventDefault(); const seek = () => { player.currentTime = Math.min(m.seconds, Number.isFinite(player.duration) ? player.duration : m.seconds); }; if (player.readyState) seek(); else player.addEventListener('loadedmetadata', seek, { once: true }); player.play().catch(() => {}); player.scrollIntoView({ block: 'center' }); }
+        } }, '▶ ' + mediaClock(readMoment(ev).seconds)) : null,
         foreign || pending ? null : translateLine(ev),
         ev.kind === POLL ? pollBox(ev) : null,
         pending ? null : noteActions(pk, ev, { canZap }),
@@ -12183,6 +12243,8 @@ export function messagesFeature(ctx) {
         CLIENT_TAG,
       ],
     };
+    note.tags.push(...momentTags(s.mediaMoment));
+    if (s.mediaMoment) note.content = '[' + mediaClock(s.mediaMoment.seconds) + '] ' + note.content;
     const evt = id.signer instanceof Uint8Array ? finalizeEvent(note, id.signer) : await id.signer.signEvent(note);
     const relays = [...new Set([...(await notesRelays(target.pubkey)), ...wallet.nostrRelays()])];
     const ok = await publishOn(relays, evt);
@@ -12249,6 +12311,7 @@ export function messagesFeature(ctx) {
       class: 'col thread-reply' + (joined ? ' joined' : ''),
       style: 'gap:8px;margin:0 -8px;padding:' + (joined ? '2px' : '8px') + ' 8px 10px;background:var(--accent-soft,rgba(128,128,128,.08));border-radius:' + (joined ? '0 0 8px 8px' : '8px'),
     },
+      s.mediaMoment ? h('div', { class: 'small muted' }, t('mediaCommentAt') + ' ' + mediaClock(s.mediaMoment.seconds)) : null,
       s.preview ? draftPreview(s.draft) : null,
       mediaBar(),
       // A textarea that grows with the reply, like the chat composer: Enter
@@ -12314,7 +12377,7 @@ export function messagesFeature(ctx) {
         previewBtn(!!s.preview, () => { s.preview = !s.preview; render(); }),
         h('button', {
           class: 'btn-ghost btn-sm thread-reply-cancel', type: 'button',
-          onClick: () => { s.replying = false; s.preview = false; render(); },
+          onClick: () => { s.replying = false; s.preview = false; s.mediaMoment = null; render(); },
         }, t('cancel'))),
       h('button', {
         class: 'btn-primary btn-sm thread-reply-send', disabled: !!s.sending || !!ui.postUploading,
@@ -12330,7 +12393,7 @@ export function messagesFeature(ctx) {
             // focused field's value — clear it by hand
             const inp = document.querySelector('.thread-reply-input');
             if (inp) inp.value = '';
-            s.replying = false; s.preview = false; // sent: the box folds away
+            s.replying = false; s.preview = false; s.mediaMoment = null; // sent: the box folds away
             toast(t('threadReplied'));
           } catch (e) { if (!e.silent) toast(e.message); }
           s.sending = false; render();
@@ -14306,6 +14369,7 @@ export function messagesFeature(ctx) {
       media.muted = !pagerLoud;
       media.addEventListener('click', () => {}); // a tap is the pager's (overlay), not the player's
       slide.append(seekBar(media));
+      media.addEventListener('loadedmetadata', () => attachMediaTimeline(media, url, ev));
     }
     return slide;
   }
@@ -17890,7 +17954,7 @@ export function messagesFeature(ctx) {
       stCache = null; stAt = 0; // the next account's state, not this one's
       if (profFlush) { clearTimeout(profFlush); flushProfiles(); } // this account's faces, written before the blob is dropped
       profBlob = null;
-      reacts.clear(); boosts.clear(); seenNoteEv.clear(); myReactEv.clear(); quoted.clear();
+      timedActivity.clear(); reacts.clear(); boosts.clear(); seenNoteEv.clear(); myReactEv.clear(); quoted.clear();
       noteCountsReady.clear();
       // what happened to THEIR posts stays with them — the next identity
       // starts its list empty and asks the relays under its own key