plat merge 2

shared/app/index.native.tsx

@@ -4,7 +4,7 @@ import {useConfigState} from '@/stores/config'
 import {useShellState} from '@/stores/shell'
 import * as Kb from '@/common-adapters'
 import * as React from 'react'
-import Main from './main.native'
+import Main from './main'
 import {KeyboardProvider} from 'react-native-keyboard-controller'
 import Animated, {ReducedMotionConfig, ReduceMotion} from 'react-native-reanimated'
 import {AppRegistry, AppState, Appearance, Keyboard} from 'react-native'
@@ -20,7 +20,7 @@ import {useUnmountAll} from '@/util/debug-react'
 import {darkModeSupported, guiConfig} from 'react-native-kb'
 import {install} from 'react-native-kb'
 import * as DarkMode from '@/stores/darkmode'
-import {initPlatformListener, onEngineConnected, onEngineDisconnected, onEngineIncoming} from '@/constants/init/index.native'
+import {initPlatformListener, onEngineConnected, onEngineDisconnected, onEngineIncoming} from '@/constants/init/index'
 import logger from '@/logger'
 
 logger.info('INIT App index module load')

shared/app/main.native.tsx → shared/app/main.tsx

@@ -1,14 +1,29 @@
 import Router from '@/router-v2/router'
-import {PortalHost} from '@/common-adapters/portal.native'
 import ResetModal from '../login/reset/modal'
 import GlobalError from './global-errors'
 import OutOfDate from './out-of-date'
-import RuntimeStats from './runtime-stats'
-import {BottomSheetModalProvider} from '@gorhom/bottom-sheet'
 import {FsStatusProvider} from '@/fs/common/status'
 import {SystemFileManagerIntegrationProvider} from '@/fs/common/sfmi'
+import RemoteProxies from '../desktop/remote/proxies.desktop'
+import {PortalHost} from '@/common-adapters/portal.native'
+import RuntimeStats from './runtime-stats'
+import {BottomSheetModalProvider} from '@gorhom/bottom-sheet'
+
+const DesktopMain = function DesktopMain() {
+  return (
+    <FsStatusProvider>
+      <SystemFileManagerIntegrationProvider>
+        <RemoteProxies />
+        <Router />
+        <ResetModal />
+        <GlobalError />
+        <OutOfDate />
+      </SystemFileManagerIntegrationProvider>
+    </FsStatusProvider>
+  )
+}
 
-const Main = () => {
+const NativeMain = () => {
   return (
     <FsStatusProvider>
       <SystemFileManagerIntegrationProvider>
@@ -25,4 +40,4 @@ const Main = () => {
   )
 }
 
-export default Main
+export default isMobile ? NativeMain : DesktopMain

shared/chat/audio/audio-video.tsx

@@ -1,14 +1,9 @@
 import * as React from 'react'
-import type * as ExpoAudioModule from 'expo-audio'
-import type * as ExpoModule from 'expo'
+import {useAudioPlayer} from 'expo-audio'
+import {useEventListener} from 'expo'
 import type {Props} from './audio-video.shared'
 
 const MobileAudioVideo = (props: Props) => {
-
-  const {useAudioPlayer} = require('expo-audio') as typeof ExpoAudioModule
-
-  const {useEventListener} = require('expo') as typeof ExpoModule
-
   const {url, paused, onPositionUpdated, onEnded} = props
   const player = useAudioPlayer(url)
 
@@ -55,9 +50,9 @@ const DesktopAudioVideo = (props: Props) => {
     }
   }, [paused])
 
-  const onTimeUpdate = (e: React.SyntheticEvent<{currentTime: number; duration: number}>) => {
-    const ct = e.currentTarget.currentTime
-    const dur = e.currentTarget.duration
+  const onTimeUpdate = () => {
+    const ct = vidRef.current?.currentTime ?? 0
+    const dur = vidRef.current?.duration ?? 0
     if (dur === 0) return
     onPositionUpdated(ct / dur)
   }

shared/chat/conversation/attachment-fullscreen/index.tsx

@@ -5,6 +5,11 @@ import logger from '@/logger'
 import type {Props} from './index.shared'
 import {useData, usePreviewFallback} from './hooks'
 import type {StyleOverride} from '@/common-adapters/markdown'
+import {ShowToastAfterSaving} from '../messages/attachment/shared'
+import {Animated, View} from 'react-native'
+import {useSafeAreaFrame} from 'react-native-safe-area-context'
+import {Image} from 'expo-image'
+import {useVideoPlayer, VideoView} from 'expo-video'
 
 // Stub type to avoid DOM lib dependency in native tsconfig
 type VideoRef = {pause?: () => void}
@@ -168,10 +173,6 @@ const DesktopFullscreen = (p: Props) => {
 type GestureEvent = {
   nativeEvent: {touches: Array<unknown>; pageX: number}
 }
-type AnimatedValue = {
-  addListener?: (cb: (v: {value: number}) => void) => string
-  removeAllListeners?: () => void
-}
 
 const NativeFullscreenVideo = (p: {
   path: string
@@ -182,29 +183,6 @@ const NativeFullscreenVideo = (p: {
 }) => {
   const {path, previewHeight, onTouchStart, onTouchEnd, onLoaded} = p
 
-  const {useVideoPlayer, VideoView} = require('expo-video') as {
-    useVideoPlayer: (uri: string) => {
-      addListener: (
-        event: string,
-        cb: (e: {status?: string; error?: unknown}) => void
-      ) => {remove: () => void}
-    }
-    VideoView: React.ComponentType<{
-      player: unknown
-      nativeControls?: boolean
-      contentFit?: string
-      style?: Kb.Styles.StylesCrossPlatform
-    }>
-  }
-  const {View} = require('react-native') as {
-    View: React.ComponentType<{
-      style?: Kb.Styles.StylesCrossPlatform
-      onTouchStart?: (e: GestureEvent) => void
-      onTouchEnd?: (e: GestureEvent) => void
-      children?: React.ReactNode
-    }>
-  }
-
   const sourceUri = `${path}&contentforce=true`
   const player = useVideoPlayer(sourceUri)
 
@@ -243,36 +221,13 @@ const NativeFullscreen = (p: Props) => {
   const {hasMessageID} = data
   const [loaded, setLoaded] = React.useState(false)
   const [showHeader, setShowHeader] = React.useState(_showHeader)
-  const fadeAnimRef = React.useRef<AnimatedValue | null>(null)
-  const [fadeAnim, setFadeAnim] = React.useState<AnimatedValue | null>(null)
-
-  const {ShowToastAfterSaving} = require('../messages/attachment/shared') as {
-    ShowToastAfterSaving: React.ComponentType<{transferState: unknown}>
-  }
-  const {Animated} = require('react-native') as {
-    Animated: {
-      Value: new (v: number) => AnimatedValue
-      View: React.ComponentType<{
-        style?: Array<Kb.Styles.StylesCrossPlatform | {opacity: AnimatedValue | number}>
-        children?: React.ReactNode
-      }>
-      timing: (
-        val: AnimatedValue,
-        opts: {toValue: number; duration: number; useNativeDriver: boolean}
-      ) => {start: () => void}
-    }
-  }
-  const {useSafeAreaFrame} = require('react-native-safe-area-context') as {
-    useSafeAreaFrame: () => {width: number; height: number}
-  }
-  const {Image} = require('expo-image') as {
-    Image: {prefetch: (path: string) => Promise<void>}
-  }
+  const fadeAnimRef = React.useRef<Animated.Value | null>(null)
+  const [fadeAnim, setFadeAnim] = React.useState<Animated.Value | null>(null)
 
   React.useEffect(() => {
     fadeAnimRef.current = new Animated.Value(1)
     setFadeAnim(fadeAnimRef.current)
-  }, [Animated])
+  }, [])
 
   React.useEffect(() => {
     if (fadeAnim) {
@@ -282,7 +237,7 @@ const NativeFullscreen = (p: Props) => {
         useNativeDriver: true,
       }).start()
     }
-  }, [showHeader, fadeAnim, Animated])
+  }, [showHeader, fadeAnim])
 
   const preload = (src: string, onLoad: () => void, onError: () => void) => {
     const f = async () => {

shared/chat/conversation/giphy/index.desktop.tsx → shared/chat/conversation/giphy/index.tsx

@@ -1,21 +1,31 @@
-import * as React from 'react'
 import * as Kb from '@/common-adapters'
-import UnfurlImage from '../messages/text/unfurl/unfurl-list/image'
-import {getMargins, scaledWidth} from './width'
+import * as React from 'react'
 import {useHooks} from './hooks'
+import {getMargins, scaledWidth} from './width'
+import UnfurlImage from '../messages/text/unfurl/unfurl-list/image'
+import {colors, darkColors} from '@/styles/colors'
+import {WebView} from 'react-native-webview'
+import {useColorScheme} from 'react-native'
+import noop from 'lodash/noop'
 
-const gridHeight = 100
+// Stub type to avoid dom lib dependency in native tsconfig
+type DivRef = {
+  getBoundingClientRect: () => DOMRect
+  clientWidth: number
+}
 
-const GiphySearch = () => {
+const DesktopGiphySearch = () => {
+  const gridHeight = 100
   const props = useHooks()
   const [width, setWidth] = React.useState<number | undefined>(undefined)
-  const divRef = React.useRef<HTMLDivElement>(null)
+  const divRef = React.useRef<DivRef | null>(null)
   const learnMoreUrlProps = Kb.useClickURL('https://keybase.io/docs/chat/linkpreviews')
 
   React.useEffect(() => {
     if (!divRef.current) return
-    const cs = getComputedStyle(divRef.current)
-    setWidth(divRef.current.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight))
+    const gc = (globalThis as {getComputedStyle?: (el: unknown) => {paddingLeft: string; paddingRight: string}}).getComputedStyle
+    const cs = gc?.(divRef.current)
+    setWidth(divRef.current.clientWidth - parseFloat(cs?.paddingLeft ?? '0') - parseFloat(cs?.paddingRight ?? '0'))
   }, [])
 
   let margins: Array<number> = []
@@ -32,7 +42,7 @@ const GiphySearch = () => {
     <Kb.Box2 direction="vertical" relative={true} style={styles.outerContainer}>
       <Kb.Box2
         direction="vertical"
-        ref={divRef}
+        ref={divRef as React.RefObject<DivRef>}
         style={Kb.Styles.collapseStyles([
           styles.scrollContainer,
           Kb.Styles.platformStyles({isElectron: {overflowY: width ? 'auto' : 'scroll'}}),
@@ -89,6 +99,38 @@ const GiphySearch = () => {
   )
 }
 
+const NativeGiphySearch = () => {
+  const p = useHooks()
+  const source = {uri: p.galleryURL}
+  const darkMode = useColorScheme() === 'dark'
+  const injectedJavaScript = `
+(function() {
+    window.document.querySelector("body").style.backgroundColor = "${
+      darkMode ? darkColors['white'] : colors['white']
+    }";
+})();
+`
+
+  return (
+    <Kb.Box2 direction="horizontal" fullWidth={true} style={nativeStyles.container}>
+      {p.previews ? (
+        <WebView
+          onMessage={noop}
+          injectedJavaScript={injectedJavaScript}
+          allowsInlineMediaPlayback={true}
+          source={source}
+          automaticallyAdjustContentInsets={false}
+          mediaPlaybackRequiresUserAction={false}
+        />
+      ) : (
+        <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} fullHeight={true}>
+          <Kb.ProgressIndicator />
+        </Kb.Box2>
+      )}
+    </Kb.Box2>
+  )
+}
+
 const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
@@ -116,7 +158,6 @@ const styles = Kb.Styles.styleSheetCreate(
           lineHeight: 17,
         },
       }),
-
       loadingContainer: {
         minHeight: 200,
       },
@@ -144,4 +185,11 @@ const styles = Kb.Styles.styleSheetCreate(
     }) as const
 )
 
-export default GiphySearch
+const nativeStyles = Kb.Styles.styleSheetCreate(
+  () =>
+    ({
+      container: {height: 80},
+    }) as const
+)
+
+export default isMobile ? NativeGiphySearch : DesktopGiphySearch

shared/chat/conversation/input-area/location-popup.tsx

@@ -7,7 +7,7 @@ import * as T from '@/constants/types'
 import LocationMap from '@/chat/location-map'
 import {useCurrentUserState} from '@/stores/current-user'
 import {requestLocationPermission} from '@/util/platform-specific'
-import type * as ExpoLocationModule from 'expo-location'
+import * as ExpoLocation from 'expo-location'
 import {ignorePromise} from '@/constants/utils'
 import {openAppSettings} from '@/util/storeless-actions'
 import {setThreadInputCommandStatus} from '@/constants/router'
@@ -63,13 +63,12 @@ const useWatchPosition = (
     logger.info('[location] perms check due to map')
     const f = async () => {
       try {
-        const ExpoLocation = require('expo-location') as typeof ExpoLocationModule
         await (requestLocationPermission as (mode?: T.RPCChat.UIWatchPositionPerm) => Promise<void>)(
           T.RPCChat.UIWatchPositionPerm.base
         )
         const sub = await ExpoLocation.watchPositionAsync(
           {accuracy: ExpoLocation.LocationAccuracy.Highest},
-          (location: ExpoLocationModule.LocationObject) => {
+          (location: ExpoLocation.LocationObject) => {
             const coord = {
               accuracy: Math.floor(location.coords.accuracy ?? 0),
               lat: location.coords.latitude,