[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,
+          left: 6,
-          bottom: 5,
+          bottom: 6,
-          minHeight: 20,
+          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={{
+        style={[
+          a.absolute,
+          a.rounded_full,
+          a.justify_center,
+          {
             backgroundColor: 'rgba(0, 0, 0, 0.5)',
-          borderRadius: 6,
+            paddingHorizontal: 4,
-          paddingHorizontal: 6,
+            paddingVertical: 4,
-          paddingVertical: 3,
+            bottom: 6,
-          position: 'absolute',
+            right: 6,
-          bottom: 5,
+            minHeight: 21,
-          right: 5,
+            minWidth: 21,
-          minHeight: 20,
+          },
-          justifyContent: 'center',
+        ]}>
-        }}>
         <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>

yarn.lock

@@ -9918,14 +9918,14 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001517, caniuse-lite@^1.0.30001520:
-  version "1.0.30001596"
+  version "1.0.30001655"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001596.tgz"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001655.tgz"
-  integrity sha512-zpkZ+kEr6We7w63ORkoJ2pOfBwBkY/bJrG/UZ90qNb45Isblu8wzDgevEOrRL1r9dWayHjYiiyCMEXPn4DweGQ==
+  integrity sha512-jRGVy3iSGO5Uutn2owlb5gR6qsGngTw9ZTb4ali9f3glshcNmJ2noam4Mo9zia5P9Dk3jNNydy7vQjuE5dQmfg==
 
 caniuse-lite@^1.0.30001587:
-  version "1.0.30001620"
+  version "1.0.30001655"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001620.tgz#78bb6f35b8fe315b96b8590597094145d0b146b4"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001655.tgz"
-  integrity sha512-WJvYsOjd1/BYUY6SNGUosK9DUidBPDTnOARHp3fSmFO1ekdxaY6nKRttEVrfMmYi80ctS0kz1wiWmm14fVc3ew==
+  integrity sha512-jRGVy3iSGO5Uutn2owlb5gR6qsGngTw9ZTb4ali9f3glshcNmJ2noam4Mo9zia5P9Dk3jNNydy7vQjuE5dQmfg==
 
 case-anything@^2.1.13:
   version "2.1.13"