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

Voice rooms prototype #8084

Merged
merged 21 commits into from
Mar 22, 2022
Merged

Voice rooms prototype #8084

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
50065fd
Add voice room labs flag
robintown Mar 18, 2022
1b2fe72
Add more widget actions for interacting with Jitsi
robintown Mar 18, 2022
8d43031
Factor out a more generic Jitsi creation utility
robintown Mar 18, 2022
0273d09
Add utilities for managing voice channels
robintown Mar 18, 2022
97fd29e
Enable creation of voice rooms
robintown Mar 18, 2022
5f31f27
Force a maximized view of voice channel widgets
robintown Mar 18, 2022
8e1ccba
Add voice channel store
robintown Mar 18, 2022
4682786
Factor out a more generic FacePile
robintown Mar 18, 2022
cf2d05a
Implement room tile changes for voice rooms
robintown Mar 18, 2022
e83a685
Add interactive radio component to the left panel
robintown Mar 18, 2022
168ffc5
Test voice rooms
robintown Mar 18, 2022
a504fad
Update name of call room type
robintown Mar 18, 2022
b896e74
Clarify that voice rooms are under development
robintown Mar 18, 2022
9d4ec68
Use readonly
robintown Mar 18, 2022
081d6a0
Move acks to the end of handlers
robintown Mar 18, 2022
90d2a2f
Add comment about avatar URLs coming from Jitsi
robintown Mar 18, 2022
7690862
Don't use unicode ellipses
robintown Mar 18, 2022
7ea0496
Fix tests
robintown Mar 18, 2022
935fa91
Fix tests, again
robintown Mar 18, 2022
0598c27
Remove unnecessary export
robintown Mar 20, 2022
82aeda4
Ack Jitsi events when we wait for them
robintown Mar 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions res/css/views/right_panel/_UserInfo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,15 +64,15 @@ limitations under the License.
margin-bottom: 8px;
}

.mx_RoomTile_nameContainer {
.mx_RoomTile_titleContainer {
width: 154px;
}

.mx_RoomTile_badge {
display: none;
}

.mx_RoomTile_name {
.mx_RoomTile_title {
width: 160px;
}

Expand Down
4 changes: 2 additions & 2 deletions res/css/views/rooms/_MemberInfo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,15 +58,15 @@ limitations under the License.
margin: 0 16px 16px 16px;
}

.mx_MemberInfo .mx_RoomTile_nameContainer {
.mx_MemberInfo .mx_RoomTile_titleContainer {
width: 154px;
}

.mx_MemberInfo .mx_RoomTile_badge {
display: none;
}

.mx_MemberInfo .mx_RoomTile_name {
.mx_MemberInfo .mx_RoomTile_title {
width: 160px;
}

Expand Down
231 changes: 147 additions & 84 deletions res/css/views/rooms/_RoomTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ limitations under the License.
padding: 4px;

contain: content; // Not strict as it will break when resizing a sublist vertically
height: 40px;
box-sizing: border-box;

// The tile is also a flexbox row itself
Expand All @@ -35,106 +34,166 @@ limitations under the License.
}

.mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
margin-right: 8px;
margin-right: 10px;
}

.mx_RoomTile_nameContainer {
.mx_RoomTile_details {
flex-grow: 1;
min-width: 0; // allow flex to shrink it
margin-right: 8px; // spacing to buttons/badges

// Create a new column layout flexbox for the name parts
display: flex;
flex-direction: column;
justify-content: center;

.mx_RoomTile_name,
.mx_RoomTile_messagePreview {
margin: 0 2px;
width: 100%;

// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.mx_RoomTile_name {
font-size: $font-14px;
line-height: $font-18px;
}

.mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents {
font-weight: 600;
}

.mx_RoomTile_messagePreview {
font-size: $font-13px;
line-height: $font-18px;
color: $secondary-content;
}
.mx_RoomTile_primaryDetails {
height: 32px;
display: flex;
flex-wrap: wrap;

.mx_RoomTile_titleContainer {
min-width: 0;
flex-basis: 0;
flex-grow: 1;
margin-right: 8px; // spacing to buttons/badges

// Create a new column layout flexbox for the title parts
display: flex;
flex-direction: column;
justify-content: center;

.mx_RoomTile_title, .mx_RoomTile_subtitle {
width: 100%;

// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.mx_RoomTile_title {
font-size: $font-14px;
line-height: $font-18px;
}

.mx_RoomTile_title.mx_RoomTile_titleHasUnreadEvents {
font-weight: 600;
}

.mx_RoomTile_subtitle {
font-size: $font-13px;
line-height: $font-18px;
color: $secondary-content;
}

.mx_RoomTile_subtitle.mx_RoomTile_voiceIndicator {
&::before {
display: inline-block;
vertical-align: text-bottom;
content: '';
background-color: $secondary-content;
mask-image: url('$(res)/img/voip/voice-room.svg');
mask-size: 16px;
width: 16px;
height: 16px;
margin-right: 4px;
}

&.mx_RoomTile_voiceIndicator_active {
color: $accent;

&::before {
background-color: $accent;
}
}
}

.mx_RoomTile_titleWithSubtitle {
margin-top: -3px; // shift the title up a bit more
}
}

.mx_RoomTile_nameWithPreview {
margin-top: -4px; // shift the name up a bit more
}
}
.mx_RoomTile_notificationsButton {
margin-left: 4px; // spacing between buttons
}

.mx_RoomTile_notificationsButton {
margin-left: 4px; // spacing between buttons
}
.mx_RoomTile_badgeContainer {
height: 16px;
// don't set width so that it takes no space when there is no badge to show
margin: auto 0; // vertically align

// Create a flexbox to make aligning dot badges easier
display: flex;
align-items: center;

.mx_NotificationBadge {
margin-right: 2px; // centering
}

.mx_NotificationBadge_dot {
// make the smaller dot occupy the same width for centering
margin-left: 5px;
margin-right: 7px;
}
}

.mx_RoomTile_badgeContainer {
height: 16px;
// don't set width so that it takes no space when there is no badge to show
margin: auto 0; // vertically align
// The context menu buttons are hidden by default
.mx_RoomTile_menuButton,
.mx_RoomTile_notificationsButton {
width: 20px;
min-width: 20px; // yay flex
height: 20px;
margin-top: auto;
margin-bottom: auto;
position: relative;
display: none;

// Create a flexbox to make aligning dot badges easier
display: flex;
align-items: center;
&::before {
top: 2px;
left: 2px;
content: '';
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-content;
}
}

.mx_NotificationBadge {
margin-right: 2px; // centering
}
// If the room has an overriden notification setting then we always show the notifications menu button
.mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
display: block;
}

.mx_NotificationBadge_dot {
// make the smaller dot occupy the same width for centering
margin-left: 5px;
margin-right: 7px;
.mx_RoomTile_menuButton::before {
mask-image: url('$(res)/img/element-icons/context-menu.svg');
}
}
}

// The context menu buttons are hidden by default
.mx_RoomTile_menuButton,
.mx_RoomTile_notificationsButton {
width: 20px;
min-width: 20px; // yay flex
height: 20px;
margin-top: auto;
margin-bottom: auto;
position: relative;
display: none;

&::before {
top: 2px;
left: 2px;
content: '';
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $primary-content;
}
}
.mx_RoomTile_voiceChannel {
width: 100%;
display: flex;
align-items: center;

// If the room has an overriden notification setting then we always show the notifications menu button
.mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
display: block;
}
.mx_FacePile {
margin: 6px 0 4px;
}

.mx_RoomTile_menuButton::before {
mask-image: url('$(res)/img/element-icons/context-menu.svg');
.mx_RoomTile_connectVoiceButton {
font-weight: 600;
padding-left: 10px;
padding-right: 10px;

&::before {
content: '';
background-color: $accent;
mask-image: url('$(res)/img/voip/voice-room.svg');
mask-size: 16px;
width: 16px;
height: 16px;
margin-right: 4px;
}
}
}
}

&:not(.mx_RoomTile_minimized) {
Expand Down Expand Up @@ -163,6 +222,10 @@ limitations under the License.
.mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
margin-right: 0;
}

.mx_RoomTile_details {
display: none;
}
}
}

Expand Down
3 changes: 3 additions & 0 deletions res/img/voip/voice-room.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 16 additions & 12 deletions src/components/views/groups/GroupInviteTile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ export default class GroupInviteTile extends React.Component {
const av = <BaseAvatar name={groupName} width={24} height={24} url={httpAvatarUrl} />;

const isMenuDisplayed = Boolean(this.state.contextMenuPosition);
const nameClasses = classNames('mx_RoomTile_name mx_RoomTile_invite mx_RoomTile_badgeShown', {
const nameClasses = classNames('mx_RoomTile_title mx_RoomTile_invite mx_RoomTile_badgeShown', {
'mx_RoomTile_badgeShown': this.state.badgeHover || isMenuDisplayed,
});

Expand Down Expand Up @@ -180,17 +180,21 @@ export default class GroupInviteTile extends React.Component {
<div className="mx_RoomTile_avatar">
{ av }
</div>
<div className="mx_RoomTile_nameContainer">
{ label }
<ContextMenuButton
className={badgeClasses}
onClick={this.onContextMenuButtonClick}
label={_t("Options")}
isExpanded={isMenuDisplayed}
tabIndex={isActive ? 0 : -1}
>
{ badgeContent }
</ContextMenuButton>
<div className="mx_RoomTile_details">
<div className="mx_RoomTile_primaryDetails">
<div className="mx_RoomTile_titleContainer">
{ label }
<ContextMenuButton
className={badgeClasses}
onClick={this.onContextMenuButtonClick}
label={_t("Options")}
isExpanded={isMenuDisplayed}
tabIndex={isActive ? 0 : -1}
>
{ badgeContent }
</ContextMenuButton>
</div>
</div>
</div>
{ tooltip }
</AccessibleButton>
Expand Down
16 changes: 10 additions & 6 deletions src/components/views/rooms/ExtraTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,12 +79,12 @@ export default class ExtraTile extends React.Component<IProps, IState> {
name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon

const nameClasses = classNames({
"mx_RoomTile_name": true,
"mx_RoomTile_nameHasUnreadEvents": this.props.notificationState?.isUnread,
"mx_RoomTile_title": true,
"mx_RoomTile_titleHasUnreadEvents": this.props.notificationState?.isUnread,
});

let nameContainer = (
<div className="mx_RoomTile_nameContainer">
<div className="mx_RoomTile_titleContainer">
<div title={name} className={nameClasses} tabIndex={-1} dir="auto">
{ name }
</div>
Expand All @@ -110,9 +110,13 @@ export default class ExtraTile extends React.Component<IProps, IState> {
<div className="mx_RoomTile_avatarContainer">
{ this.props.avatar }
</div>
{ nameContainer }
<div className="mx_RoomTile_badgeContainer">
{ badge }
<div className="mx_RoomTile_details">
<div className="mx_RoomTile_primaryDetails">
{ nameContainer }
<div className="mx_RoomTile_badgeContainer">
{ badge }
</div>
</div>
</div>
</Button>
</React.Fragment>
Expand Down
Loading