v2 alpha5 (#315)

* fix: fetch in offline environments (#295)

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

* ux: remove duplicate showing of selected event

* several small fixes and UX improvements
---------

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.tsx

@@ -10,13 +10,12 @@ 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 { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
-import { useAtom } from 'jotai';
 import { Playback } from 'ontime-types';
 
-import { editorEventId } from '../../../common/atoms/LocalEventSettings';
 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 { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
 import { tooltipDelayMid } from '../../../ontimeConfig';
 import { EventItemActions } from '../RundownEntry';
@@ -78,7 +77,7 @@ export default function EventBlock(props: EventBlockProps) {
     actionHandler,
   } = props;
 
-  const [openId, setOpenId] = useAtom(editorEventId);
+  const { openId, setOpenEvent, removeOpenEvent } = useEventEditorStore();
   const { updateEvent } = useEventAction();
   const [blockTitle, setBlockTitle] = useState<string>(title || '');
   const onFocusRef = useRef<null | HTMLSpanElement>(null);
@@ -111,6 +110,14 @@ export default function EventBlock(props: EventBlockProps) {
     [title, updateEvent, eventId],
   );
 
+  const toggleOpenEvent = useCallback(() => {
+    if (openId === eventId) {
+      removeOpenEvent();
+    } else {
+      setOpenEvent(eventId);
+    }
+  }, [eventId, openId, removeOpenEvent, setOpenEvent]);
+
   const eventIsPlaying = selected && playback === Playback.Play;
   const playBtnStyles = { _hover: {} };
   if (!skip && eventIsPlaying) {
@@ -221,7 +228,7 @@ export default function EventBlock(props: EventBlockProps) {
               variant='ontime-subtle-white'
               size='sm'
               icon={<IoOptions />}
-              clickHandler={() => setOpenId((prev) => (prev === eventId ? null : eventId))}
+              clickHandler={toggleOpenEvent}
               tooltip='Event options'
               aria-label='Event options'
               tabIndex={-1}

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

@@ -11,25 +11,16 @@ interface EventBlockProgressBarProps {
 
 export default function EventBlockProgressBar(props: EventBlockProgressBarProps) {
   const { playback } = props;
-  const { data: timer } = useTimer();
+  const timer = useTimer();
+
   const now = Math.floor(Math.max((timer?.current ?? 1) / 1000, 0));
   const complete = (timer?.duration ?? 1) / 1000;
   const elapsed = clamp(100 - (now * 100) / complete, 0, 100);
   const progress = `${elapsed}%`;
 
   if ((timer?.current ?? 0) < 0) {
-    return (
-      <div
-        className={`${style.progressBar} ${style.overtime}`}
-        style={{ width: '100%' }}
-      />
-    );
+    return <div className={`${style.progressBar} ${style.overtime}`} style={{ width: '100%' }} />;
   }
 
-  return (
-    <div
-      className={`${style.progressBar} ${playback ? style[playback] : ''}`}
-      style={{ width: progress }}
-    />
-  );
+  return <div className={`${style.progressBar} ${playback ? style[playback] : ''}`} style={{ width: progress }} />;
 }