Release video rooms as a beta feature (#8431)

* Remove blank header from video room view frame

* Add a beta card for video rooms

* Rename the 'disclaimer' on beta cards to 'FAQ'

Because that's what the section actually gets used as

* Add beta pills to video room creation buttons

* Remove duplicate tooltips from face piles

* Add beta pill to headers of video rooms

* Factor RoomInfoLine out of SpaceRoomView

* Factor RoomPreviewCard out of SpaceRoomView

* Adapt RoomPreviewCard for video rooms

* "New video room" → "Video room"

* Add comment about unused cases in RoomPreviewCard

* Add types

* Clarify !important comments

* Add a reload warning

* Fix the reload warning being the wrong way around

* Fix lints

* Make widgets in video rooms mutable again to de-risk future upgrades

* Ensure that the video channel exists when mounting VideoRoomView

* Fix lint

* Iterate beta reload warning

src/settings/Settings.tsx

@@ -165,7 +165,7 @@ export interface IBaseSetting<T extends SettingValueType = SettingValueType> {
     betaInfo?: {
         title: string; // _td
         caption: () => ReactNode;
-        disclaimer?: (enabled: boolean) => ReactNode;
+        faq?: (enabled: boolean) => ReactNode;
         image?: string; // require(...)
         feedbackSubheading?: string;
         feedbackLabel?: string;
@@ -184,6 +184,42 @@ export interface IFeature extends Omit<IBaseSetting<boolean>, "isFeature"> {
 export type ISetting = IBaseSetting | IFeature;
 
 export const SETTINGS: {[setting: string]: ISetting} = {
+    "feature_video_rooms": {
+        isFeature: true,
+        labsGroup: LabGroup.Rooms,
+        displayName: _td("Video rooms"),
+        supportedLevels: LEVELS_FEATURE,
+        default: false,
+        // Reload to ensure that the left panel etc. get remounted
+        controller: new ReloadOnChangeController(),
+        betaInfo: {
+            title: _td("Video rooms"),
+            caption: () => <>
+                <p>
+                    { _t("A new way to chat over voice and video in %(brand)s.", {
+                        brand: SdkConfig.get().brand,
+                    }) }
+                </p>
+                <p>
+                    { _t("Video rooms are always-on VoIP channels embedded within a room in %(brand)s.", {
+                        brand: SdkConfig.get().brand,
+                    }) }
+                </p>
+            </>,
+            faq: () =>
+                SdkConfig.get().bug_report_endpoint_url && <>
+                    <h4>{ _t("How can I create a video room?") }</h4>
+                    <p>{ _t("Use the “+” button in the room section of the left panel.") }</p>
+                    <h4>{ _t("Can I use text chat alongside the video call?") }</h4>
+                    <p>{ _t("Yes, the chat timeline is displayed alongside the video.") }</p>
+                </>,
+            feedbackLabel: "video-room-feedback",
+            feedbackSubheading: _td("Thank you for trying the beta, " +
+                "please go into as much detail as you can so we can improve it."),
+            image: require("../../res/img/betas/video_rooms.png"),
+            requiresRefresh: true,
+        },
+    },
     "feature_msc3531_hide_messages_pending_moderation": {
         isFeature: true,
         labsGroup: LabGroup.Moderation,
@@ -232,7 +268,7 @@ export const SETTINGS: {[setting: string]: ISetting} = {
                     </a>,
                 }) }</p>
             </>,
-            disclaimer: () =>
+            faq: () =>
                 SdkConfig.get().bug_report_endpoint_url && <>
                     <h4>{ _t("How can I start a thread?") }</h4>
                     <p>
@@ -255,15 +291,6 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         },
 
     },
-    "feature_video_rooms": {
-        isFeature: true,
-        labsGroup: LabGroup.Rooms,
-        displayName: _td("Video rooms (under active development)"),
-        supportedLevels: LEVELS_FEATURE,
-        default: false,
-        // Reload to ensure that the left panel etc. get remounted
-        controller: new ReloadOnChangeController(),
-    },
     "feature_state_counters": {
         isFeature: true,
         labsGroup: LabGroup.Rooms,
@@ -363,7 +390,7 @@ export const SETTINGS: {[setting: string]: ISetting} = {
                 <p>{ _t("A new, quick way to search spaces and rooms you're in.") }</p>
                 <p>{ _t("This feature is a work in progress, we'd love to hear your feedback.") }</p>
             </>,
-            disclaimer: () => <>
+            faq: () => <>
                 { SdkConfig.get().bug_report_endpoint_url && <>
                     <h4>{ _t("How can I give feedback?") }</h4>
                     <p>{ _t("To feedback, join the beta, start a search and click on feedback.") }</p>