feat: Improve automation flow and add ontime playback actions (#2025) (#2024)

* 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>

apps/client/src/features/rundown/rundown-event/RundownEvent.module.scss

@@ -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;
   }

apps/client/src/features/rundown/rundown-event/RundownEvent.tsx

@@ -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}

apps/client/src/features/rundown/rundown-event/RundownEventInner.tsx

@@ -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>