add indicator of time remaining (#5000)

1 files changed, 48 insertions, 0 deletions

diff --git a/src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx b/src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx
new file mode 100644
index 000000000..4d07ee78d
--- /dev/null
+++ b/src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import Animated, {FadeInDown, FadeOutDown} from 'react-native-reanimated'
+
+import {atoms as a, native, 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}: {time: number}) {
+  const t = useTheme()
+
+  if (isNaN(time)) {
+    return null
+  }
+
+  const minutes = Math.floor(time / 60)
+  const seconds = String(time % 60).padStart(2, '0')
+
+  return (
+    <Animated.View
+      entering={native(FadeInDown.duration(300))}
+      exiting={native(FadeOutDown.duration(500))}
+      style={[
+        {
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          borderRadius: 6,
+          paddingHorizontal: 6,
+          paddingVertical: 3,
+          position: 'absolute',
+          left: 5,
+          bottom: 5,
+          minHeight: 20,
+          justifyContent: 'center',
+        },
+      ]}>
+      <Text
+        style={[
+          {color: t.palette.white, fontSize: 12},
+          a.font_bold,
+          {lineHeight: 1.25},
+        ]}>
+        {minutes}:{seconds}
+      </Text>
+    </Animated.View>
+  )
+}