Samuel Newman
81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
import {useRef} from 'react'
|
|
import {View} from 'react-native'
|
|
import {Image} from 'expo-image'
|
|
import {type ImagePickerAsset} from 'expo-image-picker'
|
|
import {BlueskyVideoView} from '@bsky.app/video'
|
|
|
|
import {type CompressedVideo} from '#/lib/media/video/types'
|
|
import {clamp} from '#/lib/numbers'
|
|
import {useAutoplayDisabled} from '#/state/preferences'
|
|
import {ExternalEmbedRemoveBtn} from '#/view/com/composer/ExternalEmbedRemoveBtn'
|
|
import {atoms as a, useTheme} from '#/alf'
|
|
import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
|
|
import {VideoTranscodeBackdrop} from './VideoTranscodeBackdrop'
|
|
|
|
export function VideoPreview({
|
|
asset,
|
|
video,
|
|
clear,
|
|
isActivePost,
|
|
}: {
|
|
asset: ImagePickerAsset
|
|
video: CompressedVideo
|
|
isActivePost: boolean
|
|
clear: () => void
|
|
}) {
|
|
const t = useTheme()
|
|
const playerRef = useRef<BlueskyVideoView>(null)
|
|
const autoplayDisabled = useAutoplayDisabled()
|
|
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},
|
|
a.overflow_hidden,
|
|
a.border,
|
|
t.atoms.border_contrast_low,
|
|
{backgroundColor: 'black'},
|
|
]}>
|
|
<View style={[a.absolute, a.inset_0]}>
|
|
<VideoTranscodeBackdrop uri={asset.uri} />
|
|
</View>
|
|
{isActivePost && (
|
|
<>
|
|
{video.mimeType === 'image/gif' ? (
|
|
<Image
|
|
style={[a.flex_1]}
|
|
autoplay={!autoplayDisabled}
|
|
source={{uri: video.uri}}
|
|
accessibilityIgnoresInvertColors
|
|
cachePolicy="none"
|
|
/>
|
|
) : (
|
|
<BlueskyVideoView
|
|
url={video.uri}
|
|
autoplay={!autoplayDisabled}
|
|
beginMuted={true}
|
|
forceTakeover={true}
|
|
ref={playerRef}
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
<ExternalEmbedRemoveBtn onRemove={clear} />
|
|
{autoplayDisabled && (
|
|
<View style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
|
|
<PlayButtonIcon />
|
|
</View>
|
|
)}
|
|
</View>
|
|
)
|
|
}
|