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

e2e/tests/features/201-message-control.spec.ts

@@ -20,7 +20,7 @@ test('message control sends messages to screens', async ({ context }) => {
   await editorPage.getByPlaceholder('Shown in lower third').fill('testing lower');
   await editorPage.getByRole('button', { name: /toggle lower third message/i }).click();
 
-  await featurePage.goto('http://localhost:4001/lower');
+  await featurePage.goto('http://localhost:4001/lower?trigger=manual&bottom-src=lowerMsg');
   await featurePage.waitForLoadState('load', { timeout: 5000 });
   await featurePage.getByText('testing lower').click({ timeout: 5000 });