diff options
author | Eric Bailey <git@esb.lol> | 2025-06-13 12:05:41 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2025-06-13 12:05:41 -0500 |
commit | 45f0f7eefecae1922c2f30d4e7760d2b93b1ae56 (patch) | |
tree | a2fd6917867f18fe334b54dd3289775c2930bc85 /src/components/Post/Embed/VideoEmbed/VideoEmbedInner/TimeIndicator.tsx | |
parent | ba0f5a9bdef5bd0447ded23cab1af222b65511cc (diff) | |
download | voidsky-45f0f7eefecae1922c2f30d4e7760d2b93b1ae56.tar.zst |
Port post embeds to new arch (#7408)
* Direct port of embeds to new arch (cherry picked from commit cc3fa1f6cea396dd9222486c633a508bfee1ecd6) * Re-org * Split out ListEmbed and FeedEmbed * Split out ImageEmbed * DRY up a bit * Port over ExternalLinkEmbed * Port over Player and Gif embeds * Migrate ComposerReplyTo * Replace other usages of old post-embeds * Migrate view contexts * Copy pasta VideoEmbed * Copy pasta GifEmbed * Swap in new file location * Clean up * Fix up native * Add back in correct moderation on List and Feed embeds * Format * Prettier * delete old video utils * move bandwidth-estimate.ts * Remove log * Add LazyQuoteEmbed for composer use * Clean up unused things * Remove remaining items * Prettier * Fix imports * Handle nested quotes same as prod * Add back silenced error handling * Fix lint --------- Co-authored-by: Samuel Newman <mozzius@protonmail.com>
Diffstat (limited to 'src/components/Post/Embed/VideoEmbed/VideoEmbedInner/TimeIndicator.tsx')
-rw-r--r-- | src/components/Post/Embed/VideoEmbed/VideoEmbedInner/TimeIndicator.tsx | 64 |
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> + ) +} |