Add chat button on new room header for maximised widgets (#12882)

* Add chat button to new room header for video room & maximised widgets Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> * Delint Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> * Update snapshot Signed-off-by: Michael Telatynski <[email protected]> * Update screenshot Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
element-hq · Aug 12, 2024 · eacb22e · eacb22e
1 parent 0e37c09
commit eacb22e
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 6 deletions.
diff --git a/playwright/snapshots/room/room-header.spec.ts/room-header-video-room-linux.png b/playwright/snapshots/room/room-header.spec.ts/room-header-video-room-linux.png
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
@@ -161,7 +161,7 @@ interface IRoomProps {
 
 // This defines the content of the mainSplit.
 // If the mainSplit does not contain the Timeline, the chat is shown in the right panel.
-enum MainSplitContentType {
+export enum MainSplitContentType {
     Timeline,
     MaximisedWidget,
     Call,

diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useContext, useMemo, useState } from "react";
 import { Body as BodyText, Button, IconButton, Menu, MenuItem, Tooltip } from "@vector-im/compound-web";
 import { Icon as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call-solid.svg";
 import { Icon as VoiceCallIcon } from "@vector-im/compound-design-tokens/icons/voice-call.svg";
@@ -50,7 +50,7 @@ import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import PosthogTrackers from "../../../PosthogTrackers";
 import { VideoRoomChatButton } from "./RoomHeader/VideoRoomChatButton";
 import { RoomKnocksBar } from "./RoomKnocksBar";
-import { isVideoRoom } from "../../../utils/video-rooms";
+import { useIsVideoRoom } from "../../../utils/video-rooms";
 import { notificationLevelToIndicator } from "../../../utils/notifications";
 import { CallGuestLinkButton } from "./RoomHeader/CallGuestLinkButton";
 import { ButtonEvent } from "../elements/AccessibleButton";
@@ -59,6 +59,8 @@ import { useIsReleaseAnnouncementOpen } from "../../../hooks/useIsReleaseAnnounc
 import { ReleaseAnnouncementStore } from "../../../stores/ReleaseAnnouncementStore";
 import WithPresenceIndicator, { useDmMember } from "../avatars/WithPresenceIndicator";
 import { IOOBData } from "../../../stores/ThreepidInviteStore";
+import RoomContext from "../../../contexts/RoomContext";
+import { MainSplitContentType } from "../../structures/RoomView";
 
 export default function RoomHeader({
     room,
@@ -233,6 +235,13 @@ export default function RoomHeader({
 
     const isReleaseAnnouncementOpen = useIsReleaseAnnouncementOpen("newRoomHeader");
 
+    const roomContext = useContext(RoomContext);
+    const isVideoRoom = useIsVideoRoom(room);
+    const showChatButton =
+        isVideoRoom ||
+        roomContext.mainSplitContentType === MainSplitContentType.MaximisedWidget ||
+        roomContext.mainSplitContentType === MainSplitContentType.Call;
+
     return (
         <>
             <Flex as="header" align="center" gap="var(--cpd-space-3x)" className="mx_RoomHeader light-panel">
@@ -325,14 +334,13 @@ export default function RoomHeader({
                     })}
 
                     {isViewingCall && <CallGuestLinkButton room={room} />}
-                    {((isConnectedToCall && isViewingCall) || isVideoRoom(room)) && <VideoRoomChatButton room={room} />}
 
                     {hasActiveCallSession && !isConnectedToCall && !isViewingCall ? (
                         joinCallButton
                     ) : (
                         <>
-                            {!isVideoRoom(room) && videoCallButton}
-                            {!useElementCallExclusively && !isVideoRoom(room) && voiceCallButton}
+                            {!isVideoRoom && videoCallButton}
+                            {!useElementCallExclusively && !isVideoRoom && voiceCallButton}
                         </>
                     )}
 
@@ -347,6 +355,9 @@ export default function RoomHeader({
                             <RoomInfoIcon />
                         </IconButton>
                     </Tooltip>
+
+                    {showChatButton && <VideoRoomChatButton room={room} />}
+
                     <Tooltip label={_t("common|threads")}>
                         <IconButton
                             indicator={notificationLevelToIndicator(threadNotifications)}

diff --git a/test/components/views/rooms/RoomHeader-test.tsx b/test/components/views/rooms/RoomHeader-test.tsx
@@ -617,6 +617,7 @@ describe("RoomHeader", () => {
                 },
             ]);
             jest.spyOn(client, "isCryptoEnabled").mockReturnValue(true);
+            jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Normal);
         });
 
         it.each([