Paul Coroneos
ff5ad38253
* update eslint config with jsx runtime * leverage jsx transform to remove unnecessary react imports and update eslint config * run yarn lint --fix to remove eslint disables related to react/prop-types that is now disabled
64 lines
1.4 KiB
TypeScript
64 lines
1.4 KiB
TypeScript
import {View} from 'react-native'
|
|
// @ts-expect-error no type definition
|
|
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'
|
|
import {VideoTranscodeBackdrop} from './VideoTranscodeBackdrop'
|
|
|
|
export function VideoTranscodeProgress({
|
|
asset,
|
|
progress,
|
|
clear,
|
|
}: {
|
|
asset: ImagePickerAsset
|
|
progress: number
|
|
clear: () => void
|
|
}) {
|
|
const t = useTheme()
|
|
|
|
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={[
|
|
a.w_full,
|
|
t.atoms.bg_contrast_50,
|
|
a.rounded_md,
|
|
a.overflow_hidden,
|
|
{aspectRatio},
|
|
]}>
|
|
<VideoTranscodeBackdrop uri={asset.uri} />
|
|
<View
|
|
style={[
|
|
a.flex_1,
|
|
a.align_center,
|
|
a.justify_center,
|
|
a.gap_lg,
|
|
a.absolute,
|
|
a.inset_0,
|
|
]}>
|
|
<ProgressPie
|
|
size={48}
|
|
borderWidth={3}
|
|
borderColor={t.atoms.text.color}
|
|
color={t.atoms.text.color}
|
|
progress={progress}
|
|
/>
|
|
</View>
|
|
<ExternalEmbedRemoveBtn onRemove={clear} />
|
|
</View>
|
|
)
|
|
}
|