Add "Back to video" button

locales/en/app.json

@@ -80,8 +80,9 @@
   },
   "disconnected_banner": "Connectivity to the server has been lost.",
   "earpiece": {
-    "overlay_title": "Earpiece only mode",
+    "overlay_back_button": "Back to video",
-    "overlay_description": "Only works while using app"
+    "overlay_description": "Only works while using app",
+    "overlay_title": "Earpiece only mode"
   },
   "error": {
     "call_is_not_supported": "Call is not supported",

src/room/EarpieceOverlay.tsx

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type FC } from "react";
-import { BigIcon, Heading, Text } from "@vector-im/compound-web";
+import { BigIcon, Button, Heading, Text } from "@vector-im/compound-web";
 import { EarpieceIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { useTranslation } from "react-i18next";
 
@@ -14,6 +14,7 @@ import styles from "./EarpieceOverlay.module.css";
 
 interface Props {
   show: boolean;
+  onBackButtonPressed?: (() => void) | null;
 }
 
 export const EarpieceOverlay: FC<Props> = ({ show }) => {
@@ -27,6 +28,9 @@ export const EarpieceOverlay: FC<Props> = ({ show }) => {
         {t("earpiece.overlay_title")}
       </Heading>
       <Text>{t("earpiece.overlay_description")}</Text>
+      <Button kind="primary" size="sm">
+        {t("earpiece.overlay_back_button")}
+      </Button>
     </div>
   );
 };

src/room/InCallView.tsx

@@ -787,7 +787,10 @@ export const InCallView: FC<InCallViewProps> = ({
       {renderContent()}
       <CallEventAudioRenderer vm={vm} muted={muteAllAudio} />
       <ReactionsAudioRenderer vm={vm} muted={muteAllAudio} />
-      <EarpieceOverlay show={earpieceMode} />
+      <EarpieceOverlay
+        show={earpieceMode}
+        onBackButtonPressed={toggleEarpieceMode}
+      />
       <ReactionsOverlay vm={vm} />
       {footer}
       {layout.type !== "pip" && (