refactor: param type colour

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

@@ -81,6 +81,17 @@ export default function ParamInput(props: EditFormInputProps) {
     );
   }
 
+  if (type === 'colour') {
+    const currentvalue = `#${searchParams.get(id) ?? defaultValue}`;
+
+    return (
+      <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+        <Input type='color' variant='ontime-filled' name={id} defaultValue={currentvalue} />
+        <span>{`Current colour: ${currentvalue.toUpperCase()}`}</span>
+      </div>
+    );
+  }
+
   const defaultStringValue = searchParams.get(id) ?? defaultValue;
   const { prefix, placeholder } = paramField;
 

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

@@ -19,6 +19,16 @@ import style from './ViewParamsEditor.module.scss';
 
 type ViewParamsObj = { [key: string]: string | FormDataEntryValue };
 
+/**
+ * Utility remove the # character from a hex string
+ */
+function sanitiseColour(colour: string) {
+  if (colour.startsWith('#')) {
+    return colour.substring(1);
+  }
+  return colour;
+}
+
 /**
  * Makes a new URLSearchParams object from the given params object
  */
@@ -41,7 +51,9 @@ const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj, paramFields: ViewOp
   // compare which values are different from the default values
   Object.entries(paramsObj).forEach(([id, value]) => {
     if (typeof value === 'string' && value.length && defaultValues[id] !== value) {
-      newSearchParams.set(id, value);
+      // we dont know which values contain colours
+      // unfortunately this means we run all the strings through the sanitation
+      newSearchParams.set(id, sanitiseColour(value));
     }
   });
   return newSearchParams;

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

@@ -23,10 +23,11 @@ type MultiOptionsField = {
 type StringField = { type: 'string'; defaultValue?: string; prefix?: string; placeholder?: string };
 type NumberField = { type: 'number'; defaultValue?: number; prefix?: string; placeholder?: string };
 type BooleanField = { type: 'boolean'; defaultValue: boolean };
+type ColourField = { type: 'colour'; defaultValue: string; placeholder?: string };
 type PersistedField = { type: 'persist'; defaultValue?: string; value: string };
 
 export type ParamField = BaseField &
-  (StringField | BooleanField | NumberField | OptionsField | MultiOptionsField | PersistedField);
+  (OptionsField | MultiOptionsField | StringField | NumberField | BooleanField | ColourField | PersistedField);
 export type ViewOption = ParamSection | ParamField;
 
 /**

apps/client/src/features/viewers/clock/clock.options.ts

@@ -8,26 +8,23 @@ export const getClockOptions = (timeFormat: string): ViewOption[] => [
   {
     id: 'key',
     title: 'Key Colour',
-    description: 'Background colour in hexadecimal',
+    description: 'Background or key colour for entire view. Default: #000000',
-    prefix: '#',
+    type: 'colour',
-    type: 'string',
+    defaultValue: '000000',
-    placeholder: '00000000 (default)',
   },
   {
     id: 'text',
     title: 'Text Colour',
-    description: 'Text colour in hexadecimal',
+    description: 'Text colour. Default: #FFFFFF',
-    prefix: '#',
+    type: 'colour',
-    type: 'string',
+    defaultValue: 'FFFFFF',
-    placeholder: 'fffff (default)',
   },
   {
     id: 'textbg',
     title: 'Text Background',
-    description: 'Colour of text background in hexadecimal',
+    description: 'Background colour for timer text. Default: #FFF0 (transparent)',
-    prefix: '#',
+    type: 'colour',
-    type: 'string',
+    defaultValue: 'FFF0',
-    placeholder: '00000000 (default)',
   },
   {
     id: 'font',

apps/client/src/features/viewers/lower-thirds/LowerThird.tsx

@@ -39,16 +39,16 @@ const defaultOptions: Readonly<LowerOptions> = {
   width: 45,
   topSrc: 'title',
   bottomSrc: 'lowerMsg',
-  topColour: '000000ff',
+  topColour: '000000',
-  bottomColour: '000000ff',
+  bottomColour: '000000',
-  topBg: '00000000',
+  topBg: 'FFF0',
-  bottomBg: '00000000',
+  bottomBg: 'FFF0',
   topSize: '65px',
   bottomSize: '40px',
   transition: 3,
   delay: 3,
-  key: 'ffffffff',
+  key: 'FFF0',
-  lineColour: 'ff0000ff',
+  lineColour: 'FF0000',
   lineHeight: '0.4em',
 };
 

apps/client/src/features/viewers/lower-thirds/lowerThird.options.ts

@@ -31,39 +31,22 @@ export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] =
       values: bottomSourceOptions,
       defaultValue: 'none',
     },
+    { section: 'View animation' },
+    {
+      id: 'transition',
+      title: 'Transition',
+      description: 'Transition in time in seconds (default 3)',
+      type: 'number',
+      placeholder: '3 (default)',
+    },
+    {
+      id: 'delay',
+      title: 'Delay',
+      description: 'Delay between transition in and out in seconds (default 3)',
+      type: 'number',
+      placeholder: '3 (default)',
+    },
     { section: 'View style override' },
-    {
-      id: 'top-colour',
-      title: 'Top Text Colour',
-      description: 'Top text colour in hexadecimal',
-      prefix: '#',
-      type: 'string',
-      placeholder: '0000ff (default)',
-    },
-    {
-      id: 'bottom-colour',
-      title: 'Bottom Text Colour',
-      description: 'Bottom text colour in hexadecimal',
-      prefix: '#',
-      type: 'string',
-      placeholder: '0000ff (default)',
-    },
-    {
-      id: 'top-bg',
-      title: 'Top Background Colour',
-      description: 'Top text background colour in hexadecimal',
-      prefix: '#',
-      type: 'string',
-      placeholder: '00000000 (default)',
-    },
-    {
-      id: 'bottom-bg',
-      title: 'Bottom Background Colour',
-      description: 'Bottom text background colour in hexadecimal',
-      prefix: '#',
-      type: 'string',
-      placeholder: '00000000 (default)',
-    },
     {
       id: 'top-size',
       title: 'Top Text Size',
@@ -86,35 +69,47 @@ export const getLowerThirdOptions = (customFields: CustomFields): ViewOption[] =
       prefix: '%',
       placeholder: '45 (default)',
     },
-    {
-      id: 'transition',
-      title: 'Transition',
-      description: 'Transition in time in seconds (default 3)',
-      type: 'number',
-      placeholder: '3 (default)',
-    },
-    {
-      id: 'delay',
-      title: 'Delay',
-      description: 'Delay between transition in and out in seconds (default 3)',
-      type: 'number',
-      placeholder: '3 (default)',
-    },
     {
       id: 'key',
       title: 'Key Colour',
-      description: 'Colour of the background',
+      description: 'Colour of the background. Default: #FFF0 (transparent)',
-      prefix: '#',
+      type: 'colour',
-      type: 'string',
+      defaultValue: 'FFF0',
-      placeholder: 'ffffffff (default)',
+    },
+    {
+      id: 'top-colour',
+      title: 'Top Text Colour',
+      description: 'Top text colour. Default: #000000',
+      type: 'colour',
+      defaultValue: '000000',
+    },
+    {
+      id: 'bottom-colour',
+      title: 'Bottom Text Colour',
+      description: 'Bottom text colour. Default: #000000',
+      type: 'colour',
+      defaultValue: '000000',
+    },
+    {
+      id: 'top-bg',
+      title: 'Top Background Colour',
+      description: 'Top text background colour. Default: #FFF0 (transparent)',
+      type: 'colour',
+      defaultValue: 'FFF0',
+    },
+    {
+      id: 'bottom-bg',
+      title: 'Bottom Background Colour',
+      description: 'Bottom text background colour. Default: #FFF0 (transparent)',
+      type: 'colour',
+      defaultValue: 'FFF0',
     },
     {
       id: 'line-colour',
       title: 'Line Colour',
-      description: 'Colour of the line',
+      description: 'Colour of the line. Default: #FF0000',
-      prefix: '#',
+      type: 'colour',
-      type: 'string',
+      defaultValue: 'FF0000',
-      placeholder: 'ff0000ff (default)',
     },
   ];
 };

apps/client/src/features/viewers/minimal-timer/minimalTimer.options.ts

@@ -23,26 +23,23 @@ export const MINIMAL_TIMER_OPTIONS: ViewOption[] = [
   {
     id: 'key',
     title: 'Key Colour',
-    description: 'Background colour in hexadecimal',
+    description: 'Background or key colour for entire view. Default: #000000',
-    prefix: '#',
+    type: 'colour',
-    type: 'string',
+    defaultValue: '000000',
-    placeholder: '00000000 (default)',
   },
   {
     id: 'text',
     title: 'Text Colour',
-    description: 'Text colour in hexadecimal',
+    description: 'Text colour. Default: #FFFFFF',
-    prefix: '#',
+    type: 'colour',
-    type: 'string',
+    defaultValue: 'FFFFFF',
-    placeholder: 'fffff (default)',
   },
   {
     id: 'textbg',
     title: 'Text Background',
-    description: 'Colour of text background in hexadecimal',
+    description: 'Background colour for timer text. Default: #FFF0 (transparent)',
-    prefix: '#',
+    type: 'colour',
-    type: 'string',
+    defaultValue: 'FFF0',
-    placeholder: '00000000 (default)',
   },
   {
     id: 'font',