Skip to content

Commit

Permalink
refactor: extract time-to-end
Browse files Browse the repository at this point in the history
  • Loading branch information
cpvalente committed Dec 16, 2024
1 parent ed65a4d commit 8c6a0bd
Show file tree
Hide file tree
Showing 31 changed files with 365 additions and 202 deletions.
1 change: 1 addition & 0 deletions apps/client/src/common/hooks/useSocket.ts
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ export const useMessagePreview = () => {
showExternalMessage: state.message.timer.secondarySource === 'external' && Boolean(state.message.external),
showTimerMessage: state.message.timer.visible && Boolean(state.message.timer.text),
timerType: state.eventNow?.timerType ?? null,
isTimeToEnd: state.eventNow?.isTimeToEnd ?? false,
});

return useRuntimeStore(featureSelector);
Expand Down
1 change: 1 addition & 0 deletions apps/client/src/common/models/TimeManager.type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,5 @@ export type ViewExtendedTimer = {

clock: number;
timerType: TimerType;
isTimeToEnd: boolean;
};
1 change: 1 addition & 0 deletions apps/client/src/common/utils/eventsManager.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export const cloneEvent = (event: OntimeEvent, after?: string): ClonedEvent => {
timeEnd: event.timeEnd,
timerType: event.timerType,
timeStrategy: event.timeStrategy,
isTimeToEnd: event.isTimeToEnd,
linkStart: event.linkStart,
endAction: event.endAction,
isPublic: event.isPublic,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,6 @@ export default function EditorSettingsForm() {
>
<option value={TimerType.CountDown}>Count down</option>
<option value={TimerType.CountUp}>Count up</option>
<option value={TimerType.TimeToEnd}>Time to end</option>
<option value={TimerType.Clock}>Clock</option>
<option value={TimerType.None}>None</option>
</Select>
Expand Down
8 changes: 4 additions & 4 deletions apps/client/src/features/control/message/TimerPreview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,19 @@ import { Corner } from '../../editors/editor-utils/EditorUtils';
import style from './MessageControl.module.scss';

export default function TimerPreview() {
const { blink, blackout, phase, showAuxTimer, showExternalMessage, showTimerMessage, timerType } =
const { blink, blackout, isTimeToEnd, phase, showAuxTimer, showExternalMessage, showTimerMessage, timerType } =
useMessagePreview();
const { data } = useViewSettings();

const contentClasses = cx([style.previewContent, blink && style.blink, blackout && style.blackout]);

const main = (() => {
if (showTimerMessage) return 'Message';
if (timerType === TimerType.None) return timerPlaceholder;
if (phase === TimerPhase.Pending) return 'Standby to start';
if (phase === TimerPhase.Overtime && data.endMessage) return 'Custom end message';
if (timerType === TimerType.TimeToEnd) return 'Time to end';
if (timerType === TimerType.Clock) return 'Clock';
if (timerType === TimerType.None) return timerPlaceholder;
if (isTimeToEnd) return 'Time to end';
return 'Timer';
})();

Expand Down Expand Up @@ -75,7 +75,7 @@ export default function TimerPreview() {
<IoTime className={style.statusIcon} data-active={timerType === TimerType.Clock} />
</Tooltip>
<Tooltip label='Time type: Time to end' openDelay={tooltipDelayMid} shouldWrapChildren>
<IoFlag className={style.statusIcon} data-active={timerType === TimerType.TimeToEnd} />
<IoFlag className={style.statusIcon} data-active={isTimeToEnd} />
</Tooltip>
<Tooltip label='Time type: None' openDelay={tooltipDelayMid} shouldWrapChildren>
<IoBan className={style.statusIcon} data-active={timerType === TimerType.None} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@

.title {
font-size: 1rem;
color: $label-gray;
color: $ui-white;
}

.label {
Expand Down
3 changes: 2 additions & 1 deletion apps/client/src/features/rundown/RundownEntry.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -150,14 +150,15 @@ export default function RundownEntry(props: RundownEntryProps) {
if (data.type === SupportedEvent.Event) {
return (
<EventBlock
eventId={data.id}
eventIndex={eventIndex}
cue={data.cue}
timeStart={data.timeStart}
timeEnd={data.timeEnd}
duration={data.duration}
timeStrategy={data.timeStrategy}
linkStart={data.linkStart}
eventId={data.id}
isTimeToEnd={data.isTimeToEnd}
isPublic={data.isPublic}
endAction={data.endAction}
timerType={data.timerType}
Expand Down
5 changes: 4 additions & 1 deletion apps/client/src/features/rundown/event-block/EventBlock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,14 @@ import RundownIndicators from './RundownIndicators';
import style from './EventBlock.module.scss';

interface EventBlockProps {
eventId: string;
cue: string;
timeStart: number;
timeEnd: number;
duration: number;
timeStrategy: TimeStrategy;
linkStart: MaybeString;
eventId: string;
isTimeToEnd: boolean;
eventIndex: number;
isPublic: boolean;
endAction: EndAction;
Expand Down Expand Up @@ -68,6 +69,7 @@ export default function EventBlock(props: EventBlockProps) {
duration,
timeStrategy,
linkStart,
isTimeToEnd,
isPublic = true,
eventIndex,
endAction,
Expand Down Expand Up @@ -286,6 +288,7 @@ export default function EventBlock(props: EventBlockProps) {
timeEnd={timeEnd}
duration={duration}
linkStart={linkStart}
isTimeToEnd={isTimeToEnd}
timeStrategy={timeStrategy}
eventId={eventId}
eventIndex={eventIndex}
Expand Down
21 changes: 12 additions & 9 deletions apps/client/src/features/rundown/event-block/EventBlockInner.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,13 @@ import EventBlockProgressBar from './composite/EventBlockProgressBar';
import style from './EventBlock.module.scss';

interface EventBlockInnerProps {
eventId: string;
timeStart: number;
timeEnd: number;
duration: number;
timeStrategy: TimeStrategy;
linkStart: MaybeString;
eventId: string;
isTimeToEnd: boolean;
eventIndex: number;
isPublic: boolean;
endAction: EndAction;
Expand All @@ -43,14 +44,15 @@ interface EventBlockInnerProps {
isRolling: boolean;
}

const EventBlockInner = (props: EventBlockInnerProps) => {
function EventBlockInner(props: EventBlockInnerProps) {
const {
eventId,
timeStart,
timeEnd,
duration,
timeStrategy,
linkStart,
eventId,
isTimeToEnd,
isPublic = true,
endAction,
timerType,
Expand Down Expand Up @@ -91,7 +93,7 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
delay={delay}
timeStrategy={timeStrategy}
linkStart={linkStart}
timerType={timerType}
isTimeToEnd={isTimeToEnd}
/>
</div>
<div className={style.titleSection}>
Expand Down Expand Up @@ -122,6 +124,11 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
<EndActionIcon action={endAction} className={style.statusIcon} />
</span>
</Tooltip>
<Tooltip label={`${isTimeToEnd ? 'Time to End' : 'Count from start'}`} openDelay={tooltipDelayMid}>
<span>
<IoFlag className={`${style.statusIcon} ${isTimeToEnd ? style.active : style.disabled}`} />
</span>
</Tooltip>
<Tooltip label={`${isPublic ? 'Event is public' : 'Event is private'}`} openDelay={tooltipDelayMid}>
<span>
<IoPeople className={`${style.statusIcon} ${isPublic ? style.active : style.disabled}`} />
Expand All @@ -131,7 +138,7 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
</div>
</>
);
};
}

export default memo(EventBlockInner);

Expand Down Expand Up @@ -162,9 +169,5 @@ function TimerIcon(props: { type: TimerType; className: string }) {
if (type === TimerType.None) {
return <IoBan className={className} />;
}
if (type === TimerType.TimeToEnd) {
const classes = cx([style.active, className]);
return <IoFlag className={classes} />;
}
return <IoArrowDown className={className} />;
}
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@
gap: 0.5rem;
max-width: max-content;
cursor: pointer;
height: 30px; // manually match the height of a text input
}

.inline {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ export default function EventEditor() {
duration={event.duration}
timeStrategy={event.timeStrategy}
linkStart={event.linkStart}
isTimeToEnd={event.isTimeToEnd}
delay={event.delay ?? 0}
isPublic={event.isPublic}
endAction={event.endAction}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ interface EventEditorTimesProps {
duration: number;
timeStrategy: TimeStrategy;
linkStart: MaybeString;
isTimeToEnd: boolean;
delay: number;
isPublic: boolean;
endAction: EndAction;
Expand All @@ -26,16 +27,17 @@ interface EventEditorTimesProps {
timeDanger: number;
}

type HandledActions = 'timerType' | 'endAction' | 'isPublic' | 'timeWarning' | 'timeDanger';
type HandledActions = 'isTimeToEnd' | 'timerType' | 'endAction' | 'isPublic' | 'timeWarning' | 'timeDanger';

const EventEditorTimes = (props: EventEditorTimesProps) => {
function EventEditorTimes(props: EventEditorTimesProps) {
const {
eventId,
timeStart,
timeEnd,
duration,
timeStrategy,
linkStart,
isTimeToEnd,
delay,
isPublic,
endAction,
Expand All @@ -51,6 +53,11 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
return;
}

if (field === 'isTimeToEnd') {
updateEvent({ id: eventId, isTimeToEnd: !(value as boolean) });
return;
}

if (field === 'timeWarning' || field === 'timeDanger') {
const newTime = parseUserTime(value as string);
updateEvent({ id: eventId, [field]: newTime });
Expand Down Expand Up @@ -83,23 +90,47 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
timeStrategy={timeStrategy}
linkStart={linkStart}
delay={delay}
timerType={timerType}
isTimeToEnd={isTimeToEnd}
/>
</div>
<div className={style.delayLabel}>{delayLabel}</div>
</div>

<Editor.Title>Event behaviour</Editor.Title>
<div className={style.splitTwo}>
<div>
<Editor.Label htmlFor='timeWarning'>Warning Time</Editor.Label>
<TimeInput
id='timeWarning'
name='timeWarning'
submitHandler={handleSubmit}
time={timeWarning}
placeholder='Duration'
/>
<Editor.Label htmlFor='endAction'>End Action</Editor.Label>
<Select
id='endAction'
size='sm'
name='endAction'
value={endAction}
onChange={(event) => handleSubmit('endAction', event.target.value)}
variant='ontime'
>
<option value={EndAction.None}>Wait for command</option>
<option value={EndAction.Stop}>Stop rundown</option>
<option value={EndAction.LoadNext}>Load next event</option>
<option value={EndAction.PlayNext}>Play next event</option>
</Select>
</div>
<div>
<Editor.Label htmlFor='timeToEnd'>Target Cue&apos;s Scheduled End</Editor.Label>
<Editor.Label className={style.switchLabel}>
<Switch
id='timeToEnd'
size='md'
isChecked={isTimeToEnd}
onChange={() => handleSubmit('isTimeToEnd', isTimeToEnd)}
variant='ontime'
/>
{isTimeToEnd ? 'Count to schedule' : 'Count from start'}
</Editor.Label>
</div>
</div>

<Editor.Title>Display options</Editor.Title>
<div className={style.splitTwo}>
<div>
<Editor.Label htmlFor='timerType'>Timer Type</Editor.Label>
<Select
Expand All @@ -112,11 +143,34 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
>
<option value={TimerType.CountDown}>Count down</option>
<option value={TimerType.CountUp}>Count up</option>
<option value={TimerType.TimeToEnd}>Time to end</option>
<option value={TimerType.Clock}>Clock</option>
<option value={TimerType.None}>None</option>
</Select>
</div>
<div>
<Editor.Label htmlFor='timeWarning'>Warning Time</Editor.Label>
<TimeInput
id='timeWarning'
name='timeWarning'
submitHandler={handleSubmit}
time={timeWarning}
placeholder='Duration'
/>
</div>

<div>
<Editor.Label htmlFor='isPublic'>Event Visibility</Editor.Label>
<Editor.Label className={style.switchLabel}>
<Switch
id='isPublic'
size='md'
isChecked={isPublic}
onChange={() => handleSubmit('isPublic', isPublic)}
variant='ontime'
/>
{isPublic ? 'Public' : 'Private'}
</Editor.Label>
</div>
<div>
<Editor.Label htmlFor='timeDanger'>Danger Time</Editor.Label>
<TimeInput
Expand All @@ -127,39 +181,9 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
placeholder='Duration'
/>
</div>
<div>
<Editor.Label htmlFor='endAction'>End Action</Editor.Label>
<Select
id='endAction'
size='sm'
name='endAction'
value={endAction}
onChange={(event) => handleSubmit('endAction', event.target.value)}
variant='ontime'
>
<option value={EndAction.None}>None</option>
<option value={EndAction.Stop}>Stop</option>
<option value={EndAction.LoadNext}>Load Next</option>
<option value={EndAction.PlayNext}>Play Next</option>
</Select>
</div>
</div>

<div>
<Editor.Label htmlFor='isPublic'>Event Visibility</Editor.Label>
<Editor.Label className={style.switchLabel}>
<Switch
id='isPublic'
size='md'
isChecked={isPublic}
onChange={() => handleSubmit('isPublic', isPublic)}
variant='ontime'
/>
{isPublic ? 'Public' : 'Private'}
</Editor.Label>
</div>
</div>
);
};
}

export default memo(EventEditorTimes);
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ const EventEditorTitles = (props: EventEditorTitlesProps) => {

return (
<div className={style.column}>
<Editor.Title>Event data</Editor.Title>
<div className={style.splitTwo}>
<div>
<Editor.Label htmlFor='eventId'>Event ID (read only)</Editor.Label>
Expand Down
Loading

0 comments on commit 8c6a0bd

Please sign in to comment.