refactor: param type colour

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',
-    prefix: '#',
-    type: 'string',
-    placeholder: '00000000 (default)',
+    description: 'Background or key colour for entire view. Default: #000000',
+    type: 'colour',
+    defaultValue: '000000',
   },
   {
     id: 'text',
     title: 'Text Colour',
-    description: 'Text colour in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: 'fffff (default)',
+    description: 'Text colour. Default: #FFFFFF',
+    type: 'colour',
+    defaultValue: 'FFFFFF',
   },
   {
     id: 'textbg',
     title: 'Text Background',
-    description: 'Colour of text background in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: '00000000 (default)',
+    description: 'Background colour for timer text. Default: #FFF0 (transparent)',
+    type: 'colour',
+    defaultValue: 'FFF0',
   },
   {
     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',
-  bottomColour: '000000ff',
-  topBg: '00000000',
-  bottomBg: '00000000',
+  topColour: '000000',
+  bottomColour: '000000',
+  topBg: 'FFF0',
+  bottomBg: 'FFF0',
   topSize: '65px',
   bottomSize: '40px',
   transition: 3,
   delay: 3,
-  key: 'ffffffff',
-  lineColour: 'ff0000ff',
+  key: 'FFF0',
+  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',
-      prefix: '#',
-      type: 'string',
-      placeholder: 'ffffffff (default)',
+      description: 'Colour of the background. Default: #FFF0 (transparent)',
+      type: 'colour',
+      defaultValue: 'FFF0',
+    },
+    {
+      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',
-      prefix: '#',
-      type: 'string',
-      placeholder: 'ff0000ff (default)',
+      description: 'Colour of the line. Default: #FF0000',
+      type: 'colour',
+      defaultValue: 'FF0000',
     },
   ];
 };

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',
-    prefix: '#',
-    type: 'string',
-    placeholder: '00000000 (default)',
+    description: 'Background or key colour for entire view. Default: #000000',
+    type: 'colour',
+    defaultValue: '000000',
   },
   {
     id: 'text',
     title: 'Text Colour',
-    description: 'Text colour in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: 'fffff (default)',
+    description: 'Text colour. Default: #FFFFFF',
+    type: 'colour',
+    defaultValue: 'FFFFFF',
   },
   {
     id: 'textbg',
     title: 'Text Background',
-    description: 'Colour of text background in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: '00000000 (default)',
+    description: 'Background colour for timer text. Default: #FFF0 (transparent)',
+    type: 'colour',
+    defaultValue: 'FFF0',
   },
   {
     id: 'font',