refactor: rename external message to secondary message

apps/client/src/features/control/message/MessageControl.tsx

@@ -1,7 +1,7 @@
 import { IoEye, IoEyeOffOutline } from 'react-icons/io5';
 
 import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
-import { setMessage, useExternalMessageInput, useTimerMessageInput } from '../../../common/hooks/useSocket';
+import { setMessage, useExternalMessageInput as useSecondaryMessageInput, useTimerMessageInput } from '../../../common/hooks/useSocket';
 import { tooltipDelayMid } from '../../../ontimeConfig';
 
 import InputRow from './InputRow';
@@ -12,7 +12,7 @@ export default function MessageControl() {
     <>
       <TimerControlsPreview />
       <TimerMessageInput />
-      <ExternalInput />
+      <SecondaryInput />
     </>
   );
 }
@@ -41,29 +41,29 @@ function TimerMessageInput() {
   );
 }
 
-function ExternalInput() {
-  const { text, visible } = useExternalMessageInput();
+function SecondaryInput() {
+  const { text, visible } = useSecondaryMessageInput();
 
-  const toggleExternal = () => {
+  const toggleSecondary = () => {
     if (visible) {
       setMessage.timerSecondary(null);
     } else {
-      setMessage.timerSecondary('external');
+      setMessage.timerSecondary('secondary');
     }
   };
 
   return (
     <InputRow
-      label='External Message'
+      label='Secondary Message'
       placeholder='Message shown as secondary text in stage timer'
       text={text}
       visible={visible}
-      changeHandler={(newValue) => setMessage.externalText(newValue)}
+      changeHandler={(newValue) => setMessage.secondaryMessage(newValue)}
     >
       <TooltipActionBtn
-        clickHandler={toggleExternal}
+        clickHandler={toggleSecondary}
         tooltip={visible ? 'Make invisible' : 'Make visible'}
-        aria-label='Toggle external message visibility'
+        aria-label='Toggle secondary message visibility'
         openDelay={tooltipDelayMid}
         icon={visible ? <IoEye size='18px' /> : <IoEyeOffOutline size='18px' />}
         variant={visible ? 'ontime-filled' : 'ontime-subtle'}

apps/client/src/features/control/message/TimerPreview.tsx

@@ -12,7 +12,7 @@ import { Corner } from '../../editors/editor-utils/EditorUtils';
 import style from './MessageControl.module.scss';
 
 export default function TimerPreview() {
-  const { blink, blackout, countToEnd, phase, showAuxTimer, showExternalMessage, showTimerMessage, timerType } =
+  const { blink, blackout, countToEnd, phase, showAuxTimer, showSecondaryMessage, showTimerMessage, timerType } =
     useMessagePreview();
   const { data } = useViewSettings();
 
@@ -34,7 +34,7 @@ export default function TimerPreview() {
 
     // we need to check aux first since it takes priority
     if (showAuxTimer) return 'Aux Timer';
-    if (showExternalMessage) return 'External message';
+    if (showSecondaryMessage) return 'Secondary message';
     return null;
   })();
 

apps/client/src/features/control/message/TimerViewControl.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@chakra-ui/react';
+import { SecondarySource } from 'ontime-types';
 
 import { setMessage, useTimerViewControl } from '../../../common/hooks/useSocket';
 
@@ -9,7 +10,7 @@ import style from './MessageControl.module.scss';
 export default function TimerControlsPreview() {
   const { blackout, blink, secondarySource } = useTimerViewControl();
 
-  const toggleSecondary = (newValue: 'aux' | 'external' | null) => {
+  const toggleSecondary = (newValue: SecondarySource) => {
     if (secondarySource === newValue) {
       setMessage.timerSecondary(null);
     } else {
@@ -31,10 +32,10 @@ export default function TimerControlsPreview() {
         </Button>
         <Button
           size='sm'
-          variant={secondarySource === 'external' ? 'ontime-filled' : 'ontime-subtle'}
-          onClick={() => toggleSecondary('external')}
+          variant={secondarySource === 'secondary' ? 'ontime-filled' : 'ontime-subtle'}
+          onClick={() => toggleSecondary('secondary')}
         >
-          Show external
+          Show secondary
         </Button>
 
         <hr className={style.divider} />