Feat/mac (#109)

* chore: upgrade dependencies
* feat/mac: draft pipeline
* feat/mac: use public folder for transient files
* feat/mac: set app fullscreen
* feat/mac: cmd + , toggles menu
* feat/mac: update readme
* refact: easier login process
* refact prevent style issues with safari
* refact reduce css download
* style: cleanup paginator design
* style: studio clock is responsive
* style: fix spacing style issues with safari

client/src/features/editors/BlockBlock/BlockBlock.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { HStack } from '@chakra-ui/react';
 import { Draggable } from 'react-beautiful-dnd';
 import { FiMoreVertical } from '@react-icons/all-files/fi/FiMoreVertical';
 import DeleteIconBtn from 'common/components/buttons/DeleteIconBtn';
@@ -20,10 +21,10 @@ export default function BlockBlock(props) {
           <span className={style.drag} {...provided.dragHandleProps}>
             <FiMoreVertical />
           </span>
-          <div className={style.actionOverlay}>
+          <HStack spacing='0.5em' className={style.actionOverlay}>
             <DeleteIconBtn actionHandler={actionHandler} />
             <ActionButtons showAdd showDelay actionHandler={actionHandler} />
-          </div>
+          </HStack>
         </div>
       )}
     </Draggable>

client/src/features/editors/BlockBlock/BlockBlock.module.scss

@@ -41,7 +41,6 @@
   align-content: center;
   align-self: flex-start;
   padding-top: 0.2em;
-  gap: 0.5em;
   opacity: 0.8;
   transition: linear 0.1s;
   justify-self: end;

client/src/features/editors/DelayBlock/DelayBlock.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { HStack } from '@chakra-ui/react';
 import { Draggable } from 'react-beautiful-dnd';
 import { FiMoreVertical } from '@react-icons/all-files/fi/FiMoreVertical';
 import { millisToMinutes } from 'common/utils/dateConfig';
@@ -16,7 +17,7 @@ export default function DelayBlock(props) {
     eventsHandler('applyDelay', { id: data.id, duration: data.duration });
   };
 
-  let delayValue = data.duration != null ? millisToMinutes(data.duration) : undefined;
+  const delayValue = data.duration != null ? millisToMinutes(data.duration) : undefined;
   return (
     <Draggable key={data.id} draggableId={data.id} index={index}>
       {(provided) => (
@@ -25,11 +26,11 @@ export default function DelayBlock(props) {
             <FiMoreVertical />
           </span>
           <DelayInput className={style.input} value={delayValue} actionHandler={actionHandler} />
-          <div className={style.actionOverlay}>
+          <HStack spacing='0.5em' className={style.actionOverlay}>
             <ApplyIconBtn clickhandler={applyDelayHandler} />
             <DeleteIconBtn actionHandler={actionHandler} />
             <ActionButtons showAdd actionHandler={actionHandler} />
-          </div>
+          </HStack>
         </div>
       )}
     </Draggable>

client/src/features/editors/DelayBlock/DelayBlock.module.scss

@@ -52,7 +52,6 @@
   align-content: center;
   align-self: flex-start;
   padding-top: 0.2em;
-  gap: 0.5em;
   opacity: 0.8;
   transition: linear 0.1s;
 }

client/src/features/editors/Editor.jsx

@@ -11,8 +11,8 @@ import { CollapseProvider } from '../../app/context/CollapseContext';
 import styles from './Editor.module.scss';
 
 const EventListWrapper = lazy(() => import('features/editors/list/EventListWrapper'));
-const PlaybackControl = lazy(() => import('features/control/PlaybackControl'));
-const MessageControl = lazy(() => import('features/control/MessageControl'));
+const PlaybackControl = lazy(() => import('features/control/playback/PlaybackControl'));
+const MessageControl = lazy(() => import('features/control/message/MessageControl'));
 const Info = lazy(() => import('features/info/Info'));
 
 export default function Editor() {
@@ -35,7 +35,7 @@ export default function Editor() {
             <CollapseProvider>
               <Box id='settings' className={styles.settings}>
                 <ErrorBoundary>
-                  <MenuBar onOpen={onOpen} isOpen={isOpen} />
+                  <MenuBar onOpen={onOpen} isOpen={isOpen} onClose={onClose} />
                 </ErrorBoundary>
               </Box>
 

client/src/features/editors/Editor.module.scss

@@ -1,9 +1,11 @@
+@use '../../styles/main' as *;
+
 .mainContainer {
-  background: linear-gradient(90deg, #202020 0%, #121212 100%);
+  background: $bg-black;
   width: 100%;
   height: 100%;
   margin: auto;
-  color: #fffd;
+  color: $title-white;
   padding: max(16px, 2vh);
 
   display: grid;
@@ -94,14 +96,14 @@
 
 h1 {
   font-size: max(1.5em, 16px);
-  color: rgba(255, 255, 255, 0.63);
+  color: $bg-gray-100;
   padding-bottom: 0.25em;
 }
 
 .mainContainer > div {
   border-radius: 0.5em;
   height: 100%;
-  background-color: rgba(255, 255, 255, 0.13);
+  background-color: $bg-gray-1000;
   padding: 0.8em 1.5em;
 
   display: flex;

client/src/features/editors/EventBlock/CollapsedBlock.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { HStack } from '@chakra-ui/react';
+import { FiMoreVertical } from '@react-icons/all-files/fi/FiMoreVertical';
+import EventTimes from '../../../common/components/eventTimes/EventTimes';
+import EditableText from '../../../common/input/EditableText';
+import PublicIconBtn from '../../../common/components/buttons/PublicIconBtn';
+import ActionButtons from '../list/ActionButtons';
+import PropTypes from 'prop-types';
+import style from './EventBlock.module.scss';
+
+export default function CollapsedBlock (props) {
+  const { provided, data, next, delay, delayValue, previousEnd, actionHandler } = props;
+
+  return (
+    <>
+      <span className={style.drag} {...provided.dragHandleProps}>
+        <FiMoreVertical />
+      </span>
+
+      <div className={style.indicators}>
+        <span className={next ? style.next : style.nextDisabled}>Next</span>
+        {delayValue != null && <span className={style.delayValue}>{delayValue}</span>}
+      </div>
+      <EventTimes
+        actionHandler={actionHandler}
+        timeStart={data.timeStart}
+        timeEnd={data.timeEnd}
+        delay={delay}
+        previousEnd={previousEnd}
+        className={style.time}
+      />
+      <div className={style.titleContainer}>
+        <EditableText
+          label='Title'
+          defaultValue={data.title}
+          placeholder='Add Title'
+          submitHandler={(v) => actionHandler('update', { field: 'title', value: v })}
+        />
+      </div>
+      <HStack spacing='0.5em' className={style.actionOverlay}>
+        <PublicIconBtn actionHandler={actionHandler} active={data.isPublic} />
+        <ActionButtons showAdd showDelay showBlock actionHandler={actionHandler} />
+      </HStack>
+    </>
+  );
+};
+
+CollapsedBlock.propTypes = {
+  provided: PropTypes.any.isRequired,
+  data: PropTypes.object.isRequired,
+  next: PropTypes.bool.isRequired,
+  delay: PropTypes.any,
+  delayValue: PropTypes.string,
+  previousEnd: PropTypes.number.isRequired,
+  actionHandler: PropTypes.func.isRequired,
+};

client/src/features/editors/EventBlock/EventBlock.jsx

@@ -1,143 +1,13 @@
 import React, { useContext, useMemo } from 'react';
 import Icon from '@chakra-ui/icon';
 import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
-import { FiMoreVertical } from '@react-icons/all-files/fi/FiMoreVertical';
 import { Draggable } from 'react-beautiful-dnd';
-import EventTimes from 'common/components/eventTimes/EventTimes';
-import EventTimesVertical from 'common/components/eventTimes/EventTimesVertical';
-import EditableText from 'common/input/EditableText';
-import ActionButtons from '../list/ActionButtons';
-import PublicIconBtn from 'common/components/buttons/PublicIconBtn';
-import DeleteIconBtn from 'common/components/buttons/DeleteIconBtn';
 import { millisToMinutes } from 'common/utils/dateConfig';
 import PropTypes from 'prop-types';
 import { CollapseContext } from '../../../app/context/CollapseContext';
-import style from './EventBlock.module.css';
-
-const ExpandedBlock = (props) => {
-  const { provided, data, eventIndex, next, delay, delayValue, previousEnd, actionHandler } = props;
-
-  const oscid = data?.id || '...';
-
-  return (
-    <>
-      <span className={style.drag} {...provided.dragHandleProps}>
-        <FiMoreVertical />
-      </span>
-
-      <div className={style.indicators}>
-        <span className={next ? style.next : style.nextDisabled}>Next</span>
-        {delayValue != null && <span className={style.delayValue}>{delayValue}</span>}
-      </div>
-      <div className={style.timeExpanded}>
-        <EventTimesVertical
-          actionHandler={actionHandler}
-          timeStart={data.timeStart}
-          timeEnd={data.timeEnd}
-          duration={data.duration}
-          delay={delay}
-          previousEnd={previousEnd}
-          className={style.time}
-        />
-      </div>
-
-      <div className={style.titleContainer}>
-        <EditableText
-          label='Title'
-          defaultValue={data.title}
-          placeholder='Add Title'
-          submitHandler={(v) => actionHandler('update', { field: 'title', value: v })}
-        />
-        <EditableText
-          label='Presenter'
-          defaultValue={data.presenter}
-          placeholder='Add Presenter name'
-          submitHandler={(v) => actionHandler('update', { field: 'presenter', value: v })}
-        />
-        <EditableText
-          label='Subtitle'
-          defaultValue={data.subtitle}
-          placeholder='Add Subtitle'
-          submitHandler={(v) => actionHandler('update', { field: 'subtitle', value: v })}
-        />
-        <EditableText
-          label='Note'
-          defaultValue={data.note}
-          placeholder='Add Note'
-          style={{ color: '#d69e2e' }}
-          maxchar={160}
-          submitHandler={(v) => actionHandler('update', { field: 'note', value: v })}
-        />
-        <span className={style.oscLabel}>
-          {`/ontime/goto ${eventIndex + 1}  << OSC >> /ontime/gotoid ${oscid}`}
-        </span>
-      </div>
-      <div className={style.actionOverlay}>
-        <PublicIconBtn actionHandler={actionHandler} active={data.isPublic} />
-        <ActionButtons showAdd showDelay showBlock actionHandler={actionHandler} />
-        <DeleteIconBtn actionHandler={actionHandler} />
-      </div>
-    </>
-  );
-};
-
-ExpandedBlock.propTypes = {
-  provided: PropTypes.any.isRequired,
-  data: PropTypes.object.isRequired,
-  eventIndex: PropTypes.number.isRequired,
-  next: PropTypes.bool.isRequired,
-  delay: PropTypes.number,
-  delayValue: PropTypes.string,
-  previousEnd: PropTypes.number,
-  actionHandler: PropTypes.func.isRequired,
-};
-
-const CollapsedBlock = (props) => {
-  const { provided, data, next, delay, delayValue, previousEnd, actionHandler } = props;
-
-  return (
-    <>
-      <span className={style.drag} {...provided.dragHandleProps}>
-        <FiMoreVertical />
-      </span>
-
-      <div className={style.indicators}>
-        <span className={next ? style.next : style.nextDisabled}>Next</span>
-        {delayValue != null && <span className={style.delayValue}>{delayValue}</span>}
-      </div>
-      <EventTimes
-        actionHandler={actionHandler}
-        timeStart={data.timeStart}
-        timeEnd={data.timeEnd}
-        delay={delay}
-        previousEnd={previousEnd}
-        className={style.time}
-      />
-      <div className={style.titleContainer}>
-        <EditableText
-          label='Title'
-          defaultValue={data.title}
-          placeholder='Add Title'
-          submitHandler={(v) => actionHandler('update', { field: 'title', value: v })}
-        />
-      </div>
-      <div className={style.actionOverlay}>
-        <PublicIconBtn actionHandler={actionHandler} active={data.isPublic} />
-        <ActionButtons showAdd showDelay showBlock actionHandler={actionHandler} />
-      </div>
-    </>
-  );
-};
-
-CollapsedBlock.propTypes = {
-  provided: PropTypes.any.isRequired,
-  data: PropTypes.object.isRequired,
-  next: PropTypes.bool.isRequired,
-  delay: PropTypes.any,
-  delayValue: PropTypes.string,
-  previousEnd: PropTypes.number.isRequired,
-  actionHandler: PropTypes.func.isRequired,
-};
+import CollapsedBlock from './CollapsedBlock';
+import ExpandedBlock from './ExpandedBlock';
+import style from './EventBlock.module.scss';
 
 export default function EventBlock(props) {
   const { data, selected, delay, index, eventIndex, previousEnd, actionHandler, next } = props;

client/src/features/editors/EventBlock/EventBlock.module.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/main' as *;
+
 /* ============= COMMON ============= */
 .event {
   margin: 0.2em 0;
@@ -8,11 +10,11 @@
   border-radius: 8px;
   font-size: 15px;
   border: 1px solid rgba(255, 255, 255, 0.05);
+  background-color: $bg-gray-950;
 
   display: grid;
   gap: 0.5em;
 
-  background-color: rgba(255, 255, 255, 0.02);
 }
 
 .active {
@@ -69,7 +71,7 @@
 .nextDisabled {
   width: max-content;
   padding: 0 0.2em;
-  color: #4bffab;
+  color: $ontime-accent;
   transition: 0.3s;
 }
 
@@ -199,7 +201,6 @@
   align-content: center;
   align-self: flex-start;
   padding-top: 0.2em;
-  gap: 0.5em;
   opacity: 0.8;
   transition: linear 0.1s;
 }

client/src/features/editors/EventBlock/ExpandedBlock.jsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { VStack } from '@chakra-ui/react';
+import { FiMoreVertical } from '@react-icons/all-files/fi/FiMoreVertical';
+import EventTimesVertical from '../../../common/components/eventTimes/EventTimesVertical';
+import EditableText from '../../../common/input/EditableText';
+import PublicIconBtn from '../../../common/components/buttons/PublicIconBtn';
+import ActionButtons from '../list/ActionButtons';
+import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
+import PropTypes from 'prop-types';
+import style from './EventBlock.module.scss';
+
+export default function ExpandedBlock(props) {
+  const { provided, data, eventIndex, next, delay, delayValue, previousEnd, actionHandler } = props;
+
+  const oscid = data?.id || '...';
+
+  return (
+    <>
+      <span className={style.drag} {...provided.dragHandleProps}>
+        <FiMoreVertical />
+      </span>
+
+      <div className={style.indicators}>
+        <span className={next ? style.next : style.nextDisabled}>Next</span>
+        {delayValue != null && <span className={style.delayValue}>{delayValue}</span>}
+      </div>
+      <div className={style.timeExpanded}>
+        <EventTimesVertical
+          actionHandler={actionHandler}
+          timeStart={data.timeStart}
+          timeEnd={data.timeEnd}
+          duration={data.duration}
+          delay={delay}
+          previousEnd={previousEnd}
+          className={style.time}
+        />
+      </div>
+
+      <div className={style.titleContainer}>
+        <EditableText
+          label='Title'
+          defaultValue={data.title}
+          placeholder='Add Title'
+          submitHandler={(v) => actionHandler('update', { field: 'title', value: v })}
+        />
+        <EditableText
+          label='Presenter'
+          defaultValue={data.presenter}
+          placeholder='Add Presenter name'
+          submitHandler={(v) => actionHandler('update', { field: 'presenter', value: v })}
+        />
+        <EditableText
+          label='Subtitle'
+          defaultValue={data.subtitle}
+          placeholder='Add Subtitle'
+          submitHandler={(v) => actionHandler('update', { field: 'subtitle', value: v })}
+        />
+        <EditableText
+          label='Note'
+          defaultValue={data.note}
+          placeholder='Add Note'
+          style={{ color: '#d69e2e' }}
+          maxchar={160}
+          submitHandler={(v) => actionHandler('update', { field: 'note', value: v })}
+        />
+        <span className={style.oscLabel}>
+          {`/ontime/goto ${eventIndex + 1}  << OSC >> /ontime/gotoid ${oscid}`}
+        </span>
+      </div>
+      <VStack spacing='0.5em' className={style.actionOverlay}>
+        <PublicIconBtn actionHandler={actionHandler} active={data.isPublic} />
+        <ActionButtons showAdd showDelay showBlock actionHandler={actionHandler} />
+        <DeleteIconBtn actionHandler={actionHandler} />
+      </VStack>
+    </>
+  );
+};
+
+ExpandedBlock.propTypes = {
+  provided: PropTypes.any.isRequired,
+  data: PropTypes.object.isRequired,
+  eventIndex: PropTypes.number.isRequired,
+  next: PropTypes.bool.isRequired,
+  delay: PropTypes.number,
+  delayValue: PropTypes.string,
+  previousEnd: PropTypes.number,
+  actionHandler: PropTypes.func.isRequired,
+};

client/src/features/editors/list/EventList.jsx

@@ -127,7 +127,7 @@ export default function EventList(props) {
   }, [selectedId, isCursorLocked]);
 
   if (events.length < 1) {
-    return <Empty text='No Events' />;
+    return <Empty text='No Events' style={{marginTop: "10vh"}} />;
   }
 
   // DND
@@ -178,7 +178,7 @@ export default function EventList(props) {
                     )}
                     <div
                       ref={cursor === index ? cursorRef : undefined}
-                      className={cursor === index ? style.cursor : undefined}
+                      className={cursor === index ? style.cursor : ''}
                     >
                       <EventListItem
                         type={e.type}

client/src/features/editors/list/EventListItem.jsx

@@ -27,7 +27,6 @@ const EventListItem = (props) => {
     eventsHandler,
     delay,
     previousEnd,
-    ...rest
   } = props;
   const { emitError } = useContext(LoggingContext);
   const { starTimeIsLastEnd, defaultPublic } = useContext(LocalEventSettingsContext);
@@ -42,6 +41,7 @@ const EventListItem = (props) => {
     (start, end) => (start > end ? end + 86400000 - start : end - start),
     []
   );
+
   // Create / delete new events
   const actionHandler = useCallback(
     (action, payload) => {
@@ -101,7 +101,7 @@ const EventListItem = (props) => {
           break;
       }
     },
-    [data, defaultPublic, emitError, eventsHandler, index, starTimeIsLastEnd]
+    [calculateDuration, data, defaultPublic, emitError, eventsHandler, index, starTimeIsLastEnd]
   );
 
   switch (type) {

client/src/features/editors/list/EventListWrapper.jsx

@@ -39,7 +39,7 @@ export default function EventListWrapper() {
       }
 
       // optimistically update object, temp ID until refetch
-      let optimistic = [...previousEvents];
+      const optimistic = [...previousEvents];
       optimistic.splice(newEvent.order, 0, {
         ...newEvent,
         id: new Date().toISOString(),
@@ -128,8 +128,7 @@ export default function EventListWrapper() {
       // Snapshot the previous value
       const previousEvents = queryClient.getQueryData(EVENTS_TABLE);
 
-      let filtered = [...previousEvents];
-      filtered.filter((e) => e.id === 'eventId');
+      const filtered = [...previousEvents].filter((e) => e.id === 'eventId')
 
       // optimistically update object
       queryClient.setQueryData(EVENTS_TABLE, filtered);
@@ -158,7 +157,7 @@ export default function EventListWrapper() {
       // Snapshot the previous value
       const previousEvents = queryClient.getQueryData(EVENTS_TABLE);
 
-      let clear = [];
+      const clear = [];
 
       // optimistically update object
       queryClient.setQueryData(EVENTS_TABLE, clear);
@@ -225,13 +224,13 @@ export default function EventListWrapper() {
 
   // Events API
   const eventsHandler = useCallback(
-    async (action, payload, options = undefined) => {
+    async (action, payload, options) => {
       switch (action) {
         case 'add':
           try {
-            let newEvent = { ...payload };
+            const newEvent = { ...payload };
             // there is an option to pass an index of an array to use as start time
-            if (options?.startIsLastEnd !== undefined) {
+            if (typeof options?.startIsLastEnd !== 'undefined') {
               newEvent.timeStart = data[options.startIsLastEnd].timeEnd || 0;
             }
             // hard coding duration value to be as expected for now

client/src/features/editors/list/List.module.scss

@@ -1,10 +1,11 @@
+@use '../../../styles/main' as *;
+@use '../../../styles/mixins' as *;
+
 .eventContainer {
+  @include second-container;
   margin-top: 1em;
   display: flex;
   flex-direction: column;
-  background-color: rgba(0, 0, 0, 0.05);
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  border-radius: 4px;
   padding: 8px;
   overflow-y: scroll;
   height: 100%;
@@ -21,14 +22,6 @@
 }
 
 .cursor {
-  width: 100%;
-  background: linear-gradient(
-                  180deg,
-                  #ff7597 2%,
-                  #0001 3%,
-                  #0001 97%,
-                  #ff7597 98%
-  );
-
+  box-shadow: 2px 2px 0 $ontime-pink;
   border-radius: 14px;
 }