Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 3046094

Browse files
robintownrobintown
authored
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
1 parent c180708 commit 3046094

File tree

13 files changed

+189
-87
lines changed

13 files changed

+189
-87
lines changed

‎res/css/views/beta/_BetaCard.scss

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ limitations under the License.
2020
background-color: $system;
2121
border-radius: 8px;
2222
box-sizing: border-box;
23+
color: $secondary-content;
2324

2425
.mx_BetaCard_columns {
2526
display: flex;
@@ -45,14 +46,13 @@ limitations under the License.
4546
.mx_BetaCard_caption {
4647
font-size: $font-15px;
4748
line-height: $font-20px;
48-
color: $secondary-content;
4949
}
5050

5151
.mx_BetaCard_buttons {
5252
display: flex;
5353
flex-wrap: wrap-reverse;
54-
gap: 12px;
55-
margin: 20px auto;
54+
gap: $spacing-12;
55+
margin: $spacing-20 auto 0;
5656

5757
.mx_AccessibleButton {
5858
padding: 7px 40px;
@@ -66,10 +66,16 @@ limitations under the License.
6666
}
6767
}
6868

69-
.mx_BetaCard_disclaimer {
69+
.mx_BetaCard_refreshWarning {
70+
margin-top: $spacing-8;
71+
font-size: $font-10px;
72+
text-align: center;
73+
}
74+
75+
.mx_BetaCard_faq {
76+
margin-top: $spacing-20;
7077
font-size: $font-12px;
7178
line-height: $font-15px;
72-
color: $secondary-content;
7379

7480
> h4 {
7581
margin: 12px 0 0;
@@ -105,7 +111,6 @@ limitations under the License.
105111
margin-top: 4px;
106112
font-size: $font-12px;
107113
line-height: $font-15px;
108-
color: $secondary-content;
109114
}
110115
}
111116
}

‎res/css/views/rooms/_RoomHeader.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,10 @@ limitations under the License.
4444
.mx_InviteOnlyIcon_large {
4545
margin: 0;
4646
}
47+
48+
.mx_BetaCard_betaPill {
49+
margin-right: $spacing-8;
50+
}
4751
}
4852

4953
.mx_RoomHeader_spinner {

‎res/css/views/rooms/_RoomPreviewCard.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,13 @@ limitations under the License.
105105
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
106106
}
107107
}
108+
109+
// XXX Remove this when video rooms leave beta
110+
.mx_BetaCard_betaPill {
111+
position: absolute;
112+
right: $spacing-24;
113+
top: $spacing-32;
114+
}
108115
}
109116

110117
h1.mx_RoomPreviewCard_name {

‎res/img/betas/video_rooms.png

217 KB
Loading

‎src/components/structures/SpaceRoomView.tsx

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ const SpaceLandingAddButton = ({ space }) => {
123123
{ canCreateRoom && <>
124124
<IconizedContextMenuOption
125125
label={_t("New room")}
126-
iconClassName="mx_RoomList_iconPlus"
126+
iconClassName="mx_RoomList_iconNewRoom"
127127
onClick={async (e) => {
128128
e.preventDefault();
129129
e.stopPropagation();
@@ -135,19 +135,23 @@ const SpaceLandingAddButton = ({ space }) => {
135135
}
136136
}}
137137
/>
138-
{ videoRoomsEnabled && <IconizedContextMenuOption
139-
label={_t("New video room")}
140-
iconClassName="mx_RoomList_iconNewVideoRoom"
141-
onClick={async (e) => {
142-
e.preventDefault();
143-
e.stopPropagation();
144-
closeMenu();
145-
146-
if (await showCreateNewRoom(space, RoomType.ElementVideo)) {
147-
defaultDispatcher.fire(Action.UpdateSpaceHierarchy);
148-
}
149-
}}
150-
/> }
138+
{ videoRoomsEnabled && (
139+
<IconizedContextMenuOption
140+
label={_t("New video room")}
141+
iconClassName="mx_RoomList_iconNewVideoRoom"
142+
onClick={async (e) => {
143+
e.preventDefault();
144+
e.stopPropagation();
145+
closeMenu();
146+
147+
if (await showCreateNewRoom(space, RoomType.ElementVideo)) {
148+
defaultDispatcher.fire(Action.UpdateSpaceHierarchy);
149+
}
150+
}}
151+
>
152+
<BetaPill />
153+
</IconizedContextMenuOption>
154+
) }
151155
</> }
152156
<IconizedContextMenuOption
153157
label={_t("Add existing room")}

‎src/components/views/beta/BetaCard.tsx

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
7979
const {
8080
title,
8181
caption,
82-
disclaimer,
82+
faq,
8383
image,
8484
feedbackLabel,
8585
feedbackSubheading,
@@ -99,6 +99,14 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
9999
</AccessibleButton>;
100100
}
101101

102+
let refreshWarning: string;
103+
if (requiresRefresh) {
104+
const brand = SdkConfig.get().brand;
105+
refreshWarning = value
106+
? _t("Leaving the beta will reload %(brand)s.", { brand })
107+
: _t("Joining the beta will reload %(brand)s.", { brand });
108+
}
109+
102110
let content: ReactNode;
103111
if (busy) {
104112
content = <InlineSpinner />;
@@ -137,8 +145,11 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
137145
{ content }
138146
</AccessibleButton>
139147
</div>
140-
{ disclaimer && <div className="mx_BetaCard_disclaimer">
141-
{ disclaimer(value) }
148+
{ refreshWarning && <div className="mx_BetaCard_refreshWarning">
149+
{ refreshWarning }
150+
</div> }
151+
{ faq && <div className="mx_BetaCard_faq">
152+
{ faq(value) }
142153
</div> }
143154
</div>
144155
<div className="mx_BetaCard_columns_image_wrapper">

‎src/components/views/context_menus/SpaceContextMenu.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,9 @@ const SpaceContextMenu = ({ space, hideHeader, onFinished, ...props }: IProps) =
184184
iconClassName="mx_SpacePanel_iconPlus"
185185
label={_t("Video room")}
186186
onClick={onNewVideoRoomClick}
187-
/>
187+
>
188+
<BetaPill />
189+
</IconizedContextMenuOption>
188190
}
189191
{ canAddSubSpaces &&
190192
<IconizedContextMenuOption

‎src/components/views/rooms/RoomHeader.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ import { CallType } from "matrix-js-sdk/src/webrtc/call";
2323

2424
import { _t } from '../../../languageHandler';
2525
import { MatrixClientPeg } from '../../../MatrixClientPeg';
26+
import defaultDispatcher from "../../../dispatcher/dispatcher";
27+
import { Action } from "../../../dispatcher/actions";
28+
import { UserTab } from "../dialogs/UserTab";
2629
import SettingsStore from "../../../settings/SettingsStore";
2730
import RoomHeaderButtons from '../right_panel/RoomHeaderButtons';
2831
import E2EIcon from './E2EIcon';
@@ -41,6 +44,7 @@ import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePha
4144
import { NotificationStateEvents } from '../../../stores/notifications/NotificationState';
4245
import RoomContext from "../../../contexts/RoomContext";
4346
import RoomLiveShareWarning from '../beacon/RoomLiveShareWarning';
47+
import { BetaPill } from "../beta/BetaCard";
4448

4549
export interface ISearchInfo {
4650
searchTerm: string;
@@ -272,6 +276,15 @@ export default class RoomHeader extends React.Component<IProps, IState> {
272276

273277
const e2eIcon = this.props.e2eStatus ? <E2EIcon status={this.props.e2eStatus} /> : undefined;
274278

279+
const isVideoRoom = SettingsStore.getValue("feature_video_rooms") && this.props.room.isElementVideoRoom();
280+
const viewLabs = () => defaultDispatcher.dispatch({
281+
action: Action.ViewUserSettings,
282+
initialTabId: UserTab.Labs,
283+
});
284+
const betaPill = isVideoRoom ? (
285+
<BetaPill onClick={viewLabs} tooltipTitle={_t("Video rooms are a beta feature")} />
286+
) : null;
287+
275288
return (
276289
<div className="mx_RoomHeader light-panel">
277290
<div className="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
@@ -280,6 +293,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
280293
{ name }
281294
{ searchStatus }
282295
{ topicElement }
296+
{ betaPill }
283297
{ rightRow }
284298
<RoomHeaderButtons room={this.props.room} excludedRightPanelPhaseButtons={this.props.excludedRightPanelPhaseButtons} />
285299
</div>

‎src/components/views/rooms/RoomList.tsx

Lines changed: 35 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import IconizedContextMenu, {
4141
IconizedContextMenuOptionList,
4242
} from "../context_menus/IconizedContextMenu";
4343
import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
44+
import { BetaPill } from "../beta/BetaCard";
4445
import SpaceStore from "../../../stores/spaces/SpaceStore";
4546
import {
4647
isMetaSpace,
@@ -238,19 +239,23 @@ const UntaggedAuxButton = ({ tabIndex }: IAuxButtonProps) => {
238239
tooltip={canAddRooms ? undefined
239240
: _t("You do not have permissions to create new rooms in this space")}
240241
/>
241-
{ SettingsStore.getValue("feature_video_rooms") && <IconizedContextMenuOption
242-
label={_t("New video room")}
243-
iconClassName="mx_RoomList_iconNewVideoRoom"
244-
onClick={(e) => {
245-
e.preventDefault();
246-
e.stopPropagation();
247-
closeMenu();
248-
showCreateNewRoom(activeSpace, RoomType.ElementVideo);
249-
}}
250-
disabled={!canAddRooms}
251-
tooltip={canAddRooms ? undefined
252-
: _t("You do not have permissions to create new rooms in this space")}
253-
/> }
242+
{ SettingsStore.getValue("feature_video_rooms") && (
243+
<IconizedContextMenuOption
244+
label={_t("New video room")}
245+
iconClassName="mx_RoomList_iconNewVideoRoom"
246+
onClick={(e) => {
247+
e.preventDefault();
248+
e.stopPropagation();
249+
closeMenu();
250+
showCreateNewRoom(activeSpace, RoomType.ElementVideo);
251+
}}
252+
disabled={!canAddRooms}
253+
tooltip={canAddRooms ? undefined
254+
: _t("You do not have permissions to create new rooms in this space")}
255+
>
256+
<BetaPill />
257+
</IconizedContextMenuOption>
258+
) }
254259
<IconizedContextMenuOption
255260
label={_t("Add existing room")}
256261
iconClassName="mx_RoomList_iconAddExistingRoom"
@@ -282,19 +287,23 @@ const UntaggedAuxButton = ({ tabIndex }: IAuxButtonProps) => {
282287
PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuCreateRoomItem", e);
283288
}}
284289
/>
285-
{ SettingsStore.getValue("feature_video_rooms") && <IconizedContextMenuOption
286-
label={_t("New video room")}
287-
iconClassName="mx_RoomList_iconNewVideoRoom"
288-
onClick={(e) => {
289-
e.preventDefault();
290-
e.stopPropagation();
291-
closeMenu();
292-
defaultDispatcher.dispatch({
293-
action: "view_create_room",
294-
type: RoomType.ElementVideo,
295-
});
296-
}}
297-
/> }
290+
{ SettingsStore.getValue("feature_video_rooms") && (
291+
<IconizedContextMenuOption
292+
label={_t("New video room")}
293+
iconClassName="mx_RoomList_iconNewVideoRoom"
294+
onClick={(e) => {
295+
e.preventDefault();
296+
e.stopPropagation();
297+
closeMenu();
298+
defaultDispatcher.dispatch({
299+
action: "view_create_room",
300+
type: RoomType.ElementVideo,
301+
});
302+
}}
303+
>
304+
<BetaPill />
305+
</IconizedContextMenuOption>
306+
) }
298307
</> }
299308
<IconizedContextMenuOption
300309
label={_t("Explore public rooms")}

‎src/components/views/rooms/RoomListHeader.tsx

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -220,16 +220,20 @@ const RoomListHeader = ({ onVisibilityChange }: IProps) => {
220220
closePlusMenu();
221221
}}
222222
/>
223-
{ videoRoomsEnabled && <IconizedContextMenuOption
224-
iconClassName="mx_RoomListHeader_iconNewVideoRoom"
225-
label={_t("New video room")}
226-
onClick={(e) => {
227-
e.preventDefault();
228-
e.stopPropagation();
229-
showCreateNewRoom(activeSpace, RoomType.ElementVideo);
230-
closePlusMenu();
231-
}}
232-
/> }
223+
{ videoRoomsEnabled && (
224+
<IconizedContextMenuOption
225+
iconClassName="mx_RoomListHeader_iconNewVideoRoom"
226+
label={_t("New video room")}
227+
onClick={(e) => {
228+
e.preventDefault();
229+
e.stopPropagation();
230+
showCreateNewRoom(activeSpace, RoomType.ElementVideo);
231+
closePlusMenu();
232+
}}
233+
>
234+
<BetaPill />
235+
</IconizedContextMenuOption>
236+
) }
233237
</>;
234238
}
235239

@@ -312,19 +316,23 @@ const RoomListHeader = ({ onVisibilityChange }: IProps) => {
312316
closePlusMenu();
313317
}}
314318
/>
315-
{ videoRoomsEnabled && <IconizedContextMenuOption
316-
label={_t("New video room")}
317-
iconClassName="mx_RoomListHeader_iconNewVideoRoom"
318-
onClick={(e) => {
319-
e.preventDefault();
320-
e.stopPropagation();
321-
defaultDispatcher.dispatch({
322-
action: "view_create_room",
323-
type: RoomType.ElementVideo,
324-
});
325-
closePlusMenu();
326-
}}
327-
/> }
319+
{ videoRoomsEnabled && (
320+
<IconizedContextMenuOption
321+
label={_t("New video room")}
322+
iconClassName="mx_RoomListHeader_iconNewVideoRoom"
323+
onClick={(e) => {
324+
e.preventDefault();
325+
e.stopPropagation();
326+
defaultDispatcher.dispatch({
327+
action: "view_create_room",
328+
type: RoomType.ElementVideo,
329+
});
330+
closePlusMenu();
331+
}}
332+
>
333+
<BetaPill />
334+
</IconizedContextMenuOption>
335+
) }
328336
</>;
329337
}
330338
if (canExploreRooms) {

‎src/components/views/rooms/RoomPreviewCard.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import RoomTopic from "../elements/RoomTopic";
3535
import RoomFacePile from "../elements/RoomFacePile";
3636
import RoomAvatar from "../avatars/RoomAvatar";
3737
import MemberAvatar from "../avatars/MemberAvatar";
38+
import { BetaPill } from "../beta/BetaCard";
3839
import RoomInfoLine from "./RoomInfoLine";
3940

4041
interface IProps {
@@ -151,6 +152,7 @@ const RoomPreviewCard: FC<IProps> = ({ room, onJoinButtonClicked, onRejectButton
151152
avatarRow = <>
152153
<RoomAvatar room={room} height={50} width={50} viewAvatarOnClick />
153154
<div className="mx_RoomPreviewCard_video" />
155+
<BetaPill onClick={viewLabs} tooltipTitle={_t("Video rooms are a beta feature")} />
154156
</>;
155157
} else if (room.isSpaceRoom()) {
156158
avatarRow = <RoomAvatar room={room} height={80} width={80} viewAvatarOnClick />;

0 commit comments

Comments
 (0)