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 inactiveTime = 3000; // 3 seconds
-  const [isMouseMoved, setIsMouseMoved] = useState(false);
+
+/**
+ * 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 />}

e2e/tests/002-view-navigation.spec.ts

@@ -6,59 +6,67 @@ test.describe('test view navigation feature', () => {
     await page.goto('http://localhost:4001/');
     page.locator('data-test-id=timer-view');
 
-    await page.getByRole('button', { name: 'toggle menu' }).click();
+    await openNavigationMenu();
     page.locator('data-test-id=navigation__menu');
     await page.getByRole('link', { name: 'Minimal Timer' }).click();
     page.locator('data-test-id=minimal-timer');
     await expect(page).toHaveURL('http://localhost:4001/minimal');
 
-    await page.getByRole('button', { name: 'toggle menu' }).click();
+    await openNavigationMenu();
     page.locator('data-test-id=navigation__menu');
     await page.getByRole('link', { name: 'Wall Clock', exact: true }).click();
     page.locator('data-test-id=clock-view');
     await expect(page).toHaveURL('http://localhost:4001/clock');
 
-    await page.getByRole('button', { name: 'toggle menu' }).click();
+    await openNavigationMenu();
     page.locator('data-test-id=navigation__menu');
     await page.getByRole('link', { name: 'timeline' }).click();
     page.locator('data-test-id=timeline-view');
     await expect(page).toHaveURL('http://localhost:4001/timeline');
 
-    await page.getByRole('button', { name: 'toggle menu' }).click();
+    await openNavigationMenu();
     page.locator('data-test-id=navigation__menu');
     await page.getByRole('link', { name: 'Backstage' }).click();
     page.locator('data-test-id=backstage-view');
     await expect(page).toHaveURL('http://localhost:4001/backstage');
 
-    await page.getByRole('button', { name: 'toggle menu' }).click();
+    await openNavigationMenu();
     page.locator('data-test-id=navigation__menu');
     await page.getByRole('link', { name: 'Lower Thirds' }).click();
     await expect(page).toHaveURL('http://localhost:4001/lower');
     const errorBoundary = page.locator('data-test-id=error-container');
     await expect(errorBoundary).toHaveCount(0);
 
-    await page.getByRole('button', { name: 'toggle menu' }).click();
+    await openNavigationMenu();
     page.locator('data-test-id=navigation__menu');
     await page.getByRole('link', { name: 'Studio Clock' }).click();
     page.locator('data-test-id=studio-view');
     await expect(page).toHaveURL('http://localhost:4001/studio');
 
-    await page.getByRole('button', { name: 'toggle menu' }).click();
+    await openNavigationMenu();
     page.locator('data-test-id=navigation__menu');
     await page.getByRole('link', { name: 'Countdown' }).click();
     page.locator('data-test-id=countdown-view');
     await expect(page).toHaveURL('http://localhost:4001/countdown');
 
-    await page.getByRole('button', { name: 'toggle menu' }).click();
+    await openNavigationMenu();
     page.locator('data-test-id=navigation__menu');
     await page.getByRole('link', { name: 'Project Info' }).click();
     page.locator('data-test-id=project-view');
     await expect(page).toHaveURL('http://localhost:4001/info');
 
-    await page.getByRole('button', { name: 'toggle menu' }).click();
+    await openNavigationMenu();
     page.locator('data-test-id=navigation__menu');
     await page.getByRole('link', { name: 'Timer', exact: true }).click();
     page.locator('data-test-id=timer-view');
     await expect(page).toHaveURL('http://localhost:4001/timer');
+
+    /**
+     * We need to hover to activate the menu button
+     */
+    async function openNavigationMenu() {
+      await page.mouse.move(Math.random() * 100, Math.random() * 100);
+      await page.getByRole('button', { name: 'toggle menu' }).click({ force: true });
+    }
   });
 });

e2e/tests/features/207-view-params.spec.ts

@@ -5,6 +5,7 @@ test('View params configures timer view', async ({ page }) => {
 
   await expect(page.getByText('TIME NOW')).toBeInViewport();
 
+  await page.mouse.move(Math.random() * 100, Math.random() * 100);
   await page.getByTestId('navigation__toggle-settings').click();
   await page.locator('label').filter({ hasText: 'Hide Time NowHides the Time' }).locator('span').nth(2).click();
   await page.getByRole('button', { name: 'Save' }).click();