1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
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>
)
}
|
