mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-16 04:43:35 +00:00
refactor: update timers (#729)
* refactor: remove duplication * refactor: previous times * refactor: event patching
This commit is contained in:
Carlos Valente
GitHub
@@ -2,7 +2,6 @@
|
||||
height: calc(100% - 1.5rem);
|
||||
overflow: hidden;
|
||||
padding-top: 0.5rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.eventContainer {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Fragment, lazy, useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { closestCenter, DndContext, DragEndEvent, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
|
||||
import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
||||
import { OntimeRundown, Playback, SupportedEvent } from 'ontime-types';
|
||||
import { isOntimeBlock, isOntimeDelay, isOntimeEvent, OntimeRundown, Playback, SupportedEvent } from 'ontime-types';
|
||||
import { getFirst, getNext, getPrevious } from 'ontime-utils';
|
||||
|
||||
import { useEventAction } from '../../common/hooks/useEventAction';
|
||||
@@ -38,7 +38,7 @@ export default function Rundown(props: RundownProps) {
|
||||
const viewFollowsCursor = appMode === AppMode.Run;
|
||||
const cursorRef = useRef<HTMLDivElement | null>(null);
|
||||
const scrollRef = useRef<HTMLDivElement | null>(null);
|
||||
useFollowComponent({ followRef: cursorRef, scrollRef: scrollRef, doFollow: true });
|
||||
useFollowComponent({ followRef: cursorRef, scrollRef, doFollow: true });
|
||||
|
||||
// DND KIT
|
||||
const sensors = useSensors(useSensor(PointerSensor));
|
||||
@@ -66,8 +66,8 @@ export default function Rundown(props: RundownProps) {
|
||||
type: SupportedEvent.Event,
|
||||
};
|
||||
const options = {
|
||||
defaultPublic: defaultPublic,
|
||||
startTimeIsLastEnd: startTimeIsLastEnd,
|
||||
defaultPublic,
|
||||
startTimeIsLastEnd,
|
||||
lastEventId: cursor,
|
||||
after: cursor,
|
||||
};
|
||||
@@ -197,7 +197,7 @@ export default function Rundown(props: RundownProps) {
|
||||
return <RundownEmpty handleAddNew={() => insertAtCursor(SupportedEvent.Event, null)} />;
|
||||
}
|
||||
|
||||
let previousEnd = 0;
|
||||
let previousEnd: null | number = null;
|
||||
let thisEnd = 0;
|
||||
let previousEventId: string | undefined;
|
||||
let eventIndex = 0;
|
||||
@@ -213,10 +213,13 @@ export default function Rundown(props: RundownProps) {
|
||||
eventIndex = 0;
|
||||
}
|
||||
let isFirstEvent = false;
|
||||
if (entry.type === SupportedEvent.Event) {
|
||||
if (isOntimeEvent(entry)) {
|
||||
isFirstEvent = eventIndex === 0;
|
||||
// event indexes are 1 based in frontend
|
||||
eventIndex++;
|
||||
previousEnd = thisEnd;
|
||||
if (!isFirstEvent) {
|
||||
previousEnd = thisEnd;
|
||||
}
|
||||
thisEnd = entry.timeEnd;
|
||||
previousEventId = entry.id;
|
||||
}
|
||||
@@ -236,7 +239,6 @@ export default function Rundown(props: RundownProps) {
|
||||
<RundownEntry
|
||||
type={entry.type}
|
||||
isPast={isPast}
|
||||
isFirstEvent={isFirstEvent}
|
||||
eventIndex={eventIndex}
|
||||
data={entry}
|
||||
selected={isSelected}
|
||||
@@ -255,8 +257,8 @@ export default function Rundown(props: RundownProps) {
|
||||
showKbd={hasCursor}
|
||||
eventId={entry.id}
|
||||
previousEventId={previousEventId}
|
||||
disableAddDelay={entry.type === SupportedEvent.Delay}
|
||||
disableAddBlock={entry.type === SupportedEvent.Block}
|
||||
disableAddDelay={isOntimeDelay(entry)}
|
||||
disableAddBlock={isOntimeBlock(entry)}
|
||||
/>
|
||||
)}
|
||||
</Fragment>
|
||||
|
||||
@@ -2,12 +2,12 @@ import { useCallback } from 'react';
|
||||
import {
|
||||
GetRundownCached,
|
||||
isOntimeEvent,
|
||||
MaybeNumber,
|
||||
OntimeEvent,
|
||||
OntimeRundownEntry,
|
||||
Playback,
|
||||
SupportedEvent,
|
||||
} from 'ontime-types';
|
||||
import { calculateDuration, getCueCandidate } from 'ontime-utils';
|
||||
|
||||
import { RUNDOWN } from '../../common/api/apiConstants';
|
||||
import { useEventAction } from '../../common/hooks/useEventAction';
|
||||
@@ -28,17 +28,16 @@ export type EventItemActions = 'set-cursor' | 'event' | 'delay' | 'block' | 'del
|
||||
interface RundownEntryProps {
|
||||
type: SupportedEvent;
|
||||
isPast: boolean;
|
||||
isFirstEvent: boolean;
|
||||
data: OntimeRundownEntry;
|
||||
selected: boolean;
|
||||
eventIndex: number;
|
||||
hasCursor: boolean;
|
||||
next: boolean;
|
||||
previousEnd: number;
|
||||
previousEnd: MaybeNumber;
|
||||
previousEventId?: string;
|
||||
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
|
||||
disableEdit: boolean; // we disable edit when the window is extracted
|
||||
disableEdit: boolean;
|
||||
}
|
||||
|
||||
export default function RundownEntry(props: RundownEntryProps) {
|
||||
@@ -53,7 +52,6 @@ export default function RundownEntry(props: RundownEntryProps) {
|
||||
playback,
|
||||
isRolling,
|
||||
disableEdit,
|
||||
isFirstEvent,
|
||||
eventIndex,
|
||||
} = props;
|
||||
const { emitError } = useEmitLog();
|
||||
@@ -111,9 +109,7 @@ export default function RundownEntry(props: RundownEntryProps) {
|
||||
}
|
||||
case 'clone': {
|
||||
const newEvent = cloneEvent(data as OntimeEvent, data.id);
|
||||
const rundown = ontimeQueryClient.getQueryData<GetRundownCached>(RUNDOWN)?.rundown ?? [];
|
||||
newEvent.cue = getCueCandidate(rundown, data.id);
|
||||
addEvent(newEvent);
|
||||
addEvent(newEvent, { after: data.id });
|
||||
break;
|
||||
}
|
||||
case 'update': {
|
||||
@@ -139,26 +135,6 @@ export default function RundownEntry(props: RundownEntryProps) {
|
||||
batchUpdateEvents(changes, eventIds);
|
||||
return clearSelectedEvents();
|
||||
}
|
||||
|
||||
if (field === 'durationOverride' && data.type === SupportedEvent.Event) {
|
||||
// duration defines timeEnd
|
||||
newData.duration = value as number;
|
||||
newData.timeEnd = data.timeStart + (value as number);
|
||||
return updateEvent(newData);
|
||||
}
|
||||
|
||||
if (field === 'timeStart' && data.type === SupportedEvent.Event) {
|
||||
newData.duration = calculateDuration(value as number, data.timeEnd);
|
||||
newData.timeStart = value as number;
|
||||
return updateEvent(newData);
|
||||
}
|
||||
|
||||
if (field === 'timeEnd' && data.type === SupportedEvent.Event) {
|
||||
newData.duration = calculateDuration(data.timeStart, value as number);
|
||||
newData.timeEnd = value as number;
|
||||
return updateEvent(newData);
|
||||
}
|
||||
|
||||
if (field in data) {
|
||||
// @ts-expect-error not sure how to type this
|
||||
newData[field] = value;
|
||||
@@ -186,7 +162,7 @@ export default function RundownEntry(props: RundownEntryProps) {
|
||||
timerType={data.timerType}
|
||||
title={data.title}
|
||||
note={data.note}
|
||||
delay={data.delay || 0}
|
||||
delay={data.delay ?? 0}
|
||||
previousEnd={previousEnd}
|
||||
colour={data.colour}
|
||||
isPast={isPast}
|
||||
@@ -198,7 +174,6 @@ export default function RundownEntry(props: RundownEntryProps) {
|
||||
isRolling={isRolling}
|
||||
actionHandler={actionHandler}
|
||||
disableEdit={disableEdit}
|
||||
isFirstEvent={isFirstEvent}
|
||||
/>
|
||||
);
|
||||
} else if (data.type === SupportedEvent.Block) {
|
||||
|
||||
@@ -10,7 +10,7 @@ $skip-opacity: 0.1;
|
||||
grid-template-areas:
|
||||
'binder ... ... ...'
|
||||
'binder pb-actions times actions'
|
||||
'binder pb-actions title next-ind'
|
||||
'binder pb-actions title next'
|
||||
'binder pb-actions estatus estatus'
|
||||
'binder ... ... ...';
|
||||
|
||||
@@ -53,7 +53,7 @@ $skip-opacity: 0.1;
|
||||
|
||||
/* we stop the eventActions from having opacity to fix issue with dropdown drawing order */
|
||||
&.past:not(.skip) {
|
||||
.delayNote,
|
||||
.timerNote,
|
||||
.statusElements,
|
||||
.eventTitle,
|
||||
.eventNote,
|
||||
@@ -68,7 +68,7 @@ $skip-opacity: 0.1;
|
||||
&.skip {
|
||||
border: 1px solid $white-3;
|
||||
|
||||
.delayNote,
|
||||
.timerNote,
|
||||
.eventTitle,
|
||||
.eventNote,
|
||||
.binder,
|
||||
@@ -127,10 +127,12 @@ $skip-opacity: 0.1;
|
||||
gap: $block-clearance;
|
||||
height: 100%;
|
||||
|
||||
.delayNote {
|
||||
font-size: 0.75rem;
|
||||
line-height: 0.8rem;
|
||||
color: $ontime-delay-text;
|
||||
.timerNote {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
color: $blue-500;
|
||||
margin-right: 0.5em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -189,7 +191,7 @@ $skip-opacity: 0.1;
|
||||
}
|
||||
|
||||
.nextTag {
|
||||
grid-area: next-ind;
|
||||
grid-area: next;
|
||||
font-size: 1rem;
|
||||
color: $orange-500;
|
||||
letter-spacing: 0.03px;
|
||||
@@ -197,31 +199,6 @@ $skip-opacity: 0.1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.indicators {
|
||||
grid-area: next-ind;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
.indicator {
|
||||
background-color: transparent;
|
||||
margin: 0.4rem;
|
||||
margin-right: 0;
|
||||
border-radius: 0.7rem;
|
||||
width: 0.7rem;
|
||||
height: 0.7rem;
|
||||
}
|
||||
.indicator.delay {
|
||||
background-color: $ontime-delay;
|
||||
}
|
||||
.indicator.nextDay,
|
||||
.indicator.overlap,
|
||||
.indicator.spacing {
|
||||
background-color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
.eventStatus {
|
||||
grid-area: status;
|
||||
display: flex;
|
||||
|
||||
@@ -7,7 +7,7 @@ import { IoPeople } from '@react-icons/all-files/io5/IoPeople';
|
||||
import { IoPeopleOutline } from '@react-icons/all-files/io5/IoPeopleOutline';
|
||||
import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
|
||||
import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
|
||||
import { EndAction, OntimeEvent, Playback, TimerType } from 'ontime-types';
|
||||
import { EndAction, MaybeNumber, OntimeEvent, Playback, TimerType } from 'ontime-types';
|
||||
|
||||
import { useContextMenu } from '../../../common/hooks/useContextMenu';
|
||||
import useRundown from '../../../common/hooks-query/useRundown';
|
||||
@@ -19,6 +19,7 @@ import { useEventIdSwapping } from '../useEventIdSwapping';
|
||||
import { EditMode, useEventSelection } from '../useEventSelection';
|
||||
|
||||
import EventBlockInner from './EventBlockInner';
|
||||
import RundownIndicators from './RundownIndicators';
|
||||
|
||||
import style from './EventBlock.module.scss';
|
||||
|
||||
@@ -47,7 +48,7 @@ interface EventBlockProps {
|
||||
title: string;
|
||||
note: string;
|
||||
delay: number;
|
||||
previousEnd: number;
|
||||
previousEnd: MaybeNumber;
|
||||
colour: string;
|
||||
isPast: boolean;
|
||||
next: boolean;
|
||||
@@ -66,7 +67,6 @@ interface EventBlockProps {
|
||||
},
|
||||
) => void;
|
||||
disableEdit: boolean;
|
||||
isFirstEvent: boolean;
|
||||
}
|
||||
|
||||
export default function EventBlock(props: EventBlockProps) {
|
||||
@@ -94,7 +94,6 @@ export default function EventBlock(props: EventBlockProps) {
|
||||
isRolling,
|
||||
actionHandler,
|
||||
disableEdit,
|
||||
isFirstEvent,
|
||||
} = props;
|
||||
const { selectedEventId, setSelectedEventId, clearSelectedEventId } = useEventIdSwapping();
|
||||
const { selectedEvents, setSelectedEvents } = useEventSelection();
|
||||
@@ -253,12 +252,15 @@ export default function EventBlock(props: EventBlockProps) {
|
||||
onContextMenu={onContextMenu}
|
||||
id='event-block'
|
||||
>
|
||||
<RundownIndicators timeStart={timeStart} previousEnd={previousEnd} delay={delay} />
|
||||
|
||||
<div className={style.binder} style={{ ...binderColours }} tabIndex={-1}>
|
||||
<span className={style.drag} ref={handleRef} {...dragAttributes} {...dragListeners}>
|
||||
<IoReorderTwo />
|
||||
</span>
|
||||
<span className={style.cue}>{cue}</span>
|
||||
</div>
|
||||
|
||||
{isVisible && (
|
||||
<EventBlockInner
|
||||
timeStart={timeStart}
|
||||
@@ -272,7 +274,6 @@ export default function EventBlock(props: EventBlockProps) {
|
||||
title={title}
|
||||
note={note}
|
||||
delay={delay}
|
||||
previousEnd={previousEnd}
|
||||
next={next}
|
||||
skip={skip}
|
||||
selected={selected}
|
||||
@@ -280,7 +281,6 @@ export default function EventBlock(props: EventBlockProps) {
|
||||
isRolling={isRolling}
|
||||
actionHandler={actionHandler}
|
||||
disableEdit={disableEdit}
|
||||
isFirstEvent={isFirstEvent}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -11,10 +11,8 @@ 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, Playback, TimerType } from 'ontime-types';
|
||||
import { millisToString } from 'ontime-utils';
|
||||
|
||||
import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
|
||||
import { millisToDelayString } from '../../../common/utils/dateConfig';
|
||||
import { tooltipDelayMid } from '../../../ontimeConfig';
|
||||
import EditableBlockTitle from '../common/EditableBlockTitle';
|
||||
import { EventItemActions } from '../RundownEntry';
|
||||
@@ -47,7 +45,6 @@ interface EventBlockInnerProps {
|
||||
title: string;
|
||||
note: string;
|
||||
delay: number;
|
||||
previousEnd: number;
|
||||
next: boolean;
|
||||
skip: boolean;
|
||||
selected: boolean;
|
||||
@@ -55,7 +52,6 @@ interface EventBlockInnerProps {
|
||||
isRolling: boolean;
|
||||
actionHandler: (action: EventItemActions, payload?: any) => void;
|
||||
disableEdit: boolean;
|
||||
isFirstEvent: boolean;
|
||||
}
|
||||
|
||||
const EventBlockInner = (props: EventBlockInnerProps) => {
|
||||
@@ -70,7 +66,6 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
|
||||
title,
|
||||
note,
|
||||
delay,
|
||||
previousEnd,
|
||||
next,
|
||||
skip = false,
|
||||
selected,
|
||||
@@ -78,7 +73,6 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
|
||||
isRolling,
|
||||
actionHandler,
|
||||
disableEdit,
|
||||
isFirstEvent,
|
||||
} = props;
|
||||
|
||||
const [renderInner, setRenderInner] = useState(false);
|
||||
@@ -111,59 +105,14 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
|
||||
playBtnStyles._hover = {};
|
||||
}
|
||||
|
||||
const delayedStart = Math.max(0, timeStart + delay);
|
||||
const newTime = millisToString(delayedStart);
|
||||
const delayTime = delay !== 0 ? millisToDelayString(delay) : null;
|
||||
|
||||
const overlap = previousEnd - timeStart;
|
||||
const overlapTime = !isFirstEvent
|
||||
? overlap > 0
|
||||
? `Overlapping ${millisToDelayString(overlap)}`
|
||||
: overlap < 0
|
||||
? `Spacing ${millisToDelayString(overlap)}`
|
||||
: null
|
||||
: null;
|
||||
|
||||
return !renderInner ? null : (
|
||||
<>
|
||||
<EventBlockTimers
|
||||
eventId={eventId}
|
||||
timeStart={timeStart}
|
||||
timeEnd={timeEnd}
|
||||
duration={duration}
|
||||
delay={delay}
|
||||
previousEnd={previousEnd}
|
||||
/>
|
||||
<EventBlockTimers eventId={eventId} timeStart={timeStart} timeEnd={timeEnd} duration={duration} delay={delay} />
|
||||
<EditableBlockTitle title={title} eventId={eventId} placeholder='Event title' className={style.eventTitle} />
|
||||
{next ? (
|
||||
{next && (
|
||||
<Tooltip label='Next event' {...tooltipProps}>
|
||||
<span className={style.nextTag}>UP NEXT</span>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<span className={style.indicators}>
|
||||
{delayTime && (
|
||||
<Tooltip
|
||||
label={
|
||||
<div>
|
||||
{delayTime} <br />
|
||||
New Time: {newTime}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className={`${style.indicator} ${style.delay}`} />
|
||||
</Tooltip>
|
||||
)}
|
||||
{overlapTime && (
|
||||
<Tooltip label={overlapTime}>
|
||||
<div className={`${style.indicator} ${overlap > 0 ? style.overlap : style.spacing}`} />
|
||||
</Tooltip>
|
||||
)}
|
||||
{timeStart > timeEnd && (
|
||||
<Tooltip label='Start time is later than end'>
|
||||
<div className={`${style.indicator} ${style.nextDay}`} />
|
||||
</Tooltip>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
<EventBlockPlayback
|
||||
eventId={eventId}
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
.indicators {
|
||||
font-size: calc(1rem - 5px);
|
||||
position: absolute;
|
||||
top: -1em;
|
||||
z-index: 2;
|
||||
margin: 0 20%;
|
||||
width: 60%;
|
||||
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
@mixin indicator($bg-colour) {
|
||||
padding: 0 0.5rem;
|
||||
border-radius: 2px;
|
||||
background-color: $bg-colour;
|
||||
}
|
||||
|
||||
.delay {
|
||||
@include indicator($ontime-delay);
|
||||
}
|
||||
|
||||
.gap {
|
||||
@include indicator($blue-500);
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import { millisToString, removeLeadingZero, removeTrailingZero } from 'ontime-utils';
|
||||
|
||||
import style from './RundownIndicators.module.scss';
|
||||
|
||||
interface RundownIndicatorProps {
|
||||
timeStart: number;
|
||||
previousEnd: number | null;
|
||||
delay: number;
|
||||
}
|
||||
|
||||
function formatDelay(timeStart: number, delay: number): string | undefined {
|
||||
if (!delay) return;
|
||||
|
||||
const delayedStart = Math.max(0, timeStart + delay);
|
||||
const timeTag = removeTrailingZero(millisToString(delayedStart));
|
||||
return `New start: ${timeTag}`;
|
||||
}
|
||||
|
||||
function formatOverlap(previousEnd: number | null, timeStart: number): string | undefined {
|
||||
if (previousEnd === null) return;
|
||||
|
||||
const overlap = previousEnd - timeStart;
|
||||
if (overlap === 0) return;
|
||||
|
||||
const overlapString = removeLeadingZero(millisToString(Math.abs(overlap)));
|
||||
|
||||
return `${overlap > 0 ? 'Overlap' : 'Gap'}: ${overlapString}`;
|
||||
}
|
||||
|
||||
export default function RundownIndicators(props: RundownIndicatorProps) {
|
||||
const { timeStart, previousEnd, delay } = props;
|
||||
|
||||
const hasOverlap = formatOverlap(previousEnd, timeStart);
|
||||
const hasDelay = formatDelay(timeStart, delay);
|
||||
|
||||
return (
|
||||
<div className={style.indicators}>
|
||||
{hasDelay && <div className={style.delay}>{hasDelay}</div>}
|
||||
{hasOverlap && <div className={style.gap}>{hasOverlap}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,10 +1,12 @@
|
||||
import { memo } from 'react';
|
||||
import { Tooltip } from '@chakra-ui/react';
|
||||
import { IoAlertCircleOutline } from '@react-icons/all-files/io5/IoAlertCircleOutline';
|
||||
import { OntimeEvent } from 'ontime-types';
|
||||
import { calculateDuration, millisToString } from 'ontime-utils';
|
||||
|
||||
import TimeInputWithButton from '../../../../common/components/input/time-input/TimeInputWithButton';
|
||||
import { useEventAction } from '../../../../common/hooks/useEventAction';
|
||||
import { millisToDelayString } from '../../../../common/utils/dateConfig';
|
||||
import { forgivingStringToMillis } from '../../../../common/utils/dateConfig';
|
||||
import { tooltipDelayFast } from '../../../../ontimeConfig';
|
||||
|
||||
import style from '../EventBlock.module.scss';
|
||||
|
||||
@@ -14,73 +16,64 @@ interface EventBlockTimerProps {
|
||||
timeEnd: number;
|
||||
duration: number;
|
||||
delay: number;
|
||||
previousEnd: number;
|
||||
}
|
||||
|
||||
type TimeActions = 'timeStart' | 'timeEnd' | 'durationOverride' | 'timeWarning' | 'timeDanger';
|
||||
type TimeActions = 'timeStart' | 'timeEnd' | 'durationOverride'; // we call it durationOverride to stop from passing as a duration value
|
||||
|
||||
const EventBlockTimers = (props: EventBlockTimerProps) => {
|
||||
const { eventId, timeStart, timeEnd, duration, delay, previousEnd } = props;
|
||||
const { updateEvent } = useEventAction();
|
||||
const { eventId, timeStart, timeEnd, duration, delay } = props;
|
||||
const { updateEvent, updateTimer } = useEventAction();
|
||||
|
||||
const handleSubmit = (field: TimeActions, value: number) => {
|
||||
const newEventData: Partial<OntimeEvent> = { id: eventId };
|
||||
switch (field) {
|
||||
case 'durationOverride': {
|
||||
// duration defines timeEnd
|
||||
newEventData.duration = value;
|
||||
newEventData.timeEnd = timeStart + value;
|
||||
break;
|
||||
}
|
||||
case 'timeStart': {
|
||||
newEventData.duration = calculateDuration(value, timeEnd);
|
||||
newEventData.timeStart = value;
|
||||
break;
|
||||
}
|
||||
case 'timeEnd': {
|
||||
newEventData.duration = calculateDuration(timeStart, value);
|
||||
newEventData.timeEnd = value;
|
||||
break;
|
||||
}
|
||||
// In sync with EventEditorTimes
|
||||
const handleSubmit = (field: TimeActions, value: string) => {
|
||||
if (field === 'timeStart' || field === 'timeEnd') {
|
||||
updateTimer(eventId, field, value);
|
||||
return;
|
||||
}
|
||||
|
||||
if (field === 'durationOverride') {
|
||||
const timeInMillis = forgivingStringToMillis(value);
|
||||
const newEventData: Partial<OntimeEvent> = { id: eventId, timeEnd: timeStart + timeInMillis };
|
||||
updateEvent(newEventData);
|
||||
return;
|
||||
}
|
||||
updateEvent(newEventData);
|
||||
};
|
||||
|
||||
const delayedStart = Math.max(0, timeStart + delay);
|
||||
const newTime = millisToString(delayedStart);
|
||||
const delayTime = delay !== 0 ? millisToDelayString(delay) : null;
|
||||
const overMidnight = timeStart > timeEnd;
|
||||
const hasDelay = delay !== 0;
|
||||
|
||||
return (
|
||||
<div className={style.eventTimers}>
|
||||
<TimeInputWithButton
|
||||
<TimeInputWithButton<TimeActions>
|
||||
name='timeStart'
|
||||
submitHandler={handleSubmit}
|
||||
time={timeStart}
|
||||
delay={delay}
|
||||
hasDelay={hasDelay}
|
||||
placeholder='Start'
|
||||
previousEnd={previousEnd}
|
||||
/>
|
||||
<TimeInputWithButton
|
||||
<TimeInputWithButton<TimeActions>
|
||||
name='timeEnd'
|
||||
submitHandler={handleSubmit}
|
||||
time={timeEnd}
|
||||
delay={delay}
|
||||
hasDelay={hasDelay}
|
||||
placeholder='End'
|
||||
previousEnd={previousEnd}
|
||||
/>
|
||||
<TimeInputWithButton
|
||||
<TimeInputWithButton<TimeActions>
|
||||
name='durationOverride'
|
||||
submitHandler={handleSubmit}
|
||||
time={duration}
|
||||
delay={0}
|
||||
placeholder='Duration'
|
||||
previousEnd={previousEnd}
|
||||
/>
|
||||
{delayTime && (
|
||||
<div className={style.delayNote}>
|
||||
{delayTime}
|
||||
<br />
|
||||
{`New start: ${newTime}`}
|
||||
{overMidnight && (
|
||||
<div className={style.timerNote}>
|
||||
<Tooltip
|
||||
label='End timer before start'
|
||||
openDelay={tooltipDelayFast}
|
||||
variant='ontime-ondark'
|
||||
shouldWrapChildren
|
||||
>
|
||||
<IoAlertCircleOutline />
|
||||
</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -61,7 +61,7 @@ export default function EventEditor() {
|
||||
);
|
||||
|
||||
if (!event) {
|
||||
return <span>Loading...</span>;
|
||||
return <span data-testid='editor-container'>Loading...</span>;
|
||||
}
|
||||
|
||||
// Compositing user fields by hand
|
||||
@@ -80,7 +80,7 @@ export default function EventEditor() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={style.eventEditor}>
|
||||
<div className={style.eventEditor} data-testid='editor-container'>
|
||||
<div>HEADER ACTIONS?</div>
|
||||
<div className={style.content}>
|
||||
<EventEditorTimes
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { memo } from 'react';
|
||||
import { Select, Switch } from '@chakra-ui/react';
|
||||
import { EndAction, OntimeEvent, TimerType } from 'ontime-types';
|
||||
import { calculateDuration, millisToString } from 'ontime-utils';
|
||||
import { millisToString } from 'ontime-utils';
|
||||
|
||||
import TimeInput from '../../../../common/components/input/time-input/TimeInput';
|
||||
import TimeInputWithButton from '../../../../common/components/input/time-input/TimeInputWithButton';
|
||||
import { useEventAction } from '../../../../common/hooks/useEventAction';
|
||||
import { millisToDelayString } from '../../../../common/utils/dateConfig';
|
||||
import { forgivingStringToMillis, millisToDelayString } from '../../../../common/utils/dateConfig';
|
||||
import { cx } from '../../../../common/utils/styleUtils';
|
||||
|
||||
import style from '../EventEditor.module.scss';
|
||||
@@ -24,60 +24,52 @@ interface EventEditorTimesProps {
|
||||
timeDanger: number;
|
||||
}
|
||||
|
||||
type TimeActions =
|
||||
| 'timeStart'
|
||||
| 'timeEnd'
|
||||
| 'durationOverride'
|
||||
| 'timerType'
|
||||
| 'endAction'
|
||||
| 'isPublic'
|
||||
| 'timeWarning'
|
||||
| 'timeDanger';
|
||||
type HandledActions = 'timerType' | 'endAction' | 'isPublic' | 'timeWarning' | 'timeDanger';
|
||||
type TimeActions = 'timeStart' | 'timeEnd' | 'durationOverride'; // we call it durationOverride to stop from passing as a duration value
|
||||
|
||||
const EventEditorTimes = (props: EventEditorTimesProps) => {
|
||||
const { eventId, timeStart, timeEnd, duration, delay, isPublic, endAction, timerType, timeWarning, timeDanger } =
|
||||
props;
|
||||
const { updateEvent } = useEventAction();
|
||||
const { updateEvent, updateTimer } = useEventAction();
|
||||
|
||||
const handleSubmit = (field: TimeActions, value: number | string | boolean) => {
|
||||
const newEventData: Partial<OntimeEvent> = { id: eventId };
|
||||
switch (field) {
|
||||
case 'durationOverride': {
|
||||
// duration defines timeEnd
|
||||
newEventData.duration = value as number;
|
||||
newEventData.timeEnd = timeStart + (value as number);
|
||||
break;
|
||||
}
|
||||
case 'timeStart': {
|
||||
newEventData.duration = calculateDuration(value as number, timeEnd);
|
||||
newEventData.timeStart = value as number;
|
||||
break;
|
||||
}
|
||||
case 'timeEnd': {
|
||||
newEventData.duration = calculateDuration(timeStart, value as number);
|
||||
newEventData.timeEnd = value as number;
|
||||
break;
|
||||
}
|
||||
case 'isPublic': {
|
||||
updateEvent({ id: eventId, isPublic: !(value as boolean) });
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
if (field === 'timerType' || field === 'endAction' || field === 'timeWarning' || field === 'timeDanger') {
|
||||
// @ts-expect-error -- not sure how to typecheck here
|
||||
newEventData[field as keyof OntimeEvent] = value as string;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
// In sync with EventBlockTimers
|
||||
const handleTimeSubmit = (field: TimeActions, value: string) => {
|
||||
if (field === 'timeStart' || field === 'timeEnd') {
|
||||
updateTimer(eventId, field, value);
|
||||
return;
|
||||
}
|
||||
|
||||
if (field === 'durationOverride') {
|
||||
const timeInMillis = forgivingStringToMillis(value);
|
||||
const newEventData: Partial<OntimeEvent> = { id: eventId, timeEnd: timeStart + timeInMillis };
|
||||
updateEvent(newEventData);
|
||||
return;
|
||||
}
|
||||
updateEvent(newEventData);
|
||||
};
|
||||
|
||||
const delayTime = delay !== 0 ? millisToDelayString(delay) : null;
|
||||
const startLabel = delayTime ? `New start ${millisToString(timeStart + delay)}` : 'Start time';
|
||||
const endLabel = delayTime ? `New end ${millisToString(timeEnd + delay)}` : 'End time';
|
||||
const inputTimeLabels = cx([style.inputLabel, delayTime ? style.delayLabel : null]);
|
||||
const handleSubmit = (field: HandledActions, value: string | boolean) => {
|
||||
if (field === 'isPublic') {
|
||||
updateEvent({ id: eventId, isPublic: !(value as boolean) });
|
||||
return;
|
||||
}
|
||||
|
||||
if (field === 'timeWarning' || field === 'timeDanger') {
|
||||
const newTime = forgivingStringToMillis(value as string);
|
||||
updateEvent({ id: eventId, [field]: newTime });
|
||||
return;
|
||||
}
|
||||
|
||||
if (field === 'timerType' || field === 'endAction') {
|
||||
updateEvent({ id: eventId, [field]: value });
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
const hasDelay = delay !== 0;
|
||||
const delayTime = hasDelay ? millisToDelayString(delay) : null;
|
||||
const startLabel = delayTime ? `New Start ${millisToString(timeStart + delay)}` : 'Start time';
|
||||
const endLabel = delayTime ? `New End ${millisToString(timeEnd + delay)}` : 'End time';
|
||||
const inputTimeLabels = cx([style.inputLabel, hasDelay ? style.delayLabel : null]);
|
||||
|
||||
return (
|
||||
<div className={style.column}>
|
||||
@@ -87,11 +79,10 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
|
||||
{startLabel}
|
||||
</label>
|
||||
<TimeInputWithButton
|
||||
id='timeStart'
|
||||
name='timeStart'
|
||||
submitHandler={handleSubmit}
|
||||
submitHandler={handleTimeSubmit}
|
||||
time={timeStart}
|
||||
delay={delay}
|
||||
hasDelay={hasDelay}
|
||||
placeholder='Start'
|
||||
/>
|
||||
</div>
|
||||
@@ -100,11 +91,10 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
|
||||
{endLabel}
|
||||
</label>
|
||||
<TimeInputWithButton
|
||||
id='timeEnd'
|
||||
name='timeEnd'
|
||||
submitHandler={handleSubmit}
|
||||
submitHandler={handleTimeSubmit}
|
||||
time={timeEnd}
|
||||
delay={delay}
|
||||
hasDelay={hasDelay}
|
||||
placeholder='End'
|
||||
/>
|
||||
</div>
|
||||
@@ -113,9 +103,8 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
|
||||
Duration
|
||||
</label>
|
||||
<TimeInputWithButton
|
||||
id='durationOverride'
|
||||
name='durationOverride'
|
||||
submitHandler={handleSubmit}
|
||||
submitHandler={handleTimeSubmit}
|
||||
time={duration}
|
||||
placeholder='Duration'
|
||||
/>
|
||||
@@ -123,18 +112,14 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
|
||||
</div>
|
||||
|
||||
<div className={style.splitTwo}>
|
||||
<label className={style.inputLabel} htmlFor='timeWarning'>
|
||||
Warning Time
|
||||
<TimeInput
|
||||
id='timeWarning'
|
||||
name='timeWarning'
|
||||
submitHandler={handleSubmit}
|
||||
time={timeWarning}
|
||||
placeholder='Duration'
|
||||
/>
|
||||
</label>
|
||||
<label className={style.inputLabel}>
|
||||
Timer Type
|
||||
<div>
|
||||
<label className={style.inputLabel} htmlFor='timeWarning'>
|
||||
Warning Time
|
||||
</label>
|
||||
<TimeInput name='timeWarning' submitHandler={handleSubmit} time={timeWarning} placeholder='Duration' />
|
||||
</div>
|
||||
<div>
|
||||
<label className={style.inputLabel}>Timer Type</label>
|
||||
<Select
|
||||
size='sm'
|
||||
name='timerType'
|
||||
@@ -147,19 +132,15 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
|
||||
<option value={TimerType.TimeToEnd}>Time to end</option>
|
||||
<option value={TimerType.Clock}>Clock</option>
|
||||
</Select>
|
||||
</label>
|
||||
<label className={style.inputLabel} htmlFor='timeDanger'>
|
||||
Danger Time
|
||||
<TimeInput
|
||||
id='timeDanger'
|
||||
name='timeDanger'
|
||||
submitHandler={handleSubmit}
|
||||
time={timeDanger}
|
||||
placeholder='Duration'
|
||||
/>
|
||||
</label>
|
||||
<label className={style.inputLabel}>
|
||||
End Action
|
||||
</div>
|
||||
<div>
|
||||
<label className={style.inputLabel} htmlFor='timeDanger'>
|
||||
Danger Time
|
||||
</label>
|
||||
<TimeInput name='timeDanger' submitHandler={handleSubmit} time={timeDanger} placeholder='Duration' />
|
||||
</div>
|
||||
<div>
|
||||
<label className={style.inputLabel}>End Action</label>
|
||||
<Select
|
||||
size='sm'
|
||||
name='endAction'
|
||||
@@ -172,11 +153,11 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
|
||||
<option value={EndAction.LoadNext}>Load Next</option>
|
||||
<option value={EndAction.PlayNext}>Play Next</option>
|
||||
</Select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span className={style.inputLabel}>Event visibility</span>
|
||||
<span className={style.inputLabel}>Event Visibility</span>
|
||||
<label className={style.switchLabel}>
|
||||
<Switch isChecked={isPublic} onChange={() => handleSubmit('isPublic', isPublic)} variant='ontime' />
|
||||
{isPublic ? 'Public' : 'Private'}
|
||||
|
||||
@@ -31,8 +31,10 @@ const EventEditorTitles = (props: EventEditorLeftProps) => {
|
||||
return (
|
||||
<div className={style.column}>
|
||||
<div className={style.splitTwo}>
|
||||
<label className={style.inputLabel} htmlFor='eventId'>
|
||||
Event ID (read only)
|
||||
<div>
|
||||
<label className={style.inputLabel} htmlFor='eventId'>
|
||||
Event ID (read only)
|
||||
</label>
|
||||
<Input
|
||||
id='eventId'
|
||||
size='sm'
|
||||
@@ -41,7 +43,7 @@ const EventEditorTitles = (props: EventEditorLeftProps) => {
|
||||
value={eventId}
|
||||
readOnly
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<EventTextInput field='cue' label='Cue' initialValue={cue} submitHandler={cueSubmitHandler} maxLength={10} />
|
||||
</div>
|
||||
<EventTextInput field='title' label='Title' initialValue={title} submitHandler={handleSubmit} />
|
||||
|
||||
@@ -24,7 +24,7 @@ export default function CountdownSelect(props: CountdownSelectProps) {
|
||||
) as OntimeEvent[];
|
||||
|
||||
return (
|
||||
<div className='event-select' data-testid='countdown-select'>
|
||||
<div className='event-select' data-testid='countdown__select'>
|
||||
<span className='event-select__title'>{getLocalizedString('countdown.select_event')}</span>
|
||||
<ul className='event-select__events'>
|
||||
{!events.length ? (
|
||||
|
||||
Reference in New Issue
Block a user