improvement: hide seconds (#675)

* feat: optional timer seconds

apps/client/src/common/components/view-params-editor/constants.ts

@@ -1,9 +1,8 @@
-import { UserFields } from 'ontime-types';
-import { TimeFormat } from 'ontime-types/src/definitions/core/TimeFormat.type';
+import { TimeFormat, UserFields } from 'ontime-types';
 
 import { ParamField } from './types';
 
-export const getTimeOption = (timeFormat: TimeFormat): ParamField => ({
+const getTimeOption = (timeFormat: TimeFormat): ParamField => ({
   id: 'format',
   title: '12  / 24 hour timer',
   description: 'Whether to show the time in 12 or 24 hour mode. Overrides the global setting from preferences',
@@ -12,6 +11,22 @@ export const getTimeOption = (timeFormat: TimeFormat): ParamField => ({
   defaultValue: timeFormat,
 });
 
+const hideClockSeconds: ParamField = {
+  id: 'hideClockSeconds',
+  title: 'Hide seconds in clocks',
+  description: 'Whether to hide seconds in auxiliar time fields (not the running timer)',
+  type: 'boolean',
+  defaultValue: false,
+};
+
+const hideTimerSeconds: ParamField = {
+  id: 'hideTimerSeconds',
+  title: 'Hide seconds in timer',
+  description: 'Whether to hide seconds in the running timer',
+  type: 'boolean',
+  defaultValue: false,
+};
+
 export const getClockOptions = (timeFormat: TimeFormat): ParamField[] => [
   getTimeOption(timeFormat),
   {
@@ -86,6 +101,8 @@ export const getClockOptions = (timeFormat: TimeFormat): ParamField[] => [
 
 export const getTimerOptions = (timeFormat: TimeFormat): ParamField[] => [
   getTimeOption(timeFormat),
+  hideTimerSeconds,
+  hideClockSeconds,
   {
     id: 'hideClock',
     title: 'Hide Time Now',
@@ -124,6 +141,7 @@ export const getTimerOptions = (timeFormat: TimeFormat): ParamField[] => [
 ];
 
 export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
+  hideTimerSeconds,
   {
     id: 'key',
     title: 'Key Colour',
@@ -265,6 +283,7 @@ export const LOWER_THIRDS_OPTIONS: ParamField[] = [
 
 export const getBackstageOptions = (timeFormat: TimeFormat): ParamField[] => [
   getTimeOption(timeFormat),
+  hideClockSeconds,
   {
     id: 'hidePast',
     title: 'Hide past events',
@@ -290,6 +309,7 @@ export const getBackstageOptions = (timeFormat: TimeFormat): ParamField[] => [
 
 export const getPublicOptions = (timeFormat: TimeFormat): ParamField[] => [
   getTimeOption(timeFormat),
+  hideClockSeconds,
   {
     id: 'hidePast',
     title: 'Hide past events',
@@ -314,6 +334,7 @@ export const getPublicOptions = (timeFormat: TimeFormat): ParamField[] => [
 ];
 export const getStudioClockOptions = (timeFormat: TimeFormat): ParamField[] => [
   getTimeOption(timeFormat),
+  hideClockSeconds,
   {
     id: 'seconds',
     title: 'Show Seconds',
@@ -389,3 +410,9 @@ export const getOperatorOptions = (userFields: UserFields, timeFormat: TimeForma
     },
   ];
 };
+
+export const getCountdownOptions = (timeFormat: TimeFormat): ParamField[] => [
+  getTimeOption(timeFormat),
+  hideTimerSeconds,
+  hideClockSeconds,
+];

apps/client/src/common/hooks-query/useOscSettings.ts

@@ -1,7 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-nocheck -- working on it
 import { useMutation, useQuery } from '@tanstack/react-query';
-import { OSCSettings } from 'ontime-types';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { OSC_SETTINGS } from '../api/apiConstants';
@@ -13,7 +10,10 @@ import { ontimeQueryClient } from '../queryClient';
 export default function useOscSettings() {
   const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: OSC_SETTINGS,
-    queryFn: getOSC,
+    queryFn: async () => {
+      const oscData = await getOSC();
+      return { ...oscData, portIn: String(oscData.portIn), portOut: String(oscData.portOut) };
+    },
     placeholderData: oscPlaceholderSettings,
     retry: 5,
     retryDelay: (attempt: number) => attempt * 2500,
@@ -21,8 +21,7 @@ export default function useOscSettings() {
     networkMode: 'always',
   });
 
-  // we need to jump through some hoops because of the type op port
-  return { data: data! as unknown as OSCSettings, status, isFetching, isError, refetch };
+  return { data: data ?? oscPlaceholderSettings, status, isFetching, isError, refetch };
 }
 
 export function useOscSettingsMutation() {

apps/client/src/common/models/View.types.ts

@@ -14,4 +14,5 @@ export type OverridableOptions = {
   hideEndMessage?: boolean;
   language?: string;
   showProgressBar?: boolean;
+  hideTimerSeconds?: boolean;
 };

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

@@ -36,4 +36,14 @@ describe('formatTime()', () => {
     const time = formatTime(ms, options, () => '12');
     expect(time).toStrictEqual('01:00 PM');
   });
+
+  it('handles negative times', () => {
+    const ms = 1 * 60 * 60 * 1000;
+    const options = {
+      showSeconds: false,
+      format: 'hh:mm:ss',
+    };
+    const time = formatTime(ms * -1, options, () => '24');
+    expect(time).toStrictEqual('-01:00');
+  });
 });

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

@@ -46,12 +46,21 @@ type FormatOptions = {
  * @param {function} resolver
  * @return {string}
  */
-export const formatTime = (milliseconds: number | null, options?: FormatOptions, resolver = resolveTimeFormat) => {
+export const formatTime = (
+  milliseconds: number | null,
+  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 isNegative = (milliseconds ?? 0) < 0;
+  const display =
+    timeFormat === '12'
+      ? formatFromMillis(Math.abs(milliseconds), formatString)
+      : millisToString(Math.abs(milliseconds), showSeconds);
+  return `${isNegative ? '-' : ''}${display}`;
 };