fix(video): keep scroll position and stop pause from going fullscreen

- VideoBubble: stopPropagation on the inline <video> element so
  clicks on the native controls (play/pause/seek) don't bubble up
  to the outer tile, which previously promoted any control click
  into a fullscreen overlay.
- VideoPlayer: replace overflow:hidden body lock with the iOS-safe
  position-fixed + scroll-restore pattern. Closing the fullscreen
  player now returns the page to the exact scroll offset it had,
  instead of snapping back to the top on iOS Safari.
This commit is contained in:
TerryM
2026-05-30 01:09:19 +08:00
parent f7230de12b
commit 6b42981419
2 changed files with 29 additions and 3 deletions

View File

@@ -87,6 +87,7 @@ function VideoAttachmentCard({
controls
playsInline
autoPlay
onClick={(e) => e.stopPropagation()}
className="absolute inset-0 h-full w-full"
/>
<AttachmentDownloadPill

View File

@@ -70,11 +70,36 @@ function PlayerView({
if (e.key === "Escape") onClose();
};
window.addEventListener("keydown", onKey);
const prevOverflow = document.body.style.overflow;
document.body.style.overflow = "hidden";
// iOS-compatible scroll lock: pin the body in place at the current scroll
// offset, then restore both styles and scroll position on cleanup. Plain
// `overflow: hidden` doesn't work on iOS Safari and can reset scroll to 0.
const scrollY = window.scrollY;
const body = document.body;
const prev = {
position: body.style.position,
top: body.style.top,
left: body.style.left,
right: body.style.right,
width: body.style.width,
overflow: body.style.overflow,
};
body.style.position = "fixed";
body.style.top = `-${scrollY}px`;
body.style.left = "0";
body.style.right = "0";
body.style.width = "100%";
body.style.overflow = "hidden";
return () => {
window.removeEventListener("keydown", onKey);
document.body.style.overflow = prevOverflow;
body.style.position = prev.position;
body.style.top = prev.top;
body.style.left = prev.left;
body.style.right = prev.right;
body.style.width = prev.width;
body.style.overflow = prev.overflow;
window.scrollTo(0, scrollY);
};
}, [onClose]);