mirror of
https://github.com/cpvalente/ontime.git
synced 2026-07-26 10:38:55 +00:00
* fix: prevent add filter from submitting form * refactor: event clarifies whether automations exist but are disabled * refactor: improve readability of automation form * refactor: add affordance for field warnings * refactor: improve visibility of automation off state * refactor: apply warning styles to other feature toggles * Adding playback actions to automations (#2024) * adding intial automation actions * cleaning up * fixing formatting * ran oxfmt * switching action names to playback- to match the dropdown strings * fixing flicker that was caused by scroll arrows gettting unmounted --------- Co-authored-by: Cameron Slipp <cdslipp@gmail.com>
This commit is contained in:
Carlos Valente
GitHub
@@ -125,6 +125,11 @@
|
||||
font-size: 0.5rem;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
visibility: hidden;
|
||||
|
||||
&[data-visible] {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
||||
@@ -29,7 +29,7 @@ export default function Select<T>({ options, fluid, size = 'medium', ...selectRo
|
||||
</BaseSelect.Trigger>
|
||||
<BaseSelect.Portal>
|
||||
<BaseSelect.Positioner side='bottom' align='start'>
|
||||
<BaseSelect.ScrollUpArrow className={styles.scrollArrow} />
|
||||
<BaseSelect.ScrollUpArrow className={styles.scrollArrow} keepMounted />
|
||||
<BaseSelect.Popup className={styles.popup}>
|
||||
<BaseSelect.Arrow />
|
||||
<BaseSelect.List className={styles.list}>
|
||||
@@ -43,7 +43,7 @@ export default function Select<T>({ options, fluid, size = 'medium', ...selectRo
|
||||
))}
|
||||
</BaseSelect.List>
|
||||
</BaseSelect.Popup>
|
||||
<BaseSelect.ScrollDownArrow className={styles.scrollArrow} />
|
||||
<BaseSelect.ScrollDownArrow className={styles.scrollArrow} keepMounted />
|
||||
</BaseSelect.Positioner>
|
||||
</BaseSelect.Portal>
|
||||
</BaseSelect.Root>
|
||||
|
||||
@@ -1,9 +1,17 @@
|
||||
.tag {
|
||||
font-size: calc(1rem - 3px);
|
||||
letter-spacing: 0.5px;
|
||||
background-color: $gray-900;
|
||||
color: $ui-white;
|
||||
border-radius: 2px;
|
||||
padding: 0 0.25rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.default {
|
||||
background-color: $gray-900;
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background-color: $orange-1300;
|
||||
color: $orange-300;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
import { PropsWithChildren } from 'react';
|
||||
|
||||
import { cx } from '../../utils/styleUtils';
|
||||
|
||||
import style from './Tag.module.scss';
|
||||
|
||||
interface TagProps {
|
||||
className?: string;
|
||||
variant?: 'default' | 'warning';
|
||||
}
|
||||
|
||||
export default function Tag({ className, children }: PropsWithChildren<TagProps>) {
|
||||
return <span className={`${style.tag} ${className || ''}`}>{children}</span>;
|
||||
export default function Tag({ className, variant = 'default', children }: PropsWithChildren<TagProps>) {
|
||||
return <span className={cx([style.tag, style[variant], className])}>{children}</span>;
|
||||
}
|
||||
|
||||
@@ -140,11 +140,21 @@ $inner-padding: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.fieldHeading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.fieldDescription {
|
||||
font-size: calc(1rem - 2px);
|
||||
color: $gray-400;
|
||||
}
|
||||
|
||||
.warningText {
|
||||
color: $orange-500;
|
||||
}
|
||||
|
||||
.fieldError {
|
||||
font-size: calc(1rem - 2px);
|
||||
color: $red-500;
|
||||
|
||||
@@ -85,18 +85,34 @@ export function ListItem({ children }: { children: ReactNode }) {
|
||||
return <li className={style.listItem}>{children}</li>;
|
||||
}
|
||||
|
||||
export function Field({ title, description, error }: { title: string; description: string; error?: string }) {
|
||||
export function Field({
|
||||
title,
|
||||
description,
|
||||
error,
|
||||
descriptionTone = 'default',
|
||||
}: {
|
||||
title: ReactNode;
|
||||
description: ReactNode;
|
||||
error?: string;
|
||||
descriptionTone?: 'default' | 'warning';
|
||||
}) {
|
||||
return (
|
||||
<div className={style.fieldTitle}>
|
||||
{title}
|
||||
<div className={style.fieldHeading}>{title}</div>
|
||||
{error && <Error>{error}</Error>}
|
||||
{!error && description && <Description>{description}</Description>}
|
||||
{!error && description && <Description tone={descriptionTone}>{description}</Description>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Description({ children }: { children: ReactNode }) {
|
||||
return <div className={style.fieldDescription}>{children}</div>;
|
||||
export function Description({
|
||||
children,
|
||||
tone = 'default',
|
||||
}: {
|
||||
children: ReactNode;
|
||||
tone?: 'default' | 'warning';
|
||||
}) {
|
||||
return <div className={cx([style.fieldDescription, tone === 'warning' && style.warningText])}>{children}</div>;
|
||||
}
|
||||
|
||||
export function Highlight({ children }: { children: ReactNode }) {
|
||||
|
||||
@@ -282,7 +282,7 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
|
||||
);
|
||||
})}
|
||||
<div>
|
||||
<Button type='submit' onClick={handleAddNewFilter}>
|
||||
<Button onClick={handleAddNewFilter}>
|
||||
Add filter <IoAdd />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -13,6 +13,8 @@ export default function AutomationPanel({ location }: PanelBaseProps) {
|
||||
const automationsRef = useScrollIntoView<HTMLDivElement>('automations', location);
|
||||
|
||||
const isLoading = status === 'pending';
|
||||
const automationState = isLoading ? undefined : data.enabledAutomations;
|
||||
const oscInputState = isLoading ? undefined : data.enabledOscIn;
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -24,13 +26,15 @@ export default function AutomationPanel({ location }: PanelBaseProps) {
|
||||
enabledAutomations={data.enabledAutomations}
|
||||
enabledOscIn={data.enabledOscIn}
|
||||
oscPortIn={data.oscPortIn}
|
||||
automationState={automationState}
|
||||
oscInputState={oscInputState}
|
||||
/>
|
||||
</div>
|
||||
<div ref={automationsRef}>
|
||||
<AutomationsList automations={data.automations} />
|
||||
<AutomationsList automations={data.automations} enabledAutomations={automationState} />
|
||||
</div>
|
||||
<div ref={triggersRef}>
|
||||
<TriggersList triggers={data.triggers} automations={data.automations} />
|
||||
<TriggersList triggers={data.triggers} automations={data.automations} enabledAutomations={automationState} />
|
||||
</div>
|
||||
</Panel.Section>
|
||||
</>
|
||||
|
||||
+33
-7
@@ -7,6 +7,7 @@ import Info from '../../../../common/components/info/Info';
|
||||
import Input from '../../../../common/components/input/input/Input';
|
||||
import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
|
||||
import Switch from '../../../../common/components/switch/Switch';
|
||||
import Tag from '../../../../common/components/tag/Tag';
|
||||
import { preventEscape } from '../../../../common/utils/keyEvent';
|
||||
import { isOnlyNumbers } from '../../../../common/utils/regex';
|
||||
import { isOntimeCloud } from '../../../../externals';
|
||||
@@ -18,12 +19,16 @@ interface AutomationSettingsProps {
|
||||
enabledAutomations: boolean;
|
||||
enabledOscIn: boolean;
|
||||
oscPortIn: number;
|
||||
automationState?: boolean;
|
||||
oscInputState?: boolean;
|
||||
}
|
||||
|
||||
export default function AutomationSettingsForm({
|
||||
enabledAutomations,
|
||||
enabledOscIn,
|
||||
oscPortIn,
|
||||
automationState,
|
||||
oscInputState,
|
||||
}: AutomationSettingsProps) {
|
||||
const {
|
||||
handleSubmit,
|
||||
@@ -56,6 +61,8 @@ export default function AutomationSettingsForm({
|
||||
};
|
||||
|
||||
const canSubmit = !isSubmitting && isDirty && isValid;
|
||||
const automationsEnabled = watch('enabledAutomations');
|
||||
const oscInputEnabled = watch('enabledOscIn');
|
||||
|
||||
return (
|
||||
<Panel.Card>
|
||||
@@ -102,33 +109,52 @@ export default function AutomationSettingsForm({
|
||||
<Panel.ListGroup>
|
||||
<Panel.ListItem>
|
||||
<Panel.Field
|
||||
title='Enable automations'
|
||||
description='Allow Ontime to send messages on lifecycle triggers'
|
||||
title={
|
||||
<>
|
||||
<span>Enable automations</span>
|
||||
{automationState === false && <Tag variant='warning'>OFF</Tag>}
|
||||
</>
|
||||
}
|
||||
description={
|
||||
automationState === false
|
||||
? 'Automations are OFF. Triggers stay configured, but Ontime will not send messages.'
|
||||
: 'Allow Ontime to send messages on lifecycle triggers'
|
||||
}
|
||||
descriptionTone={automationState === false ? 'warning' : 'default'}
|
||||
error={errors.enabledAutomations?.message}
|
||||
/>
|
||||
<Switch
|
||||
size='large'
|
||||
checked={watch('enabledAutomations')}
|
||||
checked={automationsEnabled}
|
||||
onCheckedChange={(value: boolean) =>
|
||||
setValue('enabledAutomations', value, { shouldDirty: true, shouldValidate: true })
|
||||
}
|
||||
/>
|
||||
</Panel.ListItem>
|
||||
</Panel.ListGroup>
|
||||
|
||||
<Panel.Title>OSC Input</Panel.Title>
|
||||
|
||||
<Panel.ListGroup>
|
||||
{isOntimeCloud && <Info>For security reasons OSC integrations are not available in the cloud service.</Info>}
|
||||
<Panel.ListItem>
|
||||
<Panel.Field
|
||||
title='OSC input'
|
||||
description='Allow control of Ontime through OSC'
|
||||
title={
|
||||
<>
|
||||
<span>OSC input</span>
|
||||
{oscInputState === false && <Tag variant='warning'>OFF</Tag>}
|
||||
</>
|
||||
}
|
||||
description={
|
||||
oscInputState === false
|
||||
? 'OSC input is OFF. Ontime will not listen for incoming OSC control messages.'
|
||||
: 'Allow control of Ontime through OSC'
|
||||
}
|
||||
descriptionTone={oscInputState === false ? 'warning' : 'default'}
|
||||
error={errors.enabledOscIn?.message}
|
||||
/>
|
||||
<Switch
|
||||
size='large'
|
||||
checked={watch('enabledOscIn')}
|
||||
checked={oscInputEnabled}
|
||||
onCheckedChange={(value: boolean) =>
|
||||
setValue('enabledOscIn', value, { shouldDirty: true, shouldValidate: true })
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@ import { IoAdd, IoPencil, IoTrash } from 'react-icons/io5';
|
||||
import { deleteAutomation } from '../../../../common/api/automation';
|
||||
import { maybeAxiosError } from '../../../../common/api/utils';
|
||||
import Button from '../../../../common/components/buttons/Button';
|
||||
import Info from '../../../../common/components/info/Info';
|
||||
import IconButton from '../../../../common/components/buttons/IconButton';
|
||||
import Tag from '../../../../common/components/tag/Tag';
|
||||
import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
|
||||
@@ -20,10 +21,11 @@ const automationPlaceholder: AutomationDTO = {
|
||||
|
||||
interface AutomationsListProps {
|
||||
automations: NormalisedAutomation;
|
||||
enabledAutomations?: boolean;
|
||||
}
|
||||
|
||||
export default function AutomationsList(props: AutomationsListProps) {
|
||||
const { automations } = props;
|
||||
const { automations, enabledAutomations } = props;
|
||||
const { refetch } = useAutomationSettings();
|
||||
const [automationFormData, setAutomationFormData] = useState<AutomationDTO | null>(null);
|
||||
const [deleteError, setDeleteError] = useState<string | null>(null);
|
||||
@@ -56,6 +58,13 @@ export default function AutomationsList(props: AutomationsListProps) {
|
||||
|
||||
<Panel.Divider />
|
||||
|
||||
{enabledAutomations === false && (
|
||||
<Info>
|
||||
Automations are disabled. You can still manage automation definitions here, but they will not run until
|
||||
enabled.
|
||||
</Info>
|
||||
)}
|
||||
|
||||
{automationFormData !== null && (
|
||||
<AutomationForm automation={automationFormData} onClose={() => setAutomationFormData(null)} />
|
||||
)}
|
||||
|
||||
@@ -66,6 +66,11 @@ export default function OntimeActionForm({
|
||||
{ value: 'aux2-set', label: 'Aux 2: set' },
|
||||
{ value: 'aux3-set', label: 'Aux 3: set' },
|
||||
|
||||
{ value: 'playback-start', label: 'Playback: start' },
|
||||
{ value: 'playback-stop', label: 'Playback: stop' },
|
||||
{ value: 'playback-pause', label: 'Playback: pause' },
|
||||
{ value: 'playback-roll', label: 'Playback: roll' },
|
||||
|
||||
{ value: 'message-set', label: 'Primary Message: set' },
|
||||
{ value: 'message-secondary', label: 'Secondary Message: source' },
|
||||
]}
|
||||
|
||||
@@ -5,6 +5,7 @@ import { IoAdd } from 'react-icons/io5';
|
||||
import { deleteTrigger } from '../../../../common/api/automation';
|
||||
import { maybeAxiosError } from '../../../../common/api/utils';
|
||||
import Button from '../../../../common/components/buttons/Button';
|
||||
import Info from '../../../../common/components/info/Info';
|
||||
import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
|
||||
import * as Panel from '../../panel-utils/PanelUtils';
|
||||
import { checkDuplicates } from './automationUtils';
|
||||
@@ -14,10 +15,11 @@ import TriggersListItem from './TriggersListItem';
|
||||
interface TriggersListProps {
|
||||
triggers: Trigger[];
|
||||
automations: NormalisedAutomation;
|
||||
enabledAutomations?: boolean;
|
||||
}
|
||||
|
||||
export default function TriggersList(props: TriggersListProps) {
|
||||
const { triggers, automations } = props;
|
||||
const { triggers, automations, enabledAutomations } = props;
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const { refetch } = useAutomationSettings();
|
||||
const [deleteError, setDeleteError] = useState<string | null>(null);
|
||||
@@ -52,6 +54,9 @@ export default function TriggersList(props: TriggersListProps) {
|
||||
</Panel.SubHeader>
|
||||
<Panel.Divider />
|
||||
<Panel.Section>
|
||||
{enabledAutomations === false && (
|
||||
<Info>Automations are disabled. You can still manage triggers here, but they will not run until enabled.</Info>
|
||||
)}
|
||||
{duplicates && (
|
||||
<Panel.Error>
|
||||
You have created multiple links between the same trigger and automation which can performance issues.
|
||||
|
||||
@@ -9,6 +9,7 @@ import Info from '../../../../common/components/info/Info';
|
||||
import { SwatchPickerRHF } from '../../../../common/components/input/colour-input/SwatchPicker';
|
||||
import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
|
||||
import Switch from '../../../../common/components/switch/Switch';
|
||||
import Tag from '../../../../common/components/tag/Tag';
|
||||
import useViewSettings from '../../../../common/hooks-query/useViewSettings';
|
||||
import { preventEscape } from '../../../../common/utils/keyEvent';
|
||||
import * as Panel from '../../panel-utils/PanelUtils';
|
||||
@@ -55,6 +56,8 @@ export default function ViewSettings() {
|
||||
reset(data);
|
||||
};
|
||||
|
||||
const overrideStylesEnabled = watch('overrideStyles');
|
||||
|
||||
if (!control) {
|
||||
return null;
|
||||
}
|
||||
@@ -91,12 +94,22 @@ export default function ViewSettings() {
|
||||
<CodeEditorModal isOpen={isCodeEditorOpen} onClose={codeEditorHandler.close} />
|
||||
<Panel.ListItem>
|
||||
<Panel.Field
|
||||
title='Override CSS styles'
|
||||
description='Enables overriding view styles with custom stylesheet'
|
||||
title={
|
||||
<>
|
||||
<span>Override CSS styles</span>
|
||||
{overrideStylesEnabled && <Tag variant='warning'>ON</Tag>}
|
||||
</>
|
||||
}
|
||||
description={
|
||||
overrideStylesEnabled
|
||||
? 'CSS override is ON. Ontime views will use the custom override stylesheet.'
|
||||
: 'Enables overriding view styles with custom stylesheet'
|
||||
}
|
||||
descriptionTone={overrideStylesEnabled ? 'warning' : 'default'}
|
||||
/>
|
||||
<Switch
|
||||
size='large'
|
||||
checked={watch('overrideStyles')}
|
||||
checked={overrideStylesEnabled}
|
||||
onCheckedChange={(value: boolean) => setValue('overrideStyles', value, { shouldDirty: true })}
|
||||
/>
|
||||
<Button onClick={codeEditorHandler.open} disabled={isSubmitting}>
|
||||
|
||||
@@ -13,6 +13,7 @@ import { TbFlagFilled } from 'react-icons/tb';
|
||||
import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
|
||||
|
||||
import { useEntryActionsContext } from '../../common/context/EntryActionsContext';
|
||||
import useAutomationSettings from '../../common/hooks-query/useAutomationSettings';
|
||||
import { useEntryCopy } from '../../common/stores/entryCopyStore';
|
||||
import { RundownMetadataObject, lastMetadataKey } from '../../common/utils/rundownMetadata';
|
||||
import { AppMode } from '../../ontimeConfig';
|
||||
@@ -49,6 +50,8 @@ export default function Rundown({ order, flatOrder, entries, id, rundownMetadata
|
||||
// invoke the compiler for the component
|
||||
'use memo';
|
||||
|
||||
const { data: automationSettings, status: automationStatus } = useAutomationSettings();
|
||||
const automationsEnabled = automationStatus === 'pending' ? undefined : automationSettings.enabledAutomations;
|
||||
const [sortableData, setSortableData] = useState<EntryId[]>(() => makeSortableList(order, entries));
|
||||
const [metadata, setMetadata] = useState<RundownMetadataObject>(rundownMetadata);
|
||||
|
||||
@@ -263,6 +266,7 @@ export default function Rundown({ order, flatOrder, entries, id, rundownMetadata
|
||||
isPast={entryMetadata.isPast}
|
||||
eventIndex={entryMetadata.eventIndex}
|
||||
data={entry}
|
||||
automationsEnabled={automationsEnabled}
|
||||
loaded={entryMetadata.isLoaded}
|
||||
hasCursor={hasCursor}
|
||||
isNext={isNext}
|
||||
@@ -282,7 +286,18 @@ export default function Rundown({ order, flatOrder, entries, id, rundownMetadata
|
||||
</Fragment>
|
||||
);
|
||||
},
|
||||
[entries, metadata, getIsCollapsed, isEditMode, cursor, nextEventId, playback, lastEntryId, handleCollapseGroup],
|
||||
[
|
||||
entries,
|
||||
metadata,
|
||||
getIsCollapsed,
|
||||
isEditMode,
|
||||
cursor,
|
||||
nextEventId,
|
||||
playback,
|
||||
lastEntryId,
|
||||
handleCollapseGroup,
|
||||
automationsEnabled,
|
||||
],
|
||||
);
|
||||
|
||||
if (sortableData.length < 1) {
|
||||
|
||||
@@ -8,6 +8,7 @@ interface RundownEntryProps {
|
||||
type: SupportedEntry;
|
||||
isPast: boolean;
|
||||
data: OntimeEntry;
|
||||
automationsEnabled?: boolean;
|
||||
loaded: boolean;
|
||||
eventIndex: number;
|
||||
hasCursor: boolean;
|
||||
@@ -22,6 +23,7 @@ interface RundownEntryProps {
|
||||
export default function RundownEntry({
|
||||
isPast,
|
||||
data,
|
||||
automationsEnabled,
|
||||
loaded,
|
||||
hasCursor,
|
||||
isNext,
|
||||
@@ -52,6 +54,7 @@ export default function RundownEntry({
|
||||
title={data.title}
|
||||
note={data.note}
|
||||
delay={data.delay}
|
||||
automationsEnabled={automationsEnabled}
|
||||
colour={data.colour}
|
||||
isPast={isPast}
|
||||
isNext={isNext}
|
||||
|
||||
+73
-13
@@ -1,30 +1,90 @@
|
||||
.triggerForm {
|
||||
padding-block: 0.5rem;
|
||||
display: grid;
|
||||
grid-template-columns: 8rem 1fr auto 2rem;
|
||||
.triggers {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.section,
|
||||
.formSection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
font-size: $aux-text-size;
|
||||
color: $label-gray;
|
||||
}
|
||||
|
||||
.triggerList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $black-10;
|
||||
border: 1px solid $white-10;
|
||||
border-radius: $component-border-radius-md;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.triggerForm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.formFields {
|
||||
display: grid;
|
||||
grid-template-columns: 8rem 1fr;
|
||||
gap: 0.75rem;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.formActions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
.trigger {
|
||||
padding: 0.25rem 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
display: grid;
|
||||
grid-template-columns: 8rem 1fr 2rem;
|
||||
align-items: center;
|
||||
min-height: 2.5rem;
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: $white-1;
|
||||
}
|
||||
|
||||
& > span {
|
||||
width: fit-content;
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid $white-10;
|
||||
}
|
||||
}
|
||||
|
||||
.errorLabel {
|
||||
.triggerMeta {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.metaLabel {
|
||||
color: $label-gray;
|
||||
font-size: $aux-text-size;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.automationTitle {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.validationError,
|
||||
.validationSuccess {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
font-size: $aux-text-size;
|
||||
}
|
||||
|
||||
.validationError {
|
||||
color: $red-500;
|
||||
}
|
||||
|
||||
.success {
|
||||
.validationSuccess {
|
||||
color: $green-500;
|
||||
}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { TimerLifeCycle, Trigger, timerLifecycleValues } from 'ontime-types';
|
||||
import { NormalisedAutomation, TimerLifeCycle, Trigger, timerLifecycleValues } from 'ontime-types';
|
||||
import { generateId } from 'ontime-utils';
|
||||
import { Fragment, useCallback, useMemo, useState } from 'react';
|
||||
import { IoAlertCircle, IoCheckmarkCircle, IoTrash } from 'react-icons/io5';
|
||||
|
||||
import Button from '../../../../common/components/buttons/Button';
|
||||
import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
|
||||
import Info from '../../../../common/components/info/Info';
|
||||
import IconButton from '../../../../common/components/buttons/IconButton';
|
||||
import Select from '../../../../common/components/select/Select';
|
||||
import Tag from '../../../../common/components/tag/Tag';
|
||||
import Tooltip from '../../../../common/components/tooltip/Tooltip';
|
||||
import { useEntryActionsContext } from '../../../../common/context/EntryActionsContext';
|
||||
import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
|
||||
import { eventTriggerOptions } from './eventTrigger.constants';
|
||||
@@ -20,23 +20,36 @@ interface EventEditorTriggersProps {
|
||||
}
|
||||
|
||||
export default function EventEditorTriggers({ triggers, eventId }: EventEditorTriggersProps) {
|
||||
const { data: automationSettings, status: automationStatus } = useAutomationSettings();
|
||||
const automationsEnabled = automationStatus === 'pending' ? undefined : automationSettings.enabledAutomations;
|
||||
const showTriggers = triggers.length > 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
{showTriggers && <ExistingEventTriggers triggers={triggers} eventId={eventId} />}
|
||||
<EventTriggerForm triggers={triggers} eventId={eventId} />
|
||||
</>
|
||||
<div className={style.triggers}>
|
||||
{automationsEnabled === false && (
|
||||
<Info>Automations are disabled. Event triggers stay configured, but they will not run until enabled.</Info>
|
||||
)}
|
||||
{showTriggers && (
|
||||
<div className={style.section}>
|
||||
<div className={style.sectionTitle}>Applied automations</div>
|
||||
<ExistingEventTriggers triggers={triggers} eventId={eventId} automations={automationSettings.automations} />
|
||||
</div>
|
||||
)}
|
||||
<Editor.Panel className={style.formSection}>
|
||||
<div className={style.sectionTitle}>Add automation</div>
|
||||
<EventTriggerForm triggers={triggers} eventId={eventId} automations={automationSettings.automations} />
|
||||
</Editor.Panel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface EventTriggerFormProps {
|
||||
eventId: string;
|
||||
triggers?: Trigger[];
|
||||
automations: NormalisedAutomation;
|
||||
}
|
||||
|
||||
function EventTriggerForm({ eventId, triggers }: EventTriggerFormProps) {
|
||||
const { data: automationSettings } = useAutomationSettings();
|
||||
function EventTriggerForm({ eventId, triggers, automations }: EventTriggerFormProps) {
|
||||
const { updateEntry } = useEntryActionsContext();
|
||||
const [automationId, setAutomationId] = useState<string | undefined>(undefined);
|
||||
const [cycleValue, setCycleValue] = useState(TimerLifeCycle.onStart);
|
||||
@@ -52,7 +65,7 @@ function EventTriggerForm({ eventId, triggers }: EventTriggerFormProps) {
|
||||
if (automationId === undefined) {
|
||||
return 'Select an automation';
|
||||
}
|
||||
if (!Object.keys(automationSettings.automations).includes(automationId)) {
|
||||
if (!Object.keys(automations).includes(automationId)) {
|
||||
return 'This automation does not exist';
|
||||
}
|
||||
if (triggers === undefined) {
|
||||
@@ -64,10 +77,11 @@ function EventTriggerForm({ eventId, triggers }: EventTriggerFormProps) {
|
||||
};
|
||||
|
||||
const validationError = getValidationError(cycleValue, automationId);
|
||||
const validationLabel = validationError ?? 'Ready to add automation';
|
||||
|
||||
const triggerOptions = useMemo(
|
||||
() => [
|
||||
{ value: null, label: 'Select Trigger' },
|
||||
{ value: null, label: 'Select lifecycle' },
|
||||
...eventTriggerOptions.map((cycle) => ({ value: cycle, label: cycle })),
|
||||
],
|
||||
[], // eventTriggerOptions is a constant, no need for dependency
|
||||
@@ -76,42 +90,49 @@ function EventTriggerForm({ eventId, triggers }: EventTriggerFormProps) {
|
||||
const automationOptions = useMemo(
|
||||
() => [
|
||||
{ value: null, label: 'Select Automation' },
|
||||
...Object.values(automationSettings.automations).map(({ id, title }) => ({ value: id, label: title })),
|
||||
...Object.values(automations).map(({ id, title }) => ({ value: id, label: title })),
|
||||
],
|
||||
[automationSettings.automations], // This needs to be a dependency as it can change
|
||||
[automations], // This needs to be a dependency as it can change
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={style.triggerForm}>
|
||||
<Select
|
||||
value={cycleValue}
|
||||
onValueChange={(value) => {
|
||||
if (value !== null) setCycleValue(value);
|
||||
}}
|
||||
options={triggerOptions}
|
||||
/>
|
||||
<div className={style.formFields}>
|
||||
<div>
|
||||
<Editor.Label>Lifecycle</Editor.Label>
|
||||
<Select
|
||||
value={cycleValue}
|
||||
onValueChange={(value) => {
|
||||
if (value !== null) setCycleValue(value);
|
||||
}}
|
||||
options={triggerOptions}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Select
|
||||
value={automationId ?? null}
|
||||
onValueChange={(value) => {
|
||||
if (value !== null) setAutomationId(value);
|
||||
}}
|
||||
options={automationOptions}
|
||||
/>
|
||||
<div>
|
||||
<Editor.Label>Automation</Editor.Label>
|
||||
<Select
|
||||
value={automationId ?? null}
|
||||
onValueChange={(value) => {
|
||||
if (value !== null) setAutomationId(value);
|
||||
}}
|
||||
options={automationOptions}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
disabled={validationError !== undefined}
|
||||
onClick={() => automationId && handleSubmit(cycleValue, automationId)}
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
{validationError !== undefined ? (
|
||||
<Tooltip text={validationError} render={<span />}>
|
||||
<IoAlertCircle className={style.errorLabel} />
|
||||
</Tooltip>
|
||||
) : (
|
||||
<IoCheckmarkCircle className={style.success} />
|
||||
)}
|
||||
<div className={style.formActions}>
|
||||
<div className={validationError ? style.validationError : style.validationSuccess}>
|
||||
{validationError ? <IoAlertCircle /> : <IoCheckmarkCircle />}
|
||||
<span>{validationLabel}</span>
|
||||
</div>
|
||||
<Button
|
||||
disabled={validationError !== undefined}
|
||||
onClick={() => automationId && handleSubmit(cycleValue, automationId)}
|
||||
>
|
||||
Add automation
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -119,11 +140,11 @@ function EventTriggerForm({ eventId, triggers }: EventTriggerFormProps) {
|
||||
interface ExistingEventTriggersProps {
|
||||
eventId: string;
|
||||
triggers: Trigger[];
|
||||
automations: NormalisedAutomation;
|
||||
}
|
||||
|
||||
function ExistingEventTriggers({ eventId, triggers }: ExistingEventTriggersProps) {
|
||||
function ExistingEventTriggers({ eventId, triggers, automations }: ExistingEventTriggersProps) {
|
||||
const { updateEntry } = useEntryActionsContext();
|
||||
const { data: automationSettings } = useAutomationSettings();
|
||||
|
||||
const handleDelete = useCallback(
|
||||
(triggerId: string) => {
|
||||
@@ -144,16 +165,22 @@ function ExistingEventTriggers({ eventId, triggers }: ExistingEventTriggersProps
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={style.triggerList}>
|
||||
{Object.entries(filteredTriggers).map(([triggerLifeCycle, triggerGroup]) => (
|
||||
<Fragment key={triggerLifeCycle}>
|
||||
{triggerGroup.map((trigger) => {
|
||||
const { id, automationId } = trigger;
|
||||
const automationTitle = automationSettings.automations[automationId]?.title ?? '<MISSING AUTOMATION>';
|
||||
const automationTitle = automations[automationId]?.title ?? '<MISSING AUTOMATION>';
|
||||
return (
|
||||
<div key={id} className={style.trigger}>
|
||||
<Tag>{triggerLifeCycle}</Tag>
|
||||
<Tag>{automationTitle}</Tag>
|
||||
<div className={style.triggerMeta}>
|
||||
<div className={style.metaLabel}>Lifecycle</div>
|
||||
<div>{triggerLifeCycle}</div>
|
||||
</div>
|
||||
<div className={style.triggerMeta}>
|
||||
<div className={style.metaLabel}>Automation</div>
|
||||
<div className={style.automationTitle}>{automationTitle}</div>
|
||||
</div>
|
||||
<IconButton variant='ghosted-destructive' onClick={() => handleDelete(id)}>
|
||||
<IoTrash />
|
||||
</IconButton>
|
||||
|
||||
@@ -231,6 +231,10 @@ $skip-opacity: 0.2;
|
||||
color: var(--status-color-active-override, $active-indicator);
|
||||
}
|
||||
|
||||
.statusIcon.warning {
|
||||
color: $orange-500;
|
||||
}
|
||||
|
||||
.statusIcon.disabled {
|
||||
color: $gray-1000;
|
||||
}
|
||||
|
||||
@@ -43,6 +43,7 @@ interface RundownEventProps {
|
||||
title: string;
|
||||
note: string;
|
||||
delay: number;
|
||||
automationsEnabled?: boolean;
|
||||
colour: string;
|
||||
isPast: boolean;
|
||||
isNext: boolean;
|
||||
@@ -76,6 +77,7 @@ export default function RundownEvent({
|
||||
title,
|
||||
note,
|
||||
delay,
|
||||
automationsEnabled,
|
||||
colour,
|
||||
isPast,
|
||||
isNext,
|
||||
@@ -302,6 +304,7 @@ export default function RundownEvent({
|
||||
title={title}
|
||||
note={note}
|
||||
delay={delay}
|
||||
automationsEnabled={automationsEnabled}
|
||||
isNext={isNext}
|
||||
skip={skip}
|
||||
loaded={loaded}
|
||||
|
||||
@@ -38,6 +38,7 @@ interface RundownEventInnerProps {
|
||||
title: string;
|
||||
note: string;
|
||||
delay: number;
|
||||
automationsEnabled?: boolean;
|
||||
isNext: boolean;
|
||||
skip: boolean;
|
||||
loaded: boolean;
|
||||
@@ -64,6 +65,7 @@ function RundownEventInner({
|
||||
title,
|
||||
note,
|
||||
delay,
|
||||
automationsEnabled,
|
||||
isNext,
|
||||
skip = false,
|
||||
loaded,
|
||||
@@ -79,6 +81,21 @@ function RundownEventInner({
|
||||
|
||||
const eventIsPlaying = playback === Playback.Play;
|
||||
const eventIsPaused = playback === Playback.Pause;
|
||||
const automationTooltip = (() => {
|
||||
if (!hasTriggers) {
|
||||
return 'Event has no triggers';
|
||||
}
|
||||
|
||||
if (automationsEnabled !== false) {
|
||||
return 'Event has triggers';
|
||||
}
|
||||
|
||||
return 'Event has triggers, but automations are disabled';
|
||||
})();
|
||||
const automationIconClasses = cx([
|
||||
style.statusIcon,
|
||||
hasTriggers ? (automationsEnabled === false ? style.warning : style.active) : style.disabled,
|
||||
]);
|
||||
|
||||
const playBtnStyles = { _hover: {} };
|
||||
if (!skip && eventIsPlaying) {
|
||||
@@ -142,8 +159,8 @@ function RundownEventInner({
|
||||
<Tooltip text={`${countToEnd ? 'Count to End' : 'Count duration'}`} render={<span />}>
|
||||
<LuArrowDownToLine className={`${style.statusIcon} ${countToEnd ? style.active : style.disabled}`} />
|
||||
</Tooltip>
|
||||
<Tooltip text='Event has Triggers' render={<span />}>
|
||||
<IoFlash className={`${style.statusIcon} ${hasTriggers ? style.active : style.disabled}`} />
|
||||
<Tooltip text={automationTooltip} render={<span />}>
|
||||
<IoFlash className={automationIconClasses} />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,6 +4,7 @@ import { parseUserTime } from 'ontime-utils';
|
||||
import { logger } from '../../../classes/Logger.js';
|
||||
import { auxTimerService } from '../../../services/aux-timer-service/AuxTimerService.js';
|
||||
import * as messageService from '../../../services/message-service/message.service.js';
|
||||
import { runtimeService } from '../../../services/runtime-service/runtime.service.js';
|
||||
|
||||
export function toOntimeAction(action: OntimeAction) {
|
||||
const actionType = action.action;
|
||||
@@ -40,6 +41,16 @@ export function toOntimeAction(action: OntimeAction) {
|
||||
return auxTimerService.setTime(time, 3);
|
||||
}
|
||||
|
||||
// Playback actions
|
||||
case 'playback-start':
|
||||
return runtimeService.start();
|
||||
case 'playback-stop':
|
||||
return runtimeService.stop();
|
||||
case 'playback-pause':
|
||||
return runtimeService.pause();
|
||||
case 'playback-roll':
|
||||
return runtimeService.roll();
|
||||
|
||||
// Message actions
|
||||
case 'message-set': {
|
||||
messageService.patch({
|
||||
|
||||
@@ -68,15 +68,24 @@ const ontimeAuxTriggerAction = [
|
||||
|
||||
const ontimeAuxSetAction = ['aux1-set', 'aux2-set', 'aux3-set'] as const;
|
||||
|
||||
const ontimePlaybackAction = ['playback-start', 'playback-stop', 'playback-pause', 'playback-roll'] as const;
|
||||
|
||||
type OntimeAuxTriggerAction = (typeof ontimeAuxTriggerAction)[number];
|
||||
type OntimeAuxSetAction = (typeof ontimeAuxSetAction)[number];
|
||||
type OntimePlaybackAction = (typeof ontimePlaybackAction)[number];
|
||||
type OntimeMessageSet = 'message-set';
|
||||
type OntimeMessageSecondary = 'message-secondary';
|
||||
|
||||
export type OntimeActionKey = OntimeAuxTriggerAction | OntimeAuxSetAction | OntimeMessageSet | OntimeMessageSecondary;
|
||||
export type OntimeActionKey =
|
||||
| OntimeAuxTriggerAction
|
||||
| OntimePlaybackAction
|
||||
| OntimeAuxSetAction
|
||||
| OntimeMessageSet
|
||||
| OntimeMessageSecondary;
|
||||
|
||||
export const ontimeActionKeyValues = [
|
||||
...ontimeAuxTriggerAction,
|
||||
...ontimePlaybackAction,
|
||||
...ontimeAuxSetAction,
|
||||
'message-set',
|
||||
'message-secondary',
|
||||
@@ -87,6 +96,10 @@ export type OntimeAction =
|
||||
type: 'ontime';
|
||||
action: OntimeAuxTriggerAction;
|
||||
}
|
||||
| {
|
||||
type: 'ontime';
|
||||
action: OntimePlaybackAction;
|
||||
}
|
||||
| {
|
||||
type: 'ontime';
|
||||
action: OntimeAuxSetAction;
|
||||
|
||||
Reference in New Issue
Block a user