diff --git a/element.io/app/config.json b/element.io/app/config.json index 4dcc75aeeb..771df35091 100644 --- a/element.io/app/config.json +++ b/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" } } diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index 16bf45435a..a53d06fd1c 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/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; +} diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index e47a785779..fc6fbcffa7 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/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.*/} diff --git a/src/hooks/room/useRoomCall.ts b/src/hooks/room/useRoomCall.tsx similarity index 96% rename from src/hooks/room/useRoomCall.ts rename to src/hooks/room/useRoomCall.tsx index adf16cc5cc..c7319b4e58 100644 --- a/src/hooks/room/useRoomCall.ts +++ b/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 ; + default: + return null; + } +}; const enum State { NoCall, NoOneHere,