mirror of
https://github.com/wu736139669/hapi.git
synced 2026-08-05 06:24:37 +00:00
feat: add web vibration api fallback for haptic feedback
Replace no-op browser haptic feedback with Web Vibration API support, allowing haptic feedback when running outside Telegram Mini App. Also remove stale react-syntax-highlighter type reference from tsconfig.
This commit is contained in:
@@ -16,20 +16,51 @@ export type PlatformHaptic = {
|
|||||||
export type Platform = {
|
export type Platform = {
|
||||||
/** Whether running in Telegram Mini App */
|
/** Whether running in Telegram Mini App */
|
||||||
isTelegram: boolean
|
isTelegram: boolean
|
||||||
/** Haptic feedback (no-op on browser) */
|
/** Haptic feedback (falls back to Vibration API on browser) */
|
||||||
haptic: PlatformHaptic
|
haptic: PlatformHaptic
|
||||||
}
|
}
|
||||||
|
|
||||||
function createHaptic(): PlatformHaptic {
|
function createHaptic(): PlatformHaptic {
|
||||||
|
const tg = getTelegramWebApp()
|
||||||
|
|
||||||
|
// Vibration patterns for web fallback (in ms)
|
||||||
|
const vibrationPatterns = {
|
||||||
|
light: 10,
|
||||||
|
medium: 20,
|
||||||
|
heavy: 30,
|
||||||
|
rigid: 15,
|
||||||
|
soft: 10,
|
||||||
|
success: 20,
|
||||||
|
warning: [20, 50, 20] as number | number[],
|
||||||
|
error: [30, 50, 30] as number | number[],
|
||||||
|
selection: 5,
|
||||||
|
}
|
||||||
|
|
||||||
|
const vibrate = (pattern: number | number[]) => {
|
||||||
|
navigator.vibrate?.(pattern)
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
impact: (style: HapticStyle) => {
|
impact: (style: HapticStyle) => {
|
||||||
getTelegramWebApp()?.HapticFeedback?.impactOccurred(style)
|
if (tg?.HapticFeedback) {
|
||||||
|
tg.HapticFeedback.impactOccurred(style)
|
||||||
|
} else {
|
||||||
|
vibrate(vibrationPatterns[style])
|
||||||
|
}
|
||||||
},
|
},
|
||||||
notification: (type: HapticNotification) => {
|
notification: (type: HapticNotification) => {
|
||||||
getTelegramWebApp()?.HapticFeedback?.notificationOccurred(type)
|
if (tg?.HapticFeedback) {
|
||||||
|
tg.HapticFeedback.notificationOccurred(type)
|
||||||
|
} else {
|
||||||
|
vibrate(vibrationPatterns[type])
|
||||||
|
}
|
||||||
},
|
},
|
||||||
selection: () => {
|
selection: () => {
|
||||||
getTelegramWebApp()?.HapticFeedback?.selectionChanged()
|
if (tg?.HapticFeedback) {
|
||||||
|
tg.HapticFeedback.selectionChanged()
|
||||||
|
} else {
|
||||||
|
vibrate(vibrationPatterns.selection)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+1
-1
@@ -5,7 +5,7 @@
|
|||||||
"lib": ["ES2020", "ESNext", "ESNext.Disposable", "DOM", "DOM.Iterable"],
|
"lib": ["ES2020", "ESNext", "ESNext.Disposable", "DOM", "DOM.Iterable"],
|
||||||
"jsx": "react-jsx",
|
"jsx": "react-jsx",
|
||||||
"noEmit": true,
|
"noEmit": true,
|
||||||
"types": ["vite/client", "react-syntax-highlighter"],
|
"types": ["vite/client"],
|
||||||
"baseUrl": ".",
|
"baseUrl": ".",
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": ["./src/*"]
|
"@/*": ["./src/*"]
|
||||||
|
|||||||
Reference in New Issue
Block a user