diff --git a/apps/client/src/common/hooks/useSocket.ts b/apps/client/src/common/hooks/useSocket.ts index 7703f8343..606b5e9a3 100644 --- a/apps/client/src/common/hooks/useSocket.ts +++ b/apps/client/src/common/hooks/useSocket.ts @@ -32,6 +32,8 @@ export const setMessage = { lowerText: (payload: string) => socketSendJson('set-lower-message-text', payload), lowerVisible: (payload: boolean) => socketSendJson('set-lower-message-visible', payload), onAir: (payload: boolean) => socketSendJson('set-onAir', payload), + timerBlink: (payload: boolean) => socketSendJson('set-timer-blink', payload), + timerBlackout: (payload: boolean) => socketSendJson('set-timer-blackout', payload), }; export const usePlaybackControl = () => { diff --git a/apps/client/src/common/stores/runtime.ts b/apps/client/src/common/stores/runtime.ts index f75b9d29f..321e3b5f2 100644 --- a/apps/client/src/common/stores/runtime.ts +++ b/apps/client/src/common/stores/runtime.ts @@ -22,6 +22,8 @@ export const runtimeStorePlaceholder = { timerMessage: { text: '', visible: false, + timerBlink: false, + timerBlackout: false, }, publicMessage: { text: '', diff --git a/apps/client/src/features/control/message/InputRow.tsx b/apps/client/src/features/control/message/InputRow.tsx index 369bd8d99..9683dec02 100644 --- a/apps/client/src/features/control/message/InputRow.tsx +++ b/apps/client/src/features/control/message/InputRow.tsx @@ -3,6 +3,7 @@ import { IoEye } from '@react-icons/all-files/io5/IoEye'; import { IoEyeOffOutline } from '@react-icons/all-files/io5/IoEyeOffOutline'; import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn'; +import { cx } from '../../../common/utils/styleUtils'; import { tooltipDelayMid } from '../../../ontimeConfig'; import style from './InputRow.module.scss'; @@ -14,17 +15,19 @@ interface InputRowProps { visible?: boolean; actionHandler: (action: string, payload: object) => void; changeHandler: (newValue: string) => void; + className?: string; } export default function InputRow(props: InputRowProps) { - const { label, placeholder, text, visible, actionHandler, changeHandler } = props; + const { label, placeholder, text, visible, actionHandler, changeHandler, className } = props; const handleInputChange = (newValue: string) => { changeHandler(newValue); }; + const classes = cx([style.inputRow, className]); return ( -
+
: } + icon={visible ? : } variant={visible ? 'ontime-filled' : 'ontime-subtle'} size='sm' /> diff --git a/apps/client/src/features/control/message/MessageControl.module.scss b/apps/client/src/features/control/message/MessageControl.module.scss index 6dd841962..ab966b116 100644 --- a/apps/client/src/features/control/message/MessageControl.module.scss +++ b/apps/client/src/features/control/message/MessageControl.module.scss @@ -7,12 +7,18 @@ } .onAirSection { - margin-top: $section-spacing; display: flex; flex-direction: column; gap: $element-spacing; } +.buttonSection { + display: grid; + grid-template-columns: 1fr 1fr; + gap: $element-spacing; + margin-top: -0.5rem; +} + .label { font-size: $inner-section-text-size; color: $label-gray; @@ -21,3 +27,7 @@ color: $action-text-color; } } + +.padTop { + margin-top: $section-spacing; +} diff --git a/apps/client/src/features/control/message/MessageControl.tsx b/apps/client/src/features/control/message/MessageControl.tsx index 8bea4648a..640e9eb21 100644 --- a/apps/client/src/features/control/message/MessageControl.tsx +++ b/apps/client/src/features/control/message/MessageControl.tsx @@ -1,6 +1,10 @@ import { Button } from '@chakra-ui/react'; +import { IoEye } from '@react-icons/all-files/io5/IoEye'; +import { IoEyeOffOutline } from '@react-icons/all-files/io5/IoEyeOffOutline'; import { IoMicOffOutline } from '@react-icons/all-files/io5/IoMicOffOutline'; import { IoMicSharp } from '@react-icons/all-files/io5/IoMicSharp'; +import { IoSunny } from '@react-icons/all-files/io5/IoSunny'; +import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'; import { setMessage, useMessageControl } from '../../../common/hooks/useSocket'; @@ -13,14 +17,6 @@ export default function MessageControl() { return (
- setMessage.presenterText(newValue)} - actionHandler={() => setMessage.presenterVisible(!data.timerMessage.visible)} - /> setMessage.lowerText(newValue)} actionHandler={() => setMessage.lowerVisible(!data.lowerMessage.visible)} /> -
+ setMessage.presenterText(newValue)} + actionHandler={() => setMessage.presenterVisible(!data.timerMessage.visible)} + /> +
+ + +
+