fix: improve Android orientation detection in signature overlay
This commit is contained in:
@@ -11,7 +11,8 @@ interface SignatureOverlayProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const isLandscapeNow = () =>
|
const isLandscapeNow = () =>
|
||||||
typeof window !== 'undefined' && window.matchMedia('(orientation: landscape)').matches;
|
typeof window !== 'undefined' &&
|
||||||
|
(window.matchMedia('(orientation: landscape)').matches || window.innerWidth > window.innerHeight);
|
||||||
|
|
||||||
function SignatureOverlay({ open, onCancel, onConfirm }: SignatureOverlayProps) {
|
function SignatureOverlay({ open, onCancel, onConfirm }: SignatureOverlayProps) {
|
||||||
const padRef = useRef<SignaturePadHandle>(null);
|
const padRef = useRef<SignaturePadHandle>(null);
|
||||||
@@ -22,9 +23,15 @@ function SignatureOverlay({ open, onCancel, onConfirm }: SignatureOverlayProps)
|
|||||||
if (!open) return;
|
if (!open) return;
|
||||||
|
|
||||||
const mq = window.matchMedia('(orientation: landscape)');
|
const mq = window.matchMedia('(orientation: landscape)');
|
||||||
const update = () => setLandscape(mq.matches);
|
const update = () => setLandscape(mq.matches || window.innerWidth > window.innerHeight);
|
||||||
update();
|
update();
|
||||||
|
if (typeof mq.addEventListener === 'function') {
|
||||||
mq.addEventListener('change', update);
|
mq.addEventListener('change', update);
|
||||||
|
} else {
|
||||||
|
mq.addListener(update);
|
||||||
|
}
|
||||||
|
window.addEventListener('resize', update);
|
||||||
|
window.addEventListener('orientationchange', update);
|
||||||
|
|
||||||
const orientation = (screen as Screen & {
|
const orientation = (screen as Screen & {
|
||||||
orientation?: { lock?: (o: string) => Promise<void>; unlock?: () => void };
|
orientation?: { lock?: (o: string) => Promise<void>; unlock?: () => void };
|
||||||
@@ -39,7 +46,13 @@ function SignatureOverlay({ open, onCancel, onConfirm }: SignatureOverlayProps)
|
|||||||
document.body.style.overflow = 'hidden';
|
document.body.style.overflow = 'hidden';
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
|
if (typeof mq.removeEventListener === 'function') {
|
||||||
mq.removeEventListener('change', update);
|
mq.removeEventListener('change', update);
|
||||||
|
} else {
|
||||||
|
mq.removeListener(update);
|
||||||
|
}
|
||||||
|
window.removeEventListener('resize', update);
|
||||||
|
window.removeEventListener('orientationchange', update);
|
||||||
document.body.style.overflow = prevOverflow;
|
document.body.style.overflow = prevOverflow;
|
||||||
orientation?.unlock?.();
|
orientation?.unlock?.();
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user