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/state/MediaDevices.ts

@@ -42,10 +42,13 @@ const logger = rootLogger.getChild("[MediaDevices]");
 
 export type DeviceLabel =
   | { type: "name"; name: string }
-  | { type: "number"; number: number }
-  | { type: "default"; name: string | null };
+  | { type: "number"; number: number };
 
-export type AudioOutputDeviceLabel = DeviceLabel | { type: "earpiece" };
+export type AudioOutputDeviceLabel =
+  | DeviceLabel
+  | { type: "speaker" }
+  | { type: "earpiece" }
+  | { type: "default"; name: string | null };
 
 export interface SelectedDevice {
   id: string;
@@ -211,7 +214,8 @@ class AudioOutput
     this.scope,
   ).pipe(
     map((availableRaw) => {
-      const available = buildDeviceMap(availableRaw);
+      const available: Map<string, AudioOutputDeviceLabel> =
+        buildDeviceMap(availableRaw);
       // Create a virtual default audio output for browsers that don't have one.
       // Its device ID must be the empty string because that's what setSinkId
       // recognizes.
@@ -269,7 +273,7 @@ class ControlledAudioOutput
             let deviceLabel: AudioOutputDeviceLabel;
             // if (isExternalHeadset) // Do we want this?
             if (isEarpiece) deviceLabel = { type: "earpiece" };
-            else if (isSpeaker) deviceLabel = { type: "default", name };
+            else if (isSpeaker) deviceLabel = { type: "speaker" };
             else deviceLabel = { type: "name", name };
             return [id, deviceLabel];
           },