V2 monorepo (#285)

* refactor(project structure): UI * refactor(project structure): extract utilities * refactor(project structure): remove unused * refactor(project structure): electron * refactor(project structure): server refactor: migrate to vitest refactor: monorepo config * refactor: extract application menu * refactor: exit process * refactor: extract tray menu * chore: electron build * Added Seconds in studio clock #282 --------- Co-authored-by: Fabian Posenau <fabian@fphome.de> --------- Co-authored-by: Fabian Posenau <fabian.p99@gmx.de> Co-authored-by: Fabian Posenau <fabian@fphome.de>
2026-08-19 22:24:11 +00:00 · 2023-02-14 22:02:15 +01:00
parent 3918758d32
commit de9a7a87fd
439 changed files with 11381 additions and 14294 deletions
@@ -0,0 +1,22 @@
+@use '../blockMixins' as *;
+
+.delay {
+  @include block-spacing;
+  @include block-styling;
+
+  display: grid;
+  grid-template-columns: 32px 1fr auto;
+  grid-template-areas: 'drag inpt btns';
+  align-items: center;
+  height: $secondary-block-height;
+  gap: 8px;
+
+  &.hasCursor {
+    outline: 1px solid $block-cursor-color;
+  }
+}
+
+.drag {
+  @include drag-style;
+  grid-area: drag;
+}
@@ -0,0 +1,84 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { Draggable } from 'react-beautiful-dnd';
+import { Button, HStack } from '@chakra-ui/react';
+import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
+import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
+import DelayInput from '../../../common/components/input/delay-input/DelayInput';
+import { useEventAction } from '../../../common/hooks/useEventAction';
+import { millisToMinutes } from '../../../common/utils/dateConfig';
+
+import { OntimeDelay, OntimeEvent } from '../../../common/models/EventTypes';
+import { cx } from '../../../common/utils/styleUtils';
+import BlockActionMenu from '../event-block/composite/BlockActionMenu';
+import { EventItemActions } from '../RundownEntry';
+
+import style from './DelayBlock.module.scss';
+
+interface DelayBlockProps {
+  data: OntimeDelay,
+  index: number;
+  hasCursor: boolean;
+  actionHandler: (action: EventItemActions, payload?: number | { field: keyof OntimeEvent, value: unknown }) => void;
+}
+
+export default function DelayBlock(props: DelayBlockProps) {
+  const { data, index, hasCursor, actionHandler } = props;
+  const { applyDelay, updateEvent } = useEventAction();
+  const onFocusRef = useRef<null | HTMLSpanElement>(null);
+
+  useEffect(() => {
+    if (hasCursor) {
+      onFocusRef?.current?.focus();
+    }
+  }, [hasCursor])
+
+  const applyDelayHandler = useCallback(() => {
+    applyDelay(data.id);
+  }, [data.id, applyDelay]);
+
+  const delaySubmitHandler = useCallback(
+    (value: number) => {
+      const newEvent = {
+        id: data.id,
+        duration: value * 60000,
+      };
+
+      updateEvent(newEvent);
+    },
+    [data.id, updateEvent],
+  );
+
+  const blockClasses = cx([
+    style.delay,
+    hasCursor ? style.hasCursor : null,
+  ]);
+
+  const delayValue = data.duration != null ? millisToMinutes(data.duration) : undefined;
+
+  return (
+    <Draggable key={data.id} draggableId={data.id} index={index}>
+      {(provided) => (
+        <div className={blockClasses} {...provided.draggableProps} ref={provided.innerRef}>
+          <span className={style.drag} {...provided.dragHandleProps} ref={onFocusRef}>
+            <IoReorderTwo />
+          </span>
+          <DelayInput
+            value={delayValue}
+            submitHandler={delaySubmitHandler}
+          />
+          <HStack spacing='8px' className={style.actionOverlay}>
+            <Button
+              onClick={applyDelayHandler}
+              size='sm'
+              leftIcon={<IoCheckmark />}
+              variant='ontime-subtle-white'
+            >
+              Apply delay
+            </Button>
+            <BlockActionMenu showAdd enableDelete actionHandler={actionHandler} />
+          </HStack>
+        </div>
+      )}
+    </Draggable>
+  );
+}