From 0e5aea41823c33d464715ad8dd23d9bc1ec7b0a6 Mon Sep 17 00:00:00 2001
From: Timo <toger5@hotmail.de>
Date: Wed, 25 Jun 2025 13:02:39 +0200
Subject: [PATCH] Add "Back to video" button

---
 locales/en/app.json          | 5 +++--
 src/room/EarpieceOverlay.tsx | 6 +++++-
 src/room/InCallView.tsx      | 5 ++++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/locales/en/app.json b/locales/en/app.json
index 8ebba69e..428cba58 100644
--- a/locales/en/app.json
+++ b/locales/en/app.json
@@ -80,8 +80,9 @@
   },
   "disconnected_banner": "Connectivity to the server has been lost.",
   "earpiece": {
-    "overlay_title": "Earpiece only mode",
-    "overlay_description": "Only works while using app"
+    "overlay_back_button": "Back to video",
+    "overlay_description": "Only works while using app",
+    "overlay_title": "Earpiece only mode"
   },
   "error": {
     "call_is_not_supported": "Call is not supported",
diff --git a/src/room/EarpieceOverlay.tsx b/src/room/EarpieceOverlay.tsx
index f1f13941..edf425a5 100644
--- a/src/room/EarpieceOverlay.tsx
+++ b/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>
   );
 };
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 0538a935..c1d73acd 100644
--- a/src/room/InCallView.tsx
+++ b/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" && (