refactor: update lower third (#665)

* init

* auto in out

* fix in out animation and other options

* move some constants to css override

* dont show block if text source is empty

* select trigger

* adjust the animation

* remove the old one and replace it in the router

* return null from useEffect when there is no timer to clear

* typo: manuel -> manual

* fix: delay is excluding transition in time

* rename to top and bottom

* change font size to px and increese the default

* sharper animation timning

* fix: dont need state for options

* fix: e2e test for lower third

* deafault to ffffff00 key color

* typo: scss naming

* style: all white default bg key

* style: add default values to src options

* style: `white-space: nowrap;`

* style: start out animation a bit early

* style: browser tab title

* fix: checking the correct default values in ViewParamsEditor

* fix: defaultValues save improved by @asharonbaltazar

* lint: capitalize enum names

* fix: memoize options

* fix: searchParams test

* fix: readability of `topText` and `bottomText` and memoize them

* fix: enum naming upper case

* refactor: remove cx import

* refactor: try to simplify is else flow

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

@@ -23,14 +23,14 @@ type ViewParamsObj = { [key: string]: string | FormDataEntryValue };
 type SavedViewParams = Record<string, ViewParamsObj>;
 
 const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj, paramFields: ParamField[]) => {
-  const defaultValues = paramFields.map(({ defaultValue }) => String(defaultValue));
-
+  const defaultValues = paramFields.reduce<Record<string, string>>((acc, { id, defaultValue }) => {
+    return { ...acc, [id]: String(defaultValue) };
+  }, {});
   return Object.entries(paramsObj).reduce((newSearchParams, [id, value]) => {
     if (typeof value === 'string' && value.length) {
-      if (defaultValues.includes(value)) {
+      if (defaultValues[id] === value) {
         return newSearchParams;
       }
-
       newSearchParams.set(id, value);
 
       return newSearchParams;

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

@@ -233,13 +233,97 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
   },
 ];
 
-export const LOWER_THIRDS_OPTIONS: ParamField[] = [
+export const LOWER_THIRD_OPTIONS: ParamField[] = [
   {
-    id: 'size',
-    title: 'Size',
-    description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
+    id: 'trigger',
+    title: 'Animation Trigger',
+    description: '',
+    type: 'option',
+    values: {
+      event: 'Event Load',
+      manual: 'Manual',
+    },
+    defaultValue: 'event',
+  },
+  {
+    id: 'top-src',
+    title: 'Top Text',
+    description: '',
+    type: 'option',
+    values: {
+      title: 'Title',
+      subtitle: 'Subtitle',
+      presenter: 'Presenter',
+      lowerMsg: 'Lower Thrid Message',
+    },
+    defaultValue: 'title',
+  },
+  {
+    id: 'bottom-src',
+    title: 'Bottom Text',
+    description: 'Select the text source for the bottom element',
+    type: 'option',
+    values: {
+      title: 'Title',
+      subtitle: 'Subtitle',
+      presenter: 'Presenter',
+      lowerMsg: 'Lower Thrid Message',
+    },
+    defaultValue: 'subtitle',
+  },
+  {
+    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',
+    description: 'Font size of the top text',
+    type: 'string',
+    placeholder: '65px',
+  },
+  {
+    id: 'bottom-size',
+    title: 'Bottom Text Size',
+    description: 'Font size of the bottom text',
+    type: 'string',
+    placeholder: '64px',
+  },
+  {
+    id: 'width',
+    title: 'Minimum Width',
+    description: 'Minimum Width of the element',
     type: 'number',
-    placeholder: '1 (default)',
+    prefix: '%',
+    placeholder: '45 (default)',
   },
   {
     id: 'transition',
@@ -249,35 +333,27 @@ export const LOWER_THIRDS_OPTIONS: ParamField[] = [
     placeholder: '3 (default)',
   },
   {
-    id: 'text',
-    title: 'Text Colour',
-    description: 'Text colour in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: 'fffffa (default)',
-  },
-  {
-    id: 'bg',
-    title: 'Text Background',
-    description: 'Text background colour in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: '00000033 (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: 'Screen background colour in hexadecimal',
+    description: 'Colour of the background',
     prefix: '#',
     type: 'string',
-    placeholder: '00000033 (default)',
+    placeholder: 'ffffffff (default)',
   },
   {
-    id: 'fadeout',
-    title: 'Fadeout',
-    description: 'Time (in seconds) the lower third displays before fading out',
-    type: 'number',
-    placeholder: '3 (default)',
+    id: 'line-colour',
+    title: 'Line Colour',
+    description: 'Colour of the line',
+    prefix: '#',
+    type: 'string',
+    placeholder: 'ff0000ff (default)',
   },
 ];