From 9d0230b6abd63a2b66bb1da26b6a941a1f2c235c Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Fri, 20 Jan 2023 08:45:39 -0500
Subject: [PATCH] Show the room name in the room header during calls (#9942)

---
 res/css/views/rooms/_RoomHeader.pcss      |  2 +-
 src/components/views/rooms/RoomHeader.tsx | 18 ++++++++----------
 src/i18n/strings/en_EN.json               |  2 +-
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss
index f1636055b17..c6ab2add227 100644
--- a/res/css/views/rooms/_RoomHeader.pcss
+++ b/res/css/views/rooms/_RoomHeader.pcss
@@ -108,7 +108,7 @@ limitations under the License.
     display: flex;
     user-select: none;
 
-    &:not(.mx_RoomHeader_name--textonly):hover {
+    &:hover {
         background-color: $quinary-content;
     }
 
diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx
index 4dbec26caf6..605298391fc 100644
--- a/src/components/views/rooms/RoomHeader.tsx
+++ b/src/components/views/rooms/RoomHeader.tsx
@@ -743,6 +743,13 @@ export default class RoomHeader extends React.Component<IProps, IState> {
 
         const buttons = this.props.showButtons ? this.renderButtons(isVideoRoom) : null;
 
+        let oobName = _t("Join Room");
+        if (this.props.oobData && this.props.oobData.name) {
+            oobName = this.props.oobData.name;
+        }
+
+        const name = this.renderName(oobName);
+
         if (this.props.viewingCall && !isVideoRoom) {
             return (
                 <header className="mx_RoomHeader light-panel">
@@ -752,9 +759,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
                     >
                         <div className="mx_RoomHeader_avatar">{roomAvatar}</div>
                         {icon}
-                        <div className="mx_RoomHeader_name mx_RoomHeader_name--textonly mx_RoomHeader_name--small">
-                            {_t("Video call")}
-                        </div>
+                        {name}
                         {this.props.activeCall instanceof ElementCall && (
                             <GroupCallDuration groupCall={this.props.activeCall.groupCall} />
                         )}
@@ -779,13 +784,6 @@ export default class RoomHeader extends React.Component<IProps, IState> {
             );
         }
 
-        let oobName = _t("Join Room");
-        if (this.props.oobData && this.props.oobData.name) {
-            oobName = this.props.oobData.name;
-        }
-
-        const name = this.renderName(oobName);
-
         const topicElement = <RoomTopic room={this.props.room} className="mx_RoomHeader_topic" />;
 
         const viewLabs = (): void =>
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index f3768067cd3..c932fab0c33 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1997,9 +1997,9 @@
     "Close call": "Close call",
     "View chat timeline": "View chat timeline",
     "Room options": "Room options",
+    "Join Room": "Join Room",
     "(~%(count)s results)|other": "(~%(count)s results)",
     "(~%(count)s results)|one": "(~%(count)s result)",
-    "Join Room": "Join Room",
     "Video rooms are a beta feature": "Video rooms are a beta feature",
     "Video room": "Video room",
     "Public space": "Public space",