1 files changed, 95 insertions, 5 deletions
diff --git a/src/features/messages.js b/src/features/messages.js
index 1c74526..9bf1a09 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -12449,9 +12449,85 @@ export function messagesFeature(ctx) {
         h('button', { class: 'mp-x', type: 'button', 'aria-label': t('close'), onClick: (e) => { e.stopPropagation(); dismissPager(); } }, '×'),
         video ? h('button', { class: 'mp-sound', type: 'button', onClick: (e) => { e.stopPropagation(); pagerSound(!pagerLoud); } },
           h('span', { class: 'on' }, '\u{1F50A}'), h('span', { class: 'off' }, '\u{1F507} ' + t('videoUnmute'))) : null));
-    // a tap shows (or hides) who posted it and what they said
+    // A touch is the pager's to judge, not the browser's. Left to native
+    // scrolling, a tap whose finger moved a few pixels was taken for a
+    // scroll (no click: a tap meant to pause a clip did nothing), and a quick
+    // one flung the pager on to the next slide. So the pager holds the slides
+    // still until a touch has gone TAP_SLOP: short of that it's a tap (done
+    // here if the browser sent no click). Past it, the slides follow the
+    // finger along the way it set off — up and down post to post, across
+    // within a post — and on letting go go on to the next if the finger went
+    // a fifth of the way or flicked, else back.
+    const TAP_SLOP = 30, SWIPE_FRAC = 0.2, FLICK = 0.3, FLICK_MIN = 48; // px; of the screen; px/ms; px
+    let touch = null, pendingTap = 0, tapDoneAt = 0;
+    el.addEventListener('touchstart', (e) => {
+      const t = e.touches[0];
+      const img = e.target.closest && e.target.closest('img.mp-media');
+      // not a touch on the seek bar, in an opened caption, or on a picture zoomed in (each its own)
+      touch = e.touches.length === 1 && pager && !e.target.closest('.mp-seek, .mp-caption.open') && !(img && img.style.touchAction === 'none')
+        ? { x: t.clientX, y: t.clientY, at: Date.now(), slide: pager.cur, target: e.target } : null;
+    }, { passive: true });
+    el.addEventListener('touchmove', (e) => {
+      const d = touch;
+      if (!d || e.touches.length !== 1) { if (d && d.box) settle(d, 0); touch = null; return; }
+      if (e.cancelable) e.preventDefault();
+      const t = e.touches[0], dx = t.clientX - d.x, dy = t.clientY - d.y;
+      if (!d.axis) {
+        if (Math.hypot(dx, dy) < TAP_SLOP) return;
+        d.axis = Math.abs(dx) > Math.abs(dy) ? 'x' : 'y';
+        d.box = d.axis === 'y' ? pager.scroller : d.slide && d.slide.parentElement;
+        if (!d.box) { touch = null; return; }
+        d.start = d.axis === 'y' ? d.box.scrollTop : d.box.scrollLeft;
+        d.box.style.scrollSnapType = 'none'; // following the finger: no snapping under it
+        d.track = [];
+      }
+      const delta = d.axis === 'y' ? dy : dx;
+      if (d.axis === 'y') d.box.scrollTop = d.start - delta; else d.box.scrollLeft = d.start - delta;
+      d.track.push({ t: performance.now(), v: delta }); // (when handled: synthetic moves can share a timeStamp)
+      if (d.track.length > 5) d.track.shift();
+    }, { passive: false });
+    // let go of a drag: on to the next (or the one before), or back
+    function settle(d, step) {
+      const box = d.box, y = d.axis === 'y';
+      const size = (y ? box.clientHeight : box.clientWidth) || 1;
+      const last = Math.max(0, Math.round(((y ? box.scrollHeight : box.scrollWidth) - size) / size));
+      const to = Math.min(last, Math.max(0, Math.round(d.start / size) + step));
+      box.scrollTo({ [y ? 'top' : 'left']: to * size, behavior: 'smooth' });
+      clearTimeout(box._snapBack);
+      box._snapBack = setTimeout(() => { box.style.scrollSnapType = ''; }, 450);
+    }
+    el.addEventListener('touchend', (e) => {
+      const d = touch;
+      touch = null;
+      if (!d || e.touches.length || !pager) return;
+      const t = e.changedTouches[0];
+      if (d.box) {
+        const delta = d.axis === 'y' ? t.clientY - d.y : t.clientX - d.x;
+        const size = d.axis === 'y' ? d.box.clientHeight : d.box.clientWidth;
+        const a = d.track[0], b = d.track[d.track.length - 1];
+        const vel = a && b && b.t > a.t ? (b.v - a.v) / (b.t - a.t) : 0;
+        const go = Math.abs(delta) > size * SWIPE_FRAC || (Math.abs(delta) >= FLICK_MIN && Math.abs(vel) > FLICK && Math.sign(vel) === Math.sign(delta));
+        settle(d, go ? (delta < 0 ? 1 : -1) : 0);
+        return;
+      }
+      if (Date.now() - d.at > 500) return; // a press, not a tap
+      clearTimeout(pendingTap);
+      pendingTap = setTimeout(() => {
+        pendingTap = 0;
+        tapDoneAt = Date.now();
+        const btn = d.target.closest && d.target.closest('button, a');
+        if (btn) btn.click(); else pagerTap(d.target);
+      }, 120);
+    }, { passive: true });
+    el.addEventListener('touchcancel', () => { if (touch && touch.box) settle(touch, 0); touch = null; }, { passive: true });
     el.addEventListener('click', (e) => {
-      if (e.target.closest('button, a, .mp-caption, .mp-seek, .mp-tail')) return;
+      if (pendingTap) { clearTimeout(pendingTap); pendingTap = 0; } // the browser's click came: it's the tap
+      else if (Date.now() - tapDoneAt < 700) { e.stopPropagation(); e.preventDefault(); return; } // done already
+      pagerTap(e.target);
+    });
+    // a tap shows (or hides) who posted it and what they said
+    function pagerTap(target) {
+      if (target.closest('button, a, .mp-caption, .mp-seek, .mp-tail')) return;
       if (Date.now() - videoTapAt < 800) return; // the click of the touch that opened it
       if (pager && video) {
         // A clip (from the feed or the media grid): a tap anywhere but the
@@ -12476,7 +12552,7 @@ export function messagesFeature(ctx) {
       }
       el.classList.toggle('show');
       if (el.classList.contains('show')) pagerCounts(pager && pager.cur);
-    });
+    }
     pager = { el, scroller, kind: want.kind, keys: new Set(), cur: null, feed: want.feed, fromFeed: !!want.fromFeed, start: want.start, at: want.at || 0 };
     // The end of the pager: swiping past the last slide lands here, on
     // something saying more is coming (not a nudge that goes nowhere) — and
@@ -12641,8 +12717,22 @@ export function messagesFeature(ctx) {
       // up and down: the next post, or the one before; left and right: along this post's row
       const v = ['ArrowDown', 'j', 'PageDown'].includes(e.key) ? 1 : ['ArrowUp', 'k', 'PageUp'].includes(e.key) ? -1 : 0;
       const hz = ['ArrowRight', 'l'].includes(e.key) ? 1 : ['ArrowLeft', 'h'].includes(e.key) ? -1 : 0;
-      if (v) { e.preventDefault(); pager.scroller.scrollBy({ top: v * pager.scroller.clientHeight, behavior: 'smooth' }); return; }
-      if (hz) { e.preventDefault(); const row = pager.onTail ? null : pager.cur && pager.cur.parentElement; if (row) row.scrollBy({ left: hz * row.clientWidth, behavior: 'smooth' }); return; }
+      // to the slide (or post) next to the one on screen — named, not "a
+      // screen further", which from a scroll still settling landed short
+      const here = pagerSlides().find((x) => { const r = x.getBoundingClientRect(); return Math.abs(r.left) < r.width / 2 && Math.abs(r.top) < r.height / 2; }) || pager.cur;
+      if (v) {
+        e.preventDefault();
+        const from = pager.onTail || !here ? pager.tail : here.closest('.mp-group');
+        const to = from && (v > 0 ? from.nextElementSibling : from.previousElementSibling);
+        if (to) pager.scroller.scrollTo({ top: to.offsetTop, behavior: 'smooth' });
+        return;
+      }
+      if (hz) {
+        e.preventDefault();
+        const to = !pager.onTail && here && (hz > 0 ? here.nextElementSibling : here.previousElementSibling);
+        if (to) here.parentElement.scrollTo({ left: to.offsetLeft, behavior: 'smooth' });
+        return;
+      }
       if (e.key === ' ' && pager.cur) {
         const v = pager.cur.querySelector('video.mp-media');
         if (v) { e.preventDefault(); if (v.paused) v.play().catch(() => {}); else v.pause(); }