Earpiece switcher and overlay (#3347)

* Add a global control for toggling earpiece mode

This will be used by Element X to show an earpiece toggle button in the header.

* Add an earpiece overlay


* Fix header
The header needs to be passed forward as a string to some components and as a bool (hideHeader) to others.
Also use a enum instead of string options.

* fix top clipping with header


* hide app bar in pip

* revert android overlay app_bar

* Modernize AppBarContext

* Style header icon color as desired and switch earpice/speaker icon

* fix initial selection when using controlled media

* Add "Back to video" button

* fix tests

* remove dead code

* add snapshot test

* fix back to video button

* Request capability to learn the room name

We now need the room name in order to implement the mobile (widget-based) designs with the app bar.

* Test the CallViewModel output switcher directly

---------

Co-authored-by: Timo <toger5@hotmail.de>

src/UrlParams.ts

@@ -25,6 +25,12 @@ export enum UserIntent {
   Unknown = "unknown",
 }
 
+export enum HeaderStyle {
+  None = "none",
+  Standard = "standard",
+  AppBar = "app_bar",
+}
+
 // If you need to add a new flag to this interface, prefer a name that describes
 // a specific behavior (such as 'confineToRoom'), rather than one that describes
 // the situations that call for this behavior ('isEmbedded'). This makes it
@@ -59,9 +65,12 @@ export interface UrlParams {
    */
   preload: boolean;
   /**
-   * Whether to hide the room header when in a call.
+   * The style of headers to show. "standard" is the default arrangement, "none"
+   * hides the header entirely, and "app_bar" produces a header with a back
+   * button like you might see in mobile apps. The callback for the back button
+   * is window.controls.onBackButtonPressed.
    */
-  hideHeader: boolean;
+  header: HeaderStyle;
   /**
    * Whether the controls should be shown. For screen recording no controls can be desired.
    */
@@ -257,6 +266,15 @@ export const getUrlParams = (
   if (!intent || !Object.values(UserIntent).includes(intent as UserIntent)) {
     intent = UserIntent.Unknown;
   }
+
+  // Check hideHeader for backwards compatibility. If header is set, hideHeader
+  // is ignored.
+  const header =
+    parser.getParam("header") ??
+    (parser.getFlagParam("hideHeader")
+      ? HeaderStyle.None
+      : HeaderStyle.Standard);
+
   const widgetId = parser.getParam("widgetId");
   const parentUrl = parser.getParam("parentUrl");
   const isWidget = !!widgetId && !!parentUrl;
@@ -275,7 +293,7 @@ export const getUrlParams = (
       parser.getFlagParam("confineToRoom") || parser.getFlagParam("embed"),
     appPrompt: parser.getFlagParam("appPrompt", true),
     preload: isWidget ? parser.getFlagParam("preload") : false,
-    hideHeader: parser.getFlagParam("hideHeader"),
+    header: header as HeaderStyle,
     showControls: parser.getFlagParam("showControls", true),
     hideScreensharing: parser.getFlagParam("hideScreensharing"),
     e2eEnabled: parser.getFlagParam("enableE2EE", true),