refactor: review studio design

2026-08-20 22:49:18 +00:00 · 2025-02-24 22:19:36 +01:00
parent 3cd6cd2f55
commit e0f2830072
20 changed files with 673 additions and 563 deletions
@@ -0,0 +1,147 @@
+import { OntimeEvent, Playback, Runtime, TimerPhase, TimerState, ViewSettings } from 'ontime-types';
+import { millisToString } from 'ontime-utils';
+
+import { cx } from '../../common/utils/styleUtils';
+import { useTranslation } from '../../translation/TranslationProvider';
+import { getTimerColour } from '../utils/presentation.utils';
+
+import { getFormattedEventData, getFormattedScheduleTimes } from './studioTimers.utils';
+
+import './StudioTimers.scss';
+
+interface StudioTimersProps {
+  runtime: Runtime;
+  time: TimerState;
+  eventNow: OntimeEvent | null;
+  eventNext: OntimeEvent | null;
+  auxTimer: number;
+  timerMessage: string;
+  secondaryMessage: string;
+  viewSettings: ViewSettings;
+}
+
+export default function StudioTimers({
+  runtime,
+  time,
+  eventNow,
+  eventNext,
+  auxTimer,
+  timerMessage,
+  secondaryMessage,
+  viewSettings,
+}: StudioTimersProps) {
+  const { getLocalizedString } = useTranslation();
+
+  const schedule = getFormattedScheduleTimes(runtime);
+  const event = getFormattedEventData(eventNow, time);
+  const eventNextTitle = eventNext?.title || '-';
+  const formattedAuxTimer = millisToString(auxTimer);
+  const formattedTimerMessage = timerMessage || '-';
+  const formattedSecondaryMessage = secondaryMessage || '-';
+
+  // gather presentation styles
+  const timerColour = getTimerColour(viewSettings, time.phase === TimerPhase.Warning, time.phase === TimerPhase.Danger);
+
+  return (
+    <div className='studio__timers'>
+      <div className='card' id='card-schedule'>
+        <div className='card__row'>
+          <div>
+            <div className='label'>{getLocalizedString('common.started_at')}</div>
+            <div className='runtime-timer'>{schedule.actualStart}</div>
+          </div>
+          <div>
+            <div className='label center'>Offset</div>
+            <div
+              className={cx([
+                'runtime-timer',
+                'center',
+                !eventNow && 'muted',
+                runtime.offset <= 0 ? 'behind' : 'ahead',
+              ])}
+            >
+              {schedule.offset}
+            </div>
+          </div>
+          <div>
+            <div className='label right'>{getLocalizedString('common.projected_end')}</div>
+            <div className='runtime-timer right'>{schedule.expectedEnd}</div>
+          </div>
+        </div>
+      </div>
+
+      <div className='card' id='card-event-now'>
+        <div className='card__row'>
+          <div>
+            <div className='label'>{getLocalizedString('common.now')}</div>
+            <div className='title'>{event.title}</div>
+          </div>
+          <div>
+            <div className='label right'>{getLocalizedString('common.next')}</div>
+            <div className='title right'>{eventNextTitle}</div>
+          </div>
+        </div>
+
+        <div className='card__row'>
+          <div>
+            <div className='label'>{getLocalizedString('common.started_at')}</div>
+            <div className='runtime-timer'>{event.startedAt}</div>
+          </div>
+          <div>
+            <div className='label' />
+            <div
+              className={cx([
+                'event-timer',
+                time.phase === TimerPhase.Overtime && 'event-timer--finished',
+                time.playback === Playback.Pause && 'event-timer--paused',
+              ])}
+              style={{
+                '--phase-color': timerColour,
+              }}
+              data-phase={time.phase}
+            >
+              {event.timer}
+            </div>
+          </div>
+          <div>
+            <div className='label right'>{getLocalizedString('common.projected_end')}</div>
+            <div className='runtime-timer right'>{event.expectedEnd}</div>
+          </div>
+        </div>
+      </div>
+
+      <div className='card' id='card-aux'>
+        <div className='card__row'>
+          <div>
+            <div className='label'>Aux 1</div>
+            <div className='extra'>{formattedAuxTimer}</div>
+          </div>
+
+          <div>
+            <div className='label center'>Aux 2</div>
+            <div className='extra center'>NOT YET</div>
+          </div>
+
+          <div>
+            <div className='label right'>Aux 3</div>
+            <div className='extra right'>NOT YET</div>
+          </div>
+        </div>
+      </div>
+
+      <div className='card' id='card-timer-message'>
+        <div>
+          <div className='label'>Timer message</div>
+          <div className={cx(['extra', !formattedTimerMessage && 'muted'])}>{formattedTimerMessage}</div>
+        </div>
+      </div>
+
+      <div className='card' id='card-secondary-message'>
+        <div>
+          <div className='label'>Secondary message</div>
+          <div className={cx(['extra', !formattedSecondaryMessage && 'muted'])}>{formattedSecondaryMessage}</div>
+        </div>
+      </div>
+    </div>
+  );
+}