Live video on the AT Protocol
stream.place
1import { View, Text } from "tamagui";
2import { useState, useEffect } from "react";
3
4export default function Timer({ start }: { start: string | Date }) {
5 const [elapsedTime, setElapsedTime] = useState(0);
6
7 useEffect(() => {
8 const startDate = typeof start === "string" ? new Date(start) : start;
9
10 const interval = setInterval(() => {
11 const now = new Date();
12 const elapsed = Math.floor((now.getTime() - startDate.getTime()) / 1000);
13 setElapsedTime(elapsed);
14 }, 250);
15
16 return () => clearInterval(interval);
17 }, [start]);
18
19 const formatTime = (seconds: number) => {
20 const hours = Math.floor(seconds / 3600);
21 const minutes = Math.floor((seconds % 3600) / 60);
22 const secs = seconds % 60;
23
24 return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
25 };
26
27 return (
28 <View
29 justifyContent="center"
30 flexDirection="row"
31 alignItems="center"
32 paddingHorizontal="$2"
33 paddingVertical="$1"
34 >
35 <Text
36 fontFamily="$mono"
37 textShadowOffset={{ width: -1, height: 1 }}
38 textShadowRadius={3}
39 >
40 {formatTime(elapsedTime)}
41 </Text>
42 </View>
43 );
44}