Feat/countdown style

apps/client/src/common/components/timer-display/TimerDisplay.tsx

@@ -20,7 +20,7 @@ const TimerDisplay = (props: TimerDisplayProps) => {
   const { time, small, hideZeroHours, className = '' } = props;
 
   const display =
-    (time === null || typeof time === 'undefined' || isNaN(time))
+    time === null || typeof time === 'undefined' || isNaN(time)
       ? '-- : -- : --'
       : formatDisplay(millisToSeconds(time), hideZeroHours);
 

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

@@ -43,7 +43,7 @@ export const useEventAction = () => {
     startTimeIsLastEnd?: boolean;
     lastEventId?: string;
     after?: string;
-  }
+  };
 
   /**
    * Adds an event to rundown
@@ -52,7 +52,6 @@ export const useEventAction = () => {
     async (event: Partial<OntimeRundownEntry>, options?: AddOptions) => {
       const newEvent: Partial<OntimeRundownEntry> = { ...event };
 
-
       // ************* CHECK OPTIONS
       // there is an option to pass an index of an array to use as start time
       // only events have options
@@ -91,7 +90,7 @@ export const useEventAction = () => {
         // @ts-expect-error we know that the event here is one of the defined types
         await _addEventMutation.mutateAsync(newEvent);
       } catch (error) {
-        if(!axios.isAxiosError(error)){
+        if (!axios.isAxiosError(error)) {
           emitError(`Error fetching data: ${(error as AxiosError).message}`);
         } else {
           emitError(`Error fetching data: ${error}`);
@@ -140,12 +139,11 @@ export const useEventAction = () => {
       try {
         await _updateEventMutation.mutateAsync(event);
       } catch (error) {
-        if(!axios.isAxiosError(error)){
+        if (!axios.isAxiosError(error)) {
           emitError(`Error updating event: ${(error as AxiosError).message}`);
         } else {
           emitError(`Error updating event: ${error}`);
         }
-
       }
     },
     [_updateEventMutation, emitError],
@@ -191,8 +189,8 @@ export const useEventAction = () => {
     async (eventId: string) => {
       try {
         await _deleteEventMutation.mutateAsync(eventId);
-      } catch (error)  {
-        if(!axios.isAxiosError(error)){
+      } catch (error) {
+        if (!axios.isAxiosError(error)) {
           emitError(`Error deleting event: ${(error as AxiosError).message}`);
         } else {
           emitError(`Error deleting event: ${error}`);
@@ -240,7 +238,7 @@ export const useEventAction = () => {
     try {
       await _deleteAllEventsMutation.mutateAsync();
     } catch (error) {
-      if(!axios.isAxiosError(error)){
+      if (!axios.isAxiosError(error)) {
         emitError(`Error deleting events: ${(error as AxiosError).message}`);
       } else {
         emitError(`Error deleting events: ${error}`);
@@ -267,7 +265,7 @@ export const useEventAction = () => {
       try {
         await _applyDelayMutation.mutateAsync(delayEventId);
       } catch (error) {
-        if(!axios.isAxiosError(error)){
+        if (!axios.isAxiosError(error)) {
           emitError(`Error applying delay: ${(error as AxiosError).message}`);
         } else {
           emitError(`Error applying delay: ${error}`);
@@ -325,7 +323,7 @@ export const useEventAction = () => {
         };
         await _reorderEventMutation.mutateAsync(reorderObject);
       } catch (error) {
-        if(!axios.isAxiosError(error)){
+        if (!axios.isAxiosError(error)) {
           emitError(`Error re-ordering event: ${(error as AxiosError).message}`);
         } else {
           emitError(`Error re-ordering event: ${error}`);

apps/client/src/common/models/EventTypes.ts

@@ -1,7 +1,7 @@
 export enum SupportedEvent {
   Event = 'event',
   Delay = 'delay',
-  Block = 'block'
+  Block = 'block',
 }
 
 export interface OntimeBaseEvent {
@@ -14,37 +14,38 @@ export type OntimeDelay = OntimeBaseEvent & {
   type: SupportedEvent.Delay;
   duration: number;
   revision: number;
-}
+};
 
 export type OntimeBlock = OntimeBaseEvent & {
   type: SupportedEvent.Block;
-}
+};
 
 export type OntimeEvent = OntimeBaseEvent & {
   type: SupportedEvent.Event;
-  title: string,
-  subtitle: string,
-  presenter: string,
-  note: string,
-  timeType?: string,
-  timeStart: number,
-  timeEnd: number,
-  duration: number,
-  isPublic: boolean,
-  skip: boolean,
-  colour: string,
-  user0: string,
-  user1: string,
-  user2: string,
-  user3: string,
-  user4: string,
-  user5: string,
-  user6: string,
-  user7: string,
-  user8: string,
-  user9: string,
-  revision: number,
-}
+  title: string;
+  subtitle: string;
+  presenter: string;
+  note: string;
+  timeType?: string;
+  countdownStyle: string;
+  timeStart: number;
+  timeEnd: number;
+  duration: number;
+  isPublic: boolean;
+  skip: boolean;
+  colour: string;
+  user0: string;
+  user1: string;
+  user2: string;
+  user3: string;
+  user4: string;
+  user5: string;
+  user6: string;
+  user7: string;
+  user8: string;
+  user9: string;
+  revision: number;
+};
 
 export type OntimeRundownEntry = OntimeDelay | OntimeBlock | OntimeEvent;
-export type OntimeRundown = OntimeRundownEntry[]
+export type OntimeRundown = OntimeRundownEntry[];

apps/client/src/common/models/TimeManager.type.ts

@@ -4,6 +4,8 @@ export type TimeManagerType = {
   clock: number;
   current: null | number;
   elapsed: null | number;
+  duration: null | number;
+  countdownStyle: string;
   expectedFinish: null | number;
   addedTime: number;
   startedAt: null | number;
@@ -12,4 +14,4 @@ export type TimeManagerType = {
 
   finished: boolean;
   playback: Playback;
-}
+};

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

@@ -84,7 +84,8 @@ export default function EventEditor() {
     [emitError, event, updateEvent],
   );
 
-  const timerValidationHandler = useCallback((entry: TimeEntryField, val: number) => {
+  const timerValidationHandler = useCallback(
+    (entry: TimeEntryField, val: number) => {
       if (!event) {
         return;
       }
@@ -97,7 +98,15 @@ export default function EventEditor() {
     [event, emitWarning],
   );
 
-  const togglePublic = useCallback((currentValue: boolean) => {
+  const handleChange = useCallback(
+    (field: string, value: string) => {
+      updateEvent({ id: event.id, [field]: value });
+    },
+    [event, updateEvent],
+  );
+
+  const togglePublic = useCallback(
+    (currentValue: boolean) => {
       if (!event) {
         return;
       }
@@ -111,9 +120,7 @@ export default function EventEditor() {
   }
 
   const delayed = delay !== 0;
-  const addedTime = delayed
-    ? `${delay >= 0 ? '+' : '-'} ${millisToMinutes(Math.abs(delay))} minutes`
-    : null;
+  const addedTime = delayed ? `${delay >= 0 ? '+' : '-'} ${millisToMinutes(Math.abs(delay))} minutes` : null;
   const newStart = delayed ? `New start ${stringFromMillis(event.timeStart + delay)}` : null;
   const newEnd = delayed ? `New end ${stringFromMillis(event.timeEnd + delay)}` : null;
 
@@ -160,25 +167,31 @@ export default function EventEditor() {
         </div>
         <div className={style.timeSettings}>
           <label className={style.inputLabel}>Timer type</label>
-          <Select size='sm' variant='ontime'>
-            <option value='option1'>Start to end</option>
-            <option value='option2'>Duration</option>
-            <option value='option3'>Follow previous</option>
-            <option value='option3'>Start only</option>
+          <Select
+            size='sm'
+            name='timeType'
+            value={event.timeType}
+            onChange={(event) => handleChange('timeType', event.target.value)}
+          >
+            <option value='start-end'>Start to end</option>
+            <option value='duration'>Duration</option>
+            <option value='follow-previous'>Follow previous</option>
+            <option value='start-only'>Start only</option>
           </Select>
           <label className={style.inputLabel}>Countdown style</label>
-          <Select size='sm' variant='ontime'>
-            <option value='option1'>Count down</option>
-            <option value='option2'>Count up</option>
-            <option value='option3'>Clock</option>
+          <Select
+            size='sm'
+            name='countdownStyle'
+            value={event.countdownStyle}
+            onChange={(event) => handleChange('countdownStyle', event.target.value)}
+          >
+            <option value='count-down'>Count down</option>
+            <option value='count-up'>Count up</option>
+            <option value='clock'>Clock</option>
           </Select>
           <span className={style.spacer} />
           <label className={`${style.inputLabel} ${style.publicToggle}`}>
-            <Switch
-              isChecked={event.isPublic}
-              onChange={() => togglePublic(event.isPublic)}
-              variant='ontime'
-            />
+            <Switch isChecked={event.isPublic} onChange={() => togglePublic(event.isPublic)} variant='ontime' />
             Event is public
           </label>
         </div>
@@ -191,11 +204,7 @@ export default function EventEditor() {
           </div>
           <div className={style.column}>
             <label className={style.inputLabel}>Presenter</label>
-            <TextInput
-              field='presenter'
-              initialText={event.presenter}
-              submitHandler={handleSubmit}
-            />
+            <TextInput field='presenter' initialText={event.presenter} submitHandler={handleSubmit} />
           </div>
           <div className={style.column}>
             <label className={style.inputLabel}>Subtitle</label>
@@ -206,30 +215,15 @@ export default function EventEditor() {
           <div className={style.column}>
             <label className={style.inputLabel}>Colour</label>
             <div className={style.inline}>
-              <ColourInput
-                name="colour"
-                value={event?.colour}
-                handleChange={handleSubmit}
-              />
-              <Button
-                leftIcon={<IoBan />}
-                onClick={() => handleSubmit('colour', '')}
-                variant='ontime-subtle'
-                size='sm'
-              >
+              <ColourInput name='colour' value={event?.colour} handleChange={handleSubmit} />
+              <Button leftIcon={<IoBan />} onClick={() => handleSubmit('colour', '')} variant='ontime-subtle' size='sm'>
                 Clear colour
               </Button>
             </div>
           </div>
           <div className={`${style.column} ${style.fullHeight}`}>
             <label className={style.inputLabel}>Note</label>
-            <TextInput
-              field='note'
-              initialText={event.note}
-              submitHandler={handleSubmit}
-              isTextArea
-              isFullHeight
-            />
+            <TextInput field='note' initialText={event.note} submitHandler={handleSubmit} isTextArea isFullHeight />
           </div>
         </div>
       </div>

apps/client/src/features/viewers/backstage/Backstage.tsx

@@ -83,12 +83,7 @@ export default function Backstage(props) {
         </div>
       </div>
 
-      <ProgressBar
-        className='progress-container'
-        now={time.current}
-        complete={time.duration}
-        hidden={!showProgress}
-      />
+      <ProgressBar className='progress-container' now={time.current} complete={time.duration} hidden={!showProgress} />
 
       <div className='now-container'>
         <AnimatePresence>
@@ -146,30 +141,21 @@ export default function Backstage(props) {
         </AnimatePresence>
       </div>
 
-      <ScheduleProvider
-        events={filteredEvents}
-        selectedEventId={selectedId}
-        isBackstage
-      >
+      <ScheduleProvider events={filteredEvents} selectedEventId={selectedId} isBackstage>
         <ScheduleNav className='schedule-nav-container' />
         <Schedule className='schedule-container' />
       </ScheduleProvider>
 
-      <div
-        className={showPublicMessage ? 'public-container' : 'public-container public-container--hidden'}>
+      <div className={showPublicMessage ? 'public-container' : 'public-container public-container--hidden'}>
         <div className='label'>Public message</div>
         <div className='message'>{publ.text}</div>
       </div>
 
       <div className='info'>
         <div className='qr'>
-          {general.url != null && general.url !== '' && (
-            <QRCode value={general.url} size={qrSize} level='L' />
-          )}
+          {general.url != null && general.url !== '' && <QRCode value={general.url} size={qrSize} level='L' />}
         </div>
-        {general.backstageInfo && (
-          <div className='info__message'>{general.backstageInfo}</div>
-        )}
+        {general.backstageInfo && <div className='info__message'>{general.backstageInfo}</div>}
       </div>
     </div>
   );

apps/client/src/features/viewers/minimal-timer/MinimalTimer.tsx

@@ -133,14 +133,18 @@ export default function MinimalTimer(props: MinimalTimerProps) {
   const isNegative = (time.current ?? 0) < 0;
   const showFinished = isNegative && !userOptions?.hideOvertime;
   const showEndMessage = time.current < 0 && general.endMessage && !hideEndMessage;
+  const countUp =
+    time.duration - time.current > time.duration ? time.duration * -1 + time.current : time.duration - time.current;
+  const timer =
+    time.countdownStyle === 'count-down' ? time.current : time.countdownStyle === 'count-up' ? countUp : time.clock;
 
   const baseClasses = `minimal-timer ${isMirrored ? 'mirror' : ''}`;
 
   let stageTimer;
   if (time.current === null) {
     stageTimer = '- - : - -';
   } else {
-    stageTimer = formatDisplay(Math.abs(millisToSeconds(time.current)), true);
+    stageTimer = formatDisplay(Math.abs(millisToSeconds(timer)), true);
     if (time.current < 0) {
       stageTimer = `-${stageTimer}`;
     }