V2 event block (#261)

* feat: implement progress bar on running event

* refactor: use event action hook

* refactor: align backend data

client/src/features/rundown/event-block/composite/EventBlockProgressBar.tsx

@@ -0,0 +1,34 @@
+import { useTimer } from '../../../../common/hooks/useSocket';
+import { Playstate } from '../../../../common/models/OntimeTypes';
+import { clamp } from '../../../../common/utils/math';
+
+import style from './EventBlockProgressBar.module.scss';
+
+interface EventBlockProgressBarProps {
+  playback?: Playstate;
+}
+
+export default function EventBlockProgressBar(props: EventBlockProgressBarProps) {
+  const { playback } = props;
+  const { data: timer } = useTimer();
+  const now = Math.floor(Math.max((timer?.current ?? 1) / 1000, 0));
+  const complete = (timer?.duration ?? 1) / 1000;
+  const elapsed = clamp(100 - (now * 100) / complete, 0, 100);
+  const progress = `${elapsed}%`;
+
+  if (timer?.current != null && timer?.current < 0) {
+    return (
+      <div
+        className={`${style.progressBar} ${style.overtime}`}
+        style={{ width: '100%' }}
+      />
+    );
+  }
+
+  return (
+    <div
+      className={`${style.progressBar} ${playback ? style[playback] : ''}`}
+      style={{ width: progress }}
+    />
+  );
+}