1 files changed, 28 insertions, 6 deletions

diff --git a/tools/media-moments-feed-test.js b/tools/media-moments-feed-test.js
index f2d2774..7b429c9 100644
--- a/tools/media-moments-feed-test.js
+++ b/tools/media-moments-feed-test.js
@@ -135,15 +135,19 @@ try {
   check('published audio waveform renders in the actual feed', true);
   await page.evaluate(() => { const a = document.querySelector('.note-audio audio'); a.pause(); a.currentTime = 5; });
   await sleep(100);
-  await page.evaluate(() => document.querySelectorAll('.note-audio .media-moment-actions button')[1].click());
+  // the post's own Like carries where the clip is: no buttons of its own for that
+  const act = (sel, label) => page.evaluate(([sel, label]) => document.querySelector(sel).closest('[data-zap-post]').querySelector('.note-acts [aria-label="' + label + '"]').click(), [sel, label]);
+  check('no "at this time" buttons', await page.evaluate(() => !document.body.innerText.includes('at this time')));
+  await act('.note-audio', 'Like');
   await page.waitForSelector('.msg-sheet');
   await page.evaluate(() => document.querySelector('.msg-sheet button').click());
   await sleep(400);
   const reaction = await page.evaluate(() => window.__relayGuard.events.find(e => e.kind === 7 && e.tags.some(t => t[0] === 'media')));
   check('reaction is signed with the selected file and position', reaction?.tags.some(t => t[0] === 'media' && t[2] === '5'));
   check('reaction marker appears while paused', await page.evaluate(() => !!document.querySelector('.note-audio .media-mark')));
+  check('...on the bar at its moment', await page.evaluate(() => { const m = document.querySelector('.note-audio .media-mark'); return Math.abs(parseFloat(m.style.left) - 5 / document.querySelector('.note-audio audio').duration * 100) < 0.5; }));
   await page.screenshot({ path: '/tmp/media-timeline-playing.png' });
-  await page.evaluate(() => document.querySelector('.note-audio .media-moment-actions button').click());
+  await act('.note-audio', 'Reply');
   await page.waitForSelector('.thread-reply-input');
   check('timestamp is visible in the reply composer', (await page.evaluate(() => document.body.innerText)).includes('Comment at 0:05'));
   await page.evaluate(() => { const input = document.querySelector('.thread-reply-input'); input.value = 'Great moment'; input.dispatchEvent(new Event('input', { bubbles: true })); });
@@ -156,15 +160,33 @@ try {
   await page.waitForFunction(() => document.querySelector('.note-audio audio')?.currentTime >= 5);
   check('the comment link starts playback at its timestamp', true);
   await click('back'); await sleep(250);
-  await page.evaluate(() => document.querySelector('video.note-video').play());
-  await page.waitForSelector('.note-video-box .media-moment-actions');
-  await page.evaluate(() => { const v = document.querySelector('video.note-video'); v.pause(); v.currentTime = 1; });
+  // a clip in the pager: its ♥ carries the moment, which then sits on its seek bar
+  await page.evaluate(() => { const v = document.querySelector('video.note-video'); const r = v.getBoundingClientRect();
+    v.dispatchEvent(new MouseEvent('click', { bubbles: true, clientX: r.left + r.width / 2, clientY: r.top + r.height / 3 })); });
+  await page.waitForSelector('.media-pager .mp-cur video', { timeout: 8000 });
+  await page.waitForFunction(() => document.querySelector('.media-pager .mp-cur video').duration > 0, { timeout: 8000 });
+  await page.evaluate(() => { const v = document.querySelector('.media-pager .mp-cur video'); v.pause(); v.currentTime = 1; });
   await sleep(150);
-  await page.evaluate(() => document.querySelectorAll('.note-video-box .media-moment-actions button')[1].click());
+  await page.evaluate(() => document.querySelector('.media-pager .mp-cur .mp-like').click());
   await page.waitForSelector('.msg-sheet');
   await page.evaluate(() => document.querySelector('.msg-sheet button').click());
   await sleep(300);
   check('video reaction carries the video URL and selected second', await page.evaluate(() => window.__relayGuard.events.some(e => e.kind === 7 && e.tags.some(t => t[0] === 'media' && t[1].endsWith('.mp4') && t[2] === '1'))));
+  check('...and shows over the pager\'s seek bar', await page.waitForFunction(() => !!document.querySelector('.media-pager .mp-cur .mp-seek .mp-mark'), { timeout: 3000 }).then(() => true, () => false));
+  check('no timeline panel over the pager', await page.evaluate(() => !document.querySelector('.media-pager .media-timeline')));
+  await page.screenshot({ path: '/tmp/media-timeline-pager.png' });
+  // back in the feed: the clip has a moment now, so the moments bar is its
+  // only seek bar (no player controls), with the middle button to play it
+  await page.keyboard.press('Escape'); await sleep(500);
+  await page.evaluate(() => { const v = document.querySelector('video.note-video'); v.pause(); v.dispatchEvent(new Event('timeupdate')); });
+  await sleep(200);
+  const one = await page.evaluate(() => { const v = document.querySelector('video.note-video'); const b = v.closest('.note-video-box'); const tl = b.querySelector('.media-timeline');
+    return { controls: v.controls, own: b.classList.contains('own-bar'), bar: !!tl && getComputedStyle(tl).display !== 'none', mark: !!b.querySelector('.media-mark'), pp: getComputedStyle(b.querySelector('.vid-pp')).display }; });
+  check('in the feed, a clip with a moment has one seek bar: the moments bar, no player controls', !one.controls && one.own && one.bar && one.mark, JSON.stringify(one));
+  check('...and the middle button plays it, on a touch screen too', one.pp === 'flex', JSON.stringify(one));
+  const vid2 = await page.evaluate(() => { const b = document.querySelector('.note-video-box .vid-pp').getBoundingClientRect(); return { x: b.x + b.width / 2, y: b.y + b.height / 2 }; });
+  await page.mouse.click(vid2.x, vid2.y); await sleep(600);
+  check('...which plays it in place', await page.evaluate(() => !document.querySelector('video.note-video').paused && !document.querySelector('.media-pager')));
   check('no browser exceptions', errs.length === 0, errs.join(' | '));
   await page.screenshot({ path: '/tmp/media-timeline-feed.png' });
 } finally { await browser.close(); server.stop(); }