V2 align (#321)

* fix: fetch in offline environments (#295)

* Add arm platforms to docker build (#297)

* add arm platforms to docker build

---------

Co-authored-by: Fabian Posenau <fabian@fphome.de>

* fix: docker build (#298)

Co-authored-by: Fabian Posenau <fabian@fphome.de>

* Timer: fix too many renders error when using ?progress (#305)

* Timer: fix too many renders error when using ?progress

* version bump (#314)

* style: small tweaks

* fix: prevent actions in roll mode

* chore: update external assets

* style: show shortcuts in quick blocks

* refactor: revert optimisations on callbacks

* fun: industry dictionary

* style: indicators for event features

---------

Co-authored-by: Fabian Posenau <fabian.p99@gmx.de>
Co-authored-by: Fabian Posenau <fabian@fphome.de>
Co-authored-by: Marks Polakovs <github@markspolakovs.me>

apps/client/src/features/rundown/event-block/EventBlock.module.scss

@@ -154,15 +154,24 @@
   grid-area: status;
   display: flex;
   justify-content: flex-end;
+  align-items: center;
   gap: 8px;
 
+  .tag {
+    font-size: 0.55em;
+    color: $active-indicator;
+  }
+
   .statusIcon {
     width: 16px;
     height: 16px;
-    color: $gray-1000;
+    color: $gray-500;
   }
 
   .statusIcon.active {
-    color: $ui-white;
+    color: $active-indicator;
+  }
+  .statusIcon.disabled {
+    color: $gray-1000;
   }
 }

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

@@ -2,7 +2,7 @@ import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
-import { OntimeEvent, Playback } from 'ontime-types';
+import { EndAction, OntimeEvent, Playback, TimerType } from 'ontime-types';
 
 import { useCursor } from '../../../common/stores/cursorStore';
 import { useEventEditorStore } from '../../../common/stores/eventEditor';
@@ -21,6 +21,8 @@ interface EventBlockProps {
   eventIndex: number;
   eventId: string;
   isPublic: boolean;
+  endAction: EndAction;
+  timerType: TimerType;
   title: string;
   note: string;
   delay: number;
@@ -51,6 +53,8 @@ export default function EventBlock(props: EventBlockProps) {
     eventIndex,
     eventId,
     isPublic = true,
+    endAction,
+    timerType,
     title,
     note,
     delay,
@@ -143,6 +147,8 @@ export default function EventBlock(props: EventBlockProps) {
           duration={duration}
           eventId={eventId}
           isPublic={isPublic}
+          endAction={endAction}
+          timerType={timerType}
           title={title}
           note={note}
           delay={delay}

apps/client/src/features/rundown/event-block/EventBlockInner.tsx

@@ -1,14 +1,20 @@
 import { memo, useCallback, useEffect, useState } from 'react';
 import { Editable, EditableInput, EditablePreview, 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';
 import { IoPeople } from '@react-icons/all-files/io5/IoPeople';
 import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
+import { IoPlayCircle } from '@react-icons/all-files/io5/IoPlayCircle';
+import { IoPlayForwardCircle } from '@react-icons/all-files/io5/IoPlayForwardCircle';
 import { IoPlayOutline } from '@react-icons/all-files/io5/IoPlayOutline';
-import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward';
+import { IoPlaySkipForwardCircle } from '@react-icons/all-files/io5/IoPlaySkipForwardCircle';
 import { IoReload } from '@react-icons/all-files/io5/IoReload';
 import { IoRemoveCircle } from '@react-icons/all-files/io5/IoRemoveCircle';
 import { IoRemoveCircleOutline } from '@react-icons/all-files/io5/IoRemoveCircleOutline';
-import { Playback } from 'ontime-types';
+import { IoStopCircle } from '@react-icons/all-files/io5/IoStopCircle';
+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';
@@ -38,6 +44,8 @@ interface EventBlockInnerProps {
   duration: number;
   eventId: string;
   isPublic: boolean;
+  endAction: EndAction;
+  timerType: TimerType;
   title: string;
   note: string;
   delay: number;
@@ -57,6 +65,8 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
     duration,
     eventId,
     isPublic = true,
+    endAction,
+    timerType,
     title,
     note,
     delay,
@@ -180,14 +190,24 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
           {selected && <EventBlockProgressBar playback={playback} />}
         </div>
         <div className={style.eventStatus} tabIndex={-1}>
-          <Tooltip label='Next event' isDisabled={!next} {...tooltipProps}>
+          {next && (
+            <Tooltip label='Next event' {...tooltipProps}>
+              <span className={style.tag}>NEXT</span>
+            </Tooltip>
+          )}
+          <Tooltip label={`End action: ${endAction}`} {...tooltipProps}>
             <span>
-              <IoPlaySkipForward className={`${style.statusIcon} ${next ? style.active : ''}`} />
+              <EndActionIcon action={endAction} className={style.statusIcon} />
+            </span>
+          </Tooltip>
+          <Tooltip label={`Time type: ${timerType}`} {...tooltipProps}>
+            <span>
+              <TimerIcon type={timerType} className={style.statusIcon} />
             </span>
           </Tooltip>
           <Tooltip label={`${isPublic ? 'Event is public' : 'Event is private'}`} {...tooltipProps}>
             <span>
-              <IoPeople className={`${style.statusIcon} ${isPublic ? style.active : ''}`} />
+              <IoPeople className={`${style.statusIcon} ${isPublic ? style.active : style.disabled}`} />
             </span>
           </Tooltip>
         </div>
@@ -212,3 +232,28 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
 };
 
 export default memo(EventBlockInner);
+
+function EndActionIcon(props: { action: EndAction; className: string }) {
+  const { action, className } = props;
+  if (action === EndAction.LoadNext) {
+    return <IoPlaySkipForwardCircle className={className} />;
+  }
+  if (action === EndAction.PlayNext) {
+    return <IoPlayForwardCircle className={className} />;
+  }
+  if (action === EndAction.Stop) {
+    return <IoStopCircle className={className} />;
+  }
+  return <IoPlayCircle className={className} />;
+}
+
+function TimerIcon(props: { type: TimerType; className: string }) {
+  const { type, className } = props;
+  if (type === TimerType.CountUp) {
+    return <IoCaretUpCircle className={className} />;
+  }
+  if (type === TimerType.Clock) {
+    return <IoTime className={className} />;
+  }
+  return <IoCaretDownCircle className={className} />;
+}