Release video rooms as a beta feature

res/css/structures/_VideoRoomView.scss

@@ -24,8 +24,7 @@ limitations under the License.
     margin-right: calc($container-gap-width / 2);
 
     background-color: $header-panel-bg-color;
-    padding-top: 33px; // to match the right panel chat heading
-    border: 8px solid $header-panel-bg-color;
+    padding: 8px;
     border-radius: 8px;
 
     .mx_AppTile {

res/css/views/beta/_BetaCard.scss

@@ -66,7 +66,7 @@ limitations under the License.
                 }
             }
 
-            .mx_BetaCard_disclaimer {
+            .mx_BetaCard_faq {
                 font-size: $font-12px;
                 line-height: $font-15px;
                 color: $secondary-content;

src/components/structures/SpaceRoomView.tsx

@@ -339,19 +339,23 @@ const SpaceLandingAddButton = ({ space }) => {
                             }
                         }}
                     />
-                    { videoRoomsEnabled && <IconizedContextMenuOption
-                        label={_t("New video room")}
-                        iconClassName="mx_RoomList_iconNewVideoRoom"
-                        onClick={async (e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            closeMenu();
-
-                            if (await showCreateNewRoom(space, RoomType.ElementVideo)) {
-                                defaultDispatcher.fire(Action.UpdateSpaceHierarchy);
-                            }
-                        }}
-                    /> }
+                    { videoRoomsEnabled && (
+                        <IconizedContextMenuOption
+                            label={_t("New video room")}
+                            iconClassName="mx_RoomList_iconPlus"
+                            onClick={async (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                closeMenu();
+
+                                if (await showCreateNewRoom(space, RoomType.ElementVideo)) {
+                                    defaultDispatcher.fire(Action.UpdateSpaceHierarchy);
+                                }
+                            }}
+                        >
+                            <BetaPill />
+                        </IconizedContextMenuOption>
+                    ) }
                 </> }
                 <IconizedContextMenuOption
                     label={_t("Add existing room")}

src/components/views/beta/BetaCard.tsx

@@ -80,7 +80,7 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
     const {
         title,
         caption,
-        disclaimer,
+        faq,
         image,
         feedbackLabel,
         feedbackSubheading,
@@ -138,8 +138,8 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
                         { content }
                     </AccessibleButton>
                 </div>
-                { disclaimer && <div className="mx_BetaCard_disclaimer">
-                    { disclaimer(value) }
+                { faq && <div className="mx_BetaCard_faq">
+                    { faq(value) }
                 </div> }
             </div>
             <div className="mx_BetaCard_columns_image_wrapper">

src/components/views/context_menus/SpaceContextMenu.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React, { useContext } from "react";
 import { Room } from "matrix-js-sdk/src/models/room";
-import { EventType } from "matrix-js-sdk/src/@types/event";
+import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
 
 import { IProps as IContextMenuProps } from "../../structures/ContextMenu";
 import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from "./IconizedContextMenu";
@@ -136,6 +136,7 @@ const SpaceContextMenu = ({ space, hideHeader, onFinished, ...props }: IProps) =
 
     const hasPermissionToAddSpaceChild = space.currentState.maySendStateEvent(EventType.SpaceChild, userId);
     const canAddRooms = hasPermissionToAddSpaceChild && shouldShowComponent(UIComponent.CreateRooms);
+    const canAddVideoRooms = canAddRooms && SettingsStore.getValue("feature_video_rooms");
     const canAddSubSpaces = hasPermissionToAddSpaceChild && shouldShowComponent(UIComponent.CreateSpaces);
 
     let newRoomSection: JSX.Element;
@@ -149,6 +150,14 @@ const SpaceContextMenu = ({ space, hideHeader, onFinished, ...props }: IProps) =
             onFinished();
         };
 
+        const onNewVideoRoomClick = (ev: ButtonEvent) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+
+            showCreateNewRoom(space, RoomType.ElementVideo);
+            onFinished();
+        };
+
         const onNewSubspaceClick = (ev: ButtonEvent) => {
             ev.preventDefault();
             ev.stopPropagation();
@@ -169,6 +178,16 @@ const SpaceContextMenu = ({ space, hideHeader, onFinished, ...props }: IProps) =
                     onClick={onNewRoomClick}
                 />
             }
+            { canAddVideoRooms &&
+                <IconizedContextMenuOption
+                    data-test-id='new-video-room-option'
+                    iconClassName="mx_SpacePanel_iconPlus"
+                    label={_t("Video room")}
+                    onClick={onNewVideoRoomClick}
+                >
+                    <BetaPill />
+                </IconizedContextMenuOption>
+            }
             { canAddSubSpaces &&
                 <IconizedContextMenuOption
                     data-test-id='new-subspace-option'

src/components/views/elements/FacePile.tsx

@@ -31,10 +31,16 @@ interface IProps extends HTMLAttributes<HTMLSpanElement> {
 
 const FacePile: FC<IProps> = ({ members, faceSize, overflow, tooltip, children, ...props }) => {
     const faces = members.map(
-        tooltip ?
-            m => <MemberAvatar key={m.userId} member={m} width={faceSize} height={faceSize} /> :
-            m => <TooltipTarget key={m.userId} label={m.name}>
-                <MemberAvatar member={m} width={faceSize} height={faceSize} viewUserOnClick={!props.onClick} />
+        tooltip
+            ? m => <MemberAvatar key={m.userId} member={m} width={faceSize} height={faceSize} hideTitle />
+            : m => <TooltipTarget key={m.userId} label={m.name}>
+                <MemberAvatar
+                    member={m}
+                    width={faceSize}
+                    height={faceSize}
+                    viewUserOnClick={!props.onClick}
+                    hideTitle
+                />
             </TooltipTarget>,
     );
 

src/components/views/rooms/RoomList.tsx

@@ -42,6 +42,7 @@ import IconizedContextMenu, {
     IconizedContextMenuOptionList,
 } from "../context_menus/IconizedContextMenu";
 import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
+import { BetaPill } from "../beta/BetaCard";
 import SpaceStore from "../../../stores/spaces/SpaceStore";
 import {
     isMetaSpace,
@@ -239,19 +240,23 @@ const UntaggedAuxButton = ({ tabIndex }: IAuxButtonProps) => {
                             tooltip={canAddRooms ? undefined
                                 : _t("You do not have permissions to create new rooms in this space")}
                         />
-                        { SettingsStore.getValue("feature_video_rooms") && <IconizedContextMenuOption
-                            label={_t("New video room")}
-                            iconClassName="mx_RoomList_iconNewVideoRoom"
-                            onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                closeMenu();
-                                showCreateNewRoom(activeSpace, RoomType.ElementVideo);
-                            }}
-                            disabled={!canAddRooms}
-                            tooltip={canAddRooms ? undefined
-                                : _t("You do not have permissions to create new rooms in this space")}
-                        /> }
+                        { SettingsStore.getValue("feature_video_rooms") && (
+                            <IconizedContextMenuOption
+                                label={_t("New video room")}
+                                iconClassName="mx_RoomList_iconNewVideoRoom"
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    closeMenu();
+                                    showCreateNewRoom(activeSpace, RoomType.ElementVideo);
+                                }}
+                                disabled={!canAddRooms}
+                                tooltip={canAddRooms ? undefined
+                                    : _t("You do not have permissions to create new rooms in this space")}
+                            >
+                                <BetaPill />
+                            </IconizedContextMenuOption>
+                        ) }
                         <IconizedContextMenuOption
                             label={_t("Add existing room")}
                             iconClassName="mx_RoomList_iconAddExistingRoom"
@@ -283,19 +288,23 @@ const UntaggedAuxButton = ({ tabIndex }: IAuxButtonProps) => {
                         PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuCreateRoomItem", e);
                     }}
                 />
-                { SettingsStore.getValue("feature_video_rooms") && <IconizedContextMenuOption
-                    label={_t("New video room")}
-                    iconClassName="mx_RoomList_iconNewVideoRoom"
-                    onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        closeMenu();
-                        defaultDispatcher.dispatch({
-                            action: "view_create_room",
-                            type: RoomType.ElementVideo,
-                        });
-                    }}
-                /> }
+                { SettingsStore.getValue("feature_video_rooms") && (
+                    <IconizedContextMenuOption
+                        label={_t("New video room")}
+                        iconClassName="mx_RoomList_iconNewVideoRoom"
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            closeMenu();
+                            defaultDispatcher.dispatch({
+                                action: "view_create_room",
+                                type: RoomType.ElementVideo,
+                            });
+                        }}
+                    >
+                        <BetaPill />
+                    </IconizedContextMenuOption>
+                ) }
             </> }
             <IconizedContextMenuOption
                 label={_t("Explore public rooms")}

src/components/views/rooms/RoomListHeader.tsx

@@ -220,16 +220,20 @@ const RoomListHeader = ({ onVisibilityChange }: IProps) => {
                         closePlusMenu();
                     }}
                 />
-                { videoRoomsEnabled && <IconizedContextMenuOption
-                    iconClassName="mx_RoomListHeader_iconNewVideoRoom"
-                    label={_t("New video room")}
-                    onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        showCreateNewRoom(activeSpace, RoomType.ElementVideo);
-                        closePlusMenu();
-                    }}
-                /> }
+                { videoRoomsEnabled && (
+                    <IconizedContextMenuOption
+                        iconClassName="mx_RoomListHeader_iconNewVideoRoom"
+                        label={_t("New video room")}
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            showCreateNewRoom(activeSpace, RoomType.ElementVideo);
+                            closePlusMenu();
+                        }}
+                    >
+                        <BetaPill />
+                    </IconizedContextMenuOption>
+                ) }
             </>;
         }
 
@@ -312,19 +316,23 @@ const RoomListHeader = ({ onVisibilityChange }: IProps) => {
                         closePlusMenu();
                     }}
                 />
-                { videoRoomsEnabled && <IconizedContextMenuOption
-                    label={_t("New video room")}
-                    iconClassName="mx_RoomListHeader_iconNewVideoRoom"
-                    onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        defaultDispatcher.dispatch({
-                            action: "view_create_room",
-                            type: RoomType.ElementVideo,
-                        });
-                        closePlusMenu();
-                    }}
-                /> }
+                { videoRoomsEnabled && (
+                    <IconizedContextMenuOption
+                        label={_t("New video room")}
+                        iconClassName="mx_RoomListHeader_iconNewVideoRoom"
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            defaultDispatcher.dispatch({
+                                action: "view_create_room",
+                                type: RoomType.ElementVideo,
+                            });
+                            closePlusMenu();
+                        }}
+                    >
+                        <BetaPill />
+                    </IconizedContextMenuOption>
+                ) }
             </>;
         }
         if (canExploreRooms) {

src/i18n/strings/en_EN.json

@@ -868,6 +868,14 @@
     "Encryption": "Encryption",
     "Experimental": "Experimental",
     "Developer": "Developer",
+    "Video rooms": "Video rooms",
+    "A new way to chat over voice and video in Element.": "A new way to chat over voice and video in Element.",
+    "Video rooms are always-on VoIP channels embedded within a room in Element.": "Video rooms are always-on VoIP channels embedded within a room in Element.",
+    "How can I create a video room?": "How can I create a video room?",
+    "Use the “+” button in the room section of the left panel.": "Use the “+” button in the room section of the left panel.",
+    "Can I use text chat alongside the video call?": "Can I use text chat alongside the video call?",
+    "Yes, the chat timeline is displayed alongside the video.": "Yes, the chat timeline is displayed alongside the video.",
+    "Thank you for trying the beta, please go into as much detail as you can so we can improve it.": "Thank you for trying the beta, please go into as much detail as you can so we can improve it.",
     "Let moderators hide messages pending moderation.": "Let moderators hide messages pending moderation.",
     "Report to moderators prototype. In rooms that support moderation, the `report` button will let you report abuse to room moderators": "Report to moderators prototype. In rooms that support moderation, the `report` button will let you report abuse to room moderators",
     "Show options to enable 'Do not disturb' mode": "Show options to enable 'Do not disturb' mode",
@@ -882,9 +890,7 @@
     "How can I leave the beta?": "How can I leave the beta?",
     "To leave, return to this page and use the “%(leaveTheBeta)s” button.": "To leave, return to this page and use the “%(leaveTheBeta)s” button.",
     "Leave the beta": "Leave the beta",
-    "Thank you for trying the beta, please go into as much detail as you can so we can improve it.": "Thank you for trying the beta, please go into as much detail as you can so we can improve it.",
     "Custom user status messages": "Custom user status messages",
-    "Video rooms (under active development)": "Video rooms (under active development)",
     "Render simple counters in room header": "Render simple counters in room header",
     "Multiple integration managers (requires manual setup)": "Multiple integration managers (requires manual setup)",
     "Try out new ways to ignore people (experimental)": "Try out new ways to ignore people (experimental)",
@@ -2917,6 +2923,7 @@
     "Forget": "Forget",
     "Mentions only": "Mentions only",
     "See room timeline (devtools)": "See room timeline (devtools)",
+    "Video room": "Video room",
     "Space": "Space",
     "Space home": "Space home",
     "Manage & explore rooms": "Manage & explore rooms",