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

feat(ui): fit the message control panel on a small laptop

Browse Source 
The panel absorbs whatever height the playback control above it leaves, and
its content was a fixed stack taller than that space on a 1280x800 screen -
with the container set to hide overflow, the secondary message input was
silently clipped off the bottom.

The stage preview is now the only elastic element and the controls are the
fixed floor, which is the way round an operator needs it. The control stack
also gets shorter: blink and blackout share a row, and the secondary source
select moves next to the secondary text input.

That regrouping removes the duelling owners of `secondarySource`. The select
picks the source and the eye toggles the line on and off, so the "Show
secondary" button - which wrote the same field from a second place, and made
picking an aux read as "secondary message hidden" - is gone along with the
local mirror of the remote state it needed.

Also: blackout now uses the destructive button variant, the toggles expose
`aria-pressed`, and the input rows use the shared editor label.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011CHxSQ6nWHuyar8feieRra
This commit is contained in:
Carlos Valente
2026-08-26 12:39:02 +00:00
parent f208f148b7
commit 03fa62f3a1
11 changed files with 131 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/hooks/useSocket.ts
+8 -4
View File
@@ -22,10 +22,14 @@ export const useRundownEditor = createSelector((state: RuntimeStore) => ({
nextEventId: state.eventNext?.id ?? null,
}));
export const useTimerViewControl = createSelector((state: RuntimeStore) => ({
export const useScreenControl = createSelector((state: RuntimeStore) => ({
blackout: state.message.timer.blackout,
blink: state.message.timer.blink,
secondarySource: state.message.timer.secondarySource,
isScreenModified:
state.message.timer.visible ||
state.message.timer.blink ||
state.message.timer.blackout ||
state.message.timer.secondarySource !== null,
}));
export const useTimerMessageInput = createSelector((state: RuntimeStore) => ({
@@ -33,9 +37,9 @@ export const useTimerMessageInput = createSelector((state: RuntimeStore) => ({
visible: state.message.timer.visible,
}));
export const useExternalMessageInput = createSelector((state: RuntimeStore) => ({
export const useSecondaryMessageInput = createSelector((state: RuntimeStore) => ({
text: state.message.secondary,
visible: state.message.timer.secondarySource === 'secondary',
source: state.message.timer.secondarySource,
}));
export const useTimerStatus = createSelector((state: RuntimeStore) => ({