refactor: inactivity checks keyboard and has initial state

apps/client/src/common/hooks/useFadeOutOnInactivity.tsx

@@ -2,30 +2,38 @@ import { useEffect, useState } from 'react';
 
 import { throttle } from '../utils/throttle';
 
-export const useFadeOutOnInactivity = () => {
-  const [isMouseMoved, setIsMouseMoved] = useState(false);
+const inactiveTime = 3000; // 3 seconds
+
+/**
+ * Provides whether there has been mouse movement in the page in the last <inactiveTime>
+ */
+export const useFadeOutOnInactivity = (initialState = false) => {
+  const [isUserActive, setIsUserActive] = useState(initialState);
 
   // show on mouse move
   useEffect(() => {
     let fadeOut: NodeJS.Timeout | null = null;
     const setShowMenuTrue = () => {
-      setIsMouseMoved(true);
+      setIsUserActive(true);
       if (fadeOut) {
         clearTimeout(fadeOut);
       }
-      fadeOut = setTimeout(() => setIsMouseMoved(false), 3000);
+      fadeOut = setTimeout(() => setIsUserActive(false), inactiveTime);
     };
 
     const throttledShowMenu = throttle(setShowMenuTrue, 1000);
 
     document.addEventListener('mousemove', throttledShowMenu);
+    document.addEventListener('keydown', throttledShowMenu);
+
     return () => {
       document.removeEventListener('mousemove', throttledShowMenu);
+      document.removeEventListener('keydown', throttledShowMenu);
       if (fadeOut) {
         clearTimeout(fadeOut);
       }
     };
   }, []);
 
-  return isMouseMoved;
+  return isUserActive;
 };

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

@@ -132,7 +132,7 @@ function EventBlockInner(props: EventBlockInnerProps) {
           duration={duration}
         />
       )}
-      <div className={style.statusElements} id='block-status' data-timerType={timerType}>
+      <div className={style.statusElements} id='block-status' data-timertype={timerType}>
         <span className={style.eventNote}>{note}</span>
         <div className={loaded ? style.progressBg : `${style.progressBg} ${style.hidden}`}>
           {loaded && <EventBlockProgressBar />}