55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
// Metro module 12015 (f12016).
|
|
import { View } from "react-native";
|
|
import { Fonts } from "../../../Constants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import MobileVisualRefreshExperiment from "../../themes/experiments/MobileVisualRefreshExperiment";
|
|
import useActivityTimer, { formatTime } from "../hooks/useActivityTimer";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
const useStyles = createStyles({
|
|
bar: {
|
|
backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED,
|
|
borderRadius: Module712.radii.xs,
|
|
height: 4,
|
|
marginBottom: 4
|
|
},
|
|
progress: {
|
|
backgroundColor: Module712.colors.ACTIVITY_TIMEBAR_PROGRESS_BACKGROUND,
|
|
borderRadius: Module712.radii.xs,
|
|
height: "100%",
|
|
minWidth: 4
|
|
},
|
|
textRow: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between"
|
|
}
|
|
});
|
|
export default function UserProfileActivityTimebar(props) {
|
|
const { start, end, style } = props;
|
|
const r15 = MobileVisualRefreshExperiment("UserProfileActivityTimebar");
|
|
const styles = useStyles();
|
|
const activityTimer = useActivityTimer({
|
|
start,
|
|
end
|
|
});
|
|
const { elapsed, duration, percentage } = activityTimer;
|
|
const style2 = r15 ? void 0 : {
|
|
fontFamily: Fonts.CODE_NORMAL
|
|
};
|
|
return <View style={style}>
|
|
<View style={styles.bar}>
|
|
<View style={[styles.progress, {
|
|
width: 100 * percentage + "%"
|
|
}]} />
|
|
</View>
|
|
<View style={styles.textRow}>
|
|
<Text variant="text-xs/normal" style={style2} tabularNumbers={r15 ? r15 : void 0} color={r15 ? "text-subtle" : void 0}>
|
|
{formatTime(elapsed)}
|
|
</Text>
|
|
<Text variant="text-xs/normal" style={style2} tabularNumbers={r15 || void 0} color={r15 ? "text-subtle" : void 0}>
|
|
{formatTime(duration)}
|
|
</Text>
|
|
</View>
|
|
</View>;
|
|
};
|