v2: roll (#280)

* ux: delete flow

* style: small tweaks in interface

* refactor: gracefully quit on error

* fix: logic around updating events

* chore: cleanup dictionary

* refactor: improve DX on creating aux files

* fix: safe destructure function return

* refactor: safe handling of falsy timer values

* fix: improve ux on stopping roll mode

* chore: upgrade deps

* feat: roll mode

* refactor: remove unused

client/src/features/control/playback/Transport.tsx

@@ -51,7 +51,7 @@ export default function Transport(props: TransportProps) {
       <Tooltip label='Unload Event' openDelay={tooltipDelayMid}>
         <TapButton
           onClick={() => setPlayback.stop()}
-          disabled={!selectedId}
+          disabled={!selectedId && !isRolling}
           theme='stop'
         >
           <IoStop />

client/src/features/rundown/event-block/EventBlock.tsx

@@ -246,7 +246,7 @@ export default function EventBlock(props: EventBlockProps) {
               showDelay
               showBlock
               showClone
-              enableDelete
+              enableDelete={!selected}
               actionHandler={actionHandler}
             />
           </div>

client/src/features/rundown/event-block/composite/EventBlockProgressBar.tsx

@@ -16,7 +16,7 @@ export default function EventBlockProgressBar(props: EventBlockProgressBarProps)
   const elapsed = clamp(100 - (now * 100) / complete, 0, 100);
   const progress = `${elapsed}%`;
 
-  if (timer?.current != null && timer?.current < 0) {
+  if ((timer?.current ?? 0) < 0) {
     return (
       <div
         className={`${style.progressBar} ${style.overtime}`}

client/src/theme/_ontimeColours.scss

@@ -92,18 +92,18 @@ $red-1200: #520000;
 $red-1300: #440000;
 $red-1350: #360000;
 
-$violet-50: #F9F7FE;
-$violet-100: #F3EFFC;
-$violet-200: #E7DFF6;
-$violet-300: #CEBFEC;
-$violet-400: #B8A0E3;
-$violet-500: #AB8DB8;
-$violet-600: #9771D3;
-$violet-700: #8B60CA;
-$violet-800: #8352C6;
-$violet-900: #7945c1;
-$violet-1000: #7248AD;
-$violet-1100: #573486;
-$violet-1200: #3C235F;
-$violet-1300: #301A4D;
-$violet-1350: #231339;
+$violet-50: #F6F6F6;
+$violet-100: #EBE5FF;
+$violet-200: #DFD5FF;
+$violet-300: #C7B8FD;
+$violet-400: #A790F5;
+$violet-500: #9379EC;
+$violet-600: #8064E1;
+$violet-700: #674ACB;
+$violet-800: #4E31B1;
+$violet-900: #3F249D;
+$violet-1000: #311887;
+$violet-1100: #1F0B62;
+$violet-1200: #140545;
+$violet-1300: #0F0336;
+$violet-1350: #0A0126;

client/src/theme/ontimeButton.ts

@@ -22,11 +22,10 @@ export const ontimeButtonFilled = {
 export const ontimeButtonOutlined = {
   ...commonStyles,
   backgroundColor: '#2d2d2d', // $gray-1100
-  color: '#9d9d9d', // $blue-400
+  color: '#e2e2e2', // $blue-400
   border: '1px solid rgba(255, 255, 255, 0.10)', // white-10
   _hover: {
     backgroundColor: '#404040', // $gray-1000
-    color: '#e2e2e2', // $gray-200
   },
   _active: {
     backgroundColor: '#2d2d2d', // $gray-1100