Move browser env into main env (#9718)

src/components/MediaInsetBorder.tsx

@@ -1,9 +1,9 @@
 import {StyleSheet} from 'react-native'
 import type React from 'react'
 
-import {isHighDPI} from '#/lib/browser'
 import {atoms as a, platform, useTheme, type ViewStyleProp} from '#/alf'
 import {Fill} from '#/components/Fill'
+import {IS_HIGH_DPI} from '#/env'
 
 /**
  * Applies and thin border within a bounding box. Used to contrast media from
@@ -33,7 +33,7 @@ export function MediaInsetBorder({
             // while we generally use hairlineWidth (aka 1px),
             // we make an exception here for high DPI screens
             // as the 1px border is very noticeable -sfn
-            web: isHighDPI ? 0.5 : StyleSheet.hairlineWidth,
+            web: IS_HIGH_DPI ? 0.5 : StyleSheet.hairlineWidth,
           }),
         },
         opaque

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

@@ -3,10 +3,10 @@ import {View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {isFirefox, isTouchDevice} from '#/lib/browser'
 import {clamp} from '#/lib/numbers'
 import {atoms as a, useTheme, web} from '#/alf'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
+import {IS_WEB_FIREFOX, IS_WEB_TOUCH_DEVICE} from '#/env'
 import {formatTime} from './utils'
 
 export function Scrubber({
@@ -100,7 +100,7 @@ export function Scrubber({
     // a pointerUp event is fired outside the element that captured the
     // pointer. Firefox clicks on the element the mouse is over, so we have
     // to make everything unclickable while seeking -sfn
-    if (isFirefox && scrubberActive) {
+    if (IS_WEB_FIREFOX && scrubberActive) {
       document.body.classList.add('force-no-clicks')
 
       return () => {
@@ -151,7 +151,7 @@ export function Scrubber({
     <View
       testID="scrubber"
       style={[
-        {height: isTouchDevice ? 32 : 18, width: '100%'},
+        {height: IS_WEB_TOUCH_DEVICE ? 32 : 18, width: '100%'},
         a.flex_shrink_0,
         a.px_xs,
       ]}

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

@@ -4,7 +4,6 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import type Hls from 'hls.js'
 
-import {isTouchDevice} from '#/lib/browser'
 import {clamp} from '#/lib/numbers'
 import {
   useAutoplayDisabled,
@@ -27,7 +26,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 {IS_WEB_MOBILE_IOS, IS_WEB_TOUCH_DEVICE} from '#/env'
 import {TimeIndicator} from '../TimeIndicator'
 import {ControlButton} from './ControlButton'
 import {Scrubber} from './Scrubber'
@@ -342,7 +341,7 @@ export function Controls({
           {opacity: showControls ? 1 : 0},
           {transition: 'opacity 0.2s ease-in-out'},
         ]}>
-        {(!volumeHovered || isTouchDevice) && (
+        {(!volumeHovered || IS_WEB_TOUCH_DEVICE) && (
           <Scrubber
             duration={duration}
             currentTime={currentTime}

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

@@ -4,11 +4,11 @@ import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {isSafari, isTouchDevice} from '#/lib/browser'
 import {atoms as a} from '#/alf'
 import {Mute_Stroke2_Corner0_Rounded as MuteIcon} from '#/components/icons/Mute'
 import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as UnmuteIcon} from '#/components/icons/Speaker'
 import {useVideoVolumeState} from '#/components/Post/Embed/VideoEmbed/VideoVolumeContext'
+import {IS_WEB_SAFARI, IS_WEB_TOUCH_DEVICE} from '#/env'
 import {ControlButton} from './ControlButton'
 
 export function VolumeControl({
@@ -57,7 +57,7 @@ export function VolumeControl({
       onPointerEnter={onHover}
       onPointerLeave={onEndHover}
       style={[a.relative]}>
-      {hovered && !isTouchDevice && (
+      {hovered && !IS_WEB_TOUCH_DEVICE && (
         <Animated.View
           entering={FadeIn.duration(100)}
           exiting={FadeOut.duration(100)}
@@ -80,7 +80,9 @@ export function VolumeControl({
               aria-label={_(msg`Volume`)}
               style={
                 // Ridiculous safari hack for old version of safari. Fixed in sonoma beta -h
-                isSafari ? {height: 92, minHeight: '100%'} : {height: '100%'}
+                IS_WEB_SAFARI
+                  ? {height: 92, minHeight: '100%'}
+                  : {height: '100%'}
               }
               onChange={onVolumeChange}
               // @ts-expect-error for old versions of firefox, and then re-using it for targeting the CSS -sfn

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

@@ -1,8 +1,8 @@
 import {type RefObject, useCallback, useEffect, useRef, useState} from 'react'
 
-import {isSafari} from '#/lib/browser'
 import {logger} from '#/logger'
 import {useVideoVolumeState} from '#/components/Post/Embed/VideoEmbed/VideoVolumeContext'
+import {IS_WEB_SAFARI} from '#/env'
 
 export function useVideoElement(ref: RefObject<HTMLVideoElement | null>) {
   const [playing, setPlaying] = useState(false)
@@ -41,7 +41,7 @@ export function useVideoElement(ref: RefObject<HTMLVideoElement | null>) {
       setCurrentTime(round(ref.current.currentTime) || 0)
       // HACK: Safari randomly fires `stalled` events when changing between segments
       // let's just clear the buffering state if the video is still progressing -sfn
-      if (isSafari) {
+      if (IS_WEB_SAFARI) {
         if (bufferingTimeout) clearTimeout(bufferingTimeout)
         setBuffering(false)
       }

src/components/Post/Embed/VideoEmbed/index.web.tsx

@@ -11,7 +11,6 @@ import {type AppBskyEmbedVideo} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {isFirefox} from '#/lib/browser'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {atoms as a, useTheme} from '#/alf'
 import {useIsWithinMessage} from '#/components/dms/MessageContext'
@@ -23,6 +22,7 @@ import {
   VideoEmbedInnerWeb,
   VideoNotFoundError,
 } from '#/components/Post/Embed/VideoEmbed/VideoEmbedInner/VideoEmbedInnerWeb'
+import {IS_WEB_FIREFOX} from '#/env'
 import {useActiveVideoWeb} from './ActiveVideoWebContext'
 import * as VideoFallback from './VideoEmbedInner/VideoFallback'
 
@@ -37,7 +37,7 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
 
   useEffect(() => {
     if (!ref.current) return
-    if (isFullscreen && !isFirefox) return
+    if (isFullscreen && !IS_WEB_FIREFOX) return
     const observer = new IntersectionObserver(
       entries => {
         const entry = entries[0]
@@ -150,7 +150,7 @@ function ViewportObserver({
   // observing a div of 100vh height
   useEffect(() => {
     if (!ref.current) return
-    if (isFullscreen && !isFirefox) return
+    if (isFullscreen && !IS_WEB_FIREFOX) return
     const observer = new IntersectionObserver(
       entries => {
         const entry = entries[0]

src/components/ProfileHoverCard/index.web.tsx

@@ -11,7 +11,6 @@ import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 
 import {useActorStatus} from '#/lib/actor-status'
-import {isTouchDevice} from '#/lib/browser'
 import {getModerationCauseKey} from '#/lib/moderation'
 import {makeProfileLink} from '#/lib/routes/links'
 import {type NavigationProp} from '#/lib/routes/types'
@@ -43,6 +42,7 @@ import {RichText} from '#/components/RichText'
 import {Text} from '#/components/Typography'
 import {useSimpleVerificationState} from '#/components/verification'
 import {VerificationCheck} from '#/components/verification/VerificationCheck'
+import {IS_WEB_TOUCH_DEVICE} from '#/env'
 import {type ProfileHoverCardProps} from './types'
 
 const floatingMiddlewares = [
@@ -70,7 +70,7 @@ export function ProfileHoverCard(props: ProfileHoverCardProps) {
     }
   }
 
-  if (props.disable || isTouchDevice) {
+  if (props.disable || IS_WEB_TOUCH_DEVICE) {
     return props.children
   } else {
     return (

src/components/SubtleHover.tsx

@@ -1,8 +1,7 @@
 import {View} from 'react-native'
 
-import {isTouchDevice} from '#/lib/browser'
 import {atoms as a, useTheme, type ViewStyleProp} from '#/alf'
-import {IS_NATIVE, IS_WEB} from '#/env'
+import {IS_NATIVE, IS_WEB, IS_WEB_TOUCH_DEVICE} from '#/env'
 
 export function SubtleHover({
   style,
@@ -40,7 +39,7 @@ export function SubtleHover({
   )
 
   if (IS_WEB && web) {
-    return isTouchDevice ? null : el
+    return IS_WEB_TOUCH_DEVICE ? null : el
   } else if (IS_NATIVE && native) {
     return el
   }

src/components/hooks/useFullscreen.ts

@@ -6,8 +6,7 @@ import {
   useSyncExternalStore,
 } from 'react'
 
-import {isFirefox, isSafari} from '#/lib/browser'
-import {IS_WEB} from '#/env'
+import {IS_WEB, IS_WEB_FIREFOX, IS_WEB_SAFARI} from '#/env'
 
 function fullscreenSubscribe(onChange: () => void) {
   document.addEventListener('fullscreenchange', onChange)
@@ -39,7 +38,7 @@ export function useFullscreen(ref?: React.RefObject<HTMLElement | null>) {
 
     // Chrome has an issue where it doesn't scroll back to the top after exiting fullscreen
     // Let's play it safe and do it if not FF or Safari, since anything else will probably be chromium
-    if (prevIsFullscreen && !isFirefox && !isSafari) {
+    if (prevIsFullscreen && !IS_WEB_FIREFOX && !IS_WEB_SAFARI) {
       setTimeout(() => {
         if (scrollYRef.current !== null) {
           window.scrollTo(0, scrollYRef.current)