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

V2 beta1 (#326)

Browse Source 
* style: labels on added time

* style: remove mentions of PiP

* refactor: unify usage of ms for timers

* refactor: create events with 0 duration

* style: several small tweaks

* refactor: keep block when applying delays

* feat: blocks have titles

* style: improvements in time entry warnings

* style: override progress bar styles

* style: prevent overflow

* feat: show character count in editor

* refactor: provide initial payload

* refactor: lower test boundary

* refactor: get colour from swatches

* style: rename title block

* chore: version bump
This commit is contained in:
Carlos Valente
2023-04-05 22:08:13 +02:00
committed by GitHub
parent 0a68377b82
commit 5e481d49da
57 changed files with 556 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "ontime-ui",
"version": "2.0.0-beta1",
"version": "2.0.0-beta2",
"private": true,
"dependencies": {
"@chakra-ui/react": "^2.5.1",
apps/client/src/appConstants.ts
-2
View File
@@ -3,7 +3,6 @@ const minimalLocation = 'minimal';
const speakerLocation = 'speaker';
const smLocation = 'sm';
const publicLocation = 'public';
const pipLocation = 'pip';
const studioLocation = 'studio';
const cuesheetLocation = 'cuesheet';
const countdownLocation = 'countdown';
@@ -17,7 +16,6 @@ export const viewerLocations = [
{ link: smLocation, label: 'Backstage screen' },
{ link: publicLocation, label: 'Public screen' },
{ link: lowerLocation, label: 'Lower thirds' },
{ link: pipLocation, label: 'Picture in Picture' },
{ link: studioLocation, label: 'Studio clock' },
{ link: countdownLocation, label: 'Countdown' },
{ link: cuesheetLocation, label: 'Cuesheet' },
apps/client/src/common/components/input/colour-input/ColourInput.module.scss
-7
View File
@@ -1,7 +0,0 @@
input[type="color"] {
appearance: none;
cursor: pointer;
height: 32px;
width: 32px;
padding: 0;
}
apps/client/src/common/components/input/colour-input/ColourInput.tsx
-25
View File
@@ -1,25 +0,0 @@
import { Input } from '@chakra-ui/react';
import { EventEditorSubmitActions } from '../../../../features/event-editor/EventEditor';
import style from './ColourInput.module.scss';
interface ColourInputProps {
value: string;
name: EventEditorSubmitActions;
handleChange: (newValue: EventEditorSubmitActions, name: string) => void;
}
export default function ColourInput(props: ColourInputProps) {
const { value, name, handleChange } = props;
return (
<Input
size='sm'
variant='ontime-filled'
className={style.colourInput}
type='color'
value={value}
onChange={(event) => handleChange(name, event.target.value)}
/>
);
}
apps/client/src/common/components/input/colour-input/Swatch.tsx
+26
View File
@@ -0,0 +1,26 @@
import { IoBan } from '@react-icons/all-files/io5/IoBan';
import { cx } from '../../../utils/styleUtils';
import style from './SwatchSelect.module.scss';
interface SwatchProps {
color: string;
onClick: (color: string) => void;
isSelected?: boolean;
}
export default function Swatch(props: SwatchProps) {
const { color, isSelected, onClick } = props;
const classes = cx([style.swatch, isSelected ? style.selected : null]);
if (!color) {
return (
<div className={`${classes} ${style.center}`}>
<IoBan />
</div>
);
}
return <div className={classes} style={{ backgroundColor: `${color}` }} onClick={() => onClick(color)} />;
}
apps/client/src/common/components/input/colour-input/SwatchSelect.module.scss
+24
View File
@@ -0,0 +1,24 @@
.list {
display: flex;
gap: 4px;
}
.swatch {
cursor: pointer;
aspect-ratio: 1;
width: 2rem;
height: 2rem;
border-radius: 16px;
border: 4px solid #262626;
&.selected {
border: 2px solid #578AF4;
}
}
.center {
display: grid;
place-content: center;
color: #578AF4;
}
apps/client/src/common/components/input/colour-input/SwatchSelect.tsx
+50
View File
@@ -0,0 +1,50 @@
import { useCallback } from 'react';
import { EventEditorSubmitActions } from '../../../../features/event-editor/EventEditor';
import Swatch from './Swatch';
import style from './SwatchSelect.module.scss';
interface ColourInputProps {
value: string;
name: EventEditorSubmitActions;
handleChange: (newValue: EventEditorSubmitActions, name: string) => void;
}
const colours = [
'',
'#FFCC78', // $orange-400
'#FFAB33', // $orange-600
'#77C785', // $green-400
'#339E4E', // $green-600
'#779BE7', // $blue-400
'#3E75E8', // $blue-600
'#FF7878', // $red-400
'#ED3333', // $red-600
'#A790F5', // $violet-400
'#8064E1', // $violet-600
'#9d9d9d', // $gray-500
'#ececec', // $gray-100
];
export default function SwatchSelect(props: ColourInputProps) {
const { value, name, handleChange } = props;
const setColour = useCallback(
(newValue: string) => {
if (newValue !== value) {
handleChange(name, newValue);
}
},
[handleChange, name, value],
);
return (
<div className={style.list}>
{colours.map((colour) => (
<Swatch key={colour} color={colour} onClick={setColour} isSelected={value === colour} />
))}
</div>
);
}
apps/client/src/common/components/input/delay-input/DelayInput.tsx
+17 -11
View File
@@ -11,6 +11,8 @@ const inputStyleProps = {
size: 'sm',
color: '#E69056',
variant: 'ontime-filled',
fontSize: '15px',
letterSpacing: '0.3px',
};
interface DelayInputProps {
@@ -24,7 +26,9 @@ export default function DelayInput(props: DelayInputProps) {
const inputRef = useRef<HTMLInputElement | null>(null);
useEffect(() => {
if (value == null) return;
if (!value) {
return;
}
setValue(value);
}, [value]);
@@ -36,7 +40,6 @@ export default function DelayInput(props: DelayInputProps) {
(newValue?: string) => {
if (newValue === '') setValue(0);
const delayValue = clamp(Number(newValue), -60, 60);
if (delayValue === value) return;
setValue(delayValue);
@@ -49,15 +52,18 @@ export default function DelayInput(props: DelayInputProps) {
* @description Handles common keys for submit and cancel
* @param {KeyboardEvent} event
*/
const onKeyDownHandler = useCallback((key: string) => {
if (key === 'Enter') {
inputRef.current?.blur();
validate(inputRef.current?.value);
} else if (key === 'Escape') {
inputRef.current?.blur();
setValue(value);
}
}, [validate, value]);
const onKeyDownHandler = useCallback(
(key: string) => {
if (key === 'Enter') {
inputRef.current?.blur();
validate(inputRef.current?.value);
} else if (key === 'Escape') {
inputRef.current?.blur();
setValue(value);
}
},
[validate, value],
);
const labelText = `${Math.abs(value) !== 1 ? 'minutes' : 'minute'} ${
value !== undefined && value >= 0 ? 'delayed' : 'ahead'
apps/client/src/common/components/input/text-input/TextInput.tsx
+13 -4
View File
@@ -15,15 +15,19 @@ interface BaseProps {
submitHandler: (field: EventEditorSubmitActions, newValue: string) => void;
}
interface TextAreaProps {
interface TextInputProps extends BaseProps {
isTextArea?: false;
}
interface TextAreaProps extends BaseProps {
isTextArea: true;
resize?: 'horizontal' | 'vertical' | 'none';
}
type TextInputProps = BaseProps & TextAreaProps;
type InputProps = TextInputProps | TextAreaProps;
export default function TextInput(props: TextInputProps) {
const { isTextArea, isFullHeight, size = 'sm', field, initialText = '', submitHandler, resize = 'none' } = props;
export default function TextInput(props: InputProps) {
const { isTextArea, isFullHeight, size = 'sm', field, initialText = '', submitHandler } = props;
const inputRef = useRef(null);
const submitCallback = useCallback((newValue: string) => submitHandler(field, newValue), [field, submitHandler]);
@@ -31,6 +35,11 @@ export default function TextInput(props: TextInputProps) {
const textInputProps = useReactiveTextInput(initialText, submitCallback, { submitOnEnter: true });
const textAreaProps = useReactiveTextInput(initialText, submitCallback);
let resize = 'none';
if (isTextArea) {
resize = (props as TextAreaProps)?.resize ?? 'none';
}
return isTextArea ? (
<Textarea
ref={inputRef}
apps/client/src/common/components/input/text-input/useReactiveTextInput.tsx
+5 -7
View File
@@ -1,4 +1,4 @@
import { ChangeEvent, useCallback, useEffect, useState } from 'react';
import { ChangeEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react';
interface UseReactiveTextInputReturn {
value: string;
@@ -14,8 +14,7 @@ export default function useReactiveTextInput(
submitOnEnter?: boolean;
},
): UseReactiveTextInputReturn {
const [text, setText] = useState(initialText);
const [text, setText] = useState<string>(initialText);
useEffect(() => {
if (typeof initialText === 'undefined') {
@@ -58,7 +57,6 @@ export default function useReactiveTextInput(
[initialText, submitCallback],
);
/**
* @description Handles common keys for submit and cancel
* @param {string} key
@@ -81,8 +79,8 @@ export default function useReactiveTextInput(
return {
value: text,
onChange: (event) => handleChange((event.target as HTMLInputElement).value),
onBlur: (event) => handleSubmit((event.target as HTMLInputElement).value),
onKeyDown: (event) => keyHandler(event.key),
onChange: (event: ChangeEvent) => handleChange((event.target as HTMLInputElement).value),
onBlur: (event: ChangeEvent) => handleSubmit((event.target as HTMLInputElement).value),
onKeyDown: (event: KeyboardEvent) => keyHandler(event.key),
};
}
apps/client/src/common/components/input/time-input/TimeInput.module.scss
+14
View File
@@ -1,9 +1,16 @@
@use "../../../../theme/v2Styles" as *;
$input-font-size: 15px;
$input-delayed-border-color: #E69056;
.timeInput {
width: fit-content !important;
.inputLeft {
max-width: fit-content;
}
.inputLeft,
.inputButton {
aspect-ratio: 1;
}
@@ -15,6 +22,13 @@ $input-delayed-border-color: #E69056;
padding: 0 0 0 2.6em;
}
.warn {
&::after {
content: "*";
color: $warning-orange;
}
}
&.delayed {
.inputField {
border: 1px solid $input-delayed-border-color;
apps/client/src/common/components/input/time-input/TimeInput.tsx
+13 -10
View File
@@ -2,26 +2,27 @@ import { FocusEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } f
import { Button, Input, InputGroup, InputLeftElement, Tooltip } from '@chakra-ui/react';
import { millisToString } from 'ontime-utils';
import { EventEditorSubmitActions } from '../../../../features/event-editor/EventEditor';
import { tooltipDelayFast } from '../../../../ontimeConfig';
import { useEmitLog } from '../../../stores/logger';
import { forgivingStringToMillis } from '../../../utils/dateConfig';
import { cx } from '../../../utils/styleUtils';
import { TimeEntryField } from '../../../utils/timesManager';
import style from './TimeInput.module.scss';
interface TimeInputProps {
name: TimeEntryField;
submitHandler: (field: EventEditorSubmitActions, value: number) => void;
submitHandler: (field: TimeEntryField, value: number) => void;
time?: number;
delay?: number;
placeholder: string;
validationHandler: (entry: TimeEntryField, val: number) => boolean;
previousEnd?: number;
warning?: string;
}
export default function TimeInput(props: TimeInputProps) {
const { name, submitHandler, time = 0, delay = 0, placeholder, validationHandler, previousEnd = 0 } = props;
const { name, submitHandler, time = 0, delay = 0, placeholder, validationHandler, previousEnd = 0, warning } = props;
const { emitError } = useEmitLog();
const inputRef = useRef<HTMLInputElement | null>(null);
const [value, setValue] = useState('');
@@ -30,7 +31,6 @@ export default function TimeInput(props: TimeInputProps) {
* @description Resets input value to given
*/
const resetValue = useCallback(() => {
// Todo: check if change is necessary
try {
setValue(millisToString(time + delay));
} catch (error) {
@@ -149,20 +149,23 @@ export default function TimeInput(props: TimeInputProps) {
};
const ButtonTooltip = () => {
if (name === 'timeStart') return 'Start';
if (name === 'timeEnd') return 'End';
if (name === 'durationOverride') return 'Duration';
if (name === 'timeStart') return `Start${warning ? `: ${warning}` : ''}`;
if (name === 'timeEnd') return `End${warning ? `: ${warning}` : ''}`;
if (name === 'durationOverride') return `Duration${warning ? `: ${warning}` : ''}`;
return '';
};
const inputClasses = cx([style.timeInput, isDelayed ? style.delayed : null]);
const buttonClasses = cx([style.inputButton, isDelayed ? style.delayed : null, warning ? style.warn : null]);
return (
<InputGroup size='sm' className={`${style.timeInput} ${isDelayed ? style.delayed : ''}`}>
<InputLeftElement width='fit-content'>
<InputGroup size='sm' className={inputClasses}>
<InputLeftElement className={style.inputLeft}>
<Tooltip label={ButtonTooltip()} openDelay={tooltipDelayFast} variant='ontime-ondark'>
<Button
size='sm'
variant='ontime-subtle-white'
className={`${style.inputButton} ${isDelayed ? style.delayed : ''}`}
className={buttonClasses}
tabIndex={-1}
border={isDelayed ? '1px solid #E69056' : '1px solid transparent'}
borderRight='1px solid transparent'
apps/client/src/common/components/progress-bar/ProgressBar.scss
+2 -2
View File
@@ -7,7 +7,7 @@ $progress-bar-br: 6px;
width: 100%;
height: $progress-bar-size;
border-radius: $progress-bar-br;
background-color: var(--card-background-color-override, $viewer-card-bg-color);
background-color: var(--timer-progress-bg-override, $viewer-card-bg-color);
&--hidden {
display: none;
@@ -17,7 +17,7 @@ $progress-bar-br: 6px;
.progress-bar__indicator {
height: $progress-bar-size;
border-radius: $progress-bar-br;
background-color: var(--accent-color-override, $accent-color);
background-color: var(--timer-progress-override, $accent-color);
transition: 1s linear;
transition-property: width;
}
apps/client/src/common/components/progress-bar/ProgressBar.tsx
+1 -4
View File
@@ -16,10 +16,7 @@ export default function ProgressBar(props: ProgressBarProps) {
return (
<div className={`progress-bar__bg ${hidden ? 'progress-bar__bg--hidden' : ''} ${className}`}>
<div
className='progress-bar__indicator'
style={{ width: `${percentComplete}%` }}
/>
<div className='progress-bar__indicator' style={{ width: `${percentComplete}%` }} />
</div>
);
}
apps/client/src/common/components/timer-display/TimerDisplay.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { memo } from 'react';
import { formatDisplay, millisToSeconds } from '../../utils/dateConfig';
import { formatDisplay } from '../../utils/dateConfig';
import './TimerDisplay.scss';
@@ -21,7 +21,7 @@ const TimerDisplay = (props: TimerDisplayProps) => {
if (time === null || typeof time === 'undefined' || isNaN(time)) {
display = '-- : -- : --';
} else {
display = formatDisplay(millisToSeconds(time));
display = formatDisplay(time);
}
const isNegative = (time ?? 0) < 0;
apps/client/src/common/hooks/useEventAction.ts
+1
View File
@@ -76,6 +76,7 @@ export const useEventAction = () => {
const previousEvent = rundown.find((event) => event.id === applicationOptions.lastEventId);
if (typeof previousEvent !== 'undefined' && previousEvent.type === 'event') {
newEvent.timeStart = previousEvent.timeEnd;
newEvent.timeEnd = previousEvent.timeEnd;
}
}
apps/client/src/common/utils/__tests__/dateConfig.test.js
+10 -10
View File
@@ -19,12 +19,12 @@ describe('test string from formatDisplay function', () => {
});
it('test with valid millis', () => {
const t = { val: 3600, result: '01:00:00' };
const t = { val: 3600000, result: '01:00:00' };
expect(formatDisplay(t.val, false)).toBe(t.result);
});
it('test with negative millis', () => {
const t = { val: -3600, result: '01:00:00' };
const t = { val: -3600000, result: '01:00:00' };
expect(formatDisplay(t.val, false)).toBe(t.result);
});
@@ -39,17 +39,17 @@ describe('test string from formatDisplay function', () => {
});
it('test with 86400 (24 hours)', () => {
const t = { val: 86400, result: '00:00:00' };
const t = { val: 86400000, result: '00:00:00' };
expect(formatDisplay(t.val, false)).toBe(t.result);
});
it('test with 86401 (24 hours and 1 second)', () => {
const t = { val: 86401, result: '00:00:01' };
const t = { val: 86401000, result: '00:00:01' };
expect(formatDisplay(t.val, false)).toBe(t.result);
});
it('test with -86401 (-24 hours and 1 second)', () => {
const t = { val: -86401, result: '00:00:01' };
const t = { val: -86401000, result: '00:00:01' };
expect(formatDisplay(t.val, false)).toBe(t.result);
});
});
@@ -61,12 +61,12 @@ describe('test string from formatDisplay function with hidezero', () => {
});
it('test with valid millis', () => {
const t = { val: 3600, result: '01:00:00' };
const t = { val: 3600000, result: '01:00:00' };
expect(formatDisplay(t.val, true)).toBe(t.result);
});
it('test with negative millis', () => {
const t = { val: -3600, result: '01:00:00' };
const t = { val: -3600000, result: '01:00:00' };
expect(formatDisplay(t.val, true)).toBe(t.result);
});
@@ -81,17 +81,17 @@ describe('test string from formatDisplay function with hidezero', () => {
});
it('test with 86400 (24 hours)', () => {
const t = { val: 86400, result: '00:00' };
const t = { val: 86400000, result: '00:00' };
expect(formatDisplay(t.val, true)).toBe(t.result);
});
it('test with 86401 (24 hours and 1 second)', () => {
const t = { val: 86401, result: '00:01' };
const t = { val: 86401000, result: '00:01' };
expect(formatDisplay(t.val, true)).toBe(t.result);
});
it('test with -86401 (-24 hours and 1 second)', () => {
const t = { val: -86401, result: '00:01' };
const t = { val: -86401000, result: '00:01' };
expect(formatDisplay(t.val, true)).toBe(t.result);
});
});
apps/client/src/common/utils/dateConfig.ts
+4 -4
View File
@@ -6,19 +6,19 @@ export const timeFormatSeconds = 'HH:mm:ss';
/**
* another go at simpler string formatting (counters)
* @description Converts seconds to string representing time
* @param {number | null} seconds - time in seconds
* @param {number | null} milliseconds - time in seconds
* @param {boolean} [hideZero] - whether to show hours in case its 00
* @returns {string} String representing absolute time 00:12:02
*/
export function formatDisplay(seconds: number | null, hideZero = false): string {
if (typeof seconds !== 'number') {
export function formatDisplay(milliseconds: number | null, hideZero = false): string {
if (typeof milliseconds !== 'number') {
return hideZero ? '00:00' : '00:00:00';
}
// add an extra 0 if necessary
const format = (val: number) => `0${Math.floor(val)}`.slice(-2);
const s = Math.abs(seconds);
const s = Math.abs(millisToSeconds(milliseconds));
const hours = Math.floor((s / 3600) % 24);
const minutes = Math.floor((s % 3600) / 60);
apps/client/src/common/utils/timesManager.ts
+15 -5
View File
@@ -1,4 +1,4 @@
export type TimeEntryField = 'timeStart' |'timeEnd' | 'durationOverride';
export type TimeEntryField = 'timeStart' | 'timeEnd' | 'durationOverride';
/**
* @description Milliseconds in a day
@@ -14,7 +14,12 @@ export const calculateDuration = (start: number, end: number): number =>
/**
* @description Checks which field the value relates to
*/
export const handleTimeEntry = (field: TimeEntryField, val: number, timeStart: number, timeEnd: number): {start: number, end: number, durationOverride: boolean} => {
export const handleTimeEntry = (
field: TimeEntryField,
val: number,
timeStart: number,
timeEnd: number,
): { start: number; end: number; durationOverride: boolean } => {
let start = timeStart;
let end = timeEnd;
let durationOverride = false;
@@ -32,13 +37,18 @@ export const handleTimeEntry = (field: TimeEntryField, val: number, timeStart: n
/**
* @description Validates time entry
*/
export const validateEntry = (field: TimeEntryField, value: number, timeStart: number, timeEnd: number): { value: boolean, catch: string } => {
const validate = { value: true, catch: '' };
export const validateEntry = (
field: TimeEntryField,
value: number,
timeStart: number,
timeEnd: number,
): { value: boolean; warnings: { start?: string; end?: string; duration?: string } } => {
const validate = { value: true, warnings: { start: '', end: '', duration: '' } };
const { start, end } = handleTimeEntry(field, value, timeStart, timeEnd);
if (end < start) {
validate.catch = 'Start time later than end time';
validate.warnings.start = 'Start time later than end time';
}
return validate;
apps/client/src/features/control/playback/PlaybackTimer.tsx
+25 -2
View File
@@ -4,7 +4,7 @@ import { millisToString } from 'ontime-utils';
import TimerDisplay from '../../../common/components/timer-display/TimerDisplay';
import { setPlayback, useTimer } from '../../../common/hooks/useSocket';
import { millisToMinutes } from '../../../common/utils/dateConfig';
import { millisToMinutes, millisToSeconds } from '../../../common/utils/dateConfig';
import { tooltipDelayMid } from '../../../ontimeConfig';
import TapButton from './TapButton';
@@ -30,7 +30,30 @@ export default function PlaybackTimer(props: PlaybackTimerProps) {
const hasAddedTime = Boolean(timer.addedTime);
const rollLabel = isRolling ? 'Roll mode active' : '';
const addedTimeLabel = hasAddedTime ? `Added ${millisToMinutes(timer.addedTime)} minutes` : '';
const resolveAddedTimeLabel = () => {
function resolveClosestUnit(ms: number) {
if (ms < 6000) {
return `${millisToSeconds(ms)} seconds`;
} else if (ms < 12000) {
return `1 minute`;
} else {
return `${millisToMinutes(ms)} minutes`;
}
}
if (timer.addedTime > 0) {
return `Added ${resolveClosestUnit(timer.addedTime)}`;
}
if (timer.addedTime < 0) {
return `Removed ${resolveClosestUnit(timer.addedTime)}`;
}
return '';
};
const addedTimeLabel = resolveAddedTimeLabel();
return (
<div className={style.timeContainer}>
apps/client/src/features/event-editor/EventEditor.module.scss
+12 -2
View File
@@ -64,10 +64,20 @@
}
}
.inputLabel {
@mixin input-label() {
font-size: 13px;
display: block;
color: $label-gray;
}
.countedInput {
display: flex;
justify-content: space-between;
@include input-label;
}
.inputLabel {
display: block;
@include input-label;
.delayLabel {
color: $ontime-delay-text;
apps/client/src/features/event-editor/EventEditor.tsx
+29 -38
View File
@@ -1,12 +1,10 @@
import { useCallback, useEffect, useState } from 'react';
import { Button, Select, Switch } from '@chakra-ui/react';
import { IoBan } from '@react-icons/all-files/io5/IoBan';
import { Select, Switch } from '@chakra-ui/react';
import { EndAction, OntimeEvent, TimerType } from 'ontime-types';
import { millisToString } from 'ontime-utils';
import CopyTag from '../../common/components/copy-tag/CopyTag';
import ColourInput from '../../common/components/input/colour-input/ColourInput';
import TextInput from '../../common/components/input/text-input/TextInput';
import SwatchSelect from '../../common/components/input/colour-input/SwatchSelect';
import TimeInput from '../../common/components/input/time-input/TimeInput';
import { useEventAction } from '../../common/hooks/useEventAction';
import useRundown from '../../common/hooks-query/useRundown';
@@ -16,6 +14,9 @@ import { millisToMinutes } from '../../common/utils/dateConfig';
import getDelayTo from '../../common/utils/getDelayTo';
import { calculateDuration, TimeEntryField, validateEntry } from '../../common/utils/timesManager';
import CountedTextArea from './composite/CountedTextArea';
import CountedTextInput from './composite/CountedTextInput';
import style from './EventEditor.module.scss';
export type EventEditorSubmitActions = keyof OntimeEvent | 'durationOverride';
@@ -24,10 +25,11 @@ export type EventEditorSubmitActions = keyof OntimeEvent | 'durationOverride';
export default function EventEditor() {
const { openId } = useEventEditorStore();
const { data } = useRundown();
const { emitWarning, emitError } = useEmitLog();
const { emitError } = useEmitLog();
const { updateEvent } = useEventAction();
const [event, setEvent] = useState<OntimeEvent | null>(null);
const [delay, setDelay] = useState(0);
const [warning, setWarnings] = useState({ start: '', end: '', duration: '' });
useEffect(() => {
if (!data || !openId) {
@@ -85,16 +87,14 @@ export default function EventEditor() {
const timerValidationHandler = useCallback(
(entry: TimeEntryField, val: number) => {
if (!event) {
return;
if (!event?.timeStart) {
return true;
}
const valid = validateEntry(entry, val, event.timeStart, event.timeEnd);
if (!valid.value) {
emitWarning(`Time Input Warning: ${valid.catch}`);
}
setWarnings((prev) => ({ ...prev, ...valid.warnings }));
return valid.value;
},
[event, emitWarning],
[event?.timeStart, event?.timeEnd],
);
const handleChange = useCallback(
@@ -145,6 +145,7 @@ export default function EventEditor() {
time={event.timeStart}
delay={delay}
placeholder='Start'
warning={warning.start}
/>
<label className={style.inputLabel}>
End time {delayed && <span className={style.delayLabel}>{addedTime}</span>}
@@ -157,6 +158,7 @@ export default function EventEditor() {
time={event.timeEnd}
delay={delay}
placeholder='End'
warning={warning.end}
/>
<label className={style.inputLabel}>Duration</label>
<TimeInput
@@ -165,6 +167,7 @@ export default function EventEditor() {
validationHandler={timerValidationHandler}
time={event.duration}
placeholder='Duration'
warning={warning.duration}
/>
</div>
<div className={style.timeSettings}>
@@ -202,40 +205,28 @@ export default function EventEditor() {
</div>
<div className={style.titles}>
<div className={style.left}>
<div className={style.column}>
<label className={style.inputLabel}>Title</label>
<TextInput field='title' initialText={event.title} submitHandler={handleSubmit} />
</div>
<div className={style.column}>
<label className={style.inputLabel}>Presenter</label>
<TextInput field='presenter' initialText={event.presenter} submitHandler={handleSubmit} />
</div>
<div className={style.column}>
<label className={style.inputLabel}>Subtitle</label>
<TextInput field='subtitle' initialText={event.subtitle} submitHandler={handleSubmit} />
</div>
<CountedTextInput field='title' label='Title' initialValue={event.title} submitHandler={handleSubmit} />
<CountedTextInput
field='presenter'
label='Presenter'
initialValue={event.presenter}
submitHandler={handleSubmit}
/>
<CountedTextInput
field='subtitle'
label='Subtitle'
initialValue={event.subtitle}
submitHandler={handleSubmit}
/>
</div>
<div className={style.right}>
<div className={style.column}>
<label className={style.inputLabel}>Colour</label>
<div className={style.inline}>
<ColourInput name='colour' value={event?.colour} handleChange={handleSubmit} />
<Button leftIcon={<IoBan />} onClick={() => handleSubmit('colour', '')} variant='ontime-subtle' size='sm'>
Clear colour
</Button>
<SwatchSelect name='colour' value={event.colour} handleChange={handleSubmit} />
</div>
</div>
<div className={`${style.column} ${style.fullHeight}`}>
<label className={style.inputLabel}>Note</label>
<TextInput
field='note'
initialText={event.note}
submitHandler={handleSubmit}
isTextArea
isFullHeight
resize='none'
/>
</div>
<CountedTextArea field='note' label='Note' initialValue={event.note} submitHandler={handleSubmit} />
</div>
</div>
</div>
apps/client/src/features/event-editor/composite/CountedTextArea.tsx
+42
View File
@@ -0,0 +1,42 @@
import { useCallback } from 'react';
import { Textarea } from '@chakra-ui/react';
import useReactiveTextInput from '../../../common/components/input/text-input/useReactiveTextInput';
import { EventEditorSubmitActions } from '../EventEditor';
import style from '../EventEditor.module.scss';
interface CountedTextAreaProps {
field: EventEditorSubmitActions;
label: string;
initialValue: string;
submitHandler: (field: EventEditorSubmitActions, value: string) => void;
}
export default function CountedTextArea(props: CountedTextAreaProps) {
const { field, label, initialValue, submitHandler } = props;
const submitCallback = useCallback((newValue: string) => submitHandler(field, newValue), [field, submitHandler]);
const { value, onChange, onBlur, onKeyDown } = useReactiveTextInput(initialValue, submitCallback);
return (
<div className={`${style.column} ${style.fullHeight}`}>
<div className={style.countedInput}>
<label className={style.inputLabel}>{label}</label>
<span className={style.charCount}>{`${value.length} characters`}</span>
</div>
<Textarea
size='sm'
resize='none'
variant='ontime-filled'
style={{ height: '100%' }}
data-testid='input-textarea'
value={value}
onChange={onChange}
onBlur={onBlur}
onKeyDown={onKeyDown}
/>
</div>
);
}
apps/client/src/features/event-editor/composite/CountedTextInput.tsx
+42
View File
@@ -0,0 +1,42 @@
import { useCallback } from 'react';
import { Input } from '@chakra-ui/react';
import useReactiveTextInput from '../../../common/components/input/text-input/useReactiveTextInput';
import { EventEditorSubmitActions } from '../EventEditor';
import style from '../EventEditor.module.scss';
interface CountedTextInputProps {
field: EventEditorSubmitActions;
label: string;
initialValue: string;
submitHandler: (field: EventEditorSubmitActions, value: string) => void;
}
export default function CountedTextInput(props: CountedTextInputProps) {
const { field, label, initialValue, submitHandler } = props;
const submitCallback = useCallback((newValue: string) => submitHandler(field, newValue), [field, submitHandler]);
const { value, onChange, onBlur, onKeyDown } = useReactiveTextInput(initialValue, submitCallback, {
submitOnEnter: true,
});
return (
<div className={style.column}>
<div className={style.countedInput}>
<label className={style.inputLabel}>{label}</label>
<span className={style.charCount}>{`${value.length} characters`}</span>
</div>
<Input
size='sm'
variant='ontime-filled'
data-testid='input-textfield'
value={value}
onChange={onChange}
onBlur={onBlur}
onKeyDown={onKeyDown}
/>
</div>
);
}
apps/client/src/features/modals/ViewsSettingsModal.jsx
+28 -23
View File
@@ -42,14 +42,14 @@ export default function ViewsSettingsModal() {
try {
await postView(formData);
} catch (error) {
emitError(`Error view settings: ${error}`)
} finally{
emitError(`Error view settings: ${error}`);
} finally {
await refetch();
setChanged(false);
}
setSubmitting(false);
},
[emitError, formData, refetch]
[emitError, formData, refetch],
);
/**
@@ -72,7 +72,7 @@ export default function ViewsSettingsModal() {
setFormData(temp);
setChanged(true);
},
[formData]
[formData],
);
return (
@@ -89,18 +89,30 @@ export default function ViewsSettingsModal() {
<IoInformationCircleOutline color='#2b6cb0' fontSize='2em' />
CSS Style Overrides
</span>
This feature allows user defined CSS to override the application stylesheets as a way to
customise viewers appearance.
This feature allows user defined CSS to override the application stylesheets as a way to customise viewers
appearance.
<br />
Currently the feature affects the following views
<br />
Currently the feature affects the following views<br />
<ul className={style.featureList}>
<li><IoCheckmarkSharp /> Stage timer</li>
<li><IoCheckmarkSharp /> Clock</li>
<li><IoCheckmarkSharp /> Minimal timer</li>
<li><IoCheckmarkSharp /> Backstage screen</li>
<li><IoCheckmarkSharp /> Public screen</li>
<li><IoCheckmarkSharp /> Picture in Picture</li>
<li><IoCheckmarkSharp /> Countdown</li>
<li>
<IoCheckmarkSharp /> Stage timer
</li>
<li>
<IoCheckmarkSharp /> Clock
</li>
<li>
<IoCheckmarkSharp /> Minimal timer
</li>
<li>
<IoCheckmarkSharp /> Backstage screen
</li>
<li>
<IoCheckmarkSharp /> Public screen
</li>
<li>
<IoCheckmarkSharp /> Countdown
</li>
</ul>
Read more about it in the documentation{' '}
<a
@@ -123,19 +135,12 @@ export default function ViewsSettingsModal() {
</FormLabel>
<EnableBtn
active={formData.overrideStyles}
text={
formData.overrideStyles ? 'Style Override Enabled' : 'Style Override Disabled'
}
text={formData.overrideStyles ? 'Style Override Enabled' : 'Style Override Disabled'}
actionHandler={() => handleChange('overrideStyles', !formData.overrideStyles)}
/>
</FormControl>
</div>
<SubmitContainer
revert={revert}
submitting={submitting}
changed={changed}
status={status}
/>
<SubmitContainer revert={revert} submitting={submitting} changed={changed} status={status} />
</div>
</form>
</ModalBody>
apps/client/src/features/rundown/block-block/BlockBlock.module.scss
+1
View File
@@ -6,6 +6,7 @@
box-sizing: content-box;
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 8px;
align-items: center;
height: $secondary-block-height;
apps/client/src/features/rundown/block-block/BlockBlock.tsx
+2
View File
@@ -5,6 +5,7 @@ import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
import { OntimeBlock, OntimeEvent } from 'ontime-types';
import { cx } from '../../../common/utils/styleUtils';
import EditableBlockTitle from '../common/EditableBlockTitle';
import BlockActionMenu from '../event-block/composite/BlockActionMenu';
import { EventItemActions } from '../RundownEntry';
@@ -57,6 +58,7 @@ export default function BlockBlock(props: BlockBlockProps) {
<span className={style.drag} ref={handleRef} {...dragAttributes} {...dragListeners}>
<IoReorderTwo />
</span>
<EditableBlockTitle title={data.title} eventId={data.id} placeholder='Block title' />
<BlockActionMenu className={style.actionOverlay} showAdd showDelay enableDelete actionHandler={actionHandler} />
</div>
);
apps/client/src/features/rundown/common/EditableBlockTitle.tsx
+53
View File
@@ -0,0 +1,53 @@
import { useCallback, useEffect, useState } from 'react';
import { Editable, EditableInput, EditablePreview } from '@chakra-ui/react';
import { useEventAction } from '../../../common/hooks/useEventAction';
import { cx } from '../../../common/utils/styleUtils';
import style from './TitleEditor.module.scss';
interface TitleEditorProps {
title: string;
eventId: string;
placeholder: string;
className?: string;
}
export default function EditableBlockTitle(props: TitleEditorProps) {
const { title, eventId, placeholder, className } = props;
const [blockTitle, setBlockTitle] = useState<string>(title || '');
const { updateEvent } = useEventAction();
useEffect(() => {
setBlockTitle(title);
}, [title]);
const handleTitle = useCallback(
(text: string) => {
if (text === title) {
return;
}
const cleanVal = text.trim();
setBlockTitle(cleanVal);
updateEvent({ id: eventId, title: cleanVal });
},
[title, updateEvent, eventId],
);
const classes = cx([className, style.eventTitle, !blockTitle ? style.noTitle : null]);
return (
<Editable
variant='ontime'
value={blockTitle}
className={classes}
placeholder={placeholder}
onChange={(value) => setBlockTitle(value)}
onSubmit={(value) => handleTitle(value)}
>
<EditablePreview className={style.preview} />
<EditableInput />
</Editable>
);
}
apps/client/src/features/rundown/common/TitleEditor.module.scss
+16
View File
@@ -0,0 +1,16 @@
@use '../../../theme/v2Styles' as *;
.titleEditor {
display: block;
font-size: 18px;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.noTitle {
.preview {
opacity: $opacity-disabled;
}
}
apps/client/src/features/rundown/event-block/EventBlock.module.scss
+1 -12
View File
@@ -87,18 +87,6 @@
.eventTitle {
grid-area: title;
display: block;
font-size: 18px;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.noTitle {
.preview {
opacity: $opacity-disabled;
}
}
}
.eventActions {
@@ -158,6 +146,7 @@
gap: 8px;
.tag {
padding-top: 1px;
font-size: 0.55em;
color: $active-indicator;
}
apps/client/src/features/rundown/event-block/EventBlockInner.tsx
+3 -37
View File
@@ -1,5 +1,5 @@
import { memo, useCallback, useEffect, useState } from 'react';
import { Editable, EditableInput, EditablePreview, Tooltip } from '@chakra-ui/react';
import { Tooltip } from '@chakra-ui/react';
import { IoCaretDownCircle } from '@react-icons/all-files/io5/IoCaretDownCircle';
import { IoCaretUpCircle } from '@react-icons/all-files/io5/IoCaretUpCircle';
import { IoOptions } from '@react-icons/all-files/io5/IoOptions';
@@ -17,10 +17,10 @@ import { IoTime } from '@react-icons/all-files/io5/IoTime';
import { EndAction, Playback, TimerType } from 'ontime-types';
import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
import { useEventAction } from '../../../common/hooks/useEventAction';
import { setEventPlayback } from '../../../common/hooks/useSocket';
import { useEventEditorStore } from '../../../common/stores/eventEditor';
import { tooltipDelayMid } from '../../../ontimeConfig';
import EditableBlockTitle from '../common/EditableBlockTitle';
import { EventItemActions } from '../RundownEntry';
import BlockActionMenu from './composite/BlockActionMenu';
@@ -78,38 +78,14 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
actionHandler,
} = props;
const { updateEvent } = useEventAction();
const [blockTitle, setBlockTitle] = useState<string>(title || '');
const [renderInner, setRenderInner] = useState(false);
const setOpenEvent = useEventEditorStore((state) => state.setOpenEvent);
const removeOpenEvent = useEventEditorStore((state) => state.removeOpenEvent);
// Todo: could I re-render the item without causing a state change here?
// ?? use refs instead?
useEffect(() => {
setRenderInner(true);
}, []);
useEffect(() => {
setBlockTitle(title);
}, [title]);
const handleTitle = useCallback(
(text: string) => {
if (text === title) {
return;
}
const cleanVal = text.trim();
setBlockTitle(cleanVal);
updateEvent({ id: eventId, title: cleanVal });
},
[title, updateEvent, eventId],
);
const toggleOpenEvent = useCallback(() => {
if (isOpen) {
removeOpenEvent();
@@ -173,17 +149,7 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
actionHandler={actionHandler}
previousEnd={previousEnd}
/>
<Editable
variant='ontime'
value={blockTitle}
className={`${style.eventTitle} ${!title ? style.noTitle : ''}`}
placeholder='Event title'
onChange={(value) => setBlockTitle(value)}
onSubmit={(value) => handleTitle(value)}
>
<EditablePreview className={style.preview} />
<EditableInput />
</Editable>
<EditableBlockTitle title={title} eventId={eventId} placeholder='Event title' className={style.eventTitle} />
<div className={style.statusElements}>
<span className={style.eventNote}>{note}</span>
<div className={selected ? style.progressBg : `${style.progressBg} ${style.hidden}`}>
apps/client/src/features/rundown/event-block/composite/EventBlockTimers.jsx → apps/client/src/features/rundown/event-block/composite/EventBlockTimers.tsx
+22 -23
View File
@@ -1,18 +1,25 @@
import { useCallback } from 'react';
import { useCallback, useState } from 'react';
import { millisToString } from 'ontime-utils';
import PropTypes from 'prop-types';
import { useEmitLog } from '@/common/stores/logger';
import TimeInput from '../../../../common/components/input/time-input/TimeInput';
import { millisToMinutes } from '../../../../common/utils/dateConfig';
import { validateEntry } from '../../../../common/utils/timesManager';
import { TimeEntryField, validateEntry } from '../../../../common/utils/timesManager';
import { EventItemActions } from '../../RundownEntry';
import style from '../EventBlock.module.scss';
export default function EventBlockTimers(props) {
interface EventBlockTimerProps {
timeStart: number;
timeEnd: number;
duration: number;
delay: number;
actionHandler: (action: EventItemActions, payload?: any) => void;
previousEnd: number;
}
export default function EventBlockTimers(props: EventBlockTimerProps) {
const { timeStart, timeEnd, duration, delay, actionHandler, previousEnd } = props;
const { emitWarning } = useEmitLog();
const [warning, setWarnings] = useState({ start: '', end: '', duration: '' });
const delayTime = `${delay >= 0 ? '+' : '-'} ${millisToMinutes(Math.abs(delay))}`;
const newTime = millisToString(timeStart + delay);
@@ -24,21 +31,19 @@ export default function EventBlockTimers(props) {
* @return {boolean}
*/
const handleValidation = useCallback(
(field, value) => {
(field: TimeEntryField, value: number) => {
const valid = validateEntry(field, value, timeStart, timeEnd);
if (valid.catch) {
emitWarning(`Time Input Warning: ${valid.catch}`);
}
setWarnings((prev) => ({ ...prev, ...valid.warnings }));
return valid.value;
},
[emitWarning, timeEnd, timeStart]
[timeEnd, timeStart],
);
const handleSubmit = useCallback(
(field, value) => {
(field: TimeEntryField, value: number) => {
actionHandler('update', { field, value });
},
[actionHandler]
[actionHandler],
);
return (
@@ -51,6 +56,7 @@ export default function EventBlockTimers(props) {
delay={delay}
placeholder='Start'
previousEnd={previousEnd}
warning={warning.start}
/>
<TimeInput
name='timeEnd'
@@ -60,6 +66,7 @@ export default function EventBlockTimers(props) {
delay={delay}
placeholder='End'
previousEnd={previousEnd}
warning={warning.end}
/>
<TimeInput
name='durationOverride'
@@ -68,6 +75,7 @@ export default function EventBlockTimers(props) {
time={duration}
placeholder='Duration'
previousEnd={previousEnd}
warning={warning.duration}
/>
{delay !== 0 && delay !== null && (
<div className={style.delayNote}>
@@ -79,12 +87,3 @@ export default function EventBlockTimers(props) {
</div>
);
}
EventBlockTimers.propTypes = {
timeStart: PropTypes.number,
timeEnd: PropTypes.number,
duration: PropTypes.number,
delay: PropTypes.number,
actionHandler: PropTypes.func,
previousEnd: PropTypes.number,
};
apps/client/src/features/rundown/quick-add-block/QuickAddBlock.module.scss
+1
View File
@@ -15,6 +15,7 @@
gap: 10%;
.quickBtn {
font-weight: 400;
width: auto;
padding: 0 32px;
}
apps/client/src/features/table/TableHeader.jsx
+2 -2
View File
@@ -11,7 +11,7 @@ import { TableSettingsContext } from '../../common/context/TableSettingsContext'
import useFullscreen from '../../common/hooks/useFullscreen';
import { useTimer } from '../../common/hooks/useSocket';
import useEventData from '../../common/hooks-query/useEventData';
import { formatDisplay, millisToSeconds } from '../../common/utils/dateConfig';
import { formatDisplay } from '../../common/utils/dateConfig';
import { formatTime } from '../../common/utils/time';
import { tooltipDelayFast } from '../../ontimeConfig';
@@ -33,7 +33,7 @@ export default function TableHeader({ handleCSVExport, featureData }) {
// prepare presentation variables
const isOvertime = timer.current < 0;
const timerNow = `${isOvertime ? '-' : ''}${formatDisplay(millisToSeconds(timer.current))}`;
const timerNow = `${isOvertime ? '-' : ''}${formatDisplay(timer.current)}`;
const timeNow = formatTime(timer.clock, {
showSeconds: true,
format: 'hh:mm:ss a',
apps/client/src/features/viewers/backstage/Backstage.tsx
+2 -2
View File
@@ -12,7 +12,7 @@ import ScheduleNav from '../../../common/components/schedule/ScheduleNav';
import TitleCard from '../../../common/components/title-card/TitleCard';
import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
import { TimeManagerType } from '../../../common/models/TimeManager.type';
import { formatDisplay, millisToSeconds } from '../../../common/utils/dateConfig';
import { formatDisplay } from '../../../common/utils/dateConfig';
import { getEventsWithDelay } from '../../../common/utils/eventsManager';
import { formatTime } from '../../../common/utils/time';
import { useTranslation } from '../../../translation/TranslationProvider';
@@ -66,7 +66,7 @@ export default function Backstage(props: BackstageProps) {
if (time.current === null) {
stageTimer = '- - : - -';
} else {
stageTimer = formatDisplay(Math.abs(millisToSeconds(time.current)), true);
stageTimer = formatDisplay(Math.abs(time.current), true);
if (isNegative) {
stageTimer = `-${stageTimer}`;
}
apps/client/src/features/viewers/common/viewerUtils.ts
+2 -2
View File
@@ -1,7 +1,7 @@
import { TimerType } from 'ontime-types';
import { TimeManagerType } from '../../../common/models/TimeManager.type';
import { formatDisplay, millisToSeconds } from '../../../common/utils/dateConfig';
import { formatDisplay } from '../../../common/utils/dateConfig';
import { formatTime } from '../../../common/utils/time';
const formatOptions = {
@@ -36,7 +36,7 @@ export function formatTimerDisplay(timer?: string | number | null): string {
} else if (timer === null || typeof timer === 'undefined' || isNaN(timer)) {
display = '-- : -- : --';
} else {
display = formatDisplay(millisToSeconds(timer), true);
display = formatDisplay(timer, true);
}
return display;
apps/client/src/features/viewers/countdown/Countdown.tsx
+3 -3
View File
@@ -6,7 +6,7 @@ import { overrideStylesURL } from '../../../common/api/apiConstants';
import NavigationMenu from '../../../common/components/navigation-menu/NavigationMenu';
import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
import { TimeManagerType } from '../../../common/models/TimeManager.type';
import { formatDisplay, millisToSeconds } from '../../../common/utils/dateConfig';
import { formatDisplay } from '../../../common/utils/dateConfig';
import getDelayTo from '../../../common/utils/getDelayTo';
import { formatTime } from '../../../common/utils/time';
import { useTranslation } from '../../../translation/TranslationProvider';
@@ -102,8 +102,8 @@ export default function Countdown(props: CountdownProps) {
runningMessage === TimerMessage.ended
? formatTime(runningTimer, formatOptionsFinished)
: formatDisplay(
isSelected ? millisToSeconds(runningTimer) : millisToSeconds(runningTimer + delay),
isSelected || time.waiting,
isSelected ? runningTimer : runningTimer + delay,
isSelected || runningMessage === TimerMessage.waiting,
);
return (
apps/client/src/features/viewers/countdown/countdown.helpers.ts
+1 -1
View File
@@ -21,7 +21,7 @@ export const sanitiseTitle = (title: string | null) => (title ? title : '{no tit
export const fetchTimerData = (
time: TimeManagerType,
follow: OntimeEvent,
selectedId: string,
selectedId: string | null,
): { message: TimerMessage; timer: number } => {
let message;
let timer;
apps/client/src/features/viewers/studio/StudioClock.jsx
+1 -1
View File
@@ -83,7 +83,7 @@ export default function StudioClock(props) {
{title.titleNext}
</div>
<div className={isNegative ? 'next-countdown' : 'next-countdown next-countdown--overtime'}>
{selectedId != null && formatDisplay(time.current)}
{selectedId !== null && formatDisplay(time.current)}
</div>
<div className='clock-indicators'>
{activeIndicators.map((i) => (
apps/client/src/features/viewers/timer/Timer.tsx
+3 -3
View File
@@ -65,7 +65,7 @@ export default function Timer(props: TimerProps) {
const isNegative =
(time.current ?? 0) < 0 && time.timerType !== TimerType.Clock && time.timerType !== TimerType.CountUp;
const showEndMessage = time.current < 0 && general.endMessage;
const showEndMessage = (time.current ?? 1) < 0 && general.endMessage;
const showProgress = time.playback !== Playback.Stop;
const showFinished = time.finished && (time.timerType !== TimerType.Clock || showEndMessage);
const showClock = time.timerType !== TimerType.Clock;
@@ -110,8 +110,8 @@ export default function Timer(props: TimerProps) {
<ProgressBar
className={isPlaying ? 'progress-container' : 'progress-container progress-container--paused'}
now={time.current}
complete={time.duration}
now={time.current || 0}
complete={time.duration || 0}
hidden={!showProgress}
/>
apps/electron/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "ontime",
"version": "2.0.0-beta1",
"version": "2.0.0-beta2",
"author": "Carlos Valente",
"description": "Time keeping for live events",
"repository": "https://github.com/cpvalente/ontime",
apps/server/package.json
+1 -1
View File
@@ -2,7 +2,7 @@
"name": "ontime-server",
"type": "module",
"main": "src/index.ts",
"version": "2.0.0-beta1",
"version": "2.0.0-beta2",
"exports": "./src/index.js",
"dependencies": {
"@sentry/node": "^7.24.1",
apps/server/src/adapters/WebsocketAdapter.ts
+1 -1
View File
@@ -112,7 +112,7 @@ export class SocketServer implements IAdapter {
}
// message is any serializable value
send(message: unknown) {
sendAsJson(message: unknown) {
this.wss?.clients.forEach((client) => {
if (client !== this.wss && client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify(message));
apps/server/src/adapters/websocketAux.ts
+1 -1
View File
@@ -5,7 +5,7 @@ import { socket } from './WebsocketAdapter.js';
* @param payload -- possible patch payload
*/
export function sendRefetch(payload: any | null = null) {
socket.send({
socket.sendAsJson({
type: 'ontime-refetch',
payload,
});
apps/server/src/app.ts
+4
View File
@@ -30,6 +30,7 @@ import { integrationService } from './services/integration-service/IntegrationSe
import { logger } from './classes/Logger.js';
import { oscIntegration } from './services/integration-service/OscIntegration.js';
import { populateStyles } from './modules/loadStyles.js';
import { eventStore, getInitialPayload } from './stores/EventStore.js';
console.log(`Starting Ontime version ${ONTIME_VERSION}`);
@@ -132,7 +133,10 @@ export const startServer = async () => {
expressServer = http.createServer(app);
socket.init(expressServer);
// provide initial payload to event store
eventLoader.init();
eventStore.init(getInitialPayload());
expressServer.listen(serverPort, '0.0.0.0');
apps/server/src/classes/Logger.ts
+1 -1
View File
@@ -39,7 +39,7 @@ class Logger {
}
try {
socket.send({
socket.sendAsJson({
type: 'ontime-log',
payload: log,
});
apps/server/src/classes/data-provider/DataProvider.ts
+4 -2
View File
@@ -2,7 +2,7 @@
* Class Event Provider is a mediator for handling the local db
* and adds logic specific to ontime data
*/
import { EventData, ViewSettings } from 'ontime-types';
import { EventData, SupportedEvent, ViewSettings } from 'ontime-types';
import { data, db } from '../../modules/loadDb.js';
import { safeMerge } from './DataProvider.utils.js';
@@ -35,7 +35,9 @@ export class DataProvider {
const eventIndex = data.rundown.findIndex((e) => e.id === eventId);
const persistedEvent = data.rundown[eventIndex];
const newEvent = { ...persistedEvent, ...newData };
newEvent.revision++;
if (newEvent.type === SupportedEvent.Event) {
newEvent.revision++;
}
data.rundown[eventIndex] = newEvent;
await this.persist();
return data.rundown[eventIndex];
apps/server/src/classes/event-loader/EventLoader.ts
+2 -2
View File
@@ -24,9 +24,9 @@ export class EventLoader {
instance = this;
}
// we need to delay init until the store is ready
init() {
this.reset();
this.loadedEvent = null;
this.reset(false);
}
/**
apps/server/src/external/styles/override.css
Vendored
+4 -2
View File
@@ -2,12 +2,14 @@
--background-color-override: #ececec;
--color-override: #101010;
--secondary-color-override: #404040;
--accent-color-override: #FA5656;
--accent-color-override: #fa5656;
--label-color-override: #6c6c6c;
--timer-color-override: #202020;
--card-background-color-override: #FFF;
--card-background-color-override: #fff;
--font-family-override: "Open Sans";
--font-family-bold-override: "Arial Black";
--timer-progress-bg-override: #fff;
--timer-progress-override: #202020;
}
.timer {
apps/server/src/models/eventsDefinition.ts
+1
View File
@@ -34,5 +34,6 @@ export const delay: Omit<OntimeDelay, 'id'> = {
};
export const block: Omit<OntimeBlock, 'id'> = {
title: '',
type: SupportedEvent.Block,
};
apps/server/src/services/PlaybackService.ts
+3 -1
View File
@@ -219,7 +219,9 @@ export class PlaybackService {
if (eventTimer.loadedTimerId) {
const delayInMs = delayTime * 1000 * 60;
eventTimer.delay(delayInMs);
logger.info('PLAYBACK', `Added ${delayTime} min delay`);
delayInMs > 0
? logger.info('PLAYBACK', `Added ${delayTime} min delay`)
: logger.info('PLAYBACK', `Removed ${delayTime} min delay`);
}
}
}
apps/server/src/services/RundownService.ts
+4 -12
View File
@@ -1,4 +1,4 @@
import { OntimeBaseEvent, OntimeBlock, OntimeDelay, OntimeEvent } from 'ontime-types';
import { OntimeBaseEvent, OntimeBlock, OntimeDelay, OntimeEvent, SupportedEvent } from 'ontime-types';
import { generateId } from 'ontime-utils';
import { DataProvider } from '../classes/data-provider/DataProvider.js';
import { block as blockDef, delay as delayDef, event as eventDef } from '../models/eventsDefinition.js';
@@ -218,15 +218,13 @@ export async function reorderEvent(eventId, from, to) {
*/
export async function applyDelay(eventId) {
const rundown = DataProvider.getRundown();
// AUX
let delayIndex = null;
let blockIndex = null;
let delayValue = 0;
for (const [index, e] of rundown.entries()) {
// look for delay
if (delayIndex === null) {
if (e.id === eventId && e.type === 'delay') {
if (e.id === eventId && e.type === SupportedEvent.Delay) {
delayValue = e.duration;
delayIndex = index;
}
@@ -234,16 +232,14 @@ export async function applyDelay(eventId) {
// apply delay value to all items until block or end
else {
if (e.type === 'event') {
if (e.type === SupportedEvent.Event) {
// update times
e.timeStart += delayValue;
e.timeEnd += delayValue;
// increment revision
e.revision += 1;
} else if (e.type === 'block') {
// save id and stop
blockIndex = index;
} else if (e.type === SupportedEvent.Block) {
break;
}
}
@@ -256,10 +252,6 @@ export async function applyDelay(eventId) {
// delete delay
rundown.splice(delayIndex, 1);
// delete block
// index would have moved down since we deleted delay
if (blockIndex) rundown.splice(blockIndex - 1, 1);
// update rundown
await DataProvider.setRundown(rundown);
updateTimer();
apps/server/src/stores/EventStore.ts
+34 -2
View File
@@ -1,12 +1,18 @@
import { RuntimeStore } from 'ontime-types';
import { socket } from '../adapters/WebsocketAdapter.js';
import { eventTimer } from '../services/TimerService.js';
import { messageService } from '../services/message-service/MessageService.js';
import { eventLoader } from '../classes/event-loader/EventLoader.js';
const store: Partial<RuntimeStore> = {};
let store: Partial<RuntimeStore> = {};
/**
* A runtime store that broadcasts its payload
*/
export const eventStore = {
init(payload: RuntimeStore) {
store = payload;
},
get<T extends keyof RuntimeStore>(key: T) {
return store[key];
},
@@ -23,9 +29,35 @@ export const eventStore = {
return store;
},
broadcast() {
socket.send({
socket.sendAsJson({
type: 'ontime',
payload: store,
});
},
};
/**
* Module initialises the services and provides initial payload for the store
* Currently registered objects in store
* - Timer Service timer
* - Timer Service playback
* - Message Service timerMessage
* - Message Service publicMessage
* - Message Service lowerMessage
* - Message Service onAir
* - Event Loader loaded
* - Event Loader titles
* - Event Loader titlesPublic
*/
export const getInitialPayload = () => ({
timer: eventTimer.timer,
playback: eventTimer.playback,
timerMessage: messageService.timerMessage,
publicMessage: messageService.publicMessage,
lowerMessage: messageService.lowerMessage,
onAir: messageService.onAir,
loaded: eventLoader.loaded,
titles: eventLoader.titles,
titlesPublic: eventLoader.titlesPublic,
});
apps/server/src/utils/__tests__/getRandomName.test.js
+3 -3
View File
@@ -1,11 +1,11 @@
import getRandomName from '../getRandomName.js';
test('generates 100 unique names', () => {
test('generates unique names', () => {
const names = new Set();
let attempts = 1;
while (names.size < 100) {
while (names.size < 10) {
names.add(getRandomName());
attempts++;
}
expect(attempts).toBeLessThan(105);
expect(attempts).toBeLessThan(50);
});
apps/server/src/utils/parserFunctions.ts
+1 -1
View File
@@ -54,7 +54,7 @@ export const parseRundown = (data): OntimeRundown => {
id: e.id || generateId(),
});
} else if (e.type === 'block') {
rundown.push({ ...blockDef, id: e.id || generateId() });
rundown.push({ ...blockDef, title: e.title, id: e.id || generateId() });
} else {
console.log('ERROR: undefined event type, skipping');
}
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "ontime",
"version": "2.0.0-beta1",
"version": "2.0.0-beta2",
"description": "Time keeping for live events",
"keywords": [
"lighdev",
packages/types/src/definitions/core/OntimeEvent.type.ts
+1
View File
@@ -21,6 +21,7 @@ export type OntimeDelay = OntimeBaseEvent & {
export type OntimeBlock = OntimeBaseEvent & {
type: SupportedEvent.Block;
title: string;
};
export type OntimeEvent = OntimeBaseEvent & {