1 files changed, 64 insertions, 0 deletions
diff --git a/src/components/Post/Embed/VideoEmbed/VideoEmbedInner/TimeIndicator.tsx b/src/components/Post/Embed/VideoEmbed/VideoEmbedInner/TimeIndicator.tsx
new file mode 100644
index 000000000..95401309f
--- /dev/null
+++ b/src/components/Post/Embed/VideoEmbed/VideoEmbedInner/TimeIndicator.tsx
@@ -0,0 +1,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>
+  )
+}