diff --git a/apps/client/src/common/hooks/useSocket.ts b/apps/client/src/common/hooks/useSocket.ts index 6b8c7e19c..741e9f9ef 100644 --- a/apps/client/src/common/hooks/useSocket.ts +++ b/apps/client/src/common/hooks/useSocket.ts @@ -170,6 +170,10 @@ export const useTimelineStatus = createSelector((state: RuntimeStore) => ({ offset: state.runtime.offset, })); +export const useRuntimeOffset = createSelector((state: RuntimeStore) => ({ + offset: state.runtime.offset, +})); + export const usePing = createSelector((state: RuntimeStore) => ({ ping: state.ping, })); diff --git a/apps/client/src/views/common/schedule/Schedule.scss b/apps/client/src/views/common/schedule/Schedule.scss index 0984ddc8e..61ca13327 100644 --- a/apps/client/src/views/common/schedule/Schedule.scss +++ b/apps/client/src/views/common/schedule/Schedule.scss @@ -49,6 +49,14 @@ $indeterminate-width: clamp(32px, 3vw, 48px); &--delay { color: $ontime-delay-text; } + + &--ahead { + color: $green-500; + } + + &--behind { + color: $orange-500; + } } .entry-title { diff --git a/apps/client/src/views/common/schedule/ScheduleItem.tsx b/apps/client/src/views/common/schedule/ScheduleItem.tsx index f2ffb8b2f..b9bc3278b 100644 --- a/apps/client/src/views/common/schedule/ScheduleItem.tsx +++ b/apps/client/src/views/common/schedule/ScheduleItem.tsx @@ -1,7 +1,10 @@ +import { useRuntimeOffset } from '../../../common/hooks/useSocket'; import { cx } from '../../../common/utils/styleUtils'; import { formatTime } from '../../../common/utils/time'; import SuperscriptTime from '../../../features/viewers/common/superscript-time/SuperscriptTime'; +import { useScheduleOptions } from './schedule.options'; + import './Schedule.scss'; const formatOptions = { @@ -21,36 +24,38 @@ interface ScheduleItemProps { export default function ScheduleItem(props: ScheduleItemProps) { const { timeStart, timeEnd, title, backstageEvent, colour, skip, delay } = props; + const { showProjected } = useScheduleOptions(); - const start = formatTime(timeStart, formatOptions); - const end = formatTime(timeEnd, formatOptions); - - if (delay > 0) { - const delayedStart = formatTime(timeStart + delay, formatOptions); - const delayedEnd = formatTime(timeEnd + delay, formatOptions); - + if (showProjected) { return ( -