surfdude29
65 lines
1.4 KiB
TypeScript
65 lines
1.4 KiB
TypeScript
import {StyleProp, ViewStyle} from 'react-native'
|
|
import {View} from 'react-native'
|
|
import {msg, plural} from '@lingui/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
|
|
import {atoms as a, useTheme} from '#/alf'
|
|
import {Text} from '#/components/Typography'
|
|
|
|
/**
|
|
* Absolutely positioned time indicator showing how many seconds are remaining
|
|
* Time is in seconds
|
|
*/
|
|
export function TimeIndicator({
|
|
time,
|
|
style,
|
|
}: {
|
|
time: number
|
|
style?: StyleProp<ViewStyle>
|
|
}) {
|
|
const t = useTheme()
|
|
const {_} = useLingui()
|
|
|
|
if (isNaN(time)) {
|
|
return null
|
|
}
|
|
|
|
const minutes = Math.floor(time / 60)
|
|
const seconds = String(time % 60).padStart(2, '0')
|
|
|
|
return (
|
|
<View
|
|
pointerEvents="none"
|
|
accessibilityLabel={_(
|
|
msg`Time remaining: ${plural(Number(time) || 0, {
|
|
one: '# second',
|
|
other: '# seconds',
|
|
})}`,
|
|
)}
|
|
accessibilityHint=""
|
|
style={[
|
|
{
|
|
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
borderRadius: 6,
|
|
paddingHorizontal: 6,
|
|
paddingVertical: 3,
|
|
left: 6,
|
|
bottom: 6,
|
|
minHeight: 21,
|
|
},
|
|
a.absolute,
|
|
a.justify_center,
|
|
style,
|
|
]}>
|
|
<Text
|
|
style={[
|
|
{color: t.palette.white, fontSize: 12, fontVariant: ['tabular-nums']},
|
|
a.font_bold,
|
|
{lineHeight: 1.25},
|
|
]}>
|
|
{`${minutes}:${seconds}`}
|
|
</Text>
|
|
</View>
|
|
)
|
|
}
|