Timer/blinking and blackout buttons (#406)

*feat: timer blink

*feat: blackout

---------

Co-authored-by: Fabian Posenau <fabian@fphome.de>
Co-authored-by: cv <34649812+cpvalente@users.noreply.github.com>

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 (
-    <div className={style.inputRow}>
+    <div className={classes}>
       <label className={`${style.label} ${visible ? style.active : ''}`}>{label}</label>
       <div className={style.inputItems}>
         <Input
@@ -39,7 +42,7 @@ export default function InputRow(props: InputRowProps) {
           tooltip={visible ? 'Make invisible' : 'Make visible'}
           aria-label={`Toggle ${label}`}
           openDelay={tooltipDelayMid}
-          icon={visible? <IoEye size='18px' /> : <IoEyeOffOutline size='18px' />}
+          icon={visible ? <IoEye size='18px' /> : <IoEyeOffOutline size='18px' />}
           variant={visible ? 'ontime-filled' : 'ontime-subtle'}
           size='sm'
         />

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;
+}

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 (
     <div className={style.messageContainer}>
-      <InputRow
-        label='Timer screen message'
-        placeholder='Shown in stage timer'
-        text={data.timerMessage.text || ''}
-        visible={data.timerMessage.visible || false}
-        changeHandler={(newValue) => setMessage.presenterText(newValue)}
-        actionHandler={() => setMessage.presenterVisible(!data.timerMessage.visible)}
-      />
       <InputRow
         label='Public / Backstage screen message'
         placeholder='Shown in public and backstage screens'
@@ -37,7 +33,33 @@ export default function MessageControl() {
         changeHandler={(newValue) => setMessage.lowerText(newValue)}
         actionHandler={() => setMessage.lowerVisible(!data.lowerMessage.visible)}
       />
-      <div className={style.onAirSection}>
+      <InputRow
+        label='Timer message'
+        placeholder='Shown in stage timer'
+        text={data.timerMessage.text || ''}
+        visible={data.timerMessage.visible || false}
+        changeHandler={(newValue) => setMessage.presenterText(newValue)}
+        actionHandler={() => setMessage.presenterVisible(!data.timerMessage.visible)}
+      />
+      <div className={style.buttonSection}>
+        <label className={style.label}>Timer messsage blink</label>
+        <label className={style.label}>Blackout timer screens</label>
+        <Button
+          className={`${data.timerMessage.timerBlink ? style.blink : ''}`}
+          variant={data.timerMessage.timerBlink ? 'ontime-filled' : 'ontime-subtle'}
+          leftIcon={data.timerMessage.timerBlink ? <IoSunny size='24px' /> : <IoSunnyOutline size='24px' />}
+          onClick={() => setMessage.timerBlink(!data.timerMessage.timerBlink)}
+          data-testid='toggle timer blink'
+        />
+        <Button
+          className={style.blackoutButton}
+          variant={data.timerMessage.timerBlackout ? 'ontime-filled' : 'ontime-subtle'}
+          leftIcon={data.timerMessage.timerBlackout ? <IoEye size='24px' /> : <IoEyeOffOutline size='24px' />}
+          onClick={() => setMessage.timerBlackout(!data.timerMessage.timerBlackout)}
+          data-testid='toggle timer blackout'
+        />
+      </div>
+      <div className={`${style.onAirSection} ${style.padTop}`}>
         <label className={style.label}>Toggle On Air state</label>
         <Button
           variant={data.onAir ? 'ontime-filled' : 'ontime-subtle'}