+
-
0 && 'sub__schedule--delayed'])}>
- {showExpected ? (
-
- ) : (
- <>
-
- →
-
-
- )}
-
-
-
{sanitiseTitle(event.title)}
+
+
+
{title}
{secondaryData &&
{secondaryData}
}
);
@@ -123,63 +127,82 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
);
}
-interface ExpectedScheduleProps {
- timeStart: number;
- timeEnd: number;
- delay: number;
-}
-function ExpectedSchedule(props: ExpectedScheduleProps) {
- const { timeStart, timeEnd, delay } = props;
+type ScheduleTimeProps = {
+ event: CountdownEvent;
+ showExpected: boolean;
+};
+//TODO: consider relative mode
+export function ScheduleTime(props: ScheduleTimeProps) {
+ const { event, showExpected } = props;
+ const { timeStart, duration, delay, expectedStart, countToEnd } = event;
- const { offset } = useRuntimeOffset();
+ const plannedStart = timeStart + delay + event.dayOffset * dayInMs;
- // offset is negative if we are ahead
- const expectedOffset = offset - delay;
- const expectedState = getOffsetState(expectedOffset);
+ // only show new exacted value if outside range of the planned value
+ const isExpectedValueShow = showExpected && isOutsideRange(plannedStart, expectedStart);
+
+ const plannedStateClass = isExpectedValueShow ? 'sub__schedule--strike' : delay !== 0 ? 'sub__schedule--delayed' : '';
+
+ const expectedStateClass = `sub__schedule--${getOffsetState(expectedStart - plannedStart)}`;
+ const plannedEnd = plannedStart + duration + delay;
+ const expectedEnd = countToEnd ? Math.max(expectedStart + duration, plannedEnd) : expectedStart + duration;
+ const expectedEndClass = `sub__schedule--${getOffsetState(expectedEnd - plannedEnd)}`;
return (
- <>
+
- →
-
-
+ {!isExpectedValueShow && (
+ <>
+ →
+
+
+ )}
+ {isExpectedValueShow && (
+ <>
+
+ →
+
+
+ )}
+
);
}
interface SubscriptionStatusProps {
- event: OntimeEvent;
- selectedEventId: EntryId | null;
+ event: ExtendedEntry
& { endedAt: MaybeNumber; expectedStart: number };
}
-function SubscriptionStatus({ event, selectedEventId }: SubscriptionStatusProps) {
- const { getLocalizedString } = useTranslation();
- const { currentDay } = useCurrentDay();
- const { offset } = useRuntimeOffset();
- const { showExpected } = useCountdownOptions();
- const { playback, current, clock } = useCountdownSocket();
-
- // TODO: use reporter values as in the event block chip
- const { status, timer } = getSubscriptionDisplayData(
- current,
- playback,
- clock,
- event,
- selectedEventId,
- offset,
- currentDay,
- getLocalizedString('common.minutes'),
- showExpected,
- );
+function SubscriptionStatus({ event }: SubscriptionStatusProps) {
+ const { status, statusDisplay, timeDisplay } = useSubscriptionDisplayData(event);
return (
<>
- {getLocalizedString(timerProgress[status])}
- {timer}
+ {statusDisplay}
+ {status === 'done' ? (
+
+ ) : (
+ {timeDisplay}
+ )}
);
}
diff --git a/apps/client/src/views/countdown/SingleEventCountdown.scss b/apps/client/src/views/countdown/SingleEventCountdown.scss
index bea111232..ce13f9298 100644
--- a/apps/client/src/views/countdown/SingleEventCountdown.scss
+++ b/apps/client/src/views/countdown/SingleEventCountdown.scss
@@ -15,6 +15,14 @@
font-size: clamp(40px, 4.5vw, 80px);
line-height: 1.1em;
text-align: center;
+ border-left: 0.25em solid;
+ border-color: var(--card-background-color-override, $viewer-card-bg-color);
+
+ .secondary {
+ text-align: left;
+ font-size: clamp(20px, 2vw, 40px);
+
+ }
}
.event__status {
diff --git a/apps/client/src/views/countdown/SingleEventCountdown.tsx b/apps/client/src/views/countdown/SingleEventCountdown.tsx
index bd905d64e..cfa48d346 100644
--- a/apps/client/src/views/countdown/SingleEventCountdown.tsx
+++ b/apps/client/src/views/countdown/SingleEventCountdown.tsx
@@ -1,29 +1,57 @@
import { IoPencil } from 'react-icons/io5';
-import { OntimeEvent } from 'ontime-types';
+import { MaybeNumber, OntimeEvent } from 'ontime-types';
+import { getExpectedStart } from 'ontime-utils';
import Button from '../../common/components/buttons/Button';
import { useFadeOutOnInactivity } from '../../common/hooks/useFadeOutOnInactivity';
-import { useCountdownSocket, useCurrentDay, useRuntimeOffset, useSelectedEventId } from '../../common/hooks/useSocket';
+import { useExpectedStartData } from '../../common/hooks/useSocket';
+import useReport from '../../common/hooks-query/useReport';
+import { ExtendedEntry } from '../../common/utils/rundownMetadata';
import { cx } from '../../common/utils/styleUtils';
-import { useTranslation } from '../../translation/TranslationProvider';
+import SuperscriptTime from '../../features/viewers/common/superscript-time/SuperscriptTime';
+import { getPropertyValue } from '../../features/viewers/common/viewUtils';
import { useCountdownOptions } from './countdown.options';
-import { getSubscriptionDisplayData, timerProgress } from './countdown.utils';
+import { useSubscriptionDisplayData } from './countdown.utils';
+import { ScheduleTime } from './CountdownSubscriptions';
import './SingleEventCountdown.scss';
interface SingleEventCountdownProps {
- subscribedEvent: OntimeEvent;
+ subscribedEvent: ExtendedEntry;
goToEditMode: () => void;
}
export default function SingleEventCountdown({ subscribedEvent, goToEditMode }: SingleEventCountdownProps) {
+ const { secondarySource, showExpected } = useCountdownOptions();
const showFab = useFadeOutOnInactivity(true);
+ const { data: reportData } = useReport();
+
+ const { offset, currentDay, actualStart, plannedStart, mode } = useExpectedStartData();
+ const { totalGap, isLinkedToLoaded } = subscribedEvent;
+ const expectedStart = getExpectedStart(subscribedEvent, {
+ currentDay,
+ totalGap,
+ actualStart,
+ plannedStart,
+ isLinkedToLoaded,
+ offset,
+ mode,
+ });
+
+ const { endedAt } = reportData[subscribedEvent.id] ?? { endedAt: null };
+ const countdownEvent = { ...subscribedEvent, expectedStart, endedAt };
+ const title = subscribedEvent.title.length ? subscribedEvent.title : ' '; // insert utf-8 empty space to avoid the line collapsing
+ const secondaryData = getPropertyValue(subscribedEvent, secondarySource);
return (
-
-
{subscribedEvent.title}
+
+
+
+ {title}
+ {secondaryData &&
{secondaryData}
}
+