[Video] Minor player tweaks (#5044)
parent
8647c8e9f5
commit
ab260c3599
|
@ -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>
|
||||
|
|
|
@ -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},
|
||||
]}>
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
|
|
Loading…
Reference in New Issue