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/RoomPage.tsx

@@ -43,14 +43,8 @@ import { ErrorView } from "../ErrorView";
 import { useMatrixRTCSessionJoinState } from "../useMatrixRTCSessionJoinState";
 
 export const RoomPage: FC = () => {
-  const {
-    confineToRoom,
-    appPrompt,
-    preload,
-    hideHeader,
-    displayName,
-    skipLobby,
-  } = useUrlParams();
+  const { confineToRoom, appPrompt, preload, header, displayName, skipLobby } =
+    useUrlParams();
   const { t } = useTranslation();
   const { roomAlias, roomId, viaServers } = useRoomIdentifier();
 
@@ -120,7 +114,7 @@ export const RoomPage: FC = () => {
             confineToRoom={confineToRoom}
             preload={preload}
             skipLobby={skipLobby || wasInWaitForInviteState.current}
-            hideHeader={hideHeader}
+            header={header}
             muteStates={muteStates}
           />
         );
@@ -161,7 +155,7 @@ export const RoomPage: FC = () => {
             enterLabel={label}
             waitingForInvite={groupCallState.kind === "waitForInvite"}
             confineToRoom={confineToRoom}
-            hideHeader={hideHeader}
+            hideHeader={header !== "standard"}
             participantCount={null}
             muteStates={muteStates}
             onShareClick={null}