Move /platform/detection vars into /env (#9707)

* Add platform vars to env

* Replace /platform/detection with /env

src/components/Post/Embed/ExternalEmbed/ExternalGif.tsx

@@ -10,13 +10,13 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {type EmbedPlayerParams} from '#/lib/strings/embed-player'
-import {isIOS, isNative, isWeb} from '#/platform/detection'
 import {useExternalEmbedsPrefs} from '#/state/preferences'
 import {atoms as a, useTheme} from '#/alf'
 import {useDialogControl} from '#/components/Dialog'
 import {EmbedConsentDialog} from '#/components/dialogs/EmbedConsent'
 import {Fill} from '#/components/Fill'
 import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
+import {IS_IOS, IS_NATIVE, IS_WEB} from '#/env'
 
 export function ExternalGif({
   link,
@@ -66,12 +66,12 @@ export function ExternalGif({
       // Control animation on native
       setIsAnimating(prev => {
         if (prev) {
-          if (isNative) {
+          if (IS_NATIVE) {
             imageRef.current?.stopAnimating()
           }
           return false
         } else {
-          if (isNative) {
+          if (IS_NATIVE) {
             imageRef.current?.startAnimating()
           }
           return true
@@ -112,7 +112,7 @@ export function ExternalGif({
         <Image
           source={{
             uri:
-              !isPrefetched || (isWeb && !isAnimating)
+              !isPrefetched || (IS_WEB && !isAnimating)
                 ? link.thumb
                 : params.playerUri,
           }} // Web uses the thumb to control playback
@@ -123,7 +123,7 @@ export function ExternalGif({
           accessibilityIgnoresInvertColors
           accessibilityLabel={link.title}
           accessibilityHint={link.title}
-          cachePolicy={isIOS ? 'disk' : 'memory-disk'} // cant control playback with memory-disk on ios
+          cachePolicy={IS_IOS ? 'disk' : 'memory-disk'} // cant control playback with memory-disk on ios
         />
 
         {(!isPrefetched || !isAnimating) && (

src/components/Post/Embed/ExternalEmbed/ExternalPlayer.tsx

@@ -26,7 +26,6 @@ import {
   type EmbedPlayerParams,
   getPlayerAspect,
 } from '#/lib/strings/embed-player'
-import {isNative} from '#/platform/detection'
 import {useExternalEmbedsPrefs} from '#/state/preferences'
 import {EventStopper} from '#/view/com/util/EventStopper'
 import {atoms as a, useTheme} from '#/alf'
@@ -34,6 +33,7 @@ import {useDialogControl} from '#/components/Dialog'
 import {EmbedConsentDialog} from '#/components/dialogs/EmbedConsent'
 import {Fill} from '#/components/Fill'
 import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
+import {IS_NATIVE} from '#/env'
 
 interface ShouldStartLoadRequest {
   url: string
@@ -148,7 +148,7 @@ export function ExternalPlayer({
     const {height: winHeight, width: winWidth} = windowDims
 
     // Get the proper screen height depending on what is going on
-    const realWinHeight = isNative // If it is native, we always want the larger number
+    const realWinHeight = IS_NATIVE // If it is native, we always want the larger number
       ? winHeight > winWidth
         ? winHeight
         : winWidth

src/components/Post/Embed/ExternalEmbed/Gif.tsx

@@ -13,7 +13,6 @@ import {useLingui} from '@lingui/react'
 import {HITSLOP_20} from '#/lib/constants'
 import {clamp} from '#/lib/numbers'
 import {type EmbedPlayerParams} from '#/lib/strings/embed-player'
-import {isWeb} from '#/platform/detection'
 import {useAutoplayDisabled} from '#/state/preferences'
 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
 import {atoms as a, useTheme} from '#/alf'
@@ -22,6 +21,7 @@ import {Loader} from '#/components/Loader'
 import * as Prompt from '#/components/Prompt'
 import {Text} from '#/components/Typography'
 import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
+import {IS_WEB} from '#/env'
 import {GifView} from '../../../../../modules/expo-bluesky-gif-view'
 import {type GifViewStateChangeEvent} from '../../../../../modules/expo-bluesky-gif-view/src/GifView.types'
 
@@ -218,18 +218,18 @@ const styles = StyleSheet.create({
   altContainer: {
     backgroundColor: 'rgba(0, 0, 0, 0.75)',
     borderRadius: 6,
-    paddingHorizontal: isWeb ? 8 : 6,
-    paddingVertical: isWeb ? 6 : 3,
+    paddingHorizontal: IS_WEB ? 8 : 6,
+    paddingVertical: IS_WEB ? 6 : 3,
     position: 'absolute',
     // Related to margin/gap hack. This keeps the alt label in the same position
     // on all platforms
-    right: isWeb ? 8 : 5,
-    bottom: isWeb ? 8 : 5,
+    right: IS_WEB ? 8 : 5,
+    bottom: IS_WEB ? 8 : 5,
     zIndex: 2,
   },
   alt: {
     color: 'white',
-    fontSize: isWeb ? 10 : 7,
+    fontSize: IS_WEB ? 10 : 7,
     fontWeight: '600',
   },
 })

src/components/Post/Embed/ExternalEmbed/index.tsx

@@ -10,13 +10,13 @@ import {useHaptics} from '#/lib/haptics'
 import {shareUrl} from '#/lib/sharing'
 import {parseEmbedPlayerFromUrl} from '#/lib/strings/embed-player'
 import {toNiceDomain} from '#/lib/strings/url-helpers'
-import {isNative} from '#/platform/detection'
 import {useExternalEmbedsPrefs} from '#/state/preferences'
 import {atoms as a, useTheme} from '#/alf'
 import {Divider} from '#/components/Divider'
 import {Earth_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
 import {Link} from '#/components/Link'
 import {Text} from '#/components/Typography'
+import {IS_NATIVE} from '#/env'
 import {ExternalGif} from './ExternalGif'
 import {ExternalPlayer} from './ExternalPlayer'
 import {GifEmbed} from './Gif'
@@ -53,7 +53,7 @@ export const ExternalEmbed = ({
   }, [playHaptic, onOpen])
 
   const onShareExternal = useCallback(() => {
-    if (link.uri && isNative) {
+    if (link.uri && IS_NATIVE) {
       playHaptic('Heavy')
       shareUrl(link.uri)
     }

src/components/Post/Embed/VideoEmbed/ActiveVideoWebContext.tsx

@@ -8,7 +8,7 @@ import React, {
 } from 'react'
 import {useWindowDimensions} from 'react-native'
 
-import {isNative, isWeb} from '#/platform/detection'
+import {IS_NATIVE, IS_WEB} from '#/env'
 
 const Context = React.createContext<{
   activeViewId: string | null
@@ -18,7 +18,7 @@ const Context = React.createContext<{
 Context.displayName = 'ActiveVideoWebContext'
 
 export function Provider({children}: {children: React.ReactNode}) {
-  if (!isWeb) {
+  if (!IS_WEB) {
     throw new Error('ActiveVideoWebContext may only be used on web.')
   }
 
@@ -47,7 +47,7 @@ export function Provider({children}: {children: React.ReactNode}) {
 
   const sendViewPosition = useCallback(
     (viewId: string, y: number) => {
-      if (isNative) return
+      if (IS_NATIVE) return
 
       if (viewId === activeViewIdRef.current) {
         activeViewLocationRef.current = y

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/VideoControls.tsx

@@ -6,7 +6,6 @@ import type Hls from 'hls.js'
 
 import {isTouchDevice} from '#/lib/browser'
 import {clamp} from '#/lib/numbers'
-import {isIPhoneWeb} from '#/platform/detection'
 import {
   useAutoplayDisabled,
   useSetSubtitlesEnabled,
@@ -28,6 +27,7 @@ import {Pause_Filled_Corner0_Rounded as PauseIcon} from '#/components/icons/Paus
 import {Play_Filled_Corner0_Rounded as PlayIcon} from '#/components/icons/Play'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
+import {IS_WEB_MOBILE_IOS} from '#/env'
 import {TimeIndicator} from '../TimeIndicator'
 import {ControlButton} from './ControlButton'
 import {Scrubber} from './Scrubber'
@@ -400,7 +400,7 @@ export function Controls({
             onEndHover={onVolumeEndHover}
             drawFocus={drawFocus}
           />
-          {!isIPhoneWeb && (
+          {!IS_WEB_MOBILE_IOS && (
             <ControlButton
               active={isFullscreen}
               activeLabel={_(msg`Exit fullscreen`)}