feat: patch params editor (#428)

* feat: configure params in views

apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss

@@ -27,6 +27,7 @@ $button-size: 48px;
   position: fixed;
   left: 0;
   top: 0;
+  z-index: 2;
 
   &.hidden {
     opacity: 0;
@@ -46,7 +47,7 @@ $button-size: 48px;
 
 .navButton {
   @extend .button;
-  z-index: 2;
+  z-index: 3;
 }
 
 .menuContainer {

apps/client/src/common/components/progress-bar/ProgressBar.scss

@@ -18,5 +18,6 @@ $progress-bar-br: 6px;
   height: $progress-bar-size;
   background-color: var(--timer-progress-override, $accent-color);
   transition: 1s linear;
+  border-radius: $progress-bar-br 0 0 $progress-bar-br;
   transition-property: width;
 }

apps/client/src/common/components/view-params-editor/ParamInput.tsx

@@ -9,7 +9,7 @@ interface EditFormInputProps {
   paramField: ParamField;
 }
 
-export default function EditFormInput({ paramField }: EditFormInputProps) {
+export default function ParamInput({ paramField }: EditFormInputProps) {
   const [searchParams] = useSearchParams();
   const { id, type } = paramField;
 
@@ -38,7 +38,7 @@ export default function EditFormInput({ paramField }: EditFormInputProps) {
   if (type === 'number') {
     const defaultNumberValue = searchParams.get(id) ?? '';
 
-    return <Input type='number' variant='ontime-filled' name={id} defaultValue={defaultNumberValue} />;
+    return <Input type='number' step='any' variant='ontime-filled' name={id} defaultValue={defaultNumberValue} />;
   }
 
   const defaultStringValue = searchParams.get(id) ?? '';

apps/client/src/common/components/view-params-editor/ViewParamsEditor.module.scss

@@ -13,8 +13,14 @@
 .drawerFooter {
   @extend .drawerContent;
   display: flex;
+  justify-content: start;
   gap: $element-spacing;
 
+  button[type='reset'] {
+    padding: 0 2em;
+    margin-right: auto;
+  }
+
   button[type='submit'] {
     padding: 0 2em;
   }

apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx

@@ -12,16 +12,16 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 
-import EditFormInput from './EditFormInput';
+import ParamInput from './ParamInput';
 import { ParamField } from './types';
 
-import style from './EditFormDrawer.module.scss';
+import style from './ViewParamsEditor.module.scss';
 
 interface EditFormDrawerProps {
   paramFields: ParamField[];
 }
 
-export default function EditFormDrawer({ paramFields }: EditFormDrawerProps) {
+export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
   const [searchParams, setSearchParams] = useSearchParams();
   const { isOpen, onClose, onOpen } = useDisclosure();
 
@@ -40,6 +40,11 @@ export default function EditFormDrawer({ paramFields }: EditFormDrawerProps) {
     setSearchParams(searchParams);
   };
 
+  const clearParams = () => {
+    setSearchParams();
+    onClose();
+  };
+
   const onParamsFormSubmit = (formEvent: FormEvent<HTMLFormElement>) => {
     formEvent.preventDefault();
 
@@ -53,8 +58,6 @@ export default function EditFormDrawer({ paramFields }: EditFormDrawerProps) {
 
       return newSearchParams;
     }, new URLSearchParams());
-
-    onEditDrawerClose();
     setSearchParams(newSearchParams);
   };
 
@@ -74,7 +77,7 @@ export default function EditFormDrawer({ paramFields }: EditFormDrawerProps) {
                 <label className={style.label}>
                   <span className={style.title}>{field.title}</span>
                   <span className={style.description}>{field.description}</span>
-                  <EditFormInput key={field.title} paramField={field} />
+                  <ParamInput key={field.title} paramField={field} />
                 </label>
               </div>
             ))}
@@ -82,6 +85,9 @@ export default function EditFormDrawer({ paramFields }: EditFormDrawerProps) {
         </DrawerBody>
 
         <DrawerFooter className={style.drawerFooter}>
+          <Button variant='ontime-ghosted' onClick={clearParams} type='reset'>
+            Clear
+          </Button>
           <Button variant='ontime-subtle' onClick={onEditDrawerClose}>
             Cancel
           </Button>

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

@@ -9,9 +9,10 @@ export const TIME_FORMAT_OPTION: ParamField = {
 };
 
 export const CLOCK_OPTIONS: ParamField[] = [
+  TIME_FORMAT_OPTION,
   {
     id: 'key',
-    title: 'Key',
+    title: 'Key Colour',
     description: 'Background colour in hexadecimal',
     type: 'string',
   },
@@ -65,30 +66,14 @@ export const CLOCK_OPTIONS: ParamField[] = [
     description: 'Offsets the timer vertical position by a given amount in pixels',
     type: 'number',
   },
-  {
-    id: 'hidenav',
-    title: 'Hide Nav',
-    description: 'Whether to hide the nav logo in the right corner',
-    type: 'boolean',
-  },
-  TIME_FORMAT_OPTION,
 ];
 
-export const TIMER_OPTIONS: ParamField[] = [
-  {
-    id: 'progress',
-    title: 'Progress Bar',
-    description: 'Whether bar counts up or down',
-    type: 'option',
-    values: ['up', 'down'],
-  },
-  TIME_FORMAT_OPTION,
-];
+export const TIMER_OPTIONS: ParamField[] = [TIME_FORMAT_OPTION];
 
 export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
   {
     id: 'key',
-    title: 'Key',
+    title: 'Key Colour',
     description: 'Background colour in hexadecimal',
     type: 'string',
   },
@@ -142,12 +127,6 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
     description: 'Offsets the timer vertical position by a given amount in pixels',
     type: 'number',
   },
-  {
-    id: 'hidenav',
-    title: 'Hide Nav',
-    description: 'Whether to hide the nav logo in the right corner',
-    type: 'boolean',
-  },
   {
     id: 'hideovertime',
     title: 'Hide Overtime',
@@ -160,13 +139,19 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
     description: 'Whether to hide the overlay from showing timer screen messages',
     type: 'boolean',
   },
+  {
+    id: 'hideendmessage',
+    title: 'Hide End Message',
+    description: 'Whether to hide end message and continue showing the clock if timer is in overtime',
+    type: 'boolean',
+  },
 ];
 
 export const LOWER_THIRDS_OPTIONS: ParamField[] = [
   {
     id: 'preset',
     title: 'Preset',
-    description: 'Selects a style preset',
+    description: 'Selects a style preset (0-1)',
     type: 'number',
   },
   {
@@ -183,19 +168,19 @@ export const LOWER_THIRDS_OPTIONS: ParamField[] = [
   },
   {
     id: 'text',
-    title: 'Text',
+    title: 'Text Colour',
     description: 'Text colour in hexadecimal',
     type: 'string',
   },
   {
     id: 'bg',
-    title: 'BG',
+    title: 'Text Background',
     description: 'Text background colour in hexadecimal',
     type: 'string',
   },
   {
     id: 'key',
-    title: 'Key',
+    title: 'Key Colour',
     description: 'Screen background colour in hexadecimal',
     type: 'string',
   },
@@ -205,15 +190,14 @@ export const LOWER_THIRDS_OPTIONS: ParamField[] = [
     description: 'Time (in seconds) the lower third displays before fading out',
     type: 'number',
   },
-  TIME_FORMAT_OPTION,
 ];
 
 export const STUDIO_CLOCK_OPTIONS: ParamField[] = [
+  TIME_FORMAT_OPTION,
   {
     id: 'seconds',
-    title: 'Seconds',
+    title: 'Show Seconds',
     description: 'Shows seconds in clock',
     type: 'boolean',
   },
-  TIME_FORMAT_OPTION,
 ];