[Video] Misc player style tweaks (#5064)

* use actual black rather than theme black

* adjust time/mute indicators

src/view/com/composer/videos/VideoPreview.tsx

@@ -43,7 +43,7 @@ export function VideoPreview({
         a.overflow_hidden,
         a.border,
         t.atoms.border_contrast_low,
-        {backgroundColor: t.palette.black},
+        {backgroundColor: 'black'},
       ]}>
       <VideoView
         player={player}

src/view/com/composer/videos/VideoPreview.web.tsx

@@ -5,7 +5,7 @@ import {ImagePickerAsset} from 'expo-image-picker'
 import {CompressedVideo} from '#/lib/media/video/types'
 import {clamp} from '#/lib/numbers'
 import {ExternalEmbedRemoveBtn} from 'view/com/composer/ExternalEmbedRemoveBtn'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a} from '#/alf'
 
 export function VideoPreview({
   asset,
@@ -18,7 +18,6 @@ export function VideoPreview({
   setDimensions: (width: number, height: number) => void
   clear: () => void
 }) {
-  const t = useTheme()
   const ref = useRef<HTMLVideoElement>(null)
 
   useEffect(() => {
@@ -54,7 +53,7 @@ export function VideoPreview({
         a.rounded_sm,
         {aspectRatio},
         a.overflow_hidden,
-        {backgroundColor: t.palette.black},
+        {backgroundColor: 'black'},
       ]}>
       <ExternalEmbedRemoveBtn onRemove={clear} />
       <video

src/view/com/util/post-embeds/VideoEmbed.tsx

@@ -50,7 +50,7 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
         a.rounded_sm,
         a.overflow_hidden,
         {aspectRatio},
-        {backgroundColor: t.palette.black},
+        {backgroundColor: 'black'},
         a.my_xs,
       ]}>
       <ErrorBoundary renderError={renderError} key={key}>

src/view/com/util/post-embeds/VideoEmbed.web.tsx

@@ -9,13 +9,12 @@ import {
   HLSUnsupportedError,
   VideoEmbedInnerWeb,
 } from '#/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerWeb'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a} from '#/alf'
 import {ErrorBoundary} from '../ErrorBoundary'
 import {useActiveVideoWeb} from './ActiveVideoWebContext'
 import * as VideoFallback from './VideoEmbedInner/VideoFallback'
 
 export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
-  const t = useTheme()
   const ref = useRef<HTMLDivElement>(null)
   const gate = useGate()
   const {active, setActive, sendPosition, currentActiveView} =
@@ -64,7 +63,7 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
       style={[
         a.w_full,
         {aspectRatio},
-        {backgroundColor: t.palette.black},
+        {backgroundColor: 'black'},
         a.relative,
         a.rounded_sm,
         a.my_xs,

src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx

@@ -29,9 +29,9 @@ export function TimeIndicator({time}: {time: number}) {
           paddingHorizontal: 6,
           paddingVertical: 3,
           position: 'absolute',
-          left: 5,
-          bottom: 5,
-          minHeight: 20,
+          left: 6,
+          bottom: 6,
+          minHeight: 21,
           justifyContent: 'center',
         },
       ]}>

src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx

@@ -167,17 +167,20 @@ function VideoControls({
       />
       <Animated.View
         entering={FadeInDown.duration(300)}
-        style={{
-          backgroundColor: 'rgba(0, 0, 0, 0.5)',
-          borderRadius: 6,
-          paddingHorizontal: 6,
-          paddingVertical: 3,
-          position: 'absolute',
-          bottom: 5,
-          right: 5,
-          minHeight: 20,
-          justifyContent: 'center',
-        }}>
+        style={[
+          a.absolute,
+          a.rounded_full,
+          a.justify_center,
+          {
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            paddingHorizontal: 4,
+            paddingVertical: 4,
+            bottom: 6,
+            right: 6,
+            minHeight: 21,
+            minWidth: 21,
+          },
+        ]}>
         <Pressable
           onPress={toggleMuted}
           style={a.flex_1}
@@ -186,9 +189,9 @@ function VideoControls({
           accessibilityRole="button"
           hitSlop={HITSLOP_30}>
           {isMuted ? (
-            <MuteIcon width={14} fill={t.palette.white} />
+            <MuteIcon width={13} fill={t.palette.white} />
           ) : (
-            <UnmuteIcon width={14} fill={t.palette.white} />
+            <UnmuteIcon width={13} fill={t.palette.white} />
           )}
         </Pressable>
       </Animated.View>