Release video rooms as a beta feature

res/css/views/beta/_BetaCard.scss

@@ -20,6 +20,7 @@ limitations under the License.
     background-color: $system;
     border-radius: 8px;
     box-sizing: border-box;
+    color: $secondary-content;
 
     .mx_BetaCard_columns {
         display: flex;
@@ -45,14 +46,13 @@ limitations under the License.
             .mx_BetaCard_caption {
                 font-size: $font-15px;
                 line-height: $font-20px;
-                color: $secondary-content;
             }
 
             .mx_BetaCard_buttons {
                 display: flex;
                 flex-wrap: wrap-reverse;
-                gap: 12px;
-                margin: 20px auto;
+                gap: $spacing-12;
+                margin: $spacing-20 auto 0;
 
                 .mx_AccessibleButton {
                     padding: 7px 40px;
@@ -66,10 +66,16 @@ limitations under the License.
                 }
             }
 
-            .mx_BetaCard_disclaimer {
+            .mx_BetaCard_refreshWarning {
+                margin-top: $spacing-8;
+                font-size: $font-10px;
+                text-align: center;
+            }
+
+            .mx_BetaCard_faq {
+                margin-top: $spacing-20;
                 font-size: $font-12px;
                 line-height: $font-15px;
-                color: $secondary-content;
 
                 > h4 {
                     margin: 12px 0 0;
@@ -105,7 +111,6 @@ limitations under the License.
                 margin-top: 4px;
                 font-size: $font-12px;
                 line-height: $font-15px;
-                color: $secondary-content;
             }
         }
     }

res/css/views/rooms/_RoomHeader.scss

@@ -44,6 +44,10 @@ limitations under the License.
     .mx_InviteOnlyIcon_large {
         margin: 0;
     }
+
+    .mx_BetaCard_betaPill {
+        margin-right: $spacing-8;
+    }
 }
 
 .mx_RoomHeader_spinner {

res/css/views/rooms/_RoomPreviewCard.scss

@@ -105,6 +105,13 @@ limitations under the License.
                 mask-image: url('$(res)/img/element-icons/call/video-call.svg');
             }
         }
+
+        // XXX Remove this when video rooms leave beta
+        .mx_BetaCard_betaPill {
+            position: absolute;
+            right: $spacing-24;
+            top: $spacing-32;
+        }
     }
 
     h1.mx_RoomPreviewCard_name {

src/components/structures/SpaceRoomView.tsx

@@ -134,19 +134,23 @@ const SpaceLandingAddButton = ({ space }) => {
                             }
                         }}
                     />
-                    { videoRoomsEnabled && <IconizedContextMenuOption
-                        label={_t("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("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,
@@ -100,6 +100,14 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
         </AccessibleButton>;
     }
 
+    let refreshWarning: string;
+    if (requiresRefresh) {
+        const brand = SdkConfig.get().brand;
+        refreshWarning = value
+            ? _t("Leaving the beta will reload %(brand)s.", { brand })
+            : _t("Joining the beta will reload %(brand)s.", { brand });
+    }
+
     let content: ReactNode;
     if (busy) {
         content = <InlineSpinner />;
@@ -138,8 +146,11 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
                         { content }
                     </AccessibleButton>
                 </div>
-                { disclaimer && <div className="mx_BetaCard_disclaimer">
-                    { disclaimer(value) }
+                { refreshWarning && <div className="mx_BetaCard_refreshWarning">
+                    { refreshWarning }
+                </div> }
+                { faq && <div className="mx_BetaCard_faq">
+                    { faq(value) }
                 </div> }
             </div>
             <div className="mx_BetaCard_columns_image_wrapper">

src/components/views/context_menus/SpaceContextMenu.tsx

@@ -184,7 +184,9 @@ const SpaceContextMenu = ({ space, hideHeader, onFinished, ...props }: IProps) =
                     iconClassName="mx_SpacePanel_iconPlus"
                     label={_t("Video room")}
                     onClick={onNewVideoRoomClick}
-                />
+                >
+                    <BetaPill />
+                </IconizedContextMenuOption>
             }
             { canAddSubSpaces &&
                 <IconizedContextMenuOption

src/components/views/rooms/RoomHeader.tsx

@@ -23,6 +23,9 @@ import { CallType } from "matrix-js-sdk/src/webrtc/call";
 
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import { Action } from "../../../dispatcher/actions";
+import { UserTab } from "../dialogs/UserTab";
 import SettingsStore from "../../../settings/SettingsStore";
 import RoomHeaderButtons from '../right_panel/RoomHeaderButtons';
 import E2EIcon from './E2EIcon';
@@ -41,6 +44,7 @@ import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePha
 import { NotificationStateEvents } from '../../../stores/notifications/NotificationState';
 import RoomContext from "../../../contexts/RoomContext";
 import RoomLiveShareWarning from '../beacon/RoomLiveShareWarning';
+import { BetaPill } from "../beta/BetaCard";
 
 export interface ISearchInfo {
     searchTerm: string;
@@ -273,6 +277,15 @@ export default class RoomHeader extends React.Component<IProps, IState> {
 
         const e2eIcon = this.props.e2eStatus ? <E2EIcon status={this.props.e2eStatus} /> : undefined;
 
+        const isVideoRoom = SettingsStore.getValue("feature_video_rooms") && this.props.room.isElementVideoRoom();
+        const viewLabs = () => defaultDispatcher.dispatch({
+            action: Action.ViewUserSettings,
+            initialTabId: UserTab.Labs,
+        });
+        const betaPill = isVideoRoom ? (
+            <BetaPill onClick={viewLabs} tooltipTitle={_t("Video rooms are a beta feature")} />
+        ) : null;
+
         return (
             <div className="mx_RoomHeader light-panel">
                 <div className="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
@@ -281,6 +294,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
                     { name }
                     { searchStatus }
                     { topicElement }
+                    { betaPill }
                     { rightRow }
                     <RoomHeaderButtons room={this.props.room} excludedRightPanelPhaseButtons={this.props.excludedRightPanelPhaseButtons} />
                 </div>

src/components/views/rooms/RoomList.tsx

@@ -41,6 +41,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,
@@ -238,19 +239,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("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("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"
@@ -282,19 +287,23 @@ const UntaggedAuxButton = ({ tabIndex }: IAuxButtonProps) => {
                         PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuCreateRoomItem", e);
                     }}
                 />
-                { SettingsStore.getValue("feature_video_rooms") && <IconizedContextMenuOption
-                    label={_t("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("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("Video room")}
-                    onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        showCreateNewRoom(activeSpace, RoomType.ElementVideo);
-                        closePlusMenu();
-                    }}
-                /> }
+                { videoRoomsEnabled && (
+                    <IconizedContextMenuOption
+                        iconClassName="mx_RoomListHeader_iconNewVideoRoom"
+                        label={_t("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("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("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/components/views/rooms/RoomPreviewCard.tsx

@@ -35,6 +35,7 @@ import RoomTopic from "../elements/RoomTopic";
 import RoomFacePile from "../elements/RoomFacePile";
 import RoomAvatar from "../avatars/RoomAvatar";
 import MemberAvatar from "../avatars/MemberAvatar";
+import { BetaPill } from "../beta/BetaCard";
 import RoomInfoLine from "./RoomInfoLine";
 
 interface IProps {
@@ -151,6 +152,7 @@ const RoomPreviewCard: FC<IProps> = ({ room, onJoinButtonClicked, onRejectButton
         avatarRow = <>
             <RoomAvatar room={room} height={50} width={50} viewAvatarOnClick />
             <div className="mx_RoomPreviewCard_video" />
+            <BetaPill onClick={viewLabs} tooltipTitle={_t("Video rooms are a beta feature")} />
         </>;
     } else if (room.isSpaceRoom()) {
         avatarRow = <RoomAvatar room={room} height={80} width={80} viewAvatarOnClick />;