fix(ui): mobile in-app WebView polish (tap-flash, VK haptics, swipe-back)
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 57s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m13s
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 57s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m13s
- Tap-highlight: add -webkit-tap-highlight-color: transparent on #app. Android in-app WebViews (Telegram, VK) flashed a momentary selection-like box on tappable nodes on tap — seen on the header title and the back chevron; user-select (already none) does not govern it. Inherited, so this clears it app-wide. - VK haptics: mirror the Telegram haptic set on VK via VK Bridge taptic (impact / notification / selection), routed through a new shared lib/haptics.ts dispatcher. VK users previously got no haptics; the game and error call sites now fire haptic() instead of telegramHaptic(). - VK swipe-back: disable VK's horizontal swipe-back at launch (VKWebAppSetSwipeSettings history:false) so it does not fight the app's own edge-swipe-back and on-board tile drag — parity with Telegram's disabled vertical swipes; the app owns navigation via its back chevron. Docs: UI_DESIGN (no-select / tap-highlight, VK integration).
This commit is contained in:
@@ -6,6 +6,8 @@
|
||||
// (VKWebAppGetUserInfo, since VK omits it from the signed launch params). Every helper is safe to
|
||||
// call outside VK.
|
||||
|
||||
import type { Haptic } from './telegram';
|
||||
|
||||
async function bridge() {
|
||||
return (await import('@vkontakte/vk-bridge')).default;
|
||||
}
|
||||
@@ -160,3 +162,39 @@ export async function vkOnInsets(handler: (insets: VKInsets) => void): Promise<v
|
||||
// Outside VK / bridge unavailable: the CSS env() safe-area fallback applies.
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* vkHaptic fires a VK Bridge haptic mirroring the Telegram set: a selection tick
|
||||
* (VKWebAppTapticSelectionChanged), a success/warning/error notification
|
||||
* (VKWebAppTapticNotificationOccurred) or a light/medium/heavy impact (VKWebAppTapticImpactOccurred).
|
||||
* Best-effort and a no-op outside VK or on a client without taptic support (the send rejects and is
|
||||
* swallowed), so callers fire it unconditionally.
|
||||
*/
|
||||
export async function vkHaptic(kind: Haptic): Promise<void> {
|
||||
try {
|
||||
const b = await bridge();
|
||||
if (kind === 'select') {
|
||||
await b.send('VKWebAppTapticSelectionChanged', {});
|
||||
} else if (kind === 'success' || kind === 'warning' || kind === 'error') {
|
||||
await b.send('VKWebAppTapticNotificationOccurred', { type: kind });
|
||||
} else {
|
||||
await b.send('VKWebAppTapticImpactOccurred', { style: kind });
|
||||
}
|
||||
} catch {
|
||||
// Outside VK / no taptic support: silent, like the Telegram haptic off-platform.
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* vkDisableSwipeBack turns off VK's horizontal swipe-back gesture (VKWebAppSetSwipeSettings with
|
||||
* history:false) so it does not fight the app's own edge-swipe-back and on-board tile drag — the
|
||||
* app owns navigation through its back chevron, as on Telegram (telegramDisableVerticalSwipes).
|
||||
* Best-effort; a no-op outside VK or on a client without the method.
|
||||
*/
|
||||
export async function vkDisableSwipeBack(): Promise<void> {
|
||||
try {
|
||||
await (await bridge()).send('VKWebAppSetSwipeSettings', { history: false });
|
||||
} catch {
|
||||
// Outside VK / unsupported: VK's default gesture handling stays as-is.
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user