Feat/table part1

client/src/common/components/buttons/ActionButtons.jsx

@@ -7,6 +7,8 @@ import { FiMinusCircle } from '@react-icons/all-files/fi/FiMinusCircle';
 import { FiPlus } from '@react-icons/all-files/fi/FiPlus';
 import PropTypes from 'prop-types';
 
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
 export default function ActionButtons(props) {
   const { showAdd, showDelay, showBlock, actionHandler } = props;
 
@@ -17,7 +19,7 @@ export default function ActionButtons(props) {
 
   return (
     <Menu isLazy lazyBehavior='unmount'>
-      <Tooltip label='Add ...' delay={500}>
+      <Tooltip label='Add ...' delay={tooltipDelayMid}>
         <MenuButton
           as={IconButton}
           aria-label='Options'

client/src/common/components/buttons/PauseIconBtn.jsx

@@ -4,10 +4,12 @@ import { Tooltip } from '@chakra-ui/tooltip';
 import { IoPause } from '@react-icons/all-files/io5/IoPause';
 import PropTypes from 'prop-types';
 
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
 export default function PauseIconBtn(props) {
   const { clickhandler, active, disabled, ...rest } = props;
   return (
-    <Tooltip label='Pause timer' openDelay={500} shouldWrapChildren={disabled}>
+    <Tooltip label='Pause timer' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
       <IconButton
         icon={<IoPause size='24px' />}
         colorScheme='orange'

client/src/common/components/buttons/RollIconBtn.jsx

@@ -4,10 +4,12 @@ import { Tooltip } from '@chakra-ui/tooltip';
 import { IoTimeOutline } from '@react-icons/all-files/io5/IoTimeOutline';
 import PropTypes from 'prop-types';
 
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
 export default function RollIconBtn(props) {
   const { clickhandler, active, disabled, ...rest } = props;
   return (
-    <Tooltip label='Roll mode' openDelay={500} shouldWrapChildren={disabled}>
+    <Tooltip label='Roll mode' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
       <IconButton
         icon={<IoTimeOutline size='24px' />}
         colorScheme='blue'

client/src/common/components/buttons/StartIconBtn.jsx

@@ -4,10 +4,12 @@ import { Tooltip } from '@chakra-ui/tooltip';
 import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
 import PropTypes from 'prop-types';
 
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
 export default function StartIconBtn(props) {
   const { clickhandler, active, disabled, ...rest } = props;
   return (
-    <Tooltip label='Start timer' openDelay={500} shouldWrapChildren={disabled}>
+    <Tooltip label='Start timer' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
       <IconButton
         icon={<IoPlay size='24px' />}
         colorScheme='green'

client/src/common/components/buttons/TooltipActionBtn.jsx

@@ -4,9 +4,9 @@ import { Tooltip } from '@chakra-ui/tooltip';
 import PropTypes from 'prop-types';
 
 export default function TooltipActionBtn(props) {
-  const { clickHandler, icon, color, size='xs', tooltip, ...rest } = props;
+  const { clickHandler, icon, color, size='xs', tooltip, openDelay = 0, ...rest } = props;
   return (
-    <Tooltip label={tooltip}>
+    <Tooltip label={tooltip} openDelay={openDelay}>
       <IconButton
         aria-label={tooltip}
         size={size}
@@ -23,5 +23,6 @@ TooltipActionBtn.propTypes = {
   icon: PropTypes.element,
   color: PropTypes.string,
   size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-  tooltip: PropTypes.string
+  tooltip: PropTypes.string,
+  openDelay: PropTypes.number
 }

client/src/common/components/buttons/TransportIconBtn.jsx

@@ -3,10 +3,12 @@ import { IconButton } from '@chakra-ui/button';
 import { Tooltip } from '@chakra-ui/tooltip';
 import PropTypes from 'prop-types';
 
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
 export default function TransportIconBtn(props) {
   const { clickHandler, icon, tooltip, disabled, ...rest } = props;
   return (
-    <Tooltip label={tooltip} openDelay={500} shouldWrapChildren={disabled}>
+    <Tooltip label={tooltip} openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
       <IconButton
         icon={icon}
         colorScheme='white'

client/src/common/components/buttons/UnloadIconBtn.jsx

@@ -4,10 +4,12 @@ import { Tooltip } from '@chakra-ui/tooltip';
 import { IoStop } from '@react-icons/all-files/io5/IoStop';
 import PropTypes from 'prop-types';
 
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
 export default function UnloadIconBtn(props) {
   const { clickHandler, disabled, ...rest } = props;
   return (
-    <Tooltip label='Unload event' openDelay={500} shouldWrapChildren={disabled}>
+    <Tooltip label='Unload event' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
       <IconButton
         icon={<IoStop size='22px' />}
         colorScheme='red'

client/src/common/components/nav/NavLogo.jsx

@@ -2,11 +2,14 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { IconButton } from '@chakra-ui/button';
 import { Image } from '@chakra-ui/react';
+import { IoContract } from '@react-icons/all-files/io5/IoContract';
 import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
 import navlogo from 'assets/images/logos/LOGO-72.png';
 import { AnimatePresence, motion } from 'framer-motion';
 import PropTypes from 'prop-types';
 
+import useFullscreen from '../../hooks/useFullscreen';
+
 import navigatorConstants from './navigatorConstants';
 
 import style from './NavLogo.module.scss';
@@ -22,6 +25,7 @@ const navButtonStyle = {
 export default function NavLogo(props) {
   const { isHidden } = props;
   const [showNav, setShowNav] = useState(false);
+  const { isFullScreen, toggleFullScreen } = useFullscreen();
 
   const handleClick = useCallback(() => {
     setShowNav((prev) => !prev);
@@ -37,16 +41,6 @@ export default function NavLogo(props) {
     }
   }, []);
 
-  const toggleFullscreen = useCallback(() => {
-    if (!document.fullscreenElement) {
-      document.documentElement.requestFullscreen();
-    } else {
-      if (document.exitFullscreen) {
-        document.exitFullscreen();
-      }
-    }
-  }, []);
-
   useEffect(() => {
     // attach the event listener
     document.addEventListener('keydown', handleKeyPress);
@@ -83,8 +77,8 @@ export default function NavLogo(props) {
             >
               <IconButton
                 aria-label='Toggle Fullscreen'
-                icon={<IoExpand />}
-                onClick={toggleFullscreen}
+                icon={isFullScreen ? <IoContract /> : <IoExpand />}
+                onClick={toggleFullScreen}
                 {...navButtonStyle}
               />
             </motion.div>
@@ -96,10 +90,7 @@ export default function NavLogo(props) {
               className={style.nav}
             >
               {navigatorConstants.map((route) => (
-                <Link
-                  to={route.url}
-                  key={route.url}
-                  {...tabProps}>
+                <Link to={route.url} key={route.url} {...tabProps}>
                   {route.label}
                 </Link>
               ))}

client/src/common/hooks/useFullscreen.js

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useState } from 'react';
+
+
+export default function useFullscreen() {
+  const [isFullScreen, setFullScreen] = useState(document?.fullscreenElement);
+
+  useEffect(() => {
+    const handleChange = () => {
+      setFullScreen(document?.fullscreenElement);
+    };
+    document.addEventListener('fullscreenchange', handleChange, false);
+    document.addEventListener('resize', handleChange, false);
+
+    return () => {
+      document.removeEventListener('fullscreenchange', handleChange);
+      document.removeEventListener('resize', handleChange);
+    };  }, []);
+
+  const toggleFullScreen = useCallback(() => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+    } else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      }
+    }
+    setFullScreen(document?.fullscreenElement);
+  }, []);
+
+  return { isFullScreen, toggleFullScreen };
+}

client/src/common/utils/dateConfig.js

@@ -1,10 +1,8 @@
+import { mth, mtm, mts } from './timeConstants';
+
 export const timeFormat = 'HH:mm';
 export const timeFormatSeconds = 'HH:mm:ss';
 
-const mts = 1000; // millis to seconds
-const mtm = 1000 * 60; // millis to minutes
-const mth = 1000 * 60 * 60; // millis to hours
-
 /**
  * another go at simpler string formatting (counters)
  * @description Converts seconds to string representing time

client/src/common/utils/time.js

@@ -3,9 +3,8 @@ import { DateTime } from 'luxon';
 import { ontimeQueryClient } from '../../App';
 import { APP_SETTINGS } from '../api/apiConstants';
 
-const mts = 1000; // millis to seconds
-const mtm = 1000 * 60; // millis to minutes
-const mth = 1000 * 60 * 60; // millis to hours
+import { mth, mtm, mts } from './timeConstants';
+
 
 /**
  * Returns current time in milliseconds

client/src/common/utils/timeConstants.js

@@ -0,0 +1,24 @@
+/**
+ * millis to seconds
+ * @type {number}
+ */
+export const mts = 1000;
+
+/**
+ * millis to minutes
+ * @type {number}
+ */
+export const mtm = 1000 * 60;
+
+
+/**
+ * millis to hours
+ * @type {number}
+ */
+export const mth = 1000 * 60 * 60;
+
+/**
+ * milliseconds in a day
+ * @type {number}
+ */
+export const DAY_TO_MS = 86400000;

client/src/features/control/message/InputRow.jsx

@@ -5,13 +5,15 @@ import { Tooltip } from '@chakra-ui/tooltip';
 import { IoSunny } from '@react-icons/all-files/io5/IoSunny';
 import PropTypes from 'prop-types';
 
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
 import style from './MessageControl.module.scss';
 
 export default function InputRow(props) {
   const { label, placeholder, text, visible, actionHandler, changeHandler } = props;
 
   return (
-    <div className={visible && style.inputRowActive}>
+    <div className={`${visible ? style.inputRowActive: ''}`}>
       <span className={style.label}>{label}</span>
       <div className={style.inputItems}>
         <Editable
@@ -21,10 +23,10 @@ export default function InputRow(props) {
           className={style.inline}
           color={text === '' ? '#666' : 'inherit'}
         >
-          <EditablePreview className={style.padleft} />
+          <EditablePreview className={`${style.padleft} ${style.fullWidth}`} />
           <EditableInput className={style.padleft} />
         </Editable>
-        <Tooltip label={visible ? 'Make invisible' : 'Make visible'} openDelay={500}>
+        <Tooltip label={visible ? 'Make invisible' : 'Make visible'} openDelay={tooltipDelayMid}>
           <IconButton
             aria-label='Toggle visibility'
             size='sm'

client/src/features/control/message/MessageControl.jsx

@@ -5,6 +5,8 @@ import { IoMicOffOutline } from '@react-icons/all-files/io5/IoMicOffOutline';
 import { IoMicSharp } from '@react-icons/all-files/io5/IoMicSharp';
 import { useSocket } from 'common/context/socketContext';
 
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
 import InputRow from './InputRow';
 
 import style from './MessageControl.module.scss';
@@ -122,7 +124,7 @@ export default function MessageControl() {
         />
       </div>
       <div className={style.onAirToggle}>
-        <Tooltip label={onAir ? 'Go Off Air' : 'Go On Air'} openDelay={500}>
+        <Tooltip label={onAir ? 'Go Off Air' : 'Go On Air'} openDelay={tooltipDelayMid}>
           <IconButton
             className={style.btn}
             size='md'

client/src/features/control/message/MessageControl.module.scss

@@ -36,10 +36,15 @@
     border-radius: 2px;
   }
 
+  .fullWidth {
+    width: 100%;
+  }
+
   .inputRowActive {
     .label {
       color: $light-bg;
     }
+
     .inline {
       background-color: $light-bg-transparent;
     }

client/src/features/control/playback/PlaybackTimer.jsx

@@ -5,6 +5,7 @@ import TimerDisplay from 'common/components/countdown/TimerDisplay';
 import PropTypes from 'prop-types';
 
 import { stringFromMillis } from '../../../common/utils/time';
+import { tooltipDelayMid } from '../../../ontimeConfig';
 
 import style from './PlaybackControl.module.scss';
 
@@ -69,7 +70,7 @@ const PlaybackTimer = (props) => {
         </>
       )}
       <div className={style.btn}>
-        <Tooltip label='Remove 1 minute' openDelay={500} shouldWrapChildren={disableButtons}>
+        <Tooltip label='Remove 1 minute' openDelay={tooltipDelayMid} shouldWrapChildren={disableButtons}>
           <Button
             {...incrementProps}
             disabled={disableButtons}
@@ -79,7 +80,7 @@ const PlaybackTimer = (props) => {
             -1
           </Button>
         </Tooltip>
-        <Tooltip label='Add 1 minute' openDelay={500} shouldWrapChildren={disableButtons}>
+        <Tooltip label='Add 1 minute' openDelay={tooltipDelayMid} shouldWrapChildren={disableButtons}>
           <Button
             {...incrementProps}
             disabled={disableButtons}
@@ -89,7 +90,7 @@ const PlaybackTimer = (props) => {
             +1
           </Button>
         </Tooltip>
-        <Tooltip label='Remove 5 minutes' openDelay={500} shouldWrapChildren={disableButtons}>
+        <Tooltip label='Remove 5 minutes' openDelay={tooltipDelayMid} shouldWrapChildren={disableButtons}>
           <Button
             {...incrementProps}
             disabled={disableButtons}
@@ -99,7 +100,7 @@ const PlaybackTimer = (props) => {
             -5
           </Button>
         </Tooltip>
-        <Tooltip label='Add 5 minutes' openDelay={500} shouldWrapChildren={disableButtons}>
+        <Tooltip label='Add 5 minutes' openDelay={tooltipDelayMid} shouldWrapChildren={disableButtons}>
           <Button
             {...incrementProps}
             disabled={disableButtons}

client/src/features/editors/EntryBlock/EntryBlock.jsx

@@ -8,6 +8,7 @@ import {
   defaultPublicAtom,
   startTimeIsLastEndAtom,
 } from '../../../common/atoms/LocalEventSettings';
+import { tooltipDelayMid } from '../../../ontimeConfig';
 
 import style from './EntryBlock.module.scss';
 
@@ -35,7 +36,7 @@ export default function EntryBlock(props) {
 
   return (
     <div className={`${style.create} ${visible ? style.visible : ''}`}>
-      <Tooltip label='Add Event' openDelay={300}>
+      <Tooltip label='Add Event' openDelay={tooltipDelayMid}>
         <span
           className={style.createEvent}
           onClick={() =>
@@ -50,7 +51,7 @@ export default function EntryBlock(props) {
           E{showKbd && <span className={style.keyboard}>Alt + E</span>}
         </span>
       </Tooltip>
-      <Tooltip label='Add Delay' openDelay={300}>
+      <Tooltip label='Add Delay' openDelay={tooltipDelayMid}>
         <span
           className={`${style.createDelay} ${disableAddDelay ? style.disabled : ''}`}
           onClick={() => eventsHandler('add', { type: 'delay', after: previousId })}
@@ -59,7 +60,7 @@ export default function EntryBlock(props) {
           D{showKbd && <span className={style.keyboard}>Alt + D</span>}
         </span>
       </Tooltip>
-      <Tooltip label='Add Block' openDelay={300}>
+      <Tooltip label='Add Block' openDelay={tooltipDelayMid}>
         <span
           className={`${style.createBlock} ${disableAddBlock ? style.disabled : ''}`}
           onClick={() => eventsHandler('add', { type: 'block', after: previousId })}