mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-19 14:14:17 +00:00
Claude
8253f1c119
The overlay is the on screen transport, for whoever is not at a keyboard, which on a tablet prompter is everyone. It was written from scratch and three things it needed already existed. Its buttons are now IconButton in the subtle-white variant, the same as the floating navigation uses over a dark viewer, which removes a block of bespoke button styling that had reinvented sizing, centring, radius and hover. The help overlay's close button likewise uses the shared Button. Visibility now comes from useFadeOutOnInactivity, the hook the floating navigation uses, so the overlay fades once the operator stops moving. It used to fade on whether the script was rolling, which meant a paused prompter kept a control bar in the talent's eyeline indefinitely. Following the shared pattern turned up a bug in the old one. The floating navigation stops taking clicks once faded, and this did not, so there was an invisible transport across the foot of the script where a stray tap would pause the read. It now matches. The operator view's FollowButton is deliberately not reused. It is a labelled pill fixed to the bottom centre, which is exactly where this group sits, so the two would land on top of each other. Same icon and same job, folded into the transport instead. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Cb8RVPNQ2ETPJxdy4b8CHf
49 lines
1.9 KiB
TypeScript
49 lines
1.9 KiB
TypeScript
import Button from '../../../common/components/buttons/Button';
|
|
|
|
interface HelpOverlayProps {
|
|
onClose: () => void;
|
|
}
|
|
|
|
const shortcuts: { keys: string; action: string }[] = [
|
|
{ keys: 'Space', action: 'Start / stop scrolling' },
|
|
{ keys: '← / →', action: 'Slower / faster (hold Shift for larger steps)' },
|
|
{ keys: '↑ / ↓', action: 'Nudge one line' },
|
|
{ keys: 'Page Up / Page Down', action: 'Jump a screen' },
|
|
{ keys: 'Home', action: 'Rewind to the top' },
|
|
{ keys: 'End', action: 'Jump to the end' },
|
|
{ keys: 'Esc', action: 'Rewind and stop' },
|
|
{ keys: '+ / -', action: 'Font size' },
|
|
{ keys: '0', action: 'Reset font size' },
|
|
{ keys: 'F / Shift + F', action: 'Flip horizontally / vertically' },
|
|
{ keys: 'L', action: 'Follow the loaded event again' },
|
|
{ keys: '?', action: 'Show this list' },
|
|
];
|
|
|
|
/**
|
|
* Most prompter foot pedals and hand controllers are USB HID devices which send
|
|
* these same keystrokes, so this list doubles as the hardware reference.
|
|
*/
|
|
export default function HelpOverlay({ onClose }: HelpOverlayProps) {
|
|
return (
|
|
<div className='teleprompter__help' role='dialog' aria-label='Keyboard shortcuts'>
|
|
<div className='teleprompter__help-card'>
|
|
<div className='teleprompter__help-title'>Controls</div>
|
|
<dl className='teleprompter__help-list'>
|
|
{shortcuts.map(({ keys, action }) => (
|
|
<div key={keys} className='teleprompter__help-row'>
|
|
<dt className='teleprompter__help-keys'>{keys}</dt>
|
|
<dd className='teleprompter__help-action'>{action}</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
<div className='teleprompter__help-note'>
|
|
Foot pedals and hand controllers which emit these keys work without any setup.
|
|
</div>
|
|
<Button variant='subtle-white' onClick={onClose} className='teleprompter__help-close'>
|
|
Close
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|