aboutsummaryrefslogtreecommitdiffstats
path: root/src/features
diff options
context:
space:
mode:
authorAdam Soltys <[email protected]>2026-10-10 07:18:22 -0700
committerAdam Soltys <[email protected]>2026-10-10 07:18:22 -0700
commite6a65e9921bc0e61ea17459e4bd12f64baf0c3b8 (patch)
treeb5a0f488299f4b9b6f8b2e2f7d6593b2f018714f /src/features
parentf76191c9296b1d5110d0360dfb106e9276cdc859 (diff)
downloadcoinosv3-e6a65e9921bc0e61ea17459e4bd12f64baf0c3b8.tar.gz
coinosv3-e6a65e9921bc0e61ea17459e4bd12f64baf0c3b8.zip
Videos: a tap on the picture goes full screen. The corner full-screen button is a reach on a phone, so a tap anywhere on a feed clip — outside the player's own big play button and control bar, judged from the tap's position since those live inside the video element — now goes full screen (a wide clip asks for landscape). Full screen, a tap pauses a playing clip, and a tap on a paused one (again outside its play button and controls) comes back out. A video's taps no longer reach the post either: a tap on the player's controls used to open the thread, which in full screen took the player out from under the reader. tools/video-tap-test.js
Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01Vps2H27rhbG9ZqseGfMrc3
Diffstat (limited to 'src/features')
-rw-r--r--src/features/messages.js41
1 files changed, 41 insertions, 0 deletions
diff --git a/src/features/messages.js b/src/features/messages.js
index 358bd2e..a3452ee 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -7285,6 +7285,46 @@ export function messagesFeature(ctx) {
}
});
}
+ // A tap on the picture itself (not the player's own play button or its
+ // control bar): inline, it goes full screen — the corner button is a
+ // reach on a phone. Full screen, it pauses a playing clip, and a tap on a
+ // 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;
+ function videoTap(e, url) {
+ const v = e.currentTarget;
+ if (!v || v.tagName !== 'VIDEO') return;
+ 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
+ // and, full screen, took the player out from under the reader)
+ e.stopPropagation();
+ 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
+ e.preventDefault();
+ if (fs) {
+ if (!v.paused) v.pause();
+ else (document.exitFullscreen || document.webkitExitFullscreen || (() => {})).call(document)?.catch?.(() => {});
+ return;
+ }
+ // 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;
+ 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(() => {});
+ }
+ if (typeof document !== 'undefined') document.addEventListener('fullscreenchange', () => {
+ if (!fsElement()) { try { screen.orientation?.unlock?.(); } catch {} }
+ });
function videoNode(url, { stable = false } = {}) {
const loud = unmutedClips.has(url);
// Nothing is fetched until the clip is about to play (preload none): a
@@ -7299,6 +7339,7 @@ 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),
onError: (e) => { if (!stable && !(e.target.getAttribute('src') || '').startsWith(VMEDIA)) { const b = e.target.parentElement; if (b) b.style.display = 'none'; } } });
guardPicture(v, url);
v.muted = !loud; // the property, not just the attribute: a script-made element autoplays only muted