Kopie van https://gitlab.com/studieverenigingvia/ict/centurion met een paar aanpassingen
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.2 KiB
42 lines
1.2 KiB
import React from 'react';
|
|
import {Col, Progress} from "antd"
|
|
import {roomTime, useTimeline} from "../lib/Connection";
|
|
import {useUpdateAfterDelay} from "../util/hooks";
|
|
|
|
|
|
const NextShot = () => {
|
|
const timeline = useTimeline()
|
|
|
|
useUpdateAfterDelay(1000)
|
|
|
|
let remainingTime = 0;
|
|
let remainingPercentage = 0;
|
|
|
|
if (timeline) {
|
|
const time = roomTime();
|
|
const [current, next] = timeline.itemAtTime(time, 'shot');
|
|
|
|
if (current && next) {
|
|
let currentTime = time - current.timestamp * 1000
|
|
let nextTime = next.timestamp * 1000 - current.timestamp * 1000;
|
|
|
|
remainingTime = Math.round((nextTime - currentTime) / 1000)
|
|
remainingPercentage = 100 - (currentTime / (nextTime || 1)) * 100;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Col className="sider" span={24} md={4}>
|
|
<h1>Tijd tot volgende shot:</h1>
|
|
<Progress type="circle"
|
|
percent={remainingPercentage}
|
|
format={_ => remainingTime + ' sec.'}
|
|
strokeColor={"#304ba3"}
|
|
strokeWidth={10}
|
|
status="normal"/>
|
|
</Col>
|
|
|
|
);
|
|
};
|
|
|
|
export default NextShot;
|
|
|