cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-16 21:03:29 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

Extract client timeuntil logic (#1521)

Browse Source 
* extract

* add to timeline

* translate Due

* fix timeline page

* begin adding some tests

* spelling

Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>

* move file

* refactor

* create hook

* refactor

* update test

* spelling

Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>

* remove translation

* explain isLinkedToLoaded

* add delay to calculation

* add delay value to test

* spelling

---------

Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
This commit is contained in:
Alex Christoffer Rasmussen
2025-03-10 22:47:02 +01:00
committed by GitHub
parent b60b1beeec
commit 99dd4b4d5c
8 changed files with 198 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/rundown/Rundown.tsx
+6 -5
View File
@@ -7,7 +7,6 @@ import {
isOntimeEvent,
isPlayableEvent,
MaybeString,
OntimeEvent,
PlayableEvent,
Playback,
RundownCached,
@@ -272,7 +271,7 @@ export default function Rundown({ data }: RundownProps) {
let isNextDay = false;
let totalGap = 0;
const isEditMode = appMode === AppMode.Edit;
let currentDay = 0;
let isLinkedToLoaded = true; //check if the event can link all the way back to the currently playing event
return (
<div className={style.rundownContainer} ref={scrollRef} data-testid='rundown'>
<DndContext onDragEnd={handleOnDragEnd} sensors={sensors} collisionDetection={closestCenter}>
@@ -299,7 +298,10 @@ export default function Rundown({ data }: RundownProps) {
if (isPlayableEvent(entry)) {
isNextDay = checkIsNextDay(entry, lastEvent);
totalGap += !isPast ? entry.gap : 0;
if (!isPast) {
totalGap += entry.gap;
isLinkedToLoaded = isLinkedToLoaded && entry.linkStart !== null;
}
if (isNewLatest(entry, lastEvent)) {
// populate previous entry
thisEvent = entry;
@@ -313,7 +315,6 @@ export default function Rundown({ data }: RundownProps) {
const hasCursor = entry.id === cursor;
if (isLoaded) {
isPast = false;
currentDay = (entry as OntimeEvent).dayOffset;
}
return (
@@ -336,7 +337,7 @@ export default function Rundown({ data }: RundownProps) {
isRolling={featureData.playback === Playback.Roll}
isNextDay={isNextDay}
totalGap={totalGap}
currentDay={currentDay}
isLinkedToLoaded={isLinkedToLoaded}
/>
</div>
</div>
apps/client/src/features/rundown/RundownEntry.tsx
+4 -3
View File
@@ -39,7 +39,7 @@ interface RundownEntryProps {
playback?: Playback; // we only care about this if this event is playing
isRolling: boolean; // we need to know even if not related to this event
totalGap: number;
currentDay: number;
isLinkedToLoaded: boolean;
}
export default function RundownEntry(props: RundownEntryProps) {
@@ -56,7 +56,7 @@ export default function RundownEntry(props: RundownEntryProps) {
eventIndex,
isNextDay,
totalGap,
currentDay,
isLinkedToLoaded,
} = props;
const { emitError } = useEmitLog();
const { addEvent, updateEvent, batchUpdateEvents, deleteEvent, swapEvents } = useEventAction();
@@ -178,8 +178,9 @@ export default function RundownEntry(props: RundownEntryProps) {
isRolling={isRolling}
gap={data.gap}
isNextDay={isNextDay}
dayOffset={data.dayOffset - currentDay}
dayOffset={data.dayOffset}
totalGap={totalGap}
isLinkedToLoaded={isLinkedToLoaded}
actionHandler={actionHandler}
/>
);
apps/client/src/features/rundown/event-block/EventBlock.tsx
+3
View File
@@ -51,6 +51,7 @@ interface EventBlockProps {
isNextDay: boolean;
dayOffset: number;
totalGap: number;
isLinkedToLoaded: boolean;
actionHandler: (
action: EventItemActions,
payload?:
@@ -91,6 +92,7 @@ export default function EventBlock(props: EventBlockProps) {
isNextDay,
dayOffset,
totalGap,
isLinkedToLoaded,
actionHandler,
} = props;
const { selectedEventId, setSelectedEventId, clearSelectedEventId } = useEventIdSwapping();
@@ -310,6 +312,7 @@ export default function EventBlock(props: EventBlockProps) {
dayOffset={dayOffset}
isPast={isPast}
totalGap={totalGap}
isLinkedToLoaded={isLinkedToLoaded}
/>
)}
</div>
apps/client/src/features/rundown/event-block/EventBlockInner.tsx
+6 -3
View File
@@ -11,7 +11,6 @@ import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward'
import { IoStop } from '@react-icons/all-files/io5/IoStop';
import { IoTime } from '@react-icons/all-files/io5/IoTime';
import { EndAction, MaybeString, Playback, TimerType, TimeStrategy } from 'ontime-types';
import { dayInMs } from 'ontime-utils';
import { cx } from '../../../common/utils/styleUtils';
import { tooltipDelayMid } from '../../../ontimeConfig';
@@ -47,6 +46,7 @@ interface EventBlockInnerProps {
dayOffset: number;
isPast: boolean;
totalGap: number;
isLinkedToLoaded: boolean;
}
function EventBlockInner(props: EventBlockInnerProps) {
@@ -72,6 +72,7 @@ function EventBlockInner(props: EventBlockInnerProps) {
dayOffset,
isPast,
totalGap,
isLinkedToLoaded,
} = props;
const [renderInner, setRenderInner] = useState(false);
@@ -120,11 +121,13 @@ function EventBlockInner(props: EventBlockInnerProps) {
<EventBlockChip
className={style.chipSection}
id={eventId}
trueTimeStart={timeStart + dayOffset * dayInMs}
timeStart={timeStart}
delay={delay}
dayOffset={dayOffset}
isLinkedToLoaded={isLinkedToLoaded}
isPast={isPast}
isLoaded={loaded}
totalGap={totalGap}
isLinkedAndNext={isNext && linkStart !== null}
duration={duration}
/>
)}
apps/client/src/features/rundown/event-block/composite/EventBlockChip.tsx
+20 -13
View File
@@ -3,27 +3,29 @@ import { Tooltip } from '@chakra-ui/react';
import { IoCheckmarkCircle } from '@react-icons/all-files/io5/IoCheckmarkCircle';
import { isPlaybackActive, MILLIS_PER_MINUTE, MILLIS_PER_SECOND } from 'ontime-utils';
import { usePlayback, useTimelineStatus } from '../../../../common/hooks/useSocket';
import { usePlayback } from '../../../../common/hooks/useSocket';
import useReport from '../../../../common/hooks-query/useReport';
import { cx } from '../../../../common/utils/styleUtils';
import { formatDuration, formatTime } from '../../../../common/utils/time';
import { formatDuration, formatTime, useTimeUntilStart } from '../../../../common/utils/time';
import { tooltipDelayFast } from '../../../../ontimeConfig';
import style from './EventBlockChip.module.scss';
interface EventBlockChipProps {
id: string;
trueTimeStart: number;
timeStart: number;
delay: number;
dayOffset: number;
isPast: boolean;
isLoaded: boolean;
className: string;
totalGap: number;
isLinkedAndNext: boolean;
duration: number;
isLinkedToLoaded: boolean;
}
export default function EventBlockChip(props: EventBlockChipProps) {
const { trueTimeStart, isPast, isLoaded, className, totalGap, isLinkedAndNext, id, duration } = props;
const { timeStart, delay, dayOffset, isPast, isLoaded, className, totalGap, id, duration, isLinkedToLoaded } = props;
const { playback } = usePlayback();
if (isLoaded) {
@@ -41,7 +43,13 @@ export default function EventBlockChip(props: EventBlockChipProps) {
return (
<Tooltip label='Expected time until start' openDelay={tooltipDelayFast}>
<div className={className}>
<EventUntil trueTimeStart={trueTimeStart} totalGap={totalGap} isLinkedAndNext={isLinkedAndNext} />
<EventUntil
timeStart={timeStart}
delay={delay}
dayOffset={dayOffset}
totalGap={totalGap}
isLinkedToLoaded={isLinkedToLoaded}
/>
</div>
</Tooltip>
);
@@ -51,18 +59,17 @@ export default function EventBlockChip(props: EventBlockChipProps) {
}
interface EventUntilProps {
trueTimeStart: number;
timeStart: number;
delay: number;
dayOffset: number;
totalGap: number;
isLinkedAndNext: boolean;
isLinkedToLoaded: boolean;
}
function EventUntil(props: EventUntilProps) {
const { trueTimeStart, totalGap, isLinkedAndNext } = props;
const { clock, offset } = useTimelineStatus();
const { timeStart, delay, dayOffset, totalGap, isLinkedToLoaded } = props;
const consumedOffset = isLinkedAndNext ? offset : Math.min(offset + totalGap, 0);
const offsetTimestart = trueTimeStart - consumedOffset;
const timeUntil = offsetTimestart - clock;
const timeUntil = useTimeUntilStart({ timeStart, delay, dayOffset, totalGap, isLinkedToLoaded });
const isDue = timeUntil < MILLIS_PER_SECOND;
const timeUntilString = isDue ? 'DUE' : `${formatDuration(Math.abs(timeUntil), timeUntil > 2 * MILLIS_PER_MINUTE)}`;