Improve Android signature orientation detection
This commit is contained in:
@@ -12,7 +12,10 @@ interface SignatureOverlayProps {
|
|||||||
|
|
||||||
const isLandscapeNow = () =>
|
const isLandscapeNow = () =>
|
||||||
typeof window !== 'undefined' &&
|
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) {
|
function SignatureOverlay({ open, onCancel, onConfirm }: SignatureOverlayProps) {
|
||||||
const padRef = useRef<SignaturePadHandle>(null);
|
const padRef = useRef<SignaturePadHandle>(null);
|
||||||
@@ -32,10 +35,17 @@ function SignatureOverlay({ open, onCancel, onConfirm }: SignatureOverlayProps)
|
|||||||
}
|
}
|
||||||
window.addEventListener('resize', update);
|
window.addEventListener('resize', update);
|
||||||
window.addEventListener('orientationchange', update);
|
window.addEventListener('orientationchange', update);
|
||||||
|
window.visualViewport?.addEventListener('resize', 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;
|
||||||
|
addEventListener?: (type: 'change', listener: () => void) => void;
|
||||||
|
removeEventListener?: (type: 'change', listener: () => void) => void;
|
||||||
|
};
|
||||||
}).orientation;
|
}).orientation;
|
||||||
|
orientation?.addEventListener?.('change', update);
|
||||||
if (orientation?.lock) {
|
if (orientation?.lock) {
|
||||||
orientation.lock('landscape').catch(() => {
|
orientation.lock('landscape').catch(() => {
|
||||||
// ignore; iOS Safari and most browsers refuse outside fullscreen
|
// 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('resize', update);
|
||||||
window.removeEventListener('orientationchange', update);
|
window.removeEventListener('orientationchange', update);
|
||||||
|
window.visualViewport?.removeEventListener('resize', update);
|
||||||
|
orientation?.removeEventListener?.('change', update);
|
||||||
document.body.style.overflow = prevOverflow;
|
document.body.style.overflow = prevOverflow;
|
||||||
orientation?.unlock?.();
|
orientation?.unlock?.();
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user