[Video] Minor player tweaks (#5044)

zio/stable
Samuel Newman 2024-08-30 20:48:23 +01:00 committed by GitHub
parent 8647c8e9f5
commit ab260c3599
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 35 additions and 15 deletions

View File

@ -5,6 +5,7 @@ import {ImagePickerAsset} from 'expo-image-picker'
import {useVideoPlayer, VideoView} from 'expo-video'
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'
@ -25,23 +26,31 @@ export function VideoPreview({
player.play()
})
const aspectRatio = asset.width / asset.height
let aspectRatio = asset.width / asset.height
if (isNaN(aspectRatio)) {
aspectRatio = 16 / 9
}
aspectRatio = clamp(aspectRatio, 1 / 1, 3 / 1)
return (
<View
style={[
a.w_full,
a.rounded_sm,
{aspectRatio: isNaN(aspectRatio) ? 16 / 9 : aspectRatio},
{aspectRatio},
a.overflow_hidden,
a.border,
t.atoms.border_contrast_low,
{backgroundColor: t.palette.black},
]}>
<VideoView
player={player}
style={a.flex_1}
allowsPictureInPicture={false}
nativeControls={false}
contentFit="contain"
/>
<ExternalEmbedRemoveBtn onRemove={clear} />
</View>

View File

@ -3,6 +3,7 @@ import {View} from 'react-native'
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'
@ -38,15 +39,20 @@ export function VideoPreview({
}
}, [setDimensions])
const aspectRatio = asset.width / asset.height
let aspectRatio = asset.width / asset.height
if (isNaN(aspectRatio)) {
aspectRatio = 16 / 9
}
aspectRatio = clamp(aspectRatio, 1 / 1, 3 / 1)
return (
<View
style={[
a.w_full,
a.rounded_sm,
{aspectRatio: isNaN(aspectRatio) ? 16 / 9 : aspectRatio},
{aspectRatio},
a.overflow_hidden,
{backgroundColor: t.palette.black},
]}>

View File

@ -21,8 +21,8 @@ export function VideoTranscodeBackdrop({uri}: {uri: string}) {
}, [])
return (
thumbnail && (
<Animated.View style={a.flex_1} entering={FadeIn}>
{thumbnail && (
<Image
style={a.flex_1}
source={thumbnail.path}
@ -31,7 +31,7 @@ export function VideoTranscodeBackdrop({uri}: {uri: string}) {
blurRadius={15}
contentFit="cover"
/>
)}
</Animated.View>
)
)
}

View File

@ -4,6 +4,7 @@ import {View} from 'react-native'
import ProgressPie from 'react-native-progress/Pie'
import {ImagePickerAsset} from 'expo-image-picker'
import {clamp} from '#/lib/numbers'
import {isWeb} from '#/platform/detection'
import {atoms as a, useTheme} from '#/alf'
import {ExternalEmbedRemoveBtn} from '../ExternalEmbedRemoveBtn'
@ -20,10 +21,16 @@ export function VideoTranscodeProgress({
}) {
const t = useTheme()
const aspectRatio = asset.width / asset.height
if (isWeb) return null
let aspectRatio = asset.width / asset.height
if (isNaN(aspectRatio)) {
aspectRatio = 16 / 9
}
aspectRatio = clamp(aspectRatio, 1 / 1, 3 / 1)
return (
<View
style={[
@ -32,7 +39,7 @@ export function VideoTranscodeProgress({
t.atoms.bg_contrast_50,
a.rounded_md,
a.overflow_hidden,
{aspectRatio: isNaN(aspectRatio) ? 16 / 9 : aspectRatio},
{aspectRatio},
]}>
<VideoTranscodeBackdrop uri={asset.uri} />
<View

View File

@ -78,9 +78,7 @@ export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
setActiveSource(embed.playlist)
}}
label={_(msg`Play video`)}
variant="ghost"
color="secondary"
size="large">
color="secondary">
<PlayIcon width={48} fill={t.palette.white} />
</Button>
</>