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/features/app-settings/panel/general-panel/GeneralPanel.module.scss

@@ -0,0 +1,4 @@
+.actionButtons {
+  display: flex;
+  gap: 1em;
+}

apps/client/src/features/app-settings/panel/general-panel/GeneralPanel.tsx

@@ -0,0 +1,28 @@
+import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
+import { PanelBaseProps } from '../../settingsStore';
+import EditorSettingsForm from '../interface-panel/EditorSettingsForm';
+import * as Panel from '../PanelUtils';
+
+import GeneralPanelForm from './GeneralPanelForm';
+import ViewSettingsForm from './ViewSettingsForm';
+
+export default function GeneralPanel({ location }: PanelBaseProps) {
+  const generalRef = useScrollIntoView<HTMLDivElement>('settings', location);
+  const editorRef = useScrollIntoView<HTMLDivElement>('editor', location);
+  const viewRef = useScrollIntoView<HTMLDivElement>('view', location);
+
+  return (
+    <>
+      <Panel.Header>App Settings</Panel.Header>
+      <div ref={generalRef}>
+        <GeneralPanelForm />
+      </div>
+      <div ref={editorRef}>
+        <EditorSettingsForm />
+      </div>
+      <div ref={viewRef}>
+        <ViewSettingsForm />
+      </div>
+    </>
+  );
+}

apps/client/src/features/app-settings/panel/general-panel/GeneralPanelForm.tsx

@@ -0,0 +1,163 @@
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { Button, Input, Select } from '@chakra-ui/react';
+import { Settings } from 'ontime-types';
+
+import { postSettings } from '../../../../common/api/settings';
+import { maybeAxiosError } from '../../../../common/api/utils';
+import useSettings from '../../../../common/hooks-query/useSettings';
+import { isOnlyNumbers } from '../../../../common/utils/regex';
+import * as Panel from '../PanelUtils';
+
+import GeneralPinInput from './GeneralPinInput';
+
+import style from './GeneralPanel.module.scss';
+
+export type GeneralPanelFormValues = {
+  filename: string;
+};
+
+export default function GeneralPanelForm() {
+  const { data, status, refetch } = useSettings();
+  const {
+    handleSubmit,
+    register,
+    reset,
+    setError,
+    formState: { isSubmitting, isDirty, isValid, errors },
+  } = useForm<Settings>({
+    defaultValues: data,
+    values: data,
+    resetOptions: {
+      keepDirtyValues: true,
+    },
+  });
+
+  // update form if we get new data from server
+  useEffect(() => {
+    if (data) {
+      reset(data);
+    }
+  }, [data, reset]);
+
+  const onSubmit = async (formData: Settings) => {
+    try {
+      await postSettings(formData);
+    } catch (error) {
+      const message = maybeAxiosError(error);
+      setError('root', { message });
+    } finally {
+      await refetch();
+    }
+  };
+
+  const disableInputs = status === 'pending';
+  const disableSubmit = isSubmitting || !isDirty || !isValid;
+  const submitError = '';
+
+  const onReset = () => {
+    reset(data);
+  };
+
+  const isLoading = status === 'pending';
+
+  return (
+    <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} id='app-settings'>
+      <Panel.Card>
+        <Panel.SubHeader>
+          General settings
+          <div className={style.actionButtons}>
+            <Button isDisabled={!isDirty || isSubmitting} variant='ontime-ghosted' size='sm' onClick={onReset}>
+              Revert to saved
+            </Button>
+            <Button
+              type='submit'
+              form='app-settings'
+              isLoading={isSubmitting}
+              isDisabled={disableSubmit}
+              variant='ontime-filled'
+              size='sm'
+            >
+              Save
+            </Button>
+          </div>
+        </Panel.SubHeader>
+        {submitError && <Panel.Error>{submitError}</Panel.Error>}
+        <Panel.Divider />
+        <Panel.Section>
+          <Panel.Loader isLoading={isLoading} />
+          <Panel.ListGroup>
+            <Panel.ListItem>
+              <Panel.Field
+                title='Ontime server port'
+                description='Port ontime server listens in. Defaults to 4001 (needs app restart)'
+                error={errors.serverPort?.message}
+              />
+              <Input
+                id='serverPort'
+                size='sm'
+                type='number'
+                variant='ontime-filled'
+                maxLength={5}
+                width='75px'
+                {...register('serverPort', {
+                  required: { value: true, message: 'Required field' },
+                  max: { value: 65535, message: 'Port must be within range 1024 - 65535' },
+                  min: { value: 1024, message: 'Port must be within range 1024 - 65535' },
+                  pattern: {
+                    value: isOnlyNumbers,
+                    message: 'Value should be numeric',
+                  },
+                })}
+              />
+            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field
+                title='Editor pin code'
+                description='Protect the editor view with a pin code'
+                error={errors.editorKey?.message}
+              />
+              <GeneralPinInput register={register} formName='editorKey' isDisabled={disableInputs} />
+            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field
+                title='Operator pin code'
+                description='Protect the operator and cuesheet views with a pin code'
+                error={errors.operatorKey?.message}
+              />
+              <GeneralPinInput register={register} formName='operatorKey' isDisabled={disableInputs} />
+            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field
+                title='Time format'
+                description='Default time format to show in views 12 /24 hours'
+                error={errors.timeFormat?.message}
+              />
+              <Select variant='ontime' size='sm' width='auto' isDisabled={disableInputs} {...register('timeFormat')}>
+                <option value='12'>12 hours 11:00:10 PM</option>
+                <option value='24'>24 hours 23:00:10</option>
+              </Select>
+            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field
+                title='Views language'
+                description='Language to be displayed in views'
+                error={errors.language?.message}
+              />
+              <Select variant='ontime' size='sm' width='auto' isDisabled={disableInputs} {...register('language')}>
+                <option value='en'>English</option>
+                <option value='fr'>French</option>
+                <option value='de'>German</option>
+                <option value='it'>Italian</option>
+                <option value='no'>Norwegian</option>
+                <option value='pt'>Portuguese</option>
+                <option value='es'>Spanish</option>
+                <option value='sv'>Swedish</option>
+              </Select>
+            </Panel.ListItem>
+          </Panel.ListGroup>
+        </Panel.Section>
+      </Panel.Card>
+    </Panel.Section>
+  );
+}

apps/client/src/features/app-settings/panel/general-panel/GeneralPinInput.tsx

@@ -0,0 +1,39 @@
+import { PropsWithChildren, useState } from 'react';
+import { UseFormRegister } from 'react-hook-form';
+import { IconButton, Input, InputGroup, InputRightElement } from '@chakra-ui/react';
+import { IoEyeOutline } from '@react-icons/all-files/io5/IoEyeOutline';
+import { Settings } from 'ontime-types';
+
+interface GeneralPinInputProps {
+  register: UseFormRegister<Settings>;
+  formName: keyof Settings;
+  isDisabled?: boolean;
+}
+
+export default function GeneralPinInput(props: PropsWithChildren<GeneralPinInputProps>) {
+  const { register, formName, isDisabled } = props;
+  const [isVisible, setVisible] = useState(false);
+
+  return (
+    <InputGroup size='sm' width='100px'>
+      <Input
+        variant='ontime-filled'
+        type={isVisible ? 'text' : 'password'}
+        maxLength={4}
+        {...register(formName)}
+        placeholder='-'
+        isDisabled={isDisabled}
+      />
+      <InputRightElement>
+        <IconButton
+          onMouseDown={() => setVisible(true)}
+          onMouseUp={() => setVisible(false)}
+          size='sm'
+          variant='ontime-ghosted'
+          icon={<IoEyeOutline />}
+          aria-label='Show pin code'
+        />
+      </InputRightElement>
+    </InputGroup>
+  );
+}

apps/client/src/features/app-settings/panel/general-panel/ViewSettingsForm.tsx

@@ -0,0 +1,159 @@
+import { useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { Alert, AlertDescription, AlertIcon, Button, Input, Switch } from '@chakra-ui/react';
+import { ViewSettings } from 'ontime-types';
+
+import { maybeAxiosError } from '../../../../common/api/utils';
+import { postViewSettings } from '../../../../common/api/viewSettings';
+import ExternalLink from '../../../../common/components/external-link/ExternalLink';
+import { PopoverPickerRHF } from '../../../../common/components/input/popover-picker/PopoverPicker';
+import useInfo from '../../../../common/hooks-query/useInfo';
+import useViewSettings from '../../../../common/hooks-query/useViewSettings';
+import * as Panel from '../PanelUtils';
+
+import style from './GeneralPanel.module.scss';
+
+const cssOverrideDocsUrl = 'https://docs.getontime.no/features/custom-styling/';
+
+export default function ViewSettingsForm() {
+  const { data, status, refetch } = useViewSettings();
+  const { data: info, status: infoStatus } = useInfo();
+
+  const {
+    control,
+    handleSubmit,
+    register,
+    reset,
+    setError,
+    formState: { isSubmitting, isDirty },
+  } = useForm<ViewSettings>({
+    defaultValues: data,
+    values: data,
+    resetOptions: {
+      keepDirtyValues: true,
+    },
+  });
+
+  // update form if we get new data from server
+  useEffect(() => {
+    if (data) {
+      reset(data);
+    }
+  }, [data, reset]);
+
+  const onSubmit = async (formData: ViewSettings) => {
+    const newData = {
+      ...formData,
+    };
+
+    try {
+      await postViewSettings(newData);
+    } catch (error) {
+      const message = maybeAxiosError(error);
+      setError('root', { message });
+    } finally {
+      await refetch();
+    }
+  };
+
+  const onReset = () => {
+    reset(data);
+  };
+
+  if (!control) {
+    return null;
+  }
+
+  const isLoading = status === 'pending' || infoStatus === 'pending';
+
+  return (
+    <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} id='view-settings'>
+      <Panel.Card>
+        <Panel.SubHeader>
+          View settings
+          <div className={style.actionButtons}>
+            <Button isDisabled={!isDirty} variant='ontime-ghosted' size='sm' onClick={onReset}>
+              Revert to saved
+            </Button>
+            <Button type='submit' isLoading={isSubmitting} isDisabled={!isDirty} variant='ontime-filled' size='sm'>
+              Save
+            </Button>
+          </div>
+        </Panel.SubHeader>
+        <Panel.Divider />
+        <Alert status='info' variant='ontime-on-dark-info'>
+          <AlertIcon />
+          <AlertDescription>
+            You can override the styles of the viewers with a custom CSS file. <br />
+            {info?.cssOverride && `In your installation the file is at ${info?.cssOverride}`}
+            <br />
+            <br />
+            <ExternalLink href={cssOverrideDocsUrl}>See the docs</ExternalLink>
+          </AlertDescription>
+        </Alert>
+        <Panel.Section>
+          <Panel.Loader isLoading={isLoading} />
+          <Panel.ListGroup>
+            <Panel.ListItem>
+              <Panel.Field
+                title='Override CSS styles'
+                description='Enables overriding view styles with custom stylesheet'
+              />
+              <Controller
+                control={control}
+                name='overrideStyles'
+                render={({ field: { onChange, value, ref } }) => (
+                  <Switch variant='ontime' size='lg' isChecked={value} onChange={onChange} ref={ref} />
+                )}
+              />
+            </Panel.ListItem>
+          </Panel.ListGroup>
+          <Panel.ListGroup>
+            <Panel.ListItem>
+              <Panel.Field title='Timer colour' description='Default colour of a running timer' />
+              <PopoverPickerRHF name='normalColor' control={control} />
+            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field title='Warning colour' description='Colour of a running timer in warning mode' />
+              <PopoverPickerRHF name='warningColor' control={control} />
+            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field title='Danger colour' description='Colour of a running timer in danger mode' />
+              <PopoverPickerRHF name='dangerColor' control={control} />
+            </Panel.ListItem>
+          </Panel.ListGroup>
+          <Panel.ListGroup>
+            <Panel.ListItem>
+              <Panel.Field
+                title='Freeze timer on end'
+                description='Timer in views will stop from going negative after reaching'
+              />
+              <Controller
+                control={control}
+                name='freezeEnd'
+                render={({ field: { onChange, value, ref } }) => (
+                  <Switch variant='ontime' size='lg' isChecked={value} onChange={onChange} ref={ref} />
+                )}
+              />
+            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field
+                title='End message'
+                description='Message to show on negative timers if not frozen. If not provided, timer will continue'
+              />
+              <Input
+                size='sm'
+                autoComplete='off'
+                variant='ontime-filled'
+                maxLength={150}
+                width='275px'
+                placeholder='Message shown when timer reaches end'
+                {...register('endMessage')}
+              />
+            </Panel.ListItem>
+          </Panel.ListGroup>
+        </Panel.Section>
+      </Panel.Card>
+    </Panel.Section>
+  );
+}