Add support for web haptic feedback in Compose UI

Author: eymar

compose/ui/ui/src/webMain/kotlin/androidx/compose/ui/platform/DefaultHapticFeedback.web.kt

@@ -25,48 +25,64 @@ import kotlin.js.js
 import kotlin.js.toJsArray
 import kotlin.js.toJsNumber
 
+@OptIn(ExperimentalWasmJsInterop::class)
 internal class WebHapticFeedback : HapticFeedback {
-    @OptIn(ExperimentalWasmJsInterop::class)
+    // Check if API is supported before doing anything
+    private val isVibrationSupported = isVibrationSupported()
+
+    // Declare these hardcoded patterns to avoid js-interop on every call
+    private val ConfirmVibrationPattern: JsArray<JsNumber> = vibrationPatternOf(18, 32, 36)
+    private val RejectVibrationPattern: JsArray<JsNumber> = vibrationPatternOf(18, 28, 18, 28, 18)
+    private val SinglePulseVibrationPattern: JsArray<JsNumber> = vibrationPatternOf(12)
+    private val SoftTickVibrationPattern: JsArray<JsNumber> = vibrationPatternOf(6)
+
     override fun performHapticFeedback(hapticFeedbackType: HapticFeedbackType) {
-        vibrate(vibrationPatternFor(hapticFeedbackType))
+        if (!isVibrationSupported) return
+        val pattern = vibrationPatternFor(hapticFeedbackType) ?: return
+        vibrate(pattern)
     }
-}
 
-// TODO: to eventually avoid the hardcoded values, follow the new browser API proposal https://github.com/WICG/web-haptics
-// and rely on it once it's implemented
-@OptIn(ExperimentalWasmJsInterop::class)
-internal fun vibrationPatternFor(hapticFeedbackType: HapticFeedbackType): JsArray<JsNumber> =
-    when (hapticFeedbackType) {
-        HapticFeedbackType.Confirm -> vibrationPatternOf(18, 32, 36)
-        HapticFeedbackType.Reject -> vibrationPatternOf(18, 28, 18, 28, 18)
-        HapticFeedbackType.ContextClick,
-        HapticFeedbackType.GestureEnd,
-        HapticFeedbackType.GestureThresholdActivate,
-        HapticFeedbackType.LongPress,
-        HapticFeedbackType.ToggleOff,
-        HapticFeedbackType.ToggleOn,
-        HapticFeedbackType.VirtualKey -> vibrationPatternOf(12)
-        HapticFeedbackType.KeyboardTap,
-        HapticFeedbackType.SegmentFrequentTick,
-        HapticFeedbackType.SegmentTick,
-        HapticFeedbackType.TextHandleMove -> vibrationPatternOf(6)
-        else -> vibrationPatternOf(12)
+    // We don't have a high-level browser API right now. So we hardcode the patterns here.
+    // TODO: to eventually avoid the hardcoded values, follow the new browser API proposal https://github.com/WICG/web-haptics
+    // and rely on it once it's implemented
+    @OptIn(ExperimentalWasmJsInterop::class)
+    internal fun vibrationPatternFor(hapticFeedbackType: HapticFeedbackType): JsArray<JsNumber>? {
+        return when (hapticFeedbackType) {
+            HapticFeedbackType.Confirm -> ConfirmVibrationPattern
+            HapticFeedbackType.Reject -> RejectVibrationPattern
+            HapticFeedbackType.ContextClick,
+            HapticFeedbackType.GestureEnd,
+            HapticFeedbackType.GestureThresholdActivate,
+            HapticFeedbackType.LongPress,
+            HapticFeedbackType.ToggleOff,
+            HapticFeedbackType.ToggleOn,
+            HapticFeedbackType.VirtualKey -> SinglePulseVibrationPattern
+            HapticFeedbackType.KeyboardTap,
+            HapticFeedbackType.SegmentFrequentTick,
+            HapticFeedbackType.SegmentTick -> SoftTickVibrationPattern
+            HapticFeedbackType.TextHandleMove -> null
+            else -> null
+        }
     }
+}
 
 @OptIn(ExperimentalWasmJsInterop::class)
 private fun vibrationPatternOf(vararg durations: Int): JsArray<JsNumber> =
     durations.map { it.toDouble().toJsNumber() }.toJsArray()
 
+@OptIn(ExperimentalWasmJsInterop::class)
+private fun isVibrationSupported(): Boolean = js(
+    //language=javascript
+    """
+        typeof window !== 'undefined' &&
+        window.navigator != null &&
+        typeof window.navigator.vibrate === 'function'
+    """
+)
+
 //language=javascript
 @OptIn(ExperimentalWasmJsInterop::class)
 private fun vibrate(pattern: JsArray<JsNumber>) {
-    js(
-        """
-        if (typeof window !== 'undefined' &&
-            window.navigator != null &&
-            typeof window.navigator.vibrate === 'function') {
-            window.navigator.vibrate(pattern)
-        }
-        """
-    )
+    // Assuming the API support has been checked in advance, we can safely call it
+    js("window.navigator.vibrate(pattern)")
 }

compose/ui/ui/src/webTest/kotlin/androidx/compose/ui/platform/WebHapticFeedbackTest.kt

@@ -19,57 +19,32 @@
 package androidx.compose.ui.platform
 
 import androidx.compose.ui.OnCanvasTests
+import androidx.compose.ui.hapticfeedback.HapticFeedback
 import androidx.compose.ui.hapticfeedback.HapticFeedbackType
 import kotlin.test.Test
 import kotlin.test.assertContentEquals
+import kotlin.test.assertEquals
 import kotlin.test.assertIs
+import kotlin.test.assertNotNull
+import kotlin.test.assertNull
 
 class WebHapticFeedbackTest : OnCanvasTests {
 
     @Test
     fun composeWindowProvidesWebHapticFeedback() = runApplicationTest {
-        var hapticFeedback: Any? = null
+        var hapticFeedback: WebHapticFeedback? = null
 
         createComposeWindow {
-            hapticFeedback = LocalHapticFeedback.current
+            hapticFeedback = LocalHapticFeedback.current as? WebHapticFeedback
         }
 
-        assertIs<WebHapticFeedback>(hapticFeedback)
-    }
+        assertNotNull(hapticFeedback, "LocalHapticFeedback should provide WebHapticFeedback")
+        val pattern = hapticFeedback!!.vibrationPatternFor(HapticFeedbackType.Confirm)
 
-    @Test
-    fun mapsConfirmToMultiPulsePattern() {
-        assertPatternEquals(
-            expected = listOf(18, 32, 36),
-            actual = vibrationPatternFor(HapticFeedbackType.Confirm)
-        )
-    }
-
-    @Test
-    fun mapsRejectToErrorPattern() {
-        assertPatternEquals(
-            expected = listOf(18, 28, 18, 28, 18),
-            actual = vibrationPatternFor(HapticFeedbackType.Reject)
-        )
-    }
-
-    @Test
-    fun mapsSelectionAndTextHandleTypesToShortPulse() {
-        assertPatternEquals(
-            expected = listOf(6),
-            actual = vibrationPatternFor(HapticFeedbackType.SegmentTick)
-        )
-        assertPatternEquals(
-            expected = listOf(6),
-            actual = vibrationPatternFor(HapticFeedbackType.TextHandleMove)
-        )
-    }
+        assertNotNull(pattern, "pattern should not be null")
 
-    private fun assertPatternEquals(expected: List<Int>, actual: dynamic) {
-        val actualValues = js("Array.from(actual)").unsafeCast<Array<Double>>()
-        assertContentEquals(
-            expected.toTypedArray(),
-            actualValues.map(Double::toInt).toTypedArray()
-        )
+        // We can't verify the vibration has been performed,
+        // so just call performHapticFeedback to check that it doesn't fail
+        hapticFeedback!!.performHapticFeedback(HapticFeedbackType.Confirm)
     }
 }