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/room/InCallView.test.tsx

@@ -47,6 +47,7 @@ import { ReactionsSenderProvider } from "../reactions/useReactionsSender";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { MatrixAudioRenderer } from "../livekit/MatrixAudioRenderer";
 import { MediaDevicesContext } from "../MediaDevicesContext";
+import { HeaderStyle } from "../UrlParams";
 
 // vi.hoisted(() => {
 //   localStorage = {} as unknown as Storage;
@@ -158,7 +159,7 @@ function createInCallView(): RenderResult & {
             <RoomContext value={livekitRoom}>
               <InCallView
                 client={client}
-                hideHeader={true}
+                header={HeaderStyle.Standard}
                 rtcSession={rtcSession as unknown as MatrixRTCSession}
                 muteStates={muteState}
                 vm={vm}
@@ -243,6 +244,7 @@ describe("InCallView", () => {
         queryByText("using to Device key transport"),
       ).not.toBeInTheDocument();
     });
+
     it("is not shown if setting is disabled", () => {
       useExperimentalToDeviceTransportSetting.setValue(false);
       developerModeSetting.setValue(true);
@@ -254,6 +256,7 @@ describe("InCallView", () => {
         queryByText("using to Device key transport"),
       ).not.toBeInTheDocument();
     });
+
     it("is not shown if developer mode is disabled", () => {
       useExperimentalToDeviceTransportSetting.setValue(true);
       developerModeSetting.setValue(false);