From eb868a042ad4f767b8e1b90d33bf1171b66a5238 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 2 Sep 2024 09:33:46 +0100
Subject: [PATCH] [Video] Misc player style tweaks (#5064)

* use actual black rather than theme black

* adjust time/mute indicators
---
 src/view/com/composer/videos/VideoPreview.tsx |  2 +-
 .../com/composer/videos/VideoPreview.web.tsx  |  5 ++--
 src/view/com/util/post-embeds/VideoEmbed.tsx  |  2 +-
 .../com/util/post-embeds/VideoEmbed.web.tsx   |  5 ++--
 .../VideoEmbedInner/TimeIndicator.tsx         |  6 ++--
 .../VideoEmbedInner/VideoEmbedInnerNative.tsx | 29 ++++++++++---------
 yarn.lock                                     | 12 ++++----
 7 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/src/view/com/composer/videos/VideoPreview.tsx b/src/view/com/composer/videos/VideoPreview.tsx
index 3a823b7e..199a1fff 100644
--- a/src/view/com/composer/videos/VideoPreview.tsx
+++ b/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}
diff --git a/src/view/com/composer/videos/VideoPreview.web.tsx b/src/view/com/composer/videos/VideoPreview.web.tsx
index 57d3364f..5e7f8285 100644
--- a/src/view/com/composer/videos/VideoPreview.web.tsx
+++ b/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
diff --git a/src/view/com/util/post-embeds/VideoEmbed.tsx b/src/view/com/util/post-embeds/VideoEmbed.tsx
index 682e1966..55ac1882 100644
--- a/src/view/com/util/post-embeds/VideoEmbed.tsx
+++ b/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}>
diff --git a/src/view/com/util/post-embeds/VideoEmbed.web.tsx b/src/view/com/util/post-embeds/VideoEmbed.web.tsx
index 10b4f38d..0001a7af 100644
--- a/src/view/com/util/post-embeds/VideoEmbed.web.tsx
+++ b/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,
diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx
index 4d07ee78..6636883f 100644
--- a/src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx
+++ b/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',
         },
       ]}>
diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
index f5ee139e..59f9d9f9 100644
--- a/src/view/com/util/post-embeds/VideoEmbedInner/VideoEmbedInnerNative.tsx
+++ b/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>
diff --git a/yarn.lock b/yarn.lock
index 4bf0ec76..b084ca26 100644
--- a/yarn.lock
+++ b/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"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001596.tgz"
-  integrity sha512-zpkZ+kEr6We7w63ORkoJ2pOfBwBkY/bJrG/UZ90qNb45Isblu8wzDgevEOrRL1r9dWayHjYiiyCMEXPn4DweGQ==
+  version "1.0.30001655"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001655.tgz"
+  integrity sha512-jRGVy3iSGO5Uutn2owlb5gR6qsGngTw9ZTb4ali9f3glshcNmJ2noam4Mo9zia5P9Dk3jNNydy7vQjuE5dQmfg==
 
 caniuse-lite@^1.0.30001587:
-  version "1.0.30001620"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001620.tgz#78bb6f35b8fe315b96b8590597094145d0b146b4"
-  integrity sha512-WJvYsOjd1/BYUY6SNGUosK9DUidBPDTnOARHp3fSmFO1ekdxaY6nKRttEVrfMmYi80ctS0kz1wiWmm14fVc3ew==
+  version "1.0.30001655"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001655.tgz"
+  integrity sha512-jRGVy3iSGO5Uutn2owlb5gR6qsGngTw9ZTb4ali9f3glshcNmJ2noam4Mo9zia5P9Dk3jNNydy7vQjuE5dQmfg==
 
 case-anything@^2.1.13:
   version "2.1.13"