Pager: a large clip shows its frame under the tap-to-play cover

The slide's poster was fixed when the pager was built, and a clip over
budget held no source, so a clip whose frame was kept a moment later (or
never) was a black screen with a button. Now the kept frame is looked up
as a slide comes near; without one, the clip's first frame is loaded
under the cover (only the start of the file, when it leads with its
index or is served in ranges) and kept for next time. A tap plays it
from the start.

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

1 files changed, 19 insertions, 1 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index a0e9f96..e0e1d05 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -9939,6 +9939,7 @@ export function messagesFeature(ctx) {
     const slides = [...pager.scroller.children];
     const i = slides.indexOf(slide);
     slides.forEach((s, j) => {
+      if (Math.abs(j - i) <= 2) slidePoster(s);
       if (j === i) return;
       const v = s.querySelector('video.mp-media');
       if (j === i + 1) {
@@ -9961,7 +9962,16 @@ export function messagesFeature(ctx) {
       if (!pager || pager.cur !== slide) return;
       if (videoHeavy(url)) {
         if (slide.querySelector('.vid-heavy')) return;
-        pagerRelease(slide);
+        // under the cover, a picture of what it is: the kept frame, else the
+        // first frame itself (only the start of the file, when it leads with
+        // its index or is served in ranges)
+        slidePoster(slide);
+        const d = videoInfo.get(url) || {};
+        if (!videoThumbs.has(url) && (d.faststart || d.ranges || !d.probed)) {
+          v.preload = 'metadata';
+          v.addEventListener('loadeddata', () => setTimeout(() => keepVideoThumb(v, url), 150), { once: true });
+          v.setAttribute('src', url + '#t=0.1');
+        } else pagerRelease(slide);
         slide.append(h('button', { class: 'vid-heavy', type: 'button', 'aria-label': t('videoTapToPlay'), onClick: (e) => {
           e.stopPropagation();
           tappedClips.add(url);
@@ -9973,8 +9983,16 @@ export function messagesFeature(ctx) {
       startSlide(slide);
     });
   }
+  // the kept frame as the poster, looked up as the slide comes near (it may
+  // have been kept after the slide was built)
+  function slidePoster(slide) {
+    const v = slide.querySelector('video.mp-media');
+    const thumb = v && videoThumbs.get(v.getAttribute('data-src'));
+    if (thumb && v.getAttribute('poster') !== thumb) v.setAttribute('poster', thumb);
+  }
   function startSlide(slide) {
     const v = slide.querySelector('video.mp-media');
+    if (/#t=[\d.]+$/.test(v.getAttribute('src') || '')) v.setAttribute('src', v.getAttribute('data-src')); // the still's src: from the start now
     v.preload = 'auto';
     pagerAttach(slide);
     v.muted = !pagerLoud;