[Video] Misc player style tweaks (#5064)
* use actual black rather than theme black * adjust time/mute indicatorszio/stable
Samuel Newman
GitHub
parent
17d82a64a6
commit
eb868a042a
|
|
@ -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,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
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
]}>
|
||||
|
|
|
|||
|
|
@ -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
12
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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue