V3 (#657)

* refactor: cleanup routes

* style: smaller base font

* chore: upgrade dependencies

* chore: lock node version to electron

* refactor: pass HTTP to integration controller (#652)

* refactor: deprecate onair control

* refactor: remove playback router

* Several project files user folder (#617)

* chore: automated screenshots (#667)

* feat: app settings (#658)

* refactor: remove deprecated event data (#674)

* Studio clock (#663)

---------

Co-authored-by: Carlos Valente <carlosvalente@pm.me>

* Feat: reorder events with alt+ctrl + arrow up/down (#645)

* Warning and danger per event (#677)

---------

Co-authored-by: Fabian Posenau <fabian@fphome.de>

* refactor: stabilise actionHandler (#683)

Co-authored-by: Fabian Posenau <fabian@fphome.de>

* improvement: hide seconds (#675)

* wip: overview (#688)

* fix: focus cursor (#695)

* refactor: update lower third (#665)

* Refactor/time formatting (#696)

---------

Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Co-authored-by: Carlos Valente <carlosvalente@pm.me>

* feat: multiple selection (#703)

---------

Co-authored-by: asharonbaltazar <asharonbaltazar@outlook.com>
Co-authored-by: Alex <ac@omnivox.dk>

* fix: test - go to `Edit mode` befor tying to click `Event options` button (#708)

* refactor: runtime service (#715)

* fix: issue with loosing cursor position on message (#719)

* remove info panel (#721)

* Event editor continue (#722)

* update API - part  (#709)

---------

Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Co-authored-by: Carlos Valente <carlosvalente@pm.me>

* refactor: update timers (#729)

* feat: many timers (#706)

---------

Co-authored-by: arc-alex <ac@omnivox.dk>

* refactor: excel cleanup (#734)

* refactor: allow import of blocks and skip import (#735)

* Project manager (#697)

* refactor: UI for linking events (#763)

* upgraded pipeline actions (#777)

* Over under (#771)

* custom fields (#744)


---------

Co-authored-by: Carlos Valente <carlosvalente@pm.me>

* Sheets settings (#774)

---------

Co-authored-by: arc-alex <ac@omnivox.dk>

* style: tweaks to lower thirds (#785)

* refactor: delays account for gaps (#784)

* refactor: partial state updates (#780)

* feat: generate crash report (#787)

* Sheet use limited input device auth flow (#782)

---------

Co-authored-by: cv <34649812+cpvalente@users.noreply.github.com>
Co-authored-by: Carlos Valente <carlosvalente@pm.me>

* Custom fields views (#789)

* refactor: deprecate presenter and subtitle (#795)

* refactor: organise API around resources (#798)

---------

Co-authored-by: Bianca Procopio <biancahprocopio@gmail.com>

* Time to end (#804)

* Skip fixes (#805)

* fix: onair derives from playback

* Param nav (#822)

---------

Co-authored-by: Alex Christoffer Rasmussen <ac@omnivox.dk>

* refactor: download files from interface (#831)

* Quick options (#814)

* End pause (#832)

* chore: bump node version in docker (#834)

* refactor: follow in run mode (#840)

* fix: uncaught error in http integration (#837)

* Apply project (#843)

Co-authored-by: Matteo Gheza <matteo.gheza07@gmail.com>
Co-authored-by: Ary <arylmoraesn@gmail.com>
Co-authored-by: Alex Christoffer Rasmussen <ac@omnivox.dk>
Co-authored-by: Fabian Posenau <19673098+kellhogs@users.noreply.github.com>
Co-authored-by: Fabian Posenau <fabian@fphome.de>
Co-authored-by: Alex Rohleder <alexrohleder96@gmail.com>
Co-authored-by: asharonbaltazar <asharonbaltazar@outlook.com>
Co-authored-by: Bianca Procopio <biancahprocopio@gmail.com>
Co-authored-by: Fabian Posenau <fabianpos99+github@gmail.com>

apps/client/src/common/utils/time.ts

@@ -1,7 +1,8 @@
-import { Settings } from 'ontime-types';
-import { formatFromMillis, millisToString } from 'ontime-utils';
+import { MaybeNumber, Settings, TimeFormat } from 'ontime-types';
+import { formatFromMillis } from 'ontime-utils';
 
-import { APP_SETTINGS } from '../api/apiConstants';
+import { FORMAT_12, FORMAT_24 } from '../../viewerConfig';
+import { APP_SETTINGS } from '../api/constants';
 import { ontimeQueryClient } from '../queryClient';
 
 /**
@@ -22,36 +23,75 @@ export const nowInMillis = () => {
 
 /**
  * @description Resolves format from url and store
- * @return {string|undefined}
+ * @return {string|null} A format string like "hh:mm:ss a" or null
  */
-export const resolveTimeFormat = () => {
+function getFormatFromParams() {
   const params = new URL(document.location.href).searchParams;
-  const urlOptions = params.get('format');
-  const settings: Settings | undefined = ontimeQueryClient.getQueryData(APP_SETTINGS);
+  return params.get('timeformat');
+}
 
-  return urlOptions || settings?.timeFormat;
-};
+/**
+ * Gets the format options from the applicaton settings
+ * @returns a string equivalent to the format, ie: hh:mm:ss a or HH:mm:ss
+ */
+export function getFormatFromSettings(): TimeFormat {
+  const settings: Settings | undefined = ontimeQueryClient.getQueryData(APP_SETTINGS);
+  return settings?.timeFormat ?? '24';
+}
+
+export function getDefaultFormat(
+  currentSettings?: TimeFormat,
+  format12: string = FORMAT_12,
+  format24: string = FORMAT_24,
+): string {
+  if (currentSettings === '12') {
+    return format12;
+  }
+  return format24;
+}
+
+function resolveTimeFormat(fallback12: string, fallback24: string): string {
+  // if the user has an option, we use that
+  const formatFromParams = getFormatFromParams();
+  if (formatFromParams) {
+    return formatFromParams;
+  }
+
+  // otherwise we use the view defined, with respect to the 12-24 hour settings
+  const formatFromSettings = getFormatFromSettings();
+  if (formatFromSettings === '12') {
+    return fallback12;
+  }
+
+  return fallback24;
+}
 
 type FormatOptions = {
-  showSeconds?: boolean;
-  format?: string;
+  format12: string;
+  format24: string;
 };
 
 /**
- * @description utility function to format a date in 12 or 24 hour format
- * @param {number | null} milliseconds
+ * @description viewer specific utility function to format a date in 12 or 24 hour format
+ * @param {MaybeNumber} milliseconds
  * @param {object} [options]
- * @param {boolean} [options.showSeconds]
- * @param {string} [options.format]
- * @param {function} resolver
+ * @param {string} [options.format.format12] format string if 12 hour time
+ * @param {string} [options.format.format24] format string if 24 hour time
+ * @param {Function} resolver DI for testing
  * @return {string}
  */
-export const formatTime = (milliseconds: number | null, options?: FormatOptions, resolver = resolveTimeFormat) => {
+export const formatTime = (
+  milliseconds: MaybeNumber,
+  options?: FormatOptions,
+  resolver = resolveTimeFormat,
+): string => {
   if (milliseconds === null) {
     return '...';
   }
-  const timeFormat = resolver();
-  const fallback = options?.showSeconds ? 'hh:mm:ss a' : 'hh:mm a';
-  const { showSeconds = false, format: formatString = fallback } = options || {};
-  return timeFormat === '12' ? formatFromMillis(milliseconds, formatString) : millisToString(milliseconds, showSeconds);
+
+  const timeFormat = resolver(options?.format12 ?? FORMAT_12, options?.format24 ?? FORMAT_24);
+  const display = formatFromMillis(Math.abs(milliseconds), timeFormat);
+
+  const isNegative = milliseconds < 0;
+  return `${isNegative ? '-' : ''}${display}`;
 };