feat: timeline view

apps/client/src/features/viewers/timeline/timeline-progress-bar/TimelineProgressBar.module.scss

@@ -0,0 +1,13 @@
+.progressBar {
+  width: 100%;
+  height: 1rem;
+
+  transition-duration: 0.3s;
+  transition-property: left;
+  background-color: $gray-1000;
+
+  .progress {
+    height: 100%;
+    background-color: $active-red;
+  }
+}

apps/client/src/features/viewers/timeline/timeline-progress-bar/TimelineProgressBar.tsx

@@ -0,0 +1,24 @@
+import { MILLIS_PER_HOUR } from 'ontime-utils';
+
+import { useClock } from '../../../../common/hooks/useSocket';
+import { getRelativePositionX } from '../timeline.utils';
+
+import style from './TimelineProgressBar.module.scss';
+
+interface ProgressBarProps {
+  startHour: number;
+  endHour: number;
+}
+
+export default function ProgressBar(props: ProgressBarProps) {
+  const { startHour, endHour } = props;
+  const { clock } = useClock();
+
+  const width = getRelativePositionX(startHour * MILLIS_PER_HOUR, endHour * MILLIS_PER_HOUR, clock);
+
+  return (
+    <div className={style.progressBar}>
+      <div className={style.progress} style={{ width: `${width}%` }} />
+    </div>
+  );
+}