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/components/views/beta/BetaCard.tsx

@@ -79,7 +79,7 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
     const {
         title,
         caption,
-        disclaimer,
+        faq,
         image,
         feedbackLabel,
         feedbackSubheading,
@@ -99,6 +99,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 />;
@@ -137,8 +145,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">