refactor(hooks): split keyboard height hook modules
This commit is contained in:
@@ -1,481 +0,0 @@
|
|||||||
"use client";
|
|
||||||
/**
|
|
||||||
* 软键盘避让 hook。
|
|
||||||
*
|
|
||||||
* 目标环境：小米系设备上的 Facebook IAB 等软键盘覆盖页面但 viewport 信号不稳定的浏览器。
|
|
||||||
*
|
|
||||||
* 策略：
|
|
||||||
* 1. 持续写入 --app-viewport-height，聊天页高度不再只依赖 100dvh。
|
|
||||||
* 2. 优先使用 visualViewport 计算键盘高度。
|
|
||||||
* 3. 输入框聚焦后测量目标元素是否越过可见底部，计算额外抬升。
|
|
||||||
* 4. 小米系 Android + Facebook IAB 若 viewport 未可靠变化，启用保守 fallback 抬升；
|
|
||||||
* 键盘收起后若焦点仍停留在 textarea，也要主动释放 fallback。
|
|
||||||
*/
|
|
||||||
import { type RefObject, useEffect, useRef } from "react";
|
|
||||||
|
|
||||||
import { BrowserDetector, Logger, PlatformDetector } from "@/utils";
|
|
||||||
|
|
||||||
const KEYBOARD_VAR = "--keyboard-height";
|
|
||||||
const VIEWPORT_VAR = "--app-viewport-height";
|
|
||||||
const INPUT_LIFT_VAR = "--chat-input-lift";
|
|
||||||
const FOCUS_GAP_PX = 14;
|
|
||||||
const FALLBACK_KEYBOARD_RATIO = 0.42;
|
|
||||||
const FALLBACK_KEYBOARD_MIN = 260;
|
|
||||||
const FALLBACK_KEYBOARD_MAX = 380;
|
|
||||||
const FALLBACK_CLOSE_GRACE_MS = 900;
|
|
||||||
const RECHECK_DELAYS_MS = [0, 50, 120, 240, 420, 700];
|
|
||||||
const KEYBOARD_RELEASE_EVENT_TYPES = new Set([
|
|
||||||
"resize",
|
|
||||||
"scroll",
|
|
||||||
"geometrychange",
|
|
||||||
"focusout",
|
|
||||||
"blur",
|
|
||||||
"visibilitychange",
|
|
||||||
]);
|
|
||||||
const RECHECK_EVENT = "cozsweet:keyboard-recheck";
|
|
||||||
|
|
||||||
const log = new Logger("HooksUseKeyboardHeight");
|
|
||||||
|
|
||||||
export interface UseKeyboardHeightOptions {
|
|
||||||
targetRef?: RefObject<HTMLElement | null>;
|
|
||||||
active?: boolean;
|
|
||||||
onKeyboardDismiss?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useKeyboardHeight({
|
|
||||||
targetRef,
|
|
||||||
active = false,
|
|
||||||
onKeyboardDismiss,
|
|
||||||
}: UseKeyboardHeightOptions = {}): void {
|
|
||||||
const activeRef = useRef(active);
|
|
||||||
const onKeyboardDismissRef = useRef(onKeyboardDismiss);
|
|
||||||
const fallbackAllowedRef = useRef(false);
|
|
||||||
const focusedAtRef = useRef(0);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
onKeyboardDismissRef.current = onKeyboardDismiss;
|
|
||||||
}, [onKeyboardDismiss]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
activeRef.current = active;
|
|
||||||
fallbackAllowedRef.current = active;
|
|
||||||
focusedAtRef.current = active ? performance.now() : 0;
|
|
||||||
window.dispatchEvent(new Event(RECHECK_EVENT));
|
|
||||||
}, [active]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (typeof window === "undefined") return;
|
|
||||||
|
|
||||||
let rafId: number | null = null;
|
|
||||||
let timeoutIds: number[] = [];
|
|
||||||
let lastKeyboardHeight = -1;
|
|
||||||
let lastViewportHeight = -1;
|
|
||||||
let lastInputLift = -1;
|
|
||||||
let lastMayBeKeyboardClose = false;
|
|
||||||
let fallbackWasApplied = false;
|
|
||||||
let lastEventType = "initial";
|
|
||||||
const environment = getKeyboardAdaptEnvironment();
|
|
||||||
|
|
||||||
log.debug("[keyboard] environment", environment);
|
|
||||||
if (!shouldEnableKeyboardAdaptation(environment)) {
|
|
||||||
resetVars();
|
|
||||||
log.debug("[keyboard] disabled", {
|
|
||||||
reason: "regular-browser",
|
|
||||||
environment,
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const apply = () => {
|
|
||||||
rafId = null;
|
|
||||||
|
|
||||||
const metrics = readViewportMetrics();
|
|
||||||
let activeNow = isKeyboardTargetActive(targetRef?.current, activeRef.current);
|
|
||||||
const shouldTryRelease =
|
|
||||||
activeNow &&
|
|
||||||
lastMayBeKeyboardClose &&
|
|
||||||
shouldReleaseKeyboardState(metrics, focusedAtRef.current);
|
|
||||||
|
|
||||||
if (
|
|
||||||
activeNow &&
|
|
||||||
lastMayBeKeyboardClose &&
|
|
||||||
!shouldTryRelease
|
|
||||||
) {
|
|
||||||
log.debug("[keyboard] release skipped", {
|
|
||||||
reason: getReleaseSkipReason(metrics, focusedAtRef.current),
|
|
||||||
lastEventType,
|
|
||||||
environment,
|
|
||||||
active: activeNow,
|
|
||||||
reactActive: activeRef.current,
|
|
||||||
fallbackAllowed: fallbackAllowedRef.current,
|
|
||||||
lastInputLift,
|
|
||||||
fallbackWasApplied,
|
|
||||||
focusedForMs: getFocusedDurationMs(focusedAtRef.current),
|
|
||||||
metrics: formatMetrics(metrics),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (shouldTryRelease) {
|
|
||||||
log.debug("[keyboard] release confirmed", {
|
|
||||||
lastEventType,
|
|
||||||
environment,
|
|
||||||
active: activeNow,
|
|
||||||
reactActive: activeRef.current,
|
|
||||||
fallbackAllowed: fallbackAllowedRef.current,
|
|
||||||
lastInputLift,
|
|
||||||
fallbackWasApplied,
|
|
||||||
focusedForMs: getFocusedDurationMs(focusedAtRef.current),
|
|
||||||
metrics: formatMetrics(metrics),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (shouldTryRelease) {
|
|
||||||
releaseKeyboardState("keyboard-close-detected", metrics);
|
|
||||||
activeNow = false;
|
|
||||||
}
|
|
||||||
lastMayBeKeyboardClose = false;
|
|
||||||
|
|
||||||
const keyboardHeight = Math.round(metrics.keyboardHeight);
|
|
||||||
const viewportHeight = Math.round(metrics.visibleHeight);
|
|
||||||
const fallbackLift = fallbackAllowedRef.current
|
|
||||||
? computeFallbackLift(metrics)
|
|
||||||
: 0;
|
|
||||||
const inputLift = Math.round(
|
|
||||||
activeNow
|
|
||||||
? Math.max(
|
|
||||||
computeTargetOverlap(targetRef?.current, metrics.visibleBottom),
|
|
||||||
fallbackLift,
|
|
||||||
)
|
|
||||||
: 0,
|
|
||||||
);
|
|
||||||
fallbackWasApplied =
|
|
||||||
fallbackLift > 0 && inputLift >= fallbackLift && fallbackAllowedRef.current;
|
|
||||||
|
|
||||||
if (keyboardHeight !== lastKeyboardHeight) {
|
|
||||||
lastKeyboardHeight = keyboardHeight;
|
|
||||||
document.documentElement.style.setProperty(
|
|
||||||
KEYBOARD_VAR,
|
|
||||||
`${keyboardHeight}px`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (viewportHeight !== lastViewportHeight) {
|
|
||||||
lastViewportHeight = viewportHeight;
|
|
||||||
document.documentElement.style.setProperty(
|
|
||||||
VIEWPORT_VAR,
|
|
||||||
`${viewportHeight}px`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (inputLift !== lastInputLift) {
|
|
||||||
lastInputLift = inputLift;
|
|
||||||
document.documentElement.style.setProperty(
|
|
||||||
INPUT_LIFT_VAR,
|
|
||||||
`${inputLift}px`,
|
|
||||||
);
|
|
||||||
log.debug("[keyboard] apply", {
|
|
||||||
environment,
|
|
||||||
active: activeNow,
|
|
||||||
reactActive: activeRef.current,
|
|
||||||
inputLift,
|
|
||||||
fallbackLift,
|
|
||||||
fallbackAllowed: fallbackAllowedRef.current,
|
|
||||||
source: getLiftSource(inputLift, fallbackLift),
|
|
||||||
metrics: formatMetrics(metrics),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const schedule = () => {
|
|
||||||
if (rafId != null) return;
|
|
||||||
rafId = window.requestAnimationFrame(apply);
|
|
||||||
};
|
|
||||||
|
|
||||||
const scheduleRechecks = (event?: Event) => {
|
|
||||||
lastEventType = event?.type ?? "manual";
|
|
||||||
const hadInputLift = fallbackWasApplied || lastInputLift > 0;
|
|
||||||
const possibleKeyboardClose =
|
|
||||||
event != null && isPossibleKeyboardCloseEvent(event, hadInputLift);
|
|
||||||
log.debug("[keyboard] schedule rechecks", {
|
|
||||||
eventType: lastEventType,
|
|
||||||
possibleKeyboardClose,
|
|
||||||
hadInputLift,
|
|
||||||
fallbackWasApplied,
|
|
||||||
lastInputLift,
|
|
||||||
active: activeRef.current,
|
|
||||||
fallbackAllowed: fallbackAllowedRef.current,
|
|
||||||
focusedForMs: getFocusedDurationMs(focusedAtRef.current),
|
|
||||||
});
|
|
||||||
if (
|
|
||||||
possibleKeyboardClose
|
|
||||||
) {
|
|
||||||
lastMayBeKeyboardClose = true;
|
|
||||||
log.debug("[keyboard] possible close detected", {
|
|
||||||
eventType: lastEventType,
|
|
||||||
hadInputLift,
|
|
||||||
fallbackWasApplied,
|
|
||||||
lastInputLift,
|
|
||||||
focusedForMs: getFocusedDurationMs(focusedAtRef.current),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
timeoutIds.forEach((id) => window.clearTimeout(id));
|
|
||||||
timeoutIds = RECHECK_DELAYS_MS.map((delay) =>
|
|
||||||
window.setTimeout(schedule, delay),
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const releaseKeyboardState = (
|
|
||||||
reason: string,
|
|
||||||
metrics: ViewportMetrics,
|
|
||||||
): void => {
|
|
||||||
activeRef.current = false;
|
|
||||||
fallbackAllowedRef.current = false;
|
|
||||||
focusedAtRef.current = 0;
|
|
||||||
blurKeyboardTarget(targetRef?.current);
|
|
||||||
onKeyboardDismissRef.current?.();
|
|
||||||
log.debug("[keyboard] released", {
|
|
||||||
reason,
|
|
||||||
environment,
|
|
||||||
metrics: formatMetrics(metrics),
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const vv = window.visualViewport;
|
|
||||||
if (vv) {
|
|
||||||
vv.addEventListener("resize", scheduleRechecks);
|
|
||||||
vv.addEventListener("scroll", scheduleRechecks);
|
|
||||||
}
|
|
||||||
const virtualKeyboard = getVirtualKeyboard();
|
|
||||||
virtualKeyboard?.addEventListener("geometrychange", scheduleRechecks);
|
|
||||||
window.addEventListener("resize", scheduleRechecks);
|
|
||||||
window.addEventListener("orientationchange", scheduleRechecks);
|
|
||||||
window.addEventListener("focusin", scheduleRechecks);
|
|
||||||
window.addEventListener("focusout", scheduleRechecks);
|
|
||||||
window.addEventListener("blur", scheduleRechecks);
|
|
||||||
document.addEventListener("visibilitychange", scheduleRechecks);
|
|
||||||
window.addEventListener(RECHECK_EVENT, scheduleRechecks);
|
|
||||||
|
|
||||||
scheduleRechecks();
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
if (rafId != null) window.cancelAnimationFrame(rafId);
|
|
||||||
timeoutIds.forEach((id) => window.clearTimeout(id));
|
|
||||||
if (vv) {
|
|
||||||
vv.removeEventListener("resize", scheduleRechecks);
|
|
||||||
vv.removeEventListener("scroll", scheduleRechecks);
|
|
||||||
}
|
|
||||||
virtualKeyboard?.removeEventListener("geometrychange", scheduleRechecks);
|
|
||||||
window.removeEventListener("resize", scheduleRechecks);
|
|
||||||
window.removeEventListener("orientationchange", scheduleRechecks);
|
|
||||||
window.removeEventListener("focusin", scheduleRechecks);
|
|
||||||
window.removeEventListener("focusout", scheduleRechecks);
|
|
||||||
window.removeEventListener("blur", scheduleRechecks);
|
|
||||||
document.removeEventListener("visibilitychange", scheduleRechecks);
|
|
||||||
window.removeEventListener(RECHECK_EVENT, scheduleRechecks);
|
|
||||||
resetVars();
|
|
||||||
};
|
|
||||||
}, [targetRef]);
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ViewportMetrics {
|
|
||||||
hasVisualViewport: boolean;
|
|
||||||
hasVirtualKeyboard: boolean;
|
|
||||||
layoutHeight: number;
|
|
||||||
visibleHeight: number;
|
|
||||||
visibleBottom: number;
|
|
||||||
keyboardHeight: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
function readViewportMetrics(): ViewportMetrics {
|
|
||||||
const layoutHeight = window.innerHeight;
|
|
||||||
const vv = window.visualViewport;
|
|
||||||
const virtualKeyboard = getVirtualKeyboard();
|
|
||||||
const virtualKeyboardRect = virtualKeyboard?.boundingRect ?? null;
|
|
||||||
const virtualKeyboardHeight = virtualKeyboardRect?.height ?? 0;
|
|
||||||
if (!vv) {
|
|
||||||
const visibleBottom =
|
|
||||||
virtualKeyboardHeight > 0 ? layoutHeight - virtualKeyboardHeight : layoutHeight;
|
|
||||||
return {
|
|
||||||
hasVisualViewport: false,
|
|
||||||
hasVirtualKeyboard: virtualKeyboard != null,
|
|
||||||
layoutHeight,
|
|
||||||
visibleHeight: visibleBottom,
|
|
||||||
visibleBottom,
|
|
||||||
keyboardHeight: virtualKeyboardHeight,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const visualBottom = vv.offsetTop + vv.height;
|
|
||||||
const keyboardTop =
|
|
||||||
virtualKeyboardHeight > 0
|
|
||||||
? Math.min(virtualKeyboardRect?.y ?? layoutHeight, layoutHeight - virtualKeyboardHeight)
|
|
||||||
: layoutHeight;
|
|
||||||
const visibleBottom = Math.min(visualBottom, keyboardTop);
|
|
||||||
const visibleHeight = Math.min(vv.height, visibleBottom);
|
|
||||||
return {
|
|
||||||
hasVisualViewport: true,
|
|
||||||
hasVirtualKeyboard: virtualKeyboard != null,
|
|
||||||
layoutHeight,
|
|
||||||
visibleHeight,
|
|
||||||
visibleBottom,
|
|
||||||
keyboardHeight: Math.max(0, layoutHeight - visibleBottom, virtualKeyboardHeight),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function computeTargetOverlap(
|
|
||||||
target: HTMLElement | null | undefined,
|
|
||||||
visibleBottom: number,
|
|
||||||
): number {
|
|
||||||
if (!target) return 0;
|
|
||||||
const rect = target.getBoundingClientRect();
|
|
||||||
return Math.max(0, rect.bottom + FOCUS_GAP_PX - visibleBottom);
|
|
||||||
}
|
|
||||||
|
|
||||||
function computeFallbackLift(metrics: ViewportMetrics): number {
|
|
||||||
if (!shouldUseInAppKeyboardFallback()) return 0;
|
|
||||||
|
|
||||||
const viewportAlreadyShrank = metrics.visibleHeight < metrics.layoutHeight * 0.82;
|
|
||||||
const keyboardAlreadyDetected = metrics.keyboardHeight > 80;
|
|
||||||
if (viewportAlreadyShrank || keyboardAlreadyDetected) return 0;
|
|
||||||
|
|
||||||
return clamp(
|
|
||||||
Math.round(metrics.layoutHeight * FALLBACK_KEYBOARD_RATIO),
|
|
||||||
FALLBACK_KEYBOARD_MIN,
|
|
||||||
FALLBACK_KEYBOARD_MAX,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function shouldReleaseKeyboardState(
|
|
||||||
metrics: ViewportMetrics,
|
|
||||||
focusedAt: number,
|
|
||||||
): boolean {
|
|
||||||
if (focusedAt <= 0) return false;
|
|
||||||
if (performance.now() - focusedAt < FALLBACK_CLOSE_GRACE_MS) return false;
|
|
||||||
return !hasDetectedKeyboard(metrics);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getFocusedDurationMs(focusedAt: number): number | null {
|
|
||||||
if (focusedAt <= 0) return null;
|
|
||||||
return Math.round(performance.now() - focusedAt);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getReleaseSkipReason(
|
|
||||||
metrics: ViewportMetrics,
|
|
||||||
focusedAt: number,
|
|
||||||
): string {
|
|
||||||
if (focusedAt <= 0) return "not-focused-by-hook";
|
|
||||||
if (performance.now() - focusedAt < FALLBACK_CLOSE_GRACE_MS) {
|
|
||||||
return "within-close-grace-window";
|
|
||||||
}
|
|
||||||
if (hasDetectedKeyboard(metrics)) return "keyboard-still-detected";
|
|
||||||
return "unknown";
|
|
||||||
}
|
|
||||||
|
|
||||||
function hasDetectedKeyboard(metrics: ViewportMetrics): boolean {
|
|
||||||
return (
|
|
||||||
metrics.keyboardHeight > 80 ||
|
|
||||||
metrics.visibleHeight < metrics.layoutHeight * 0.82
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function isPossibleKeyboardCloseEvent(
|
|
||||||
event: Event,
|
|
||||||
hadInputLift: boolean,
|
|
||||||
): boolean {
|
|
||||||
if (!hadInputLift) {
|
|
||||||
return event.type === "resize" || event.type === "geometrychange";
|
|
||||||
}
|
|
||||||
return KEYBOARD_RELEASE_EVENT_TYPES.has(event.type);
|
|
||||||
}
|
|
||||||
|
|
||||||
function isKeyboardTargetActive(
|
|
||||||
target: HTMLElement | null | undefined,
|
|
||||||
reactActive: boolean,
|
|
||||||
): boolean {
|
|
||||||
return reactActive || (target != null && document.activeElement === target);
|
|
||||||
}
|
|
||||||
|
|
||||||
function blurKeyboardTarget(target: HTMLElement | null | undefined): void {
|
|
||||||
if (!target || document.activeElement !== target) return;
|
|
||||||
target.blur();
|
|
||||||
}
|
|
||||||
|
|
||||||
function shouldUseInAppKeyboardFallback(): boolean {
|
|
||||||
if (typeof navigator === "undefined") return false;
|
|
||||||
const ua = navigator.userAgent;
|
|
||||||
return getKeyboardAdaptEnvironment(ua).usesXiaomiFacebookFallback;
|
|
||||||
}
|
|
||||||
|
|
||||||
function shouldEnableKeyboardAdaptation(
|
|
||||||
environment: ReturnType<typeof getKeyboardAdaptEnvironment>,
|
|
||||||
): boolean {
|
|
||||||
return environment.isInAppBrowser;
|
|
||||||
}
|
|
||||||
|
|
||||||
function clamp(value: number, min: number, max: number): number {
|
|
||||||
return Math.min(max, Math.max(min, value));
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetVars(): void {
|
|
||||||
document.documentElement.style.setProperty(KEYBOARD_VAR, "0px");
|
|
||||||
document.documentElement.style.setProperty(VIEWPORT_VAR, "100dvh");
|
|
||||||
document.documentElement.style.setProperty(INPUT_LIFT_VAR, "0px");
|
|
||||||
}
|
|
||||||
|
|
||||||
function getKeyboardAdaptEnvironment(ua: string | null = null) {
|
|
||||||
const platform = PlatformDetector.getPlatformInfo(ua);
|
|
||||||
const browser = BrowserDetector.getBrowserInfo(ua);
|
|
||||||
const isXiaomiFamilyDevice = PlatformDetector.isXiaomiFamilyDevice(ua);
|
|
||||||
const isFacebookInAppBrowser = BrowserDetector.isFacebookInAppBrowser(ua);
|
|
||||||
|
|
||||||
return {
|
|
||||||
platform: platform.platform,
|
|
||||||
osName: platform.osName,
|
|
||||||
osVersion: platform.osVersion,
|
|
||||||
deviceVendor: platform.deviceVendor,
|
|
||||||
deviceModel: platform.deviceModel,
|
|
||||||
isAndroid: platform.isAndroid,
|
|
||||||
isIOS: platform.isIOS,
|
|
||||||
isMobile: platform.isMobile,
|
|
||||||
browserName: browser.name,
|
|
||||||
browserVersion: browser.version,
|
|
||||||
isInAppBrowser: browser.isInAppBrowser,
|
|
||||||
inAppBrowserName: browser.inAppBrowserName,
|
|
||||||
isXiaomiFamilyDevice,
|
|
||||||
isFacebookInAppBrowser,
|
|
||||||
hasVisualViewport:
|
|
||||||
typeof window !== "undefined" && window.visualViewport != null,
|
|
||||||
hasVirtualKeyboard: getVirtualKeyboard() != null,
|
|
||||||
usesXiaomiFacebookFallback:
|
|
||||||
platform.isAndroid && isXiaomiFamilyDevice && isFacebookInAppBrowser,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatMetrics(metrics: ViewportMetrics) {
|
|
||||||
return {
|
|
||||||
hasVisualViewport: metrics.hasVisualViewport,
|
|
||||||
hasVirtualKeyboard: metrics.hasVirtualKeyboard,
|
|
||||||
layoutHeight: Math.round(metrics.layoutHeight),
|
|
||||||
visibleHeight: Math.round(metrics.visibleHeight),
|
|
||||||
visibleBottom: Math.round(metrics.visibleBottom),
|
|
||||||
keyboardHeight: Math.round(metrics.keyboardHeight),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function getLiftSource(inputLift: number, fallbackLift: number): string {
|
|
||||||
if (inputLift <= 0) return "none";
|
|
||||||
if (fallbackLift > 0 && inputLift === fallbackLift) return "xiaomi-facebook-fallback";
|
|
||||||
if (fallbackLift > 0) return "overlap-and-fallback";
|
|
||||||
return "target-overlap";
|
|
||||||
}
|
|
||||||
|
|
||||||
interface VirtualKeyboardLike extends EventTarget {
|
|
||||||
readonly boundingRect: DOMRectReadOnly;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getVirtualKeyboard(): VirtualKeyboardLike | null {
|
|
||||||
const nav = navigator as Navigator & {
|
|
||||||
virtualKeyboard?: VirtualKeyboardLike;
|
|
||||||
};
|
|
||||||
return nav.virtualKeyboard ?? null;
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
export const KEYBOARD_VAR = "--keyboard-height";
|
||||||
|
export const VIEWPORT_VAR = "--app-viewport-height";
|
||||||
|
export const INPUT_LIFT_VAR = "--chat-input-lift";
|
||||||
|
|
||||||
|
export const FOCUS_GAP_PX = 14;
|
||||||
|
export const FALLBACK_KEYBOARD_RATIO = 0.42;
|
||||||
|
export const FALLBACK_KEYBOARD_MIN = 260;
|
||||||
|
export const FALLBACK_KEYBOARD_MAX = 380;
|
||||||
|
export const FALLBACK_CLOSE_GRACE_MS = 900;
|
||||||
|
export const FALLBACK_WATCHDOG_INTERVAL_MS = 500;
|
||||||
|
export const FALLBACK_WATCHDOG_LOG_INTERVAL_MS = 1_500;
|
||||||
|
export const RECHECK_DELAYS_MS = [0, 50, 120, 240, 420, 700];
|
||||||
|
export const KEYBOARD_RELEASE_EVENT_TYPES = new Set([
|
||||||
|
"resize",
|
||||||
|
"scroll",
|
||||||
|
"geometrychange",
|
||||||
|
"focusout",
|
||||||
|
"blur",
|
||||||
|
"visibilitychange",
|
||||||
|
]);
|
||||||
|
export const RECHECK_EVENT = "cozsweet:keyboard-recheck";
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
import { INPUT_LIFT_VAR, KEYBOARD_VAR, VIEWPORT_VAR } from "./constants";
|
||||||
|
|
||||||
|
export function setKeyboardHeightVar(height: number): void {
|
||||||
|
document.documentElement.style.setProperty(KEYBOARD_VAR, `${height}px`);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setViewportHeightVar(height: number): void {
|
||||||
|
document.documentElement.style.setProperty(VIEWPORT_VAR, `${height}px`);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setInputLiftVar(lift: number): void {
|
||||||
|
document.documentElement.style.setProperty(INPUT_LIFT_VAR, `${lift}px`);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function resetKeyboardVars(): void {
|
||||||
|
document.documentElement.style.setProperty(KEYBOARD_VAR, "0px");
|
||||||
|
document.documentElement.style.setProperty(VIEWPORT_VAR, "100dvh");
|
||||||
|
document.documentElement.style.setProperty(INPUT_LIFT_VAR, "0px");
|
||||||
|
}
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
import { BrowserDetector, PlatformDetector } from "@/utils";
|
||||||
|
|
||||||
|
import type { KeyboardAdaptEnvironment } from "./types";
|
||||||
|
import { getVirtualKeyboard } from "./virtual-keyboard";
|
||||||
|
|
||||||
|
export function getKeyboardAdaptEnvironment(
|
||||||
|
ua: string | null = null,
|
||||||
|
): KeyboardAdaptEnvironment {
|
||||||
|
const platform = PlatformDetector.getPlatformInfo(ua);
|
||||||
|
const browser = BrowserDetector.getBrowserInfo(ua);
|
||||||
|
const isXiaomiFamilyDevice = PlatformDetector.isXiaomiFamilyDevice(ua);
|
||||||
|
const isFacebookInAppBrowser = BrowserDetector.isFacebookInAppBrowser(ua);
|
||||||
|
|
||||||
|
return {
|
||||||
|
platform: platform.platform,
|
||||||
|
osName: platform.osName,
|
||||||
|
osVersion: platform.osVersion,
|
||||||
|
deviceVendor: platform.deviceVendor,
|
||||||
|
deviceModel: platform.deviceModel,
|
||||||
|
isAndroid: platform.isAndroid,
|
||||||
|
isIOS: platform.isIOS,
|
||||||
|
isMobile: platform.isMobile,
|
||||||
|
browserName: browser.name,
|
||||||
|
browserVersion: browser.version,
|
||||||
|
isInAppBrowser: browser.isInAppBrowser,
|
||||||
|
inAppBrowserName: browser.inAppBrowserName,
|
||||||
|
isXiaomiFamilyDevice,
|
||||||
|
isFacebookInAppBrowser,
|
||||||
|
hasVisualViewport:
|
||||||
|
typeof window !== "undefined" && window.visualViewport != null,
|
||||||
|
hasVirtualKeyboard: getVirtualKeyboard() != null,
|
||||||
|
usesXiaomiFacebookFallback:
|
||||||
|
platform.isAndroid && isXiaomiFamilyDevice && isFacebookInAppBrowser,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function shouldEnableKeyboardAdaptation(
|
||||||
|
environment: KeyboardAdaptEnvironment,
|
||||||
|
): boolean {
|
||||||
|
return environment.isInAppBrowser;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function shouldUseInAppKeyboardFallback(): boolean {
|
||||||
|
if (typeof navigator === "undefined") return false;
|
||||||
|
return getKeyboardAdaptEnvironment(navigator.userAgent).usesXiaomiFacebookFallback;
|
||||||
|
}
|
||||||
@@ -0,0 +1,270 @@
|
|||||||
|
"use client";
|
||||||
|
/**
|
||||||
|
* 软键盘避让 hook。
|
||||||
|
*
|
||||||
|
* 目标环境：小米系设备上的 Facebook IAB 等软键盘覆盖页面但 viewport 信号不稳定的浏览器。
|
||||||
|
*
|
||||||
|
* 策略：
|
||||||
|
* 1. 持续写入 --app-viewport-height，聊天页高度不再只依赖 100dvh。
|
||||||
|
* 2. 优先使用 visualViewport 计算键盘高度。
|
||||||
|
* 3. 输入框聚焦后测量目标元素是否越过可见底部，计算额外抬升。
|
||||||
|
* 4. 小米系 Android + Facebook IAB 若 viewport 未可靠变化，启用保守 fallback 抬升；
|
||||||
|
* 键盘收起后若焦点仍停留在 textarea，也要主动释放 fallback。
|
||||||
|
*/
|
||||||
|
import { useEffect, useRef } from "react";
|
||||||
|
|
||||||
|
import { Logger } from "@/utils";
|
||||||
|
|
||||||
|
import {
|
||||||
|
RECHECK_DELAYS_MS,
|
||||||
|
RECHECK_EVENT,
|
||||||
|
} from "./constants";
|
||||||
|
import {
|
||||||
|
resetKeyboardVars,
|
||||||
|
setInputLiftVar,
|
||||||
|
setKeyboardHeightVar,
|
||||||
|
setViewportHeightVar,
|
||||||
|
} from "./css-vars";
|
||||||
|
import {
|
||||||
|
getKeyboardAdaptEnvironment,
|
||||||
|
shouldEnableKeyboardAdaptation,
|
||||||
|
} from "./environment";
|
||||||
|
import {
|
||||||
|
blurKeyboardTarget,
|
||||||
|
isKeyboardTargetActive,
|
||||||
|
} from "./keyboard-target";
|
||||||
|
import { addKeyboardRecheckListeners } from "./keyboard-event-listeners";
|
||||||
|
import { createKeyboardWatchdog } from "./keyboard-watchdog";
|
||||||
|
import { isPossibleKeyboardCloseEvent } from "./release-events";
|
||||||
|
import type { UseKeyboardHeightOptions, ViewportMetrics } from "./types";
|
||||||
|
import {
|
||||||
|
computeFallbackLift,
|
||||||
|
computeTargetOverlap,
|
||||||
|
formatMetrics,
|
||||||
|
getFocusedDurationMs,
|
||||||
|
getLiftSource,
|
||||||
|
getReleaseSkipReason,
|
||||||
|
readViewportMetrics,
|
||||||
|
shouldReleaseKeyboardState,
|
||||||
|
} from "./viewport-metrics";
|
||||||
|
|
||||||
|
const log = new Logger("HooksUseKeyboardHeight");
|
||||||
|
|
||||||
|
export function useKeyboardHeight({
|
||||||
|
targetRef,
|
||||||
|
active = false,
|
||||||
|
onKeyboardDismiss,
|
||||||
|
}: UseKeyboardHeightOptions = {}): void {
|
||||||
|
const activeRef = useRef(active);
|
||||||
|
const onKeyboardDismissRef = useRef(onKeyboardDismiss);
|
||||||
|
const fallbackAllowedRef = useRef(false);
|
||||||
|
const focusedAtRef = useRef(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
onKeyboardDismissRef.current = onKeyboardDismiss;
|
||||||
|
}, [onKeyboardDismiss]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
activeRef.current = active;
|
||||||
|
fallbackAllowedRef.current = active;
|
||||||
|
focusedAtRef.current = active ? performance.now() : 0;
|
||||||
|
window.dispatchEvent(new Event(RECHECK_EVENT));
|
||||||
|
}, [active]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (typeof window === "undefined") return;
|
||||||
|
|
||||||
|
let rafId: number | null = null;
|
||||||
|
let timeoutIds: number[] = [];
|
||||||
|
let lastKeyboardHeight = -1;
|
||||||
|
let lastViewportHeight = -1;
|
||||||
|
let lastInputLift = -1;
|
||||||
|
let lastMayBeKeyboardClose = false;
|
||||||
|
let fallbackWasApplied = false;
|
||||||
|
let lastEventType = "initial";
|
||||||
|
const environment = getKeyboardAdaptEnvironment();
|
||||||
|
|
||||||
|
log.debug("[keyboard] environment", environment);
|
||||||
|
if (!shouldEnableKeyboardAdaptation(environment)) {
|
||||||
|
resetKeyboardVars();
|
||||||
|
log.debug("[keyboard] disabled", {
|
||||||
|
reason: "regular-browser",
|
||||||
|
environment,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const apply = () => {
|
||||||
|
rafId = null;
|
||||||
|
|
||||||
|
const metrics = readViewportMetrics();
|
||||||
|
let activeNow = isKeyboardTargetActive(
|
||||||
|
targetRef?.current,
|
||||||
|
activeRef.current,
|
||||||
|
);
|
||||||
|
const shouldTryRelease =
|
||||||
|
activeNow &&
|
||||||
|
lastMayBeKeyboardClose &&
|
||||||
|
shouldReleaseKeyboardState(metrics, focusedAtRef.current);
|
||||||
|
|
||||||
|
if (activeNow && lastMayBeKeyboardClose && !shouldTryRelease) {
|
||||||
|
log.debug("[keyboard] release skipped", {
|
||||||
|
reason: getReleaseSkipReason(metrics, focusedAtRef.current),
|
||||||
|
lastEventType,
|
||||||
|
environment,
|
||||||
|
active: activeNow,
|
||||||
|
reactActive: activeRef.current,
|
||||||
|
fallbackAllowed: fallbackAllowedRef.current,
|
||||||
|
lastInputLift,
|
||||||
|
fallbackWasApplied,
|
||||||
|
focusedForMs: getFocusedDurationMs(focusedAtRef.current),
|
||||||
|
metrics: formatMetrics(metrics),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (shouldTryRelease) {
|
||||||
|
log.debug("[keyboard] release confirmed", {
|
||||||
|
lastEventType,
|
||||||
|
environment,
|
||||||
|
active: activeNow,
|
||||||
|
reactActive: activeRef.current,
|
||||||
|
fallbackAllowed: fallbackAllowedRef.current,
|
||||||
|
lastInputLift,
|
||||||
|
fallbackWasApplied,
|
||||||
|
focusedForMs: getFocusedDurationMs(focusedAtRef.current),
|
||||||
|
metrics: formatMetrics(metrics),
|
||||||
|
});
|
||||||
|
releaseKeyboardState("keyboard-close-detected", metrics);
|
||||||
|
activeNow = false;
|
||||||
|
}
|
||||||
|
lastMayBeKeyboardClose = false;
|
||||||
|
|
||||||
|
const keyboardHeight = Math.round(metrics.keyboardHeight);
|
||||||
|
const viewportHeight = Math.round(metrics.visibleHeight);
|
||||||
|
const fallbackLift = fallbackAllowedRef.current
|
||||||
|
? computeFallbackLift(metrics)
|
||||||
|
: 0;
|
||||||
|
const inputLift = Math.round(
|
||||||
|
activeNow
|
||||||
|
? Math.max(
|
||||||
|
computeTargetOverlap(targetRef?.current, metrics.visibleBottom),
|
||||||
|
fallbackLift,
|
||||||
|
)
|
||||||
|
: 0,
|
||||||
|
);
|
||||||
|
fallbackWasApplied =
|
||||||
|
fallbackLift > 0 &&
|
||||||
|
inputLift >= fallbackLift &&
|
||||||
|
fallbackAllowedRef.current;
|
||||||
|
|
||||||
|
if (keyboardHeight !== lastKeyboardHeight) {
|
||||||
|
lastKeyboardHeight = keyboardHeight;
|
||||||
|
setKeyboardHeightVar(keyboardHeight);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (viewportHeight !== lastViewportHeight) {
|
||||||
|
lastViewportHeight = viewportHeight;
|
||||||
|
setViewportHeightVar(viewportHeight);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (inputLift !== lastInputLift) {
|
||||||
|
lastInputLift = inputLift;
|
||||||
|
setInputLiftVar(inputLift);
|
||||||
|
log.debug("[keyboard] apply", {
|
||||||
|
environment,
|
||||||
|
active: activeNow,
|
||||||
|
reactActive: activeRef.current,
|
||||||
|
inputLift,
|
||||||
|
fallbackLift,
|
||||||
|
fallbackAllowed: fallbackAllowedRef.current,
|
||||||
|
source: getLiftSource(inputLift, fallbackLift),
|
||||||
|
metrics: formatMetrics(metrics),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
watchdog.update("apply");
|
||||||
|
};
|
||||||
|
|
||||||
|
const schedule = () => {
|
||||||
|
if (rafId != null) return;
|
||||||
|
rafId = window.requestAnimationFrame(apply);
|
||||||
|
};
|
||||||
|
|
||||||
|
const scheduleRechecks = (event?: Event) => {
|
||||||
|
lastEventType = event?.type ?? "manual";
|
||||||
|
const hadInputLift = fallbackWasApplied || lastInputLift > 0;
|
||||||
|
const possibleKeyboardClose =
|
||||||
|
event != null && isPossibleKeyboardCloseEvent(event, hadInputLift);
|
||||||
|
log.debug("[keyboard] schedule rechecks", {
|
||||||
|
eventType: lastEventType,
|
||||||
|
possibleKeyboardClose,
|
||||||
|
hadInputLift,
|
||||||
|
fallbackWasApplied,
|
||||||
|
lastInputLift,
|
||||||
|
active: activeRef.current,
|
||||||
|
fallbackAllowed: fallbackAllowedRef.current,
|
||||||
|
focusedForMs: getFocusedDurationMs(focusedAtRef.current),
|
||||||
|
});
|
||||||
|
if (possibleKeyboardClose) {
|
||||||
|
lastMayBeKeyboardClose = true;
|
||||||
|
log.debug("[keyboard] possible close detected", {
|
||||||
|
eventType: lastEventType,
|
||||||
|
hadInputLift,
|
||||||
|
fallbackWasApplied,
|
||||||
|
lastInputLift,
|
||||||
|
focusedForMs: getFocusedDurationMs(focusedAtRef.current),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
timeoutIds.forEach((id) => window.clearTimeout(id));
|
||||||
|
timeoutIds = RECHECK_DELAYS_MS.map((delay) =>
|
||||||
|
window.setTimeout(schedule, delay),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const releaseKeyboardState = (
|
||||||
|
reason: string,
|
||||||
|
metrics: ViewportMetrics,
|
||||||
|
): void => {
|
||||||
|
activeRef.current = false;
|
||||||
|
fallbackAllowedRef.current = false;
|
||||||
|
focusedAtRef.current = 0;
|
||||||
|
blurKeyboardTarget(targetRef?.current);
|
||||||
|
onKeyboardDismissRef.current?.();
|
||||||
|
log.debug("[keyboard] released", {
|
||||||
|
reason,
|
||||||
|
environment,
|
||||||
|
metrics: formatMetrics(metrics),
|
||||||
|
});
|
||||||
|
watchdog.stop(reason);
|
||||||
|
};
|
||||||
|
|
||||||
|
const watchdog = createKeyboardWatchdog({
|
||||||
|
environment,
|
||||||
|
log,
|
||||||
|
getTarget: () => targetRef?.current,
|
||||||
|
getReactActive: () => activeRef.current,
|
||||||
|
getFallbackAllowed: () => fallbackAllowedRef.current,
|
||||||
|
getFallbackWasApplied: () => fallbackWasApplied,
|
||||||
|
getLastInputLift: () => lastInputLift,
|
||||||
|
getFocusedAt: () => focusedAtRef.current,
|
||||||
|
onPossibleClose: () => {
|
||||||
|
lastEventType = "watchdog";
|
||||||
|
lastMayBeKeyboardClose = true;
|
||||||
|
},
|
||||||
|
schedule,
|
||||||
|
});
|
||||||
|
const removeKeyboardRecheckListeners =
|
||||||
|
addKeyboardRecheckListeners(scheduleRechecks);
|
||||||
|
|
||||||
|
scheduleRechecks();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (rafId != null) window.cancelAnimationFrame(rafId);
|
||||||
|
watchdog.cleanup();
|
||||||
|
timeoutIds.forEach((id) => window.clearTimeout(id));
|
||||||
|
removeKeyboardRecheckListeners();
|
||||||
|
resetKeyboardVars();
|
||||||
|
};
|
||||||
|
}, [targetRef]);
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { UseKeyboardHeightOptions };
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
import { RECHECK_EVENT } from "./constants";
|
||||||
|
import { getVirtualKeyboard } from "./virtual-keyboard";
|
||||||
|
|
||||||
|
export function addKeyboardRecheckListeners(handler: (event?: Event) => void) {
|
||||||
|
const vv = window.visualViewport;
|
||||||
|
if (vv) {
|
||||||
|
vv.addEventListener("resize", handler);
|
||||||
|
vv.addEventListener("scroll", handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
const virtualKeyboard = getVirtualKeyboard();
|
||||||
|
virtualKeyboard?.addEventListener("geometrychange", handler);
|
||||||
|
window.addEventListener("resize", handler);
|
||||||
|
window.addEventListener("orientationchange", handler);
|
||||||
|
window.addEventListener("focusin", handler);
|
||||||
|
window.addEventListener("focusout", handler);
|
||||||
|
window.addEventListener("blur", handler);
|
||||||
|
document.addEventListener("visibilitychange", handler);
|
||||||
|
window.addEventListener(RECHECK_EVENT, handler);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (vv) {
|
||||||
|
vv.removeEventListener("resize", handler);
|
||||||
|
vv.removeEventListener("scroll", handler);
|
||||||
|
}
|
||||||
|
virtualKeyboard?.removeEventListener("geometrychange", handler);
|
||||||
|
window.removeEventListener("resize", handler);
|
||||||
|
window.removeEventListener("orientationchange", handler);
|
||||||
|
window.removeEventListener("focusin", handler);
|
||||||
|
window.removeEventListener("focusout", handler);
|
||||||
|
window.removeEventListener("blur", handler);
|
||||||
|
document.removeEventListener("visibilitychange", handler);
|
||||||
|
window.removeEventListener(RECHECK_EVENT, handler);
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
export function isKeyboardTargetActive(
|
||||||
|
target: HTMLElement | null | undefined,
|
||||||
|
reactActive: boolean,
|
||||||
|
): boolean {
|
||||||
|
return reactActive || (target != null && document.activeElement === target);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function blurKeyboardTarget(
|
||||||
|
target: HTMLElement | null | undefined,
|
||||||
|
): void {
|
||||||
|
if (!target || document.activeElement !== target) return;
|
||||||
|
target.blur();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getActiveElementTag(): string | null {
|
||||||
|
const activeElement = document.activeElement;
|
||||||
|
if (!activeElement) return null;
|
||||||
|
|
||||||
|
const id = activeElement.id ? `#${activeElement.id}` : "";
|
||||||
|
const className =
|
||||||
|
typeof activeElement.className === "string" && activeElement.className
|
||||||
|
? `.${activeElement.className.split(/\s+/).filter(Boolean).join(".")}`
|
||||||
|
: "";
|
||||||
|
|
||||||
|
return `${activeElement.tagName.toLowerCase()}${id}${className}`;
|
||||||
|
}
|
||||||
@@ -0,0 +1,176 @@
|
|||||||
|
import type { Logger } from "@/utils";
|
||||||
|
|
||||||
|
import {
|
||||||
|
FALLBACK_WATCHDOG_INTERVAL_MS,
|
||||||
|
FALLBACK_WATCHDOG_LOG_INTERVAL_MS,
|
||||||
|
} from "./constants";
|
||||||
|
import type { KeyboardAdaptEnvironment, ViewportMetrics } from "./types";
|
||||||
|
import {
|
||||||
|
didViewportMetricsChange,
|
||||||
|
formatMetrics,
|
||||||
|
getFocusedDurationMs,
|
||||||
|
hasDetectedKeyboard,
|
||||||
|
readViewportMetrics,
|
||||||
|
} from "./viewport-metrics";
|
||||||
|
import {
|
||||||
|
getActiveElementTag,
|
||||||
|
isKeyboardTargetActive,
|
||||||
|
} from "./keyboard-target";
|
||||||
|
|
||||||
|
interface KeyboardWatchdogOptions {
|
||||||
|
environment: KeyboardAdaptEnvironment;
|
||||||
|
log: Logger;
|
||||||
|
getTarget: () => HTMLElement | null | undefined;
|
||||||
|
getReactActive: () => boolean;
|
||||||
|
getFallbackAllowed: () => boolean;
|
||||||
|
getFallbackWasApplied: () => boolean;
|
||||||
|
getLastInputLift: () => number;
|
||||||
|
getFocusedAt: () => number;
|
||||||
|
onPossibleClose: () => void;
|
||||||
|
schedule: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface KeyboardWatchdog {
|
||||||
|
update: (reason: string) => void;
|
||||||
|
stop: (reason: string) => void;
|
||||||
|
cleanup: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createKeyboardWatchdog({
|
||||||
|
environment,
|
||||||
|
log,
|
||||||
|
getTarget,
|
||||||
|
getReactActive,
|
||||||
|
getFallbackAllowed,
|
||||||
|
getFallbackWasApplied,
|
||||||
|
getLastInputLift,
|
||||||
|
getFocusedAt,
|
||||||
|
onPossibleClose,
|
||||||
|
schedule,
|
||||||
|
}: KeyboardWatchdogOptions): KeyboardWatchdog {
|
||||||
|
let watchdogId: number | null = null;
|
||||||
|
let lastWatchdogLogAt = 0;
|
||||||
|
let lastWatchdogMetrics: ViewportMetrics | null = null;
|
||||||
|
let lastWatchdogKeyboardDetected = false;
|
||||||
|
|
||||||
|
const shouldRun = (): boolean => {
|
||||||
|
if (!environment.usesXiaomiFacebookFallback) return false;
|
||||||
|
return isKeyboardTargetActive(getTarget(), getReactActive());
|
||||||
|
};
|
||||||
|
|
||||||
|
const update = (reason: string): void => {
|
||||||
|
if (shouldRun()) {
|
||||||
|
start(reason);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
stop(reason);
|
||||||
|
};
|
||||||
|
|
||||||
|
const start = (reason: string): void => {
|
||||||
|
if (watchdogId != null) return;
|
||||||
|
const metrics = readViewportMetrics();
|
||||||
|
watchdogId = window.setInterval(
|
||||||
|
run,
|
||||||
|
FALLBACK_WATCHDOG_INTERVAL_MS,
|
||||||
|
);
|
||||||
|
lastWatchdogLogAt = performance.now();
|
||||||
|
lastWatchdogMetrics = metrics;
|
||||||
|
lastWatchdogKeyboardDetected = hasDetectedKeyboard(metrics);
|
||||||
|
log.debug("[keyboard] watchdog started", {
|
||||||
|
reason,
|
||||||
|
environment,
|
||||||
|
active: getReactActive(),
|
||||||
|
fallbackAllowed: getFallbackAllowed(),
|
||||||
|
fallbackWasApplied: getFallbackWasApplied(),
|
||||||
|
lastInputLift: getLastInputLift(),
|
||||||
|
keyboardDetected: lastWatchdogKeyboardDetected,
|
||||||
|
metrics: formatMetrics(metrics),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const stop = (reason: string): void => {
|
||||||
|
if (watchdogId == null) return;
|
||||||
|
window.clearInterval(watchdogId);
|
||||||
|
watchdogId = null;
|
||||||
|
lastWatchdogLogAt = 0;
|
||||||
|
lastWatchdogMetrics = null;
|
||||||
|
lastWatchdogKeyboardDetected = false;
|
||||||
|
log.debug("[keyboard] watchdog stopped", {
|
||||||
|
reason,
|
||||||
|
environment,
|
||||||
|
active: getReactActive(),
|
||||||
|
fallbackAllowed: getFallbackAllowed(),
|
||||||
|
fallbackWasApplied: getFallbackWasApplied(),
|
||||||
|
lastInputLift: getLastInputLift(),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const cleanup = (): void => {
|
||||||
|
if (watchdogId == null) return;
|
||||||
|
window.clearInterval(watchdogId);
|
||||||
|
watchdogId = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const run = (): void => {
|
||||||
|
const metrics = readViewportMetrics();
|
||||||
|
const activeNow = isKeyboardTargetActive(getTarget(), getReactActive());
|
||||||
|
const keyboardDetected = hasDetectedKeyboard(metrics);
|
||||||
|
const metricsChanged = didViewportMetricsChange(
|
||||||
|
lastWatchdogMetrics,
|
||||||
|
metrics,
|
||||||
|
);
|
||||||
|
const now = performance.now();
|
||||||
|
const shouldLog =
|
||||||
|
metricsChanged ||
|
||||||
|
now - lastWatchdogLogAt >= FALLBACK_WATCHDOG_LOG_INTERVAL_MS;
|
||||||
|
|
||||||
|
if (!activeNow) {
|
||||||
|
log.debug("[keyboard] watchdog inactive target", {
|
||||||
|
environment,
|
||||||
|
reactActive: getReactActive(),
|
||||||
|
activeElement: getActiveElementTag(),
|
||||||
|
metrics: formatMetrics(metrics),
|
||||||
|
});
|
||||||
|
stop("inactive-target");
|
||||||
|
schedule();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (lastWatchdogKeyboardDetected && !keyboardDetected) {
|
||||||
|
onPossibleClose();
|
||||||
|
log.debug("[keyboard] watchdog possible close detected", {
|
||||||
|
environment,
|
||||||
|
fallbackAllowed: getFallbackAllowed(),
|
||||||
|
fallbackWasApplied: getFallbackWasApplied(),
|
||||||
|
lastInputLift: getLastInputLift(),
|
||||||
|
previousMetrics: lastWatchdogMetrics
|
||||||
|
? formatMetrics(lastWatchdogMetrics)
|
||||||
|
: null,
|
||||||
|
metrics: formatMetrics(metrics),
|
||||||
|
});
|
||||||
|
schedule();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (shouldLog) {
|
||||||
|
lastWatchdogLogAt = now;
|
||||||
|
log.debug("[keyboard] watchdog tick", {
|
||||||
|
environment,
|
||||||
|
active: activeNow,
|
||||||
|
reactActive: getReactActive(),
|
||||||
|
fallbackAllowed: getFallbackAllowed(),
|
||||||
|
fallbackWasApplied: getFallbackWasApplied(),
|
||||||
|
lastInputLift: getLastInputLift(),
|
||||||
|
keyboardDetected,
|
||||||
|
metricsChanged,
|
||||||
|
focusedForMs: getFocusedDurationMs(getFocusedAt()),
|
||||||
|
activeElement: getActiveElementTag(),
|
||||||
|
metrics: formatMetrics(metrics),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
lastWatchdogMetrics = metrics;
|
||||||
|
lastWatchdogKeyboardDetected = keyboardDetected;
|
||||||
|
};
|
||||||
|
|
||||||
|
return { update, stop, cleanup };
|
||||||
|
}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import { KEYBOARD_RELEASE_EVENT_TYPES } from "./constants";
|
||||||
|
|
||||||
|
export function isPossibleKeyboardCloseEvent(
|
||||||
|
event: Event,
|
||||||
|
hadInputLift: boolean,
|
||||||
|
): boolean {
|
||||||
|
if (!hadInputLift) {
|
||||||
|
return event.type === "resize" || event.type === "geometrychange";
|
||||||
|
}
|
||||||
|
return KEYBOARD_RELEASE_EVENT_TYPES.has(event.type);
|
||||||
|
}
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
import type { RefObject } from "react";
|
||||||
|
|
||||||
|
export interface UseKeyboardHeightOptions {
|
||||||
|
targetRef?: RefObject<HTMLElement | null>;
|
||||||
|
active?: boolean;
|
||||||
|
onKeyboardDismiss?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ViewportMetrics {
|
||||||
|
hasVisualViewport: boolean;
|
||||||
|
hasVirtualKeyboard: boolean;
|
||||||
|
layoutHeight: number;
|
||||||
|
visibleHeight: number;
|
||||||
|
visibleBottom: number;
|
||||||
|
keyboardHeight: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface KeyboardAdaptEnvironment {
|
||||||
|
platform: string;
|
||||||
|
osName: string;
|
||||||
|
osVersion: string;
|
||||||
|
deviceVendor: string;
|
||||||
|
deviceModel: string;
|
||||||
|
isAndroid: boolean;
|
||||||
|
isIOS: boolean;
|
||||||
|
isMobile: boolean;
|
||||||
|
browserName: string;
|
||||||
|
browserVersion: string;
|
||||||
|
isInAppBrowser: boolean;
|
||||||
|
inAppBrowserName: string | null;
|
||||||
|
isXiaomiFamilyDevice: boolean;
|
||||||
|
isFacebookInAppBrowser: boolean;
|
||||||
|
hasVisualViewport: boolean;
|
||||||
|
hasVirtualKeyboard: boolean;
|
||||||
|
usesXiaomiFacebookFallback: boolean;
|
||||||
|
}
|
||||||
@@ -0,0 +1,150 @@
|
|||||||
|
import {
|
||||||
|
FALLBACK_CLOSE_GRACE_MS,
|
||||||
|
FALLBACK_KEYBOARD_MAX,
|
||||||
|
FALLBACK_KEYBOARD_MIN,
|
||||||
|
FALLBACK_KEYBOARD_RATIO,
|
||||||
|
FOCUS_GAP_PX,
|
||||||
|
} from "./constants";
|
||||||
|
import { shouldUseInAppKeyboardFallback } from "./environment";
|
||||||
|
import type { ViewportMetrics } from "./types";
|
||||||
|
import { getVirtualKeyboard } from "./virtual-keyboard";
|
||||||
|
|
||||||
|
export function readViewportMetrics(): ViewportMetrics {
|
||||||
|
const layoutHeight = window.innerHeight;
|
||||||
|
const vv = window.visualViewport;
|
||||||
|
const virtualKeyboard = getVirtualKeyboard();
|
||||||
|
const virtualKeyboardRect = virtualKeyboard?.boundingRect ?? null;
|
||||||
|
const virtualKeyboardHeight = virtualKeyboardRect?.height ?? 0;
|
||||||
|
|
||||||
|
if (!vv) {
|
||||||
|
const visibleBottom =
|
||||||
|
virtualKeyboardHeight > 0
|
||||||
|
? layoutHeight - virtualKeyboardHeight
|
||||||
|
: layoutHeight;
|
||||||
|
return {
|
||||||
|
hasVisualViewport: false,
|
||||||
|
hasVirtualKeyboard: virtualKeyboard != null,
|
||||||
|
layoutHeight,
|
||||||
|
visibleHeight: visibleBottom,
|
||||||
|
visibleBottom,
|
||||||
|
keyboardHeight: virtualKeyboardHeight,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const visualBottom = vv.offsetTop + vv.height;
|
||||||
|
const keyboardTop =
|
||||||
|
virtualKeyboardHeight > 0
|
||||||
|
? Math.min(
|
||||||
|
virtualKeyboardRect?.y ?? layoutHeight,
|
||||||
|
layoutHeight - virtualKeyboardHeight,
|
||||||
|
)
|
||||||
|
: layoutHeight;
|
||||||
|
const visibleBottom = Math.min(visualBottom, keyboardTop);
|
||||||
|
const visibleHeight = Math.min(vv.height, visibleBottom);
|
||||||
|
|
||||||
|
return {
|
||||||
|
hasVisualViewport: true,
|
||||||
|
hasVirtualKeyboard: virtualKeyboard != null,
|
||||||
|
layoutHeight,
|
||||||
|
visibleHeight,
|
||||||
|
visibleBottom,
|
||||||
|
keyboardHeight: Math.max(
|
||||||
|
0,
|
||||||
|
layoutHeight - visibleBottom,
|
||||||
|
virtualKeyboardHeight,
|
||||||
|
),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function computeTargetOverlap(
|
||||||
|
target: HTMLElement | null | undefined,
|
||||||
|
visibleBottom: number,
|
||||||
|
): number {
|
||||||
|
if (!target) return 0;
|
||||||
|
const rect = target.getBoundingClientRect();
|
||||||
|
return Math.max(0, rect.bottom + FOCUS_GAP_PX - visibleBottom);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function computeFallbackLift(metrics: ViewportMetrics): number {
|
||||||
|
if (!shouldUseInAppKeyboardFallback()) return 0;
|
||||||
|
|
||||||
|
const viewportAlreadyShrank = metrics.visibleHeight < metrics.layoutHeight * 0.82;
|
||||||
|
const keyboardAlreadyDetected = metrics.keyboardHeight > 80;
|
||||||
|
if (viewportAlreadyShrank || keyboardAlreadyDetected) return 0;
|
||||||
|
|
||||||
|
return clamp(
|
||||||
|
Math.round(metrics.layoutHeight * FALLBACK_KEYBOARD_RATIO),
|
||||||
|
FALLBACK_KEYBOARD_MIN,
|
||||||
|
FALLBACK_KEYBOARD_MAX,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function shouldReleaseKeyboardState(
|
||||||
|
metrics: ViewportMetrics,
|
||||||
|
focusedAt: number,
|
||||||
|
): boolean {
|
||||||
|
if (focusedAt <= 0) return false;
|
||||||
|
if (performance.now() - focusedAt < FALLBACK_CLOSE_GRACE_MS) return false;
|
||||||
|
return !hasDetectedKeyboard(metrics);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getFocusedDurationMs(focusedAt: number): number | null {
|
||||||
|
if (focusedAt <= 0) return null;
|
||||||
|
return Math.round(performance.now() - focusedAt);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getReleaseSkipReason(
|
||||||
|
metrics: ViewportMetrics,
|
||||||
|
focusedAt: number,
|
||||||
|
): string {
|
||||||
|
if (focusedAt <= 0) return "not-focused-by-hook";
|
||||||
|
if (performance.now() - focusedAt < FALLBACK_CLOSE_GRACE_MS) {
|
||||||
|
return "within-close-grace-window";
|
||||||
|
}
|
||||||
|
if (hasDetectedKeyboard(metrics)) return "keyboard-still-detected";
|
||||||
|
return "unknown";
|
||||||
|
}
|
||||||
|
|
||||||
|
export function didViewportMetricsChange(
|
||||||
|
previous: ViewportMetrics | null,
|
||||||
|
current: ViewportMetrics,
|
||||||
|
): boolean {
|
||||||
|
if (!previous) return true;
|
||||||
|
return (
|
||||||
|
Math.round(previous.layoutHeight) !== Math.round(current.layoutHeight) ||
|
||||||
|
Math.round(previous.visibleHeight) !== Math.round(current.visibleHeight) ||
|
||||||
|
Math.round(previous.visibleBottom) !== Math.round(current.visibleBottom) ||
|
||||||
|
Math.round(previous.keyboardHeight) !== Math.round(current.keyboardHeight)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function hasDetectedKeyboard(metrics: ViewportMetrics): boolean {
|
||||||
|
return (
|
||||||
|
metrics.keyboardHeight > 80 ||
|
||||||
|
metrics.visibleHeight < metrics.layoutHeight * 0.82
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatMetrics(metrics: ViewportMetrics) {
|
||||||
|
return {
|
||||||
|
hasVisualViewport: metrics.hasVisualViewport,
|
||||||
|
hasVirtualKeyboard: metrics.hasVirtualKeyboard,
|
||||||
|
layoutHeight: Math.round(metrics.layoutHeight),
|
||||||
|
visibleHeight: Math.round(metrics.visibleHeight),
|
||||||
|
visibleBottom: Math.round(metrics.visibleBottom),
|
||||||
|
keyboardHeight: Math.round(metrics.keyboardHeight),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getLiftSource(inputLift: number, fallbackLift: number): string {
|
||||||
|
if (inputLift <= 0) return "none";
|
||||||
|
if (fallbackLift > 0 && inputLift === fallbackLift) {
|
||||||
|
return "xiaomi-facebook-fallback";
|
||||||
|
}
|
||||||
|
if (fallbackLift > 0) return "overlap-and-fallback";
|
||||||
|
return "target-overlap";
|
||||||
|
}
|
||||||
|
|
||||||
|
function clamp(value: number, min: number, max: number): number {
|
||||||
|
return Math.min(max, Math.max(min, value));
|
||||||
|
}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
interface VirtualKeyboardLike extends EventTarget {
|
||||||
|
readonly boundingRect: DOMRectReadOnly;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getVirtualKeyboard(): VirtualKeyboardLike | null {
|
||||||
|
if (typeof navigator === "undefined") return null;
|
||||||
|
const nav = navigator as Navigator & {
|
||||||
|
virtualKeyboard?: VirtualKeyboardLike;
|
||||||
|
};
|
||||||
|
return nav.virtualKeyboard ?? null;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user