cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-09 01:13:55 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor: inactivity checks keyboard and has initial state

Browse Source
This commit is contained in:
Carlos Valente
2025-06-09 10:05:30 +02:00
committed by Carlos Valente
parent 4320ad26a4
commit 5ad69b458d
4 changed files with 32 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/hooks/useFadeOutOnInactivity.tsx
+13 -5
View File
@@ -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
+1 -1
View File
@@ -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
+17 -9
View File
@@ -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
+1
View File
@@ -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();