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/utils/test-viewmodel.ts

@@ -18,7 +18,12 @@ import EventEmitter from "events";
 import type { RoomMember, MatrixClient } from "matrix-js-sdk";
 import { E2eeType } from "../e2ee/e2eeType";
 import { CallViewModel } from "../state/CallViewModel";
-import { mockLivekitRoom, mockMatrixRoom, MockRTCSession } from "./test";
+import {
+  mockLivekitRoom,
+  mockMatrixRoom,
+  mockMediaDevices,
+  MockRTCSession,
+} from "./test";
 import {
   aliceRtcMember,
   aliceParticipant,
@@ -132,6 +137,7 @@ export function getBasicCallViewModelEnvironment(
   const vm = new CallViewModel(
     rtcSession as unknown as MatrixRTCSession,
     liveKitRoom,
+    mockMediaDevices({}),
     {
       kind: E2eeType.PER_PARTICIPANT,
     },