diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/features/messages.js | 34 |
1 files changed, 27 insertions, 7 deletions
diff --git a/src/features/messages.js b/src/features/messages.js index f24e935..2580ed9 100644 --- a/src/features/messages.js +++ b/src/features/messages.js @@ -7563,9 +7563,10 @@ export function messagesFeature(ctx) { // paused one comes back out. The player's controls are inside the video // element, so where they sit is judged from the tap's position. const fsElement = () => (typeof document !== 'undefined' && (document.fullscreenElement || document.webkitFullscreenElement)) || null; + let videoTapAt = 0; // a touch's tap on a clip, taken at pointerup: the click after it lands on whatever opened function videoTap(e, url) { const v = e.currentTarget; - if (!v || v.tagName !== 'VIDEO') return; + if (!v || v.tagName !== 'VIDEO') return false; const r = v.getBoundingClientRect(); const x = e.clientX - r.left, y = e.clientY - r.top; // a video's taps are its own: never the post's (which opened the thread @@ -7574,26 +7575,27 @@ export function messagesFeature(ctx) { const fs = fsElement() === v; // full screen, the video's box is the screen; its controls sit along the bottom const H = fs ? window.innerHeight : r.height, W = fs ? window.innerWidth : r.width; - if (v.controls && y > H - 64) return; // the control bar - if (v.controls && v.paused && Math.hypot(x - W / 2, y - H / 2) < 48) return; // the big play button + if (v.controls && y > H - 64) return false; // the control bar + if (v.controls && v.paused && Math.hypot(x - W / 2, y - H / 2) < 48) return false; // the big play button e.preventDefault(); if (fs) { if (!v.paused) v.pause(); else (document.exitFullscreen || document.webkitExitFullscreen || (() => {})).call(document)?.catch?.(() => {}); - return; + return true; } - if (openClip(v, url)) return; + if (openClip(v, url)) return true; // a clip still idle (autoplaying, no controls) becomes the reader's wokeClips.add(url); const box = v.closest('.note-video-box'); if (box) { box.classList.remove('idle'); box._skipMorph = true; } v.controls = true; const go = v.requestFullscreen || v.webkitRequestFullscreen || v.webkitEnterFullscreen; - if (!go) return; + if (!go) return true; Promise.resolve(go.call(v)).then(() => { // a wide clip fills a phone on its side if (v.videoWidth > v.videoHeight) screen.orientation?.lock?.('landscape').catch(() => {}); }).catch(() => {}); + return true; } if (typeof document !== 'undefined') document.addEventListener('fullscreenchange', () => { if (fsElement()) return; @@ -7616,9 +7618,26 @@ export function messagesFeature(ctx) { 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), - onClick: (e) => videoTap(e, 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'; } } }); guardPicture(v, url); + // With its own controls up, Chrome on Android keeps a tap on the clip for + // them (it shows or hides the bar) and the page never gets the click — so + // a full-screen tap on a clip that had been played did nothing. The + // pointer events still arrive: a touch that lifts where it went down, + // quickly, is the tap. + v.addEventListener('pointerdown', (e) => { + if (e.pointerType === 'mouse') return; + e.currentTarget._touch = { x: e.clientX, y: e.clientY, t: Date.now(), id: e.pointerId }; + }); + v.addEventListener('pointercancel', (e) => { e.currentTarget._touch = null; }); + v.addEventListener('pointerup', (e) => { + const el = e.currentTarget, d = el._touch; + el._touch = null; + if (!d || d.id !== e.pointerId || Date.now() - d.t > 500 || Math.hypot(e.clientX - d.x, e.clientY - d.y) > 12) return; + if (videoTap(e, url)) el._tapAt = videoTapAt = Date.now(); + }); v.muted = !loud; // the property, not just the attribute: a script-made element autoplays only muted const box = h('div', { class: 'note-video-box' + (idle ? ' idle' : '') }, v); if (loud) box._skipMorph = true; @@ -12174,6 +12193,7 @@ export function messagesFeature(ctx) { // a tap shows (or hides) who posted it and what they said el.addEventListener('click', (e) => { if (e.target.closest('button, a, .mp-caption, .mp-seek')) return; + if (Date.now() - videoTapAt < 800) return; // the click of the touch that opened it if (pager && pager.fromFeed && video) { // A clip opened from the feed: a tap pauses it and brings up who // posted it, the ×, the seek bar to grab; another plays it on. |
