Improve Android haptic, offer toggle for haptics in the app (#3482)

* improve android haptics, offer toggle for haptics

* update haptics.ts

* default to false

* simplify to `playHaptic`

* just leave them as `feedInfo`

* use a hook for `playHaptic`

* missed one of them

src/state/persisted/legacy.ts

@@ -2,7 +2,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage'
 
 import {logger} from '#/logger'
 import {defaults, Schema, schema} from '#/state/persisted/schema'
-import {write, read} from '#/state/persisted/store'
+import {read, write} from '#/state/persisted/store'
 
 /**
  * The shape of the serialized data from our legacy Mobx store.
@@ -113,6 +113,7 @@ export function transform(legacy: Partial<LegacySchema>): Schema {
     externalEmbeds: defaults.externalEmbeds,
     lastSelectedHomeFeed: defaults.lastSelectedHomeFeed,
     pdsAddressHistory: defaults.pdsAddressHistory,
+    disableHaptics: defaults.disableHaptics,
   }
 }
 

src/state/persisted/schema.ts

@@ -1,4 +1,5 @@
 import {z} from 'zod'
+
 import {deviceLocales} from '#/platform/detection'
 
 const externalEmbedOptions = ['show', 'hide'] as const
@@ -58,6 +59,7 @@ export const schema = z.object({
   useInAppBrowser: z.boolean().optional(),
   lastSelectedHomeFeed: z.string().optional(),
   pdsAddressHistory: z.array(z.string()).optional(),
+  disableHaptics: z.boolean().optional(),
 })
 export type Schema = z.infer<typeof schema>
 
@@ -93,4 +95,5 @@ export const defaults: Schema = {
   useInAppBrowser: undefined,
   lastSelectedHomeFeed: undefined,
   pdsAddressHistory: [],
+  disableHaptics: false,
 }

src/state/preferences/disable-haptics.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+import * as persisted from '#/state/persisted'
+
+type StateContext = boolean
+type SetContext = (v: boolean) => void
+
+const stateContext = React.createContext<StateContext>(
+  Boolean(persisted.defaults.disableHaptics),
+)
+const setContext = React.createContext<SetContext>((_: boolean) => {})
+
+export function Provider({children}: {children: React.ReactNode}) {
+  const [state, setState] = React.useState(
+    Boolean(persisted.get('disableHaptics')),
+  )
+
+  const setStateWrapped = React.useCallback(
+    (hapticsEnabled: persisted.Schema['disableHaptics']) => {
+      setState(Boolean(hapticsEnabled))
+      persisted.write('disableHaptics', hapticsEnabled)
+    },
+    [setState],
+  )
+
+  React.useEffect(() => {
+    return persisted.onUpdate(() => {
+      setState(Boolean(persisted.get('disableHaptics')))
+    })
+  }, [setStateWrapped])
+
+  return (
+    <stateContext.Provider value={state}>
+      <setContext.Provider value={setStateWrapped}>
+        {children}
+      </setContext.Provider>
+    </stateContext.Provider>
+  )
+}
+
+export const useHapticsDisabled = () => React.useContext(stateContext)
+export const useSetHapticsDisabled = () => React.useContext(setContext)

src/state/preferences/index.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
-import {Provider as LanguagesProvider} from './languages'
+
 import {Provider as AltTextRequiredProvider} from '../preferences/alt-text-required'
 import {Provider as HiddenPostsProvider} from '../preferences/hidden-posts'
+import {Provider as DisableHapticsProvider} from './disable-haptics'
 import {Provider as ExternalEmbedsProvider} from './external-embeds-prefs'
 import {Provider as InAppBrowserProvider} from './in-app-browser'
+import {Provider as LanguagesProvider} from './languages'
 
-export {useLanguagePrefs, useLanguagePrefsApi} from './languages'
 export {
   useRequireAltTextEnabled,
   useSetRequireAltTextEnabled,
@@ -16,6 +17,7 @@ export {
 } from './external-embeds-prefs'
 export * from './hidden-posts'
 export {useLabelDefinitions} from './label-defs'
+export {useLanguagePrefs, useLanguagePrefsApi} from './languages'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   return (
@@ -23,7 +25,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
       <AltTextRequiredProvider>
         <ExternalEmbedsProvider>
           <HiddenPostsProvider>
-            <InAppBrowserProvider>{children}</InAppBrowserProvider>
+            <InAppBrowserProvider>
+              <DisableHapticsProvider>{children}</DisableHapticsProvider>
+            </InAppBrowserProvider>
           </HiddenPostsProvider>
         </ExternalEmbedsProvider>
       </AltTextRequiredProvider>