Enable Element Call by default on release instances (#28313)

Update button label to say it is a Beta

Signed-off-by: Michael Telatynski <[email protected]>

element.io/app/config.json

@@ -46,5 +46,13 @@
     "map_style_url": "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx",
     "setting_defaults": {
         "RustCrypto.staged_rollout_percent": 60
+    },
+    "features": {
+        "feature_video_rooms": true,
+        "feature_group_calls": true,
+        "feature_element_call_video_rooms": true
+    },
+    "element_call": {
+        "url": "https://call.element.io"
     }
 }

res/css/views/rooms/_RoomHeader.pcss

@@ -88,3 +88,8 @@ Please see LICENSE files in the repository root for full details.
 .mx_RoomHeader .mx_BaseAvatar {
     flex-shrink: 0;
 }
+
+.mx_RoomHeader_videoCallOption {
+    /* Workaround for https://github.com/element-hq/compound/issues/331 */
+    min-width: 240px;
+}

src/components/views/rooms/RoomHeader.tsx

@@ -27,7 +27,7 @@ import { useRoomMemberCount, useRoomMembers } from "../../../hooks/useRoomMember
 import { _t } from "../../../languageHandler";
 import { Flex } from "../../utils/Flex";
 import { Box } from "../../utils/Box";
-import { getPlatformCallTypeLabel, useRoomCall } from "../../../hooks/room/useRoomCall";
+import { getPlatformCallTypeChildren, getPlatformCallTypeLabel, useRoomCall } from "../../../hooks/room/useRoomCall";
 import { useRoomThreadNotifications } from "../../../hooks/room/useRoomThreadNotifications";
 import { useGlobalNotificationState } from "../../../hooks/useGlobalNotificationState";
 import SdkConfig from "../../../SdkConfig";
@@ -172,6 +172,8 @@ export default function RoomHeader({
                             key={option}
                             label={getPlatformCallTypeLabel(option)}
                             aria-label={getPlatformCallTypeLabel(option)}
+                            children={getPlatformCallTypeChildren(option)}
+                            className="mx_RoomHeader_videoCallOption"
                             onClick={(ev) => videoCallClick(ev, option)}
                             Icon={VideoCallIcon}
                             onSelect={() => {} /* Dummy handler since we want the click event.*/}

src/hooks/room/useRoomCall.ts → src/hooks/room/useRoomCall.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { Room } from "matrix-js-sdk/src/matrix";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
 import { CallType } from "matrix-js-sdk/src/webrtc/call";
 
 import { useFeatureEnabled } from "../useSettings";
@@ -35,6 +35,7 @@ import { isVideoRoom } from "../../utils/video-rooms";
 import { useGuestAccessInformation } from "./useGuestAccessInformation";
 import SettingsStore from "../../settings/SettingsStore";
 import { UIFeature } from "../../settings/UIFeature";
+import { BetaPill } from "../../components/views/beta/BetaCard";
 
 export enum PlatformCallType {
     ElementCall,
@@ -51,6 +52,14 @@ export const getPlatformCallTypeLabel = (platformCallType: PlatformCallType): st
             return _t("voip|legacy_call");
     }
 };
+export const getPlatformCallTypeChildren = (platformCallType: PlatformCallType): ReactNode => {
+    switch (platformCallType) {
+        case PlatformCallType.ElementCall:
+            return <BetaPill />;
+        default:
+            return null;
+    }
+};
 const enum State {
     NoCall,
     NoOneHere,