Videos on a desktop: moving the mouse over a playing clip brings the seek bar up, and it fades about 2 s after the mouse goes still (it stays while the pointer rests on the bar)

Co-Authored-By: Claude Opus 5.5 <[email protected]>

2 files changed, 22 insertions, 3 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index d09ad83..7be3630 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -14538,10 +14538,12 @@ export function messagesFeature(ctx) {
   // bar's alone, never the pager's swipe or its tap.
   const clock = (t) => { t = Math.max(0, Math.floor(t || 0)); const m = Math.floor(t / 60), x = t % 60; return m + ':' + String(x).padStart(2, '0'); };
   // up for a few seconds, and on while a finger is on it
-  function revealSeek(bar) {
+  // (a mouse brings it up by moving, so it goes sooner once the mouse is
+  // still, and stays while the pointer rests on the bar itself)
+  function revealSeek(bar, ms = 3500) {
     bar.classList.add('reveal');
     clearTimeout(bar._hide);
-    bar._hide = setTimeout(() => { if (bar._drag) revealSeek(bar); else bar.classList.remove('reveal'); }, 3500);
+    bar._hide = setTimeout(() => { if (bar._drag || bar._hover) revealSeek(bar, ms); else bar.classList.remove('reveal'); }, ms);
   }
   // What was said, reacted or zapped at a moment of the clip sits over the
   // bar at that moment (a tap goes there and says who and what), and floats
@@ -14551,6 +14553,8 @@ export function messagesFeature(ctx) {
     const time = h('span', { class: 'mp-seek-time' });
     const marks = h('div', { class: 'mp-marks' });
     const bar = h('div', { class: 'mp-seek' }, marks, h('div', { class: 'mp-seek-track' }, fill), time);
+    bar.addEventListener('pointerenter', (e) => { if (e.pointerType === 'mouse') bar._hover = true; });
+    bar.addEventListener('pointerleave', () => { bar._hover = false; });
     let items = [], sig = '', checked = 0, last = 0;
     const say = (x) => {
       time.textContent = clock(x.moment.seconds) + '  ' + x.text;
@@ -15358,6 +15362,13 @@ export function messagesFeature(ctx) {
       else if (Date.now() - tapDoneAt < 700) { e.stopPropagation(); e.preventDefault(); }
     }, true);
     el.addEventListener('click', (e) => pagerTap(e.target, e.clientY));
+    // On a desktop the bar comes up while the mouse moves over a playing
+    // clip and fades once it's been still a moment (Adam, 2026-10-22).
+    el.addEventListener('pointermove', (e) => {
+      if (e.pointerType !== 'mouse' || !pager || !video) return;
+      const bar = pager.cur && pager.cur.querySelector('.mp-seek.ready');
+      if (bar) revealSeek(bar, 2000);
+    });
     // a tap shows (or hides) who posted it and what they said
     function pagerTap(target, y) {
       if (target.closest('button, a, .mp-caption, .mp-seek')) return;
diff --git a/tools/pager-seek-hide-test.js b/tools/pager-seek-hide-test.js
index d5d527b..f25ff49 100644
--- a/tools/pager-seek-hide-test.js
+++ b/tools/pager-seek-hide-test.js
@@ -104,7 +104,15 @@ try {
   await page.mouse.click(195, 380);
   check('a tap mid-screen pauses the clip, and the bar is up', await waitFor(() => { const b = document.querySelector('.mp-slide.mp-cur .mp-seek'); return getComputedStyle(b).opacity === '1'; }, null, 2000) && !(await curBar()).playing, JSON.stringify(await curBar()));
   await page.mouse.click(195, 380);
-  check('…another plays it on, the bar gone', await waitFor(() => getComputedStyle(document.querySelector('.mp-slide.mp-cur .mp-seek')).opacity === '0', null, 2000) && (await curBar()).playing, JSON.stringify(await curBar()));
+  // (the test's mouse moved to click, which a desktop answers with the bar for a moment)
+  check('…another plays it on, the bar gone', await waitFor(() => getComputedStyle(document.querySelector('.mp-slide.mp-cur .mp-seek')).opacity === '0', null, 3500) && (await curBar()).playing, JSON.stringify(await curBar()));
+  // a mouse (a desktop) brings it up by moving, and it fades once the mouse is still
+  await page.waitForFunction(() => getComputedStyle(document.querySelector('.mp-slide.mp-cur .mp-seek')).opacity === '0', { timeout: 6000 }).catch(() => {});
+  for (let i = 0; i < 5; i++) { await page.mouse.move(150 + i * 20, 300 + i * 10); await sleep(60); }
+  check('a mouse moving over the clip brings the bar up, the clip playing on', await waitFor(() => getComputedStyle(document.querySelector('.mp-slide.mp-cur .mp-seek')).opacity === '1', null, 1500) && (await curBar()).playing, JSON.stringify(await curBar()));
+  const stillAt = Date.now();
+  check('…and it fades once the mouse is still', await waitFor(() => getComputedStyle(document.querySelector('.mp-slide.mp-cur .mp-seek')).opacity === '0', null, 4000), JSON.stringify(await curBar()));
+  check('…a couple of seconds later, not the tap\'s longer wait', Date.now() - stillAt < 3200, (Date.now() - stillAt) + ' ms');
   await page.mouse.click(195, 844 - 70); // up again, for the glide
   check('the pager is not marked moving', await page.evaluate(() => !document.querySelector('.media-pager').classList.contains('moving')));
   check('the position counter has faded out', await waitFor(() => +getComputedStyle(document.querySelector('.mp-position')).opacity < 0.01, null, 4000), String(await counterOpacity()));