Move browser env into main env (#9718)

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)
       }