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:
@@ -87,6 +87,7 @@ function VideoAttachmentCard({
|
||||
controls
|
||||
playsInline
|
||||
autoPlay
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="absolute inset-0 h-full w-full"
|
||||
/>
|
||||
<AttachmentDownloadPill
|
||||
|
||||
@@ -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]);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user