Hide calling buttons in room header before a room is created (#30816)

* Hide call buttons until room has been created.

* lint

* lint

* Update snapshot

* update snaps

Author: Half-Shot

playwright/e2e/invite/invite-dialog.spec.ts

@@ -113,6 +113,8 @@ test.describe("Invite dialog", function () {
                 "rgba(0, 0, 0, 0)",
             );
 
+            await expect(page.locator(".mx_RoomView")).toMatchScreenshot("send_your_first_message_view.png");
+
             // Send a message to invite the bots
             const composer = app.getComposer().locator("[contenteditable]");
             await composer.fill("Hello}");

playwright/snapshots/invite/invite-dialog.spec.ts/send-your-first-message-view-linux.png

@@ -54,13 +54,14 @@ import { RoomSettingsTab } from "../../dialogs/RoomSettingsDialog.tsx";
 import { useScopedRoomContext } from "../../../../contexts/ScopedRoomContext.tsx";
 import { ToggleableIcon } from "./toggle/ToggleableIcon.tsx";
 import { CurrentRightPanelPhaseContextProvider } from "../../../../contexts/CurrentRightPanelPhaseContext.tsx";
+import { type LocalRoom } from "../../../../models/LocalRoom.ts";
 
 export default function RoomHeader({
     room,
     additionalButtons,
     oobData,
 }: {
-    room: Room;
+    room: Room | LocalRoom;
     additionalButtons?: ViewRoomOpts["buttons"];
     oobData?: IOOBData;
 }): JSX.Element {

src/components/views/rooms/RoomHeader/RoomHeader.tsx

@@ -36,6 +36,7 @@ import { isVideoRoom } from "../../utils/video-rooms";
 import { UIFeature } from "../../settings/UIFeature";
 import { type InteractionName } from "../../PosthogTrackers";
 import { ElementCallMemberEventType } from "../../call-types";
+import { LocalRoom, LocalRoomState } from "../../models/LocalRoom";
 
 export enum PlatformCallType {
     ElementCall,
@@ -83,7 +84,7 @@ const enum State {
  * @returns the call button attributes for the given room
  */
 export const useRoomCall = (
-    room: Room,
+    room: Room | LocalRoom,
 ): {
     voiceCallDisabledReason: string | null;
     voiceCallClick(evt: React.MouseEvent | undefined, selectedType: PlatformCallType): void;
@@ -274,11 +275,16 @@ export const useRoomCall = (
         });
     }, [isViewingCall, room.roomId]);
 
+    const roomDoesNotExist = room instanceof LocalRoom && room.state !== LocalRoomState.CREATED;
+
     // We hide the voice call button if it'd have the same effect as the video call button
     let hideVoiceCallButton = isManagedHybridWidgetEnabled(room) || !callOptions.includes(PlatformCallType.LegacyCall);
     let hideVideoCallButton = false;
-    // We hide both buttons if they require widgets but widgets are disabled, or if the Voip feature is disabled.
-    if ((memberCount > 2 && !widgetsFeatureEnabled) || !voipFeatureEnabled) {
+    // We hide both buttons if:
+    // - they require widgets but widgets are disabled
+    // - if the Voip feature is disabled.
+    // - The room is not created yet (rendering "send first message view")
+    if ((memberCount > 2 && !widgetsFeatureEnabled) || !voipFeatureEnabled || roomDoesNotExist) {
         hideVoiceCallButton = true;
         hideVideoCallButton = true;
     }