Add elapsed time to call interface
GitLab: #161
Change-Id: I7f8ecffcb9ad7ce796f525be70476e7b223c0963
diff --git a/client/src/pages/CallInterface.tsx b/client/src/pages/CallInterface.tsx
index 5dbda36..c0ab334 100644
--- a/client/src/pages/CallInterface.tsx
+++ b/client/src/pages/CallInterface.tsx
@@ -87,11 +87,13 @@
}
const CallInterface = () => {
- const { isVideoOn, localStream, remoteStream } = useContext(CallContext);
+ const { isVideoOn, localStream, remoteStream, callStartTime } = useContext(CallContext);
const gridItemRef = useRef(null);
const remoteVideoRef = useRef<HTMLVideoElement | null>(null);
const localVideoRef = useRef<HTMLVideoElement | null>(null);
+ const [elapsedTime, setElapsedTime] = useState<number>();
+
useEffect(() => {
if (localStream && localVideoRef.current) {
localVideoRef.current.srcObject = localStream;
@@ -104,6 +106,15 @@
}
}, [remoteStream]);
+ useEffect(() => {
+ if (callStartTime) {
+ const interval = setInterval(() => {
+ setElapsedTime((new Date().getTime() - callStartTime.getTime()) / 1000);
+ }, 1000);
+ return () => clearInterval(interval);
+ }
+ }, [callStartTime]);
+
return (
<Box display="flex" flexGrow={1}>
<video
@@ -113,7 +124,7 @@
/>
<Box flexGrow={1} margin={2} display="flex" flexDirection="column">
{/* Guest video, takes the whole screen */}
- <CallInterfaceInformation />
+ <CallInterfaceInformation elapsedTime={elapsedTime} />
<Box flexGrow={1} marginY={2} position="relative">
<Draggable bounds="parent" nodeRef={localVideoRef ?? undefined}>
<video
@@ -146,14 +157,37 @@
);
};
-const CallInterfaceInformation = () => {
+const formatElapsedSeconds = (elapsedSeconds: number): string => {
+ const seconds = Math.floor(elapsedSeconds % 60);
+ elapsedSeconds = Math.floor(elapsedSeconds / 60);
+ const minutes = elapsedSeconds % 60;
+ elapsedSeconds = Math.floor(elapsedSeconds / 60);
+ const hours = elapsedSeconds % 24;
+
+ const times: string[] = [];
+ if (hours > 0) {
+ times.push(hours.toString().padStart(2, '0'));
+ }
+ times.push(minutes.toString().padStart(2, '0'));
+ times.push(seconds.toString().padStart(2, '0'));
+
+ return times.join(':');
+};
+
+interface CallInterfaceInformationProps {
+ elapsedTime?: number;
+}
+
+const CallInterfaceInformation = ({ elapsedTime = 0 }: CallInterfaceInformationProps) => {
+ const elapsedTimerString = formatElapsedSeconds(elapsedTime);
+
return (
<Stack direction="row" justifyContent="space-between" alignItems="center">
<Typography color="white" component="p">
Alain Thérieur
</Typography>
<Typography color="white" component="p">
- 01:23
+ {elapsedTimerString}
</Typography>
</Stack>
);