zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

[Video] Misc player style tweaks (#5064) 

* use actual black rather than theme black

* adjust time/mute indicators
zio/stable
Samuel Newman 2024-09-02 09:33:46 +01:00 committed by GitHub
parent 17d82a64a6
commit eb868a042a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 31 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/view/com/composer/videos/VideoPreview.tsx
View File

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

5
src/view/com/composer/videos/VideoPreview.web.tsx
View File

@ -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

2
src/view/com/util/post-embeds/VideoEmbed.tsx
View File

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

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

@ -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,

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

@ -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',
},
]}>

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

@ -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>

12
yarn.lock
View File

@ -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"