feat(ui): implement Freeze for Rundown UI

apps/client/src/common/api/rundown.ts

@@ -84,3 +84,10 @@ export async function requestDelete(eventIds: string[]): Promise<AxiosResponse<M
 export async function requestDeleteAll(): Promise<AxiosResponse<MessageResponse>> {
   return axios.delete(`${rundownPath}/all`);
 }
+
+/**
+ * HTTP request to freeze rundown
+ */
+export async function requestToggleRundownFreeze(frozen: boolean): Promise<AxiosResponse<MessageResponse>> {
+  return axios.post(`${rundownPath}/frozen`, { frozen });
+}

apps/client/src/common/hooks/useEventAction.ts

@@ -24,6 +24,7 @@ import {
   requestPostEvent,
   requestPutEvent,
   requestReorderEvent,
+  requestToggleRundownFreeze,
   SwapEntry,
 } from '../api/rundown';
 import { logAxiosError } from '../api/utils';
@@ -604,6 +605,31 @@ export const useEventAction = () => {
     [_swapEvents],
   );
 
+  /**
+   * Calls mutation to freeze events
+   * @private
+   */
+  const _toggleFreezeEvents = useMutation({
+    mutationFn: requestToggleRundownFreeze,
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: RUNDOWN });
+    },
+  });
+
+  /**
+   * Freezes all changes to events
+   */
+  const toggleFreezeEvents = useCallback(
+    async (frozen: boolean) => {
+      try {
+        await _toggleFreezeEvents.mutateAsync(frozen);
+      } catch (error) {
+        logAxiosError('Error freezing events', error);
+      }
+    },
+    [_toggleFreezeEvents],
+  );
+
   return {
     addEvent,
     applyDelay,
@@ -616,5 +642,6 @@ export const useEventAction = () => {
     updateEvent,
     updateTimer,
     updateCustomField,
+    toggleFreezeEvents,
   };
 };

apps/client/src/common/stores/appModeStore.ts

@@ -9,7 +9,18 @@ export enum AppMode {
 const appModeKey = 'ontime-app-mode';
 
 function getModeFromSession() {
-  return sessionStorage.getItem(appModeKey) === AppMode.Run ? AppMode.Run : AppMode.Edit;
+  const appModeFromSessionStorage = sessionStorage.getItem(appModeKey);
+
+  switch (appModeFromSessionStorage) {
+    case AppMode.Run:
+      return AppMode.Run;
+    case AppMode.Edit:
+      return AppMode.Edit;
+    case AppMode.Freeze:
+      return AppMode.Freeze;
+    default:
+      return AppMode.Run;
+  }
 }
 
 function persistModeToSession(mode: AppMode) {

apps/client/src/features/rundown/common/EditableBlockTitle.tsx

@@ -3,6 +3,7 @@ import { Input } from '@chakra-ui/react';
 
 import useReactiveTextInput from '../../../common/components/input/text-input/useReactiveTextInput';
 import { useEventAction } from '../../../common/hooks/useEventAction';
+import { AppMode, useAppMode } from '../../../common/stores/appModeStore';
 import { cx } from '../../../common/utils/styleUtils';
 
 import style from './TitleEditor.module.scss';
@@ -17,6 +18,9 @@ interface TitleEditorProps {
 export default function EditableBlockTitle(props: TitleEditorProps) {
   const { title, eventId, placeholder, className } = props;
   const { updateEvent } = useEventAction();
+  const appMode = useAppMode((state) => state.mode);
+  const isRundownFrozen = appMode === AppMode.Freeze;
+
   const ref = useRef<HTMLInputElement | null>(null);
   const submitCallback = useCallback(
     (text: string) => {
@@ -51,6 +55,7 @@ export default function EditableBlockTitle(props: TitleEditorProps) {
       fontWeight='600'
       letterSpacing='0.25px'
       paddingLeft='0'
+      isDisabled={isRundownFrozen}
     />
   );
 }

apps/client/src/features/rundown/event-block/composite/EventBlockPlayback.tsx

@@ -8,6 +8,7 @@ import { IoRemoveCircleOutline } from '@react-icons/all-files/io5/IoRemoveCircle
 import TooltipActionBtn from '../../../../common/components/buttons/TooltipActionBtn';
 import { useEventAction } from '../../../../common/hooks/useEventAction';
 import { setEventPlayback } from '../../../../common/hooks/useSocket';
+import { AppMode, useAppMode } from '../../../../common/stores/appModeStore';
 import { tooltipDelayMid } from '../../../../ontimeConfig';
 
 import style from '../EventBlock.module.scss';
@@ -39,6 +40,8 @@ interface EventBlockPlaybackProps {
 const EventBlockPlayback = (props: EventBlockPlaybackProps) => {
   const { eventId, skip, isPlaying, isPaused, loaded, disablePlayback } = props;
   const { updateEvent } = useEventAction();
+  const appMode = useAppMode((state) => state.mode);
+  const isRundownFrozen = appMode === AppMode.Freeze;
 
   const toggleSkip = (event: MouseEvent) => {
     event.stopPropagation();
@@ -100,7 +103,7 @@ const EventBlockPlayback = (props: EventBlockPlaybackProps) => {
         {...blockBtnStyle}
         clickHandler={toggleSkip}
         tabIndex={-1}
-        isDisabled={loaded}
+        isDisabled={isRundownFrozen || loaded}
       />
       <TooltipActionBtn
         variant='ontime-subtle-white'

apps/client/src/features/rundown/event-editor/EventEditor.tsx

@@ -7,6 +7,7 @@ import CopyTag from '../../../common/components/copy-tag/CopyTag';
 import { useEventAction } from '../../../common/hooks/useEventAction';
 import useCustomFields from '../../../common/hooks-query/useCustomFields';
 import useRundown from '../../../common/hooks-query/useRundown';
+import { AppMode, useAppMode } from '../../../common/stores/appModeStore';
 import { getAccessibleColour } from '../../../common/utils/styleUtils';
 import { useEventSelection } from '../useEventSelection';
 
@@ -28,6 +29,8 @@ export default function EventEditor() {
   const { order, rundown } = data;
   const { updateEvent } = useEventAction();
   const [_searchParams, setSearchParams] = useSearchParams();
+  const appMode = useAppMode((state) => state.mode);
+  const isRundownFrozen = appMode === AppMode.Freeze;
 
   const [event, setEvent] = useState<OntimeEvent | null>(null);
 
@@ -88,6 +91,7 @@ export default function EventEditor() {
           timerType={event.timerType}
           timeWarning={event.timeWarning}
           timeDanger={event.timeDanger}
+          isRundownFrozen={isRundownFrozen}
         />
         <EventEditorTitles
           key={`${event.id}-titles`}
@@ -97,6 +101,7 @@ export default function EventEditor() {
           note={event.note}
           colour={event.colour}
           handleSubmit={handleSubmit}
+          isRundownFrozen={isRundownFrozen}
         />
         <div className={style.column}>
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>

apps/client/src/features/rundown/event-editor/composite/EventEditorTimes.tsx

@@ -23,6 +23,7 @@ interface EventEditorTimesProps {
   timerType: TimerType;
   timeWarning: number;
   timeDanger: number;
+  isRundownFrozen: boolean;
 }
 
 type HandledActions = 'timerType' | 'endAction' | 'isPublic' | 'timeWarning' | 'timeDanger';
@@ -41,6 +42,7 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
     timerType,
     timeWarning,
     timeDanger,
+    isRundownFrozen,
   } = props;
   const { updateEvent } = useEventAction();
 
@@ -102,6 +104,7 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
             value={timerType}
             onChange={(event) => handleSubmit('timerType', event.target.value)}
             variant='ontime'
+            disabled={isRundownFrozen}
           >
             <option value={TimerType.CountDown}>Count down</option>
             <option value={TimerType.CountUp}>Count up</option>
@@ -123,6 +126,7 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
             value={endAction}
             onChange={(event) => handleSubmit('endAction', event.target.value)}
             variant='ontime'
+            disabled={isRundownFrozen}
           >
             <option value={EndAction.None}>None</option>
             <option value={EndAction.Stop}>Stop</option>
@@ -135,7 +139,13 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
       <div>
         <span className={style.inputLabel}>Event Visibility</span>
         <label className={style.switchLabel}>
-          <Switch size='md' isChecked={isPublic} onChange={() => handleSubmit('isPublic', isPublic)} variant='ontime' />
+          <Switch
+            size='md'
+            isChecked={isPublic}
+            onChange={() => handleSubmit('isPublic', isPublic)}
+            variant='ontime'
+            disabled={isRundownFrozen}
+          />
           {isPublic ? 'Public' : 'Private'}
         </label>
       </div>

apps/client/src/features/rundown/event-editor/composite/EventEditorTitles.tsx

@@ -16,11 +16,12 @@ interface EventEditorTitlesProps {
   title: string;
   note: string;
   colour: string;
+  isRundownFrozen: boolean;
   handleSubmit: (field: EditorUpdateFields, value: string) => void;
 }
 
 const EventEditorTitles = (props: EventEditorTitlesProps) => {
-  const { eventId, cue, title, note, colour, handleSubmit } = props;
+  const { eventId, cue, title, note, colour, handleSubmit, isRundownFrozen } = props;
 
   const cueSubmitHandler = (_field: string, newValue: string) => {
     handleSubmit('cue', sanitiseCue(newValue));
@@ -42,14 +43,33 @@ const EventEditorTitles = (props: EventEditorTitlesProps) => {
             readOnly
           />
         </div>
-        <EventTextInput field='cue' label='Cue' initialValue={cue} submitHandler={cueSubmitHandler} maxLength={10} />
+        <EventTextInput
+          field='cue'
+          label='Cue'
+          initialValue={cue}
+          submitHandler={cueSubmitHandler}
+          maxLength={10}
+          disabled={isRundownFrozen}
+        />
       </div>
       <div>
         <label className={style.inputLabel}>Colour</label>
         <SwatchSelect name='colour' value={colour} handleChange={handleSubmit} />
       </div>
-      <EventTextInput field='title' label='Title' initialValue={title} submitHandler={handleSubmit} />
-      <EventTextArea field='note' label='Note' initialValue={note} submitHandler={handleSubmit} />
+      <EventTextInput
+        field='title'
+        label='Title'
+        initialValue={title}
+        submitHandler={handleSubmit}
+        disabled={isRundownFrozen}
+      />
+      <EventTextArea
+        field='note'
+        label='Note'
+        initialValue={note}
+        submitHandler={handleSubmit}
+        disabled={isRundownFrozen}
+      />
     </div>
   );
 };

apps/client/src/features/rundown/event-editor/composite/EventTextArea.tsx

@@ -14,10 +14,11 @@ interface CountedTextAreaProps {
   initialValue: string;
   style?: CSSProperties;
   submitHandler: (field: EditorUpdateFields, value: string) => void;
+  disabled?: boolean;
 }
 
 export default function EventTextArea(props: CountedTextAreaProps) {
-  const { className, field, label, initialValue, style: givenStyles, submitHandler } = props;
+  const { className, field, label, initialValue, style: givenStyles, submitHandler, disabled } = props;
   const ref = useRef<HTMLInputElement | null>(null);
   const submitCallback = useCallback((newValue: string) => submitHandler(field, newValue), [field, submitHandler]);
 
@@ -40,6 +41,7 @@ export default function EventTextArea(props: CountedTextAreaProps) {
         variant='ontime-filled'
         data-testid='input-textarea'
         value={value}
+        isDisabled={disabled}
         onChange={onChange}
         onBlur={onBlur}
         onKeyDown={onKeyDown}

apps/client/src/features/rundown/event-editor/composite/EventTextInput.tsx

@@ -11,10 +11,11 @@ interface EventTextInputProps extends InputProps {
   label: string;
   initialValue: string;
   submitHandler: (field: EditorUpdateFields, value: string) => void;
+  disabled?: boolean;
 }
 
 export default function EventTextInput(props: EventTextInputProps) {
-  const { field, label, initialValue, submitHandler, maxLength } = props;
+  const { field, label, initialValue, submitHandler, maxLength, disabled } = props;
   const ref = useRef<HTMLInputElement | null>(null);
   const submitCallback = useCallback((newValue: string) => submitHandler(field, newValue), [field, submitHandler]);
 
@@ -39,6 +40,7 @@ export default function EventTextInput(props: EventTextInputProps) {
         onBlur={onBlur}
         onKeyDown={onKeyDown}
         autoComplete='off'
+        disabled={disabled}
       />
     </div>
   );

apps/client/src/features/rundown/rundown-header/RundownHeader.module.scss

@@ -1,7 +1,8 @@
 .header {
   padding-inline: calc(2rem - 6px + 0.5rem) calc(1rem + 2px);
-  
+
   display: flex;
   align-items: center;
   justify-content: space-between;
+  column-gap: 0.5rem;
 }

apps/client/src/features/rundown/rundown-header/RundownHeader.tsx

@@ -1,16 +1,30 @@
 import { Button, ButtonGroup } from '@chakra-ui/react';
 
+import { useEventAction } from '../../../common/hooks/useEventAction';
 import { AppMode, useAppMode } from '../../../common/stores/appModeStore';
 
 import RundownMenu from './RundownMenu';
 
 import style from './RundownHeader.module.scss';
 
 export default function RundownHeader() {
+  const { toggleFreezeEvents } = useEventAction();
+
   const appMode = useAppMode((state) => state.mode);
   const setAppMode = useAppMode((state) => state.setMode);
-  const setRunMode = () => setAppMode(AppMode.Run);
-  const setEditMode = () => setAppMode(AppMode.Edit);
+
+  const toggleAppMode = async (appMode: AppMode) => {
+    if (appMode === AppMode.Freeze) {
+      await toggleFreezeEvents(true);
+    } else {
+      await toggleFreezeEvents(false);
+    }
+    setAppMode(appMode);
+  };
+
+  const setRunMode = () => toggleAppMode(AppMode.Run);
+  const setEditMode = () => toggleAppMode(AppMode.Edit);
+  const setFreezeMode = () => toggleAppMode(AppMode.Freeze);
 
   return (
     <div className={style.header}>
@@ -21,6 +35,13 @@ export default function RundownHeader() {
         <Button size='sm' variant={appMode === AppMode.Edit ? 'ontime-filled' : 'ontime-subtle'} onClick={setEditMode}>
           Edit
         </Button>
+        <Button
+          size='sm'
+          variant={appMode === AppMode.Freeze ? 'ontime-filled' : 'ontime-subtle'}
+          onClick={setFreezeMode}
+        >
+          Freeze
+        </Button>
       </ButtonGroup>
       <RundownMenu />
     </div>

apps/client/src/features/rundown/rundown-header/RundownMenu.tsx

@@ -37,10 +37,11 @@ export default function RundownMenu() {
         leftIcon={<IoTrash />}
         onClick={onOpen}
         color='#FA5656'
-        isDisabled={appMode === 'run'}
+        isDisabled={appMode !== 'edit'}
       >
         Clear rundown
       </Button>
+
       <AlertDialog variant='ontime' isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
         <AlertDialogOverlay>
           <AlertDialogContent>

apps/client/src/features/rundown/time-input-flow/TimeInputFlow.module.scss

@@ -10,13 +10,15 @@
 
 .timeAction {
   opacity: 0.4;
-  cursor: pointer;
   padding-right: 0.5em;
 
   &.active {
     opacity: 1;
     color: var(--status-color-active-override, $active-indicator);
   }
+  &:disabled {
+    cursor: not-allowed;
+  }
   .fourtyfive {
     transform: rotate(-45deg);
   }