From 1f130fcdca7b00fb91b41fc68cb8217359fdc5ed Mon Sep 17 00:00:00 2001
From: arc-alex <ac@omnivox.dk>
Date: Thu, 24 Oct 2024 13:16:44 +0200
Subject: [PATCH] use prediction in event progress

---
 .../composite/EventBlockProgressBar.module.scss            | 2 +-
 .../event-block/composite/EventBlockProgressBar.tsx        | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/features/rundown/event-block/composite/EventBlockProgressBar.module.scss b/apps/client/src/features/rundown/event-block/composite/EventBlockProgressBar.module.scss
index 0996e06b0f..2b78aea47b 100644
--- a/apps/client/src/features/rundown/event-block/composite/EventBlockProgressBar.module.scss
+++ b/apps/client/src/features/rundown/event-block/composite/EventBlockProgressBar.module.scss
@@ -3,7 +3,7 @@
   width: 0;
   border-radius: 1px 0 0 1px;
 
-  transition: 1s linear;
+  transition: 200ms linear;
   transition-property: width;
   background-color: $gray-200;
 }
diff --git a/apps/client/src/features/rundown/event-block/composite/EventBlockProgressBar.tsx b/apps/client/src/features/rundown/event-block/composite/EventBlockProgressBar.tsx
index 40849ec89b..18148c5890 100644
--- a/apps/client/src/features/rundown/event-block/composite/EventBlockProgressBar.tsx
+++ b/apps/client/src/features/rundown/event-block/composite/EventBlockProgressBar.tsx
@@ -1,12 +1,13 @@
+import { useClientTimePrediction } from '../../../../common/hooks/useClientTimePrediction';
 import { useTimer } from '../../../../common/hooks/useSocket';
 import { getProgress } from '../../../../common/utils/getProgress';
 
 import style from './EventBlockProgressBar.module.scss';
 
 export default function EventBlockProgressBar() {
-  const timer = useTimer();
-
-  const progress = getProgress(timer.current, timer.duration);
+  const { duration } = useTimer();
+  const clientCurrent = useClientTimePrediction();
+  const progress = getProgress(clientCurrent, duration);
 
   return <div className={style.progressBar} style={{ width: `${progress}%` }} />;
 }