Improve Android signature orientation detection
This commit is contained in:
@@ -12,7 +12,10 @@ interface SignatureOverlayProps {
|
||||
|
||||
const isLandscapeNow = () =>
|
||||
typeof window !== 'undefined' &&
|
||||
(window.matchMedia('(orientation: landscape)').matches || window.innerWidth > window.innerHeight);
|
||||
(window.matchMedia('(orientation: landscape)').matches ||
|
||||
window.innerWidth > window.innerHeight ||
|
||||
((window.visualViewport?.width ?? 0) > (window.visualViewport?.height ?? 0)) ||
|
||||
Math.abs(window.screen.orientation?.angle ?? 0) % 180 === 90);
|
||||
|
||||
function SignatureOverlay({ open, onCancel, onConfirm }: SignatureOverlayProps) {
|
||||
const padRef = useRef<SignaturePadHandle>(null);
|
||||
@@ -32,10 +35,17 @@ function SignatureOverlay({ open, onCancel, onConfirm }: SignatureOverlayProps)
|
||||
}
|
||||
window.addEventListener('resize', update);
|
||||
window.addEventListener('orientationchange', update);
|
||||
window.visualViewport?.addEventListener('resize', update);
|
||||
|
||||
const orientation = (screen as Screen & {
|
||||
orientation?: { lock?: (o: string) => Promise<void>; unlock?: () => void };
|
||||
orientation?: {
|
||||
lock?: (o: string) => Promise<void>;
|
||||
unlock?: () => void;
|
||||
addEventListener?: (type: 'change', listener: () => void) => void;
|
||||
removeEventListener?: (type: 'change', listener: () => void) => void;
|
||||
};
|
||||
}).orientation;
|
||||
orientation?.addEventListener?.('change', update);
|
||||
if (orientation?.lock) {
|
||||
orientation.lock('landscape').catch(() => {
|
||||
// ignore; iOS Safari and most browsers refuse outside fullscreen
|
||||
@@ -53,6 +63,8 @@ function SignatureOverlay({ open, onCancel, onConfirm }: SignatureOverlayProps)
|
||||
}
|
||||
window.removeEventListener('resize', update);
|
||||
window.removeEventListener('orientationchange', update);
|
||||
window.visualViewport?.removeEventListener('resize', update);
|
||||
orientation?.removeEventListener?.('change', update);
|
||||
document.body.style.overflow = prevOverflow;
|
||||
orientation?.unlock?.();
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user