OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge branch 'develop' into travis/remove-skinning

pull/21833/head
Travis Ralston 2022-04-05 10:50:37 -06:00
parent ac65e5fd2f 694c39e72d
commit 4057833036
74 changed files with 1412 additions and 1717 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
.github/workflows/triage-move-review-requests.yml vendored
View File

@ -1,139 +0,0 @@
name: Move pull requests asking for review to the relevant project
on:
pull_request_target:
types: [review_requested]
jobs:
add_design_pr_to_project:
name: Move PRs asking for design review to the design board
runs-on: ubuntu-latest
steps:
- uses: octokit/graphql-action@v2.x
id: find_team_members
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
query find_team_members($team: String!) {
organization(login: "matrix-org") {
team(slug: $team) {
members {
nodes {
login
}
}
}
}
}
team: ${{ env.TEAM }}
env:
TEAM: "design"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
- id: any_matching_reviewers
run: |
# Fetch requested reviewers, and people who are on the team
echo '${{ tojson(fromjson(steps.find_team_members.outputs.data).organization.team.members.nodes[*].login) }}' | tee /tmp/team_members.json
echo '${{ tojson(github.event.pull_request.requested_reviewers[*].login) }}' | tee /tmp/reviewers.json
jq --raw-output .[] < /tmp/team_members.json | sort | tee /tmp/team_members.txt
jq --raw-output .[] < /tmp/reviewers.json | sort | tee /tmp/reviewers.txt
# Fetch requested team reviewers, and the name of the team
echo '${{ tojson(github.event.pull_request.requested_teams[*].slug) }}' | tee /tmp/team_reviewers.json
jq --raw-output .[] < /tmp/team_reviewers.json | sort | tee /tmp/team_reviewers.txt
echo '${{ env.TEAM }}' | tee /tmp/team.txt
# If either a reviewer matches a team member, or a team matches our team, say "true"
if [ $(join /tmp/team_members.txt /tmp/reviewers.txt | wc -l) != 0 ]; then
echo "::set-output name=match::true"
elif [ $(join /tmp/team.txt /tmp/team_reviewers.txt | wc -l) != 0 ]; then
echo "::set-output name=match::true"
else
echo "::set-output name=match::false"
fi
env:
TEAM: "design"
- uses: octokit/graphql-action@v2.x
id: add_to_project
if: steps.any_matching_reviewers.outputs.match == 'true'
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!, $contentid:ID!) {
addProjectNextItem(input:{projectId:$projectid contentId:$contentid}) {
projectNextItem {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.pull_request.node_id }}
env:
PROJECT_ID: "PN_kwDOAM0swc0sUA"
TEAM: "design"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
add_product_pr_to_project:
name: Move PRs asking for design review to the design board
runs-on: ubuntu-latest
steps:
- uses: octokit/graphql-action@v2.x
id: find_team_members
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
query find_team_members($team: String!) {
organization(login: "matrix-org") {
team(slug: $team) {
members {
nodes {
login
}
}
}
}
}
team: ${{ env.TEAM }}
env:
TEAM: "product"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
- id: any_matching_reviewers
run: |
# Fetch requested reviewers, and people who are on the team
echo '${{ tojson(fromjson(steps.find_team_members.outputs.data).organization.team.members.nodes[*].login) }}' | tee /tmp/team_members.json
echo '${{ tojson(github.event.pull_request.requested_reviewers[*].login) }}' | tee /tmp/reviewers.json
jq --raw-output .[] < /tmp/team_members.json | sort | tee /tmp/team_members.txt
jq --raw-output .[] < /tmp/reviewers.json | sort | tee /tmp/reviewers.txt
# Fetch requested team reviewers, and the name of the team
echo '${{ tojson(github.event.pull_request.requested_teams[*].slug) }}' | tee /tmp/team_reviewers.json
jq --raw-output .[] < /tmp/team_reviewers.json | sort | tee /tmp/team_reviewers.txt
echo '${{ env.TEAM }}' | tee /tmp/team.txt
# If either a reviewer matches a team member, or a team matches our team, say "true"
if [ $(join /tmp/team_members.txt /tmp/reviewers.txt | wc -l) != 0 ]; then
echo "::set-output name=match::true"
elif [ $(join /tmp/team.txt /tmp/team_reviewers.txt | wc -l) != 0 ]; then
echo "::set-output name=match::true"
else
echo "::set-output name=match::false"
fi
env:
TEAM: "product"
- uses: octokit/graphql-action@v2.x
id: add_to_project
if: steps.any_matching_reviewers.outputs.match == 'true'
with:
headers: '{"GraphQL-Features": "projects_next_graphql"}'
query: |
mutation add_to_project($projectid:ID!, $contentid:ID!) {
addProjectNextItem(input:{projectId:$projectid contentId:$contentid}) {
projectNextItem {
id
}
}
}
projectid: ${{ env.PROJECT_ID }}
contentid: ${{ github.event.pull_request.node_id }}
env:
PROJECT_ID: "PN_kwDOAM0swc4AAg6N"
TEAM: "product"
GITHUB_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}

2
README.md
View File

@ -57,7 +57,7 @@ tracks lots of state for its child components which it passes into them for visu
rendering via props.
Good separation between the components is maintained by adopting various best
practices that anyone working with the SDK needs to be be aware of and uphold:
practices that anyone working with the SDK needs to be aware of and uphold:
* Components are named with upper camel case (e.g. views/rooms/EventTile.js)

2
docs/features/keyboardShortcuts.md
View File

@ -1,6 +1,6 @@
# Keyboard shortcuts
## Using the `KeyBindingManger`
## Using the `KeyBindingManager`
The `KeyBindingManager` (accessible using `getKeyBindingManager()`) is a class
with several methods that allow you to get a `KeyBindingAction` based on a

22
res/css/_common.scss
View File

@ -670,3 +670,25 @@ legend {
line-height: inherit;
cursor: pointer;
}
@define-mixin CallButton {
box-sizing: border-box;
font-weight: 600;
height: $font-24px;
line-height: $font-24px;
margin-right: 0;
span {
display: flex;
align-items: center;
&::before {
content: '';
display: inline-block;
background-color: $button-fg-color;
mask-position: center;
mask-repeat: no-repeat;
margin-right: 8px;
}
}
}

1
res/css/_components.scss
View File

@ -314,4 +314,3 @@
@import "./views/voip/_DialPadModal.scss";
@import "./views/voip/_PiPContainer.scss";
@import "./views/voip/_VideoFeed.scss";
@import "./views/voip/_VoiceChannelRadio.scss";

56
res/css/structures/_RightPanel.scss
View File

@ -93,7 +93,8 @@ limitations under the License.
mask-position: center;
}
$dot-size: 7px;
$dot-size: 8px;
$dot-offset: -3px;
$pulse-color: $alert;
.mx_RightPanel_pinnedMessagesButton {
@ -102,10 +103,11 @@ $pulse-color: $alert;
mask-position: center;
}
}
.mx_RightPanel_headerButton_unreadIndicator_bg {
position: absolute;
right: 0;
top: 0;
right: $dot-offset;
top: $dot-offset;
margin: 4px;
width: $dot-size;
height: $dot-size;
@ -117,17 +119,9 @@ $pulse-color: $alert;
.mx_RightPanel_headerButton_unreadIndicator {
position: absolute;
right: 0;
top: 0;
right: $dot-offset;
top: $dot-offset;
margin: 4px;
width: $dot-size;
height: $dot-size;
border-radius: 50%;
transform: scale(1);
background: rgba($pulse-color, 1);
box-shadow: 0 0 0 0 rgba($pulse-color, 1);
animation: mx_RightPanel_indicator_pulse 2s infinite;
animation-iteration-count: 1;
&.mx_Indicator_red {
background: rgba($alert, 1);
@ -135,29 +129,13 @@ $pulse-color: $alert;
}
&.mx_Indicator_gray {
background: rgba($roomtile-default-badge-bg-color, 1);
box-shadow: rgba($roomtile-default-badge-bg-color, 1);
background: rgba($room-icon-unread-color, 1);
box-shadow: rgba($room-icon-unread-color, 1);
}
&.mx_Indicator_bold {
background: rgba($input-darker-fg-color, 1);
box-shadow: rgba($input-darker-fg-color, 1);
}
&::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
transform: scale(1);
transform-origin: center center;
animation-name: mx_RightPanel_indicator_pulse_shadow;
animation-duration: inherit;
animation-iteration-count: inherit;
border-radius: 50%;
background: inherit;
background: rgba($primary-content, 1);
box-shadow: rgba($primary-content, 1);
}
}
@ -197,7 +175,14 @@ $pulse-color: $alert;
}
}
.mx_RightPanel_headerButton_highlight {
.mx_RightPanel_headerButton_unread {
&::before {
background-color: $room-icon-unread-color !important;
}
}
.mx_RightPanel_headerButton_highlight,
.mx_RightPanel_headerButton:hover {
&::before {
background-color: $accent !important;
}
@ -242,7 +227,8 @@ $pulse-color: $alert;
margin: 16px 0;
}
h2, p {
h2,
p {
font-size: $font-14px;
}

90
res/css/structures/_RoomView.scss
View File

@ -105,7 +105,9 @@ limitations under the License.
flex: 1;
min-width: 0;
.mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner {
.mx_RoomView_messagePanel,
.mx_RoomView_messagePanelSpinner,
.mx_RoomView_messagePanelSearchSpinner {
order: 2;
}
}
@ -147,20 +149,17 @@ limitations under the License.
}
.mx_RoomView_messageListWrapper {
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
}
.mx_RoomView_searchResultsPanel {
.mx_RoomView_messageListWrapper {
justify-content: flex-start;
> .mx_RoomView_MessageList > li > ol {
>.mx_RoomView_MessageList > li > ol {
list-style-type: none;
}
}
@ -213,14 +212,20 @@ hr.mx_RoomView_myReadMarker {
}
// Immersive widgets
.mx_RoomView_body > .mx_AppTile {
margin: $container-gap-width;
margin-right: calc($container-gap-width / 2);
width: auto;
height: 100%;
.mx_RoomView_immersive {
.mx_RoomHeader_wrapper {
border: unset;
}
background: none;
border: none;
.mx_AppTile {
margin: $container-gap-width;
margin-right: calc($container-gap-width / 2);
width: auto;
height: 100%;
padding-top: 33px; // to match the right panel chat heading
border-radius: 8px;
}
}
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
@ -289,3 +294,62 @@ hr.mx_RoomView_myReadMarker {
min-height: 42px;
}
}
@keyframes mx_Indicator_pulse {
0% {
transform: scale(0.95);
}
70% {
transform: scale(1);
}
100% {
transform: scale(0.95);
}
}
@keyframes mx_Indicator_pulse_shadow {
0% {
opacity: 0.7;
}
70% {
transform: scale(2.2);
opacity: 0;
}
100% {
opacity: 0;
}
}
.mx_Indicator {
position: absolute;
right: 0;
top: 0;
width: $dot-size;
height: $dot-size;
border-radius: 50%;
transform: scale(1);
background: rgba($pulse-color, 1);
box-shadow: 0 0 0 0 rgba($pulse-color, 1);
animation: mx_Indicator_pulse 2s infinite;
animation-iteration-count: 1;
&::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
transform: scale(1);
transform-origin: center center;
animation-name: mx_Indicator_pulse_shadow;
animation-duration: inherit;
animation-iteration-count: inherit;
border-radius: 50%;
background: inherit;
}
}

2
res/css/views/elements/_FacePile.scss
View File

@ -20,7 +20,7 @@ limitations under the License.
flex-direction: row-reverse;
vertical-align: middle;
> * + * {
> .mx_FacePile_face + .mx_FacePile_face {
margin-right: -8px;
}

4
res/css/views/elements/_RichText.scss
View File

@ -76,7 +76,9 @@ a.mx_Pill {
}
.mx_Emoji {
font-size: 1.8rem;
// Should be 1.8rem for our default 1.4rem message bodies,
// and scale with the size of the surrounding text
font-size: calc(18 / 14 * 1em);
vertical-align: bottom;
}

18
res/css/views/elements/_Tooltip.scss
View File

@ -16,13 +16,23 @@ limitations under the License.
*/
@keyframes mx_fadein {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes mx_fadeout {
from { opacity: 1; }
to { opacity: 0; }
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.mx_Tooltip_chevron {

28
res/css/views/messages/_CallEvent.scss
View File

@ -147,30 +147,18 @@ limitations under the License.
align-items: center;
color: $secondary-content;
margin-right: 16px;
gap: 8px;
gap: 12px; // See mx_IncomingCallToast_buttons
min-width: max-content;
.mx_CallEvent_content_button {
padding: 0px 12px;
@mixin CallButton;
padding: 0 12px;
span {
padding: 1px 0;
display: flex;
align-items: center;
&::before {
content: '';
display: inline-block;
background-color: $button-fg-color;
mask-position: center;
mask-repeat: no-repeat;
mask-size: 16px;
width: 16px;
height: 16px;
margin-right: 8px;
flex-shrink: 0;
}
span::before {
mask-size: 16px;
width: 16px;
height: 16px;
flex-shrink: 0;
}
}

7
res/css/views/messages/_MessageActionBar.scss
View File

@ -48,7 +48,7 @@ limitations under the License.
cursor: initial;
}
> * {
>* {
white-space: nowrap;
display: inline-block;
position: relative;
@ -102,6 +102,11 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/message/thread.svg');
}
.mx_MessageActionBar_threadButton .mx_Indicator {
background: $links;
animation-iteration-count: infinite;
}
.mx_MessageActionBar_editButton::after {
mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
}

64
res/css/views/right_panel/_ThreadPanel.scss
View File

@ -17,17 +17,22 @@ limitations under the License.
.mx_ThreadPanel {
display: flex;
flex-direction: column;
height: 100px;
overflow: visible;
.mx_BaseCard_header {
margin-bottom: 12px;
.mx_BaseCard_close,
.mx_BaseCard_back {
width: 24px;
height: 24px;
}
.mx_BaseCard_back {
left: -4px;
}
.mx_BaseCard_close {
right: -4px;
}
@ -66,6 +71,7 @@ limitations under the License.
--size: 24px;
width: var(--size);
height: var(--size);
&::after {
mask-size: var(--size);
mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
@ -99,11 +105,10 @@ limitations under the License.
}
.mx_AutoHideScrollbar {
background: #fff;
background-color: $background;
border-radius: 8px;
width: calc(100% - 16px);
padding-right: 16px;
width: calc(100% - 24px);
padding-right: 18px;
}
&.mx_ThreadView .mx_ThreadView_timelinePanelWrapper {
@ -125,13 +130,15 @@ limitations under the License.
padding-right: 0;
}
.mx_EventTile, .mx_GenericEventListSummary {
.mx_EventTile,
.mx_GenericEventListSummary {
// Account for scrollbar when hovering
padding-top: 0;
.mx_ThreadInfo {
position: relative;
padding-right: 11px;
&::after {
content: '';
display: block;
@ -157,6 +164,10 @@ limitations under the License.
.mx_EventTile_e2eIcon {
left: 8px;
}
&:hover .mx_EventTile_line {
box-shadow: unset !important; // don't show the verification left stroke in the thread list
}
}
.mx_MessageComposer {
@ -190,10 +201,6 @@ limitations under the License.
float: right;
}
.mx_ThreadPanel_dropdown[aria-expanded=true]::before {
transform: rotate(180deg);
}
.mx_MessageTimestamp {
font-size: $font-12px;
color: $secondary-content;
@ -220,6 +227,20 @@ limitations under the License.
display: none; // hide the hidden event expand button, not enough space, view source can still be used
}
}
.mx_BaseCard_footer {
text-align: left;
font-size: $font-12px;
align-items: center;
justify-content: end;
gap: 4px;
position: relative;
top: 2px;
.mx_AccessibleButton_kind_link_inline {
color: $secondary-content;
}
}
}
.mx_ThreadPanel_replies {
@ -264,27 +285,31 @@ limitations under the License.
align-items: center;
justify-content: center;
position: absolute;
top: 48px;
bottom: 8px;
left: 8px;
right: 8px;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
h2 {
color: $primary-content;
font-weight: 600;
font-weight: $font-semi-bold;
font-size: $font-18px;
margin-top: 24px;
margin-bottom: 10px;
}
p {
font-size: $font-15px;
color: $secondary-content;
margin: 10px 0;
}
button {
border: none;
background: none;
color: $accent;
font-size: $font-15px;
&:hover,
&:active {
@ -292,6 +317,15 @@ limitations under the License.
cursor: pointer;
}
}
.mx_ThreadPanel_empty_tip {
font-size: $font-12px;
line-height: $font-15px;
>b {
font-weight: $font-semi-bold;
}
}
}
.mx_ThreadPanel_largeIcon {
@ -317,6 +351,7 @@ limitations under the License.
.mx_ContextualMenu_wrapper.mx_ThreadPanel__header {
.mx_ContextualMenu {
position: initial;
span:first-of-type {
font-weight: $font-semi-bold;
font-size: inherit;
@ -336,6 +371,7 @@ limitations under the License.
left: auto;
right: 22px;
border-bottom-color: $quinary-content;
&::after {
content: "";
border: inherit;
@ -357,10 +393,12 @@ limitations under the License.
&:hover {
background-color: $event-selected-color;
}
&[aria-checked="true"] {
:first-child {
margin-left: -20px;
}
:first-child::before {
content: "";
width: 12px;

2
res/css/views/rooms/_AppsDrawer.scss
View File

@ -148,8 +148,6 @@ $MinWidth: 240px;
width: 50%;
min-width: $MinWidth;
border: $container-border-width solid $widget-menu-bar-bg-color;
border-left-width: 5px;
border-right-width: 5px;
display: flex;
flex-direction: column;
box-sizing: border-box;

94
res/css/views/rooms/_EventTile.scss
View File

@ -43,9 +43,11 @@ $left-gutter: 64px;
right: 0;
}
}
.mx_EventTile_receiptSent::before {
mask-image: url('$(res)/img/element-icons/circle-sent.svg');
}
.mx_EventTile_receiptSending::before {
mask-image: url('$(res)/img/element-icons/circle-sending.svg');
}
@ -61,16 +63,16 @@ $left-gutter: 64px;
&[data-shape=ThreadsList][data-notification]::before {
content: "";
position: absolute;
width: 8px;
height: 8px;
width: 10px;
height: 10px;
border-radius: 50%;
right: -16px;
top: 6px;
right: -25px; // center it in the gutter (16px margin + 4px padding + half 10px width)
top: 4px;
left: auto;
}
&[data-shape=ThreadsList][data-notification=total]::before {
background-color: $roomtile-default-badge-bg-color;
background-color: $room-icon-unread-color;
}
&[data-shape=ThreadsList][data-notification=highlight]::before {
@ -79,7 +81,6 @@ $left-gutter: 64px;
.mx_ThreadInfo,
.mx_ThreadSummaryIcon {
margin-right: 110px;
margin-left: 64px;
}
@ -115,7 +116,8 @@ $left-gutter: 64px;
.mx_DisambiguatedProfile {
color: $primary-content;
font-size: $font-14px;
display: inline-block; /* anti-zalgo, with overflow hidden */
display: inline-block;
/* anti-zalgo, with overflow hidden */
overflow: hidden;
padding-bottom: 0px;
padding-top: 0px;
@ -142,7 +144,8 @@ $left-gutter: 64px;
clear: both;
}
.mx_EventTile_line, .mx_EventTile_reply {
.mx_EventTile_line,
.mx_EventTile_reply {
position: relative;
padding-left: $left-gutter;
border-radius: 8px;
@ -308,11 +311,19 @@ $left-gutter: 64px;
.mx_RoomView_timeline_rr_enabled {
.mx_EventTile[data-layout=group] {
.mx_ThreadInfo,
.mx_ThreadSummaryIcon,
.mx_EventTile_line {
/* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
margin-right: 110px;
}
.mx_ThreadInfo {
max-width: min(calc(100% - $left-gutter - 110px), 600px); // leave space on both left & right gutters
}
}
// on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter
}
@ -408,7 +419,8 @@ $left-gutter: 64px;
background-repeat: no-repeat;
background-size: contain;
&::before, &::after {
&::before,
&::after {
content: "";
display: block;
position: absolute;
@ -433,6 +445,7 @@ $left-gutter: 64px;
mask-image: url('$(res)/img/e2e/warning.svg');
background-color: $alert;
}
opacity: 1;
}
@ -441,6 +454,7 @@ $left-gutter: 64px;
mask-image: url('$(res)/img/e2e/normal.svg');
background-color: $header-panel-text-primary-color;
}
opacity: 1;
}
@ -479,7 +493,8 @@ $left-gutter: 64px;
color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
font-size: $font-14px;
pre, code {
pre,
code {
font-family: $monospace-font-family !important;
background-color: $codeblock-background-color;
}
@ -492,7 +507,7 @@ $left-gutter: 64px;
pre code {
white-space: pre; // we want code blocks to be scrollable and not wrap
> * {
>* {
display: inline;
}
}
@ -514,6 +529,7 @@ $left-gutter: 64px;
float: left;
margin: 0 0.5em 0 -1.5em;
color: gray;
& span {
text-align: right;
display: block;
@ -547,18 +563,22 @@ $left-gutter: 64px;
height: 19px;
background-color: $message-action-bar-fg-color;
}
.mx_EventTile_buttonBottom {
top: 33px;
}
.mx_EventTile_copyButton {
mask-image: url($copy-button-url);
}
.mx_EventTile_collapseButton {
mask-size: 75%;
mask-position: center;
mask-repeat: no-repeat;
mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
}
.mx_EventTile_expandButton {
mask-size: 75%;
mask-position: center;
@ -674,10 +694,13 @@ $left-gutter: 64px;
}
@media only screen and (max-width: 480px) {
.mx_EventTile_line, .mx_EventTile_reply {
.mx_EventTile_line,
.mx_EventTile_reply {
padding-left: 0;
margin-right: 0;
}
.mx_EventTile_content {
margin-top: 10px;
margin-right: 0;
@ -692,23 +715,28 @@ $left-gutter: 64px;
mask-position: center;
height: 18px;
min-width: 18px;
background-color: $secondary-content;
background-color: $secondary-content !important;
mask-repeat: no-repeat;
mask-size: contain;
}
.mx_ThreadSummaryIcon {
display: inline-block;
font-size: $font-12px;
color: $secondary-content;
color: $secondary-content !important;
margin-top: 8px;
margin-bottom: 8px;
&::before {
vertical-align: middle;
margin-left: 8px;
margin-right: 8px;
margin-top: -2px;
}
}
.mx_ThreadInfo {
min-width: 267px;
max-width: min(calc(100% - $left-gutter - 64px), 600px); // leave space on both left & right gutters
max-width: min(calc(100% - $left-gutter), 600px); // leave space on both left & right gutters
width: fit-content;
height: 40px;
position: relative;
@ -756,7 +784,8 @@ $left-gutter: 64px;
}
}
&:hover, &:focus {
&:hover,
&:focus {
cursor: pointer;
border-color: $quinary-content;
@ -782,6 +811,9 @@ $threadInfoLineHeight: calc(2 * $font-12px);
.mx_ThreadInfo_sender {
font-weight: $font-semi-bold;
line-height: $threadInfoLineHeight;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.mx_ThreadInfo_content {
@ -792,6 +824,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
font-size: $font-12px;
line-height: $threadInfoLineHeight;
color: $secondary-content;
flex: 1;
}
.mx_ThreadInfo_avatar {
@ -810,9 +843,10 @@ $threadInfoLineHeight: calc(2 * $font-12px);
.mx_EventTile[data-shape=ThreadsList] {
--topOffset: 20px;
--leftOffset: 46px;
$borderRadius: 8px;
margin: var(--topOffset) 16px var(--topOffset) 0;
border-radius: 8px;
border-radius: $borderRadius;
display: flex;
flex-flow: wrap;
@ -847,6 +881,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
&::after {
content: unset;
}
margin-bottom: 0;
}
@ -857,7 +892,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
padding-top: 0;
.mx_EventTile_avatar {
top: -4px;
top: 0;
left: 0;
}
@ -892,7 +927,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
width: 100%;
box-sizing: border-box;
padding-left: var(--leftOffset) !important;
padding-bottom: 0;
border-radius: $borderRadius !important; // override 4px
}
.mx_MessageTimestamp {
@ -905,6 +940,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
.mx_ThreadView {
display: flex;
flex-direction: column;
max-height: 100%;
.mx_ThreadView_List {
flex: 1;
@ -918,7 +954,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
.mx_EventTile {
display: flex;
flex-direction: column;
padding-top: 0;
padding-top: 14px; // due to layout differences, this odd number matches the 18px padding-top of main tl events
.mx_EventTile_line {
padding-left: 0;
@ -973,7 +1009,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
.mx_UnknownBody,
.mx_MPollBody,
.mx_ReplyChain_wrapper {
margin-left: 36px;
margin-left: 48px;
margin-right: 8px;
.mx_EventTile_content,
@ -997,16 +1033,17 @@ $threadInfoLineHeight: calc(2 * $font-12px);
.mx_EventTile_senderDetails {
display: flex;
align-items: center;
gap: calc(6px + $selected-message-border-width);
gap: calc(14px + $selected-message-border-width);
a {
flex: 1;
min-width: none;
min-width: unset;
max-width: 100%;
display: flex;
align-items: center;
.mx_DisambiguatedProfile {
margin-left: 8px;
flex: 1;
}
}
@ -1026,4 +1063,13 @@ $threadInfoLineHeight: calc(2 * $font-12px);
.mx_MessageComposer_sendMessage {
margin-right: 0;
}
.mx_EditMessageComposer {
margin-left: 30px !important; // align start of first letter with that of the event body
}
.mx_EditMessageComposer_buttons {
padding-right: 11px; // align with right edge of input
margin-right: 0; // align with right edge of background
}
}

5
res/css/views/rooms/_RoomList.scss
View File

@ -21,9 +21,12 @@ limitations under the License.
.mx_RoomList_iconPlus::before {
mask-image: url('$(res)/img/element-icons/roomlist/plus-circle.svg');
}
.mx_RoomList_iconCreateNewRoom::before {
.mx_RoomList_iconNewRoom::before {
mask-image: url('$(res)/img/element-icons/roomlist/hash-plus.svg');
}
.mx_RoomList_iconNewVideoRoom::before {
mask-image: url('$(res)/img/element-icons/roomlist/hash-video.svg');
}
.mx_RoomList_iconAddExistingRoom::before {
mask-image: url('$(res)/img/element-icons/roomlist/hash.svg');
}

5
res/css/views/rooms/_RoomListHeader.scss
View File

@ -103,9 +103,12 @@ limitations under the License.
.mx_RoomListHeader_iconStartChat::before {
mask-image: url('$(res)/img/element-icons/roomlist/member-plus.svg');
}
.mx_RoomListHeader_iconCreateRoom::before {
.mx_RoomListHeader_iconNewRoom::before {
mask-image: url('$(res)/img/element-icons/roomlist/hash-plus.svg');
}
.mx_RoomListHeader_iconNewVideoRoom::before {
mask-image: url('$(res)/img/element-icons/roomlist/hash-video.svg');
}
.mx_RoomListHeader_iconExplore::before {
mask-image: url('$(res)/img/element-icons/roomlist/hash-search.svg');
}

256
res/css/views/rooms/_RoomTile.scss
View File

@ -19,11 +19,12 @@ limitations under the License.
margin-bottom: 4px;
padding: 4px;
// The tile is also a flexbox row itself
display: flex;
contain: content; // Not strict as it will break when resizing a sublist vertically
box-sizing: border-box;
// The tile is also a flexbox row itself
display: flex;
font-size: $font-13px;
&.mx_RoomTile_selected,
&:hover,
@ -37,163 +38,136 @@ limitations under the License.
margin-right: 10px;
}
.mx_RoomTile_details {
.mx_RoomTile_titleContainer {
height: 32px;
min-width: 0;
flex-basis: 0;
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 title parts
display: flex;
flex-direction: column;
justify-content: center;
.mx_RoomTile_primaryDetails {
height: 32px;
display: flex;
flex-wrap: wrap;
.mx_RoomTile_title, .mx_RoomTile_subtitle {
width: 100%;
.mx_RoomTile_titleContainer {
min-width: 0;
flex-basis: 0;
flex-grow: 1;
margin-right: 8px; // spacing to buttons/badges
// Ellipsize any text overflow
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
// Create a new column layout flexbox for the title parts
display: flex;
flex-direction: column;
justify-content: center;
.mx_RoomTile_title {
font-size: $font-14px;
line-height: $font-18px;
.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_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;
}
}
// 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;
}
}
// 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_RoomTile_menuButton::before {
mask-image: url('$(res)/img/element-icons/context-menu.svg');
&.mx_RoomTile_titleHasUnreadEvents {
font-weight: 600;
}
}
.mx_RoomTile_voiceChannel {
width: 100%;
display: flex;
align-items: center;
.mx_FacePile {
margin: 6px 0 4px;
}
.mx_RoomTile_connectVoiceButton {
font-weight: 600;
padding-left: 10px;
padding-right: 10px;
.mx_RoomTile_subtitle {
line-height: $font-18px;
color: $secondary-content;
.mx_RoomTile_videoIndicator {
&::before {
display: inline-block;
vertical-align: text-bottom;
content: '';
background-color: $accent;
mask-image: url('$(res)/img/voip/voice-room.svg');
background-color: $secondary-content;
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
mask-size: 16px;
width: 16px;
height: 16px;
margin-right: 4px;
}
&.mx_RoomTile_videoIndicator_active {
color: $accent;
&::before {
background-color: $accent;
}
}
}
.mx_RoomTile_videoParticipants::before {
display: inline-block;
vertical-align: text-bottom;
content: '';
background-color: $secondary-content;
mask-image: url('$(res)/img/element-icons/group-members.svg');
mask-size: 16px;
width: 16px;
height: 16px;
margin-right: 2px;
}
}
.mx_RoomTile_titleWithSubtitle {
margin-top: -3px; // shift the title up a bit more
}
}
.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;
}
}
// 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;
}
}
// 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_RoomTile_menuButton::before {
mask-image: url('$(res)/img/element-icons/context-menu.svg');
}
&:not(.mx_RoomTile_minimized) {
@ -222,10 +196,6 @@ limitations under the License.
.mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
margin-right: 0;
}
.mx_RoomTile_details {
display: none;
}
}
}

15
res/css/views/toasts/_IncomingCallToast.scss
View File

@ -90,27 +90,14 @@ limitations under the License.
gap: 12px;
.mx_IncomingCallToast_button {
height: 24px;
@mixin CallButton;
padding: 0px 8px;
flex-shrink: 0;
flex-grow: 1;
margin-right: 0;
font-size: $font-15px;
line-height: $font-24px;
span {
padding: 8px 0;
display: flex;
align-items: center;
&::before {
content: '';
display: inline-block;
background-color: $button-fg-color;
mask-position: center;
mask-repeat: no-repeat;
margin-right: 8px;
}
}
&.mx_IncomingCallToast_button_accept span::before {

121
res/css/views/voip/_VoiceChannelRadio.scss
View File

@ -1,121 +0,0 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_VoiceChannelRadio {
background-color: $system;
> .mx_VoiceChannelRadio_statusBar {
display: flex;
padding: 12px 16px;
align-items: center;
gap: 12px;
> .mx_VoiceChannelRadio_titleContainer {
flex-grow: 1;
> .mx_VoiceChannelRadio_status {
font-size: $font-15px;
color: $accent;
&::before {
content: '';
display: inline-block;
margin-right: 4px;
width: 11px;
height: 11px;
background-color: $accent;
mask-image: url('$(res)/img/voip/signal-bars.svg');
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
}
> .mx_VoiceChannelRadio_name {
font-size: $font-13px;
color: $secondary-content;
}
}
> .mx_VoiceChannelRadio_disconnectButton::before {
content: '';
display: block;
width: 36px;
height: 36px;
background-color: $tertiary-content;
mask-image: url('$(res)/img/element-icons/call/hangup.svg');
mask-position: center;
mask-size: 24px;
mask-repeat: no-repeat;
}
}
> .mx_VoiceChannelRadio_controlBar {
display: flex;
border-top: 1px solid $quinary-content;
padding: 12px 16px;
align-items: center;
justify-content: space-between;
> .mx_AccessibleButton {
font-size: $font-15px;
padding: 6px 0;
&.mx_VoiceChannelRadio_button_active {
padding: 6px 12px;
background-color: $quinary-content;
border-radius: 8px;
font-weight: 600;
}
}
> .mx_VoiceChannelRadio_videoButton::before {
content: '';
display: inline-block;
margin-right: 8px;
width: 16px;
height: 16px;
background-color: $primary-content;
vertical-align: sub;
mask-image: url('$(res)/img/voip/call-view/cam-off.svg');
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
> .mx_VoiceChannelRadio_videoButton.mx_VoiceChannelRadio_button_active::before {
mask-image: url('$(res)/img/voip/call-view/cam-on.svg');
}
> .mx_VoiceChannelRadio_audioButton::before {
content: '';
display: inline-block;
margin-right: 4px;
width: 16px;
height: 16px;
background-color: $primary-content;
vertical-align: sub;
mask-image: url('$(res)/img/voip/call-view/mic-off.svg');
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
> .mx_VoiceChannelRadio_audioButton.mx_VoiceChannelRadio_button_active::before {
mask-image: url('$(res)/img/voip/call-view/mic-on.svg');
}
}
}

BIN
res/img/betas/threads.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

5
res/img/element-icons/roomlist/hash-video.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.393 1.00259C10.9421 1.06119 11.3398 1.55389 11.2812 2.10306L11.0245 4.50854H12.8482C13.4004 4.50854 13.8482 4.95625 13.8482 5.50854C13.8482 6.06082 13.4004 6.50854 12.8482 6.50854H10.811L10.7408 7.16666H8.72946L8.79969 6.50854H5.36671L5.01796 9.77648H6V11.7765H4.80452L4.55614 14.1039C4.49753 14.653 4.00484 15.0507 3.45567 14.9921C2.9065 14.9335 2.50883 14.4408 2.56743 13.8916L2.79316 11.7765H1.00049C0.448204 11.7765 0.000488281 11.3288 0.000488281 10.7765C0.000488281 10.2242 0.448204 9.77648 1.00049 9.77648H3.0066L3.35535 6.50854H1.64186C1.08958 6.50854 0.641865 6.06082 0.641865 5.50854C0.641865 4.95625 1.08958 4.50854 1.64186 4.50854H3.56879L3.84815 1.89082C3.90676 1.34166 4.39946 0.943979 4.94862 1.00259C5.49779 1.06119 5.89547 1.55389 5.83686 2.10306L5.58015 4.50854H9.01313L9.29249 1.89082C9.3511 1.34166 9.8438 0.943979 10.393 1.00259Z" fill="black"/>
<path d="M7.82868 9.10489C7.37101 9.10489 7 9.4759 7 9.93357V12.6958C7 13.1535 7.37101 13.5245 7.82868 13.5245H10.8672C11.3248 13.5245 11.6959 13.1535 11.6959 12.6958V9.93357C11.6959 9.4759 11.3248 9.10489 10.8672 9.10489H7.82868Z" fill="#17191C"/>
<path d="M13.1807 9.74015L12.2483 10.486V12.1434L13.1807 12.8893C13.3615 13.034 13.6294 12.9052 13.6294 12.6736V9.95584C13.6294 9.72423 13.3615 9.59546 13.1807 9.74015Z" fill="#17191C"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

3
res/img/voip/voice-room.svg
View File

@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5203 22.4387C18.4279 22.4387 23.217 17.6492 23.217 11.7411C23.217 5.83295 18.4279 1.04346 12.5203 1.04346C6.61261 1.04346 1.82353 5.83295 1.82353 11.7411C1.82353 13.3962 2.19936 14.9635 2.87032 16.3623L0.795333 23.1065C0.727424 23.3273 0.934782 23.5337 1.1552 23.4648L7.85572 21.3707C9.26544 22.055 10.848 22.4387 12.5203 22.4387ZM5.68079 11.6412C5.68079 11.3264 5.93601 11.0712 6.25083 11.0712C6.56566 11.0712 6.82088 11.3264 6.82088 11.6412V12.5533C6.82088 12.8681 6.56566 13.1233 6.25083 13.1233C5.93601 13.1233 5.68079 12.8681 5.68079 12.5533V11.6412ZM18.7919 11.0712C18.477 11.0712 18.2218 11.3264 18.2218 11.6412V12.5533C18.2218 12.8681 18.477 13.1233 18.7919 13.1233C19.1067 13.1233 19.3619 12.8681 19.3619 12.5533V11.6412C19.3619 11.3264 19.1067 11.0712 18.7919 11.0712ZM8.189 10.045C8.189 9.73017 8.44422 9.47495 8.75905 9.47495C9.07388 9.47495 9.3291 9.73017 9.3291 10.045V14.3774C9.3291 14.6922 9.07388 14.9474 8.75905 14.9474C8.44422 14.9474 8.189 14.6922 8.189 14.3774V10.045ZM16.2836 9.47495C15.9688 9.47495 15.7136 9.73017 15.7136 10.045V14.3774C15.7136 14.6922 15.9688 14.9474 16.2836 14.9474C16.5985 14.9474 16.8537 14.6922 16.8537 14.3774V10.045C16.8537 9.73017 16.5985 9.47495 16.2836 9.47495ZM10.6972 7.30882C10.6972 6.99399 10.9524 6.73877 11.2672 6.73877C11.582 6.73877 11.8373 6.99399 11.8373 7.30882V16.4296C11.8373 16.7444 11.582 16.9996 11.2672 16.9996C10.9524 16.9996 10.6972 16.7444 10.6972 16.4296V7.30882ZM13.7754 6.73877C13.4606 6.73877 13.2054 6.99399 13.2054 7.30882V16.4296C13.2054 16.7444 13.4606 16.9996 13.7754 16.9996C14.0903 16.9996 14.3455 16.7444 14.3455 16.4296V7.30882C14.3455 6.99399 14.0903 6.73877 13.7754 6.73877Z" fill="#737D8C"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 KiB

5
res/themes/dark/css/_dark.scss
View File

@ -79,6 +79,11 @@ $settings-profile-button-bg-color: #e7e7e7;
$settings-subsection-fg-color: $text-secondary-color;
// ********************
// Room
// ********************
$room-icon-unread-color: #fff;
// ********************
// RoomHeader
// ********************
$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);

1
res/themes/legacy-dark/css/_legacy-dark.scss
View File

@ -85,6 +85,7 @@ $roomheader-addroom-bg-color: #3c4556;
$roomheader-addroom-fg-color: $text-primary-color;
$icon-button-color: $header-panel-text-primary-color;
$roomtopic-color: $text-secondary-color;
$room-icon-unread-color: #fff;
// Legacy theme backports
$accent: #0DBD8B;

1
res/themes/legacy-light/css/_legacy-light.scss
View File

@ -127,6 +127,7 @@ $roomheader-addroom-bg-color: #91a1c0;
$roomheader-addroom-fg-color: $accent-fg-color;
$icon-button-color: #91a1c0;
$roomtopic-color: #9e9e9e;
$room-icon-unread-color: #737D8C;
// ********************

33
res/themes/light/css/_light.scss
View File

@ -8,9 +8,22 @@
/* Noto Color Emoji contains digits, in fixed-width, therefore causing
digits in flowed text to stand out.
TODO: Consider putting all emoji fonts to the end rather than the front. */
$font-family: 'Inter', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Arial', 'Helvetica', sans-serif, 'Noto Color Emoji';
$font-family: 'Inter',
'Twemoji',
'Apple Color Emoji',
'Segoe UI Emoji',
'Arial',
'Helvetica',
sans-serif,
'Noto Color Emoji';
$monospace-font-family: 'Inconsolata', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Courier', monospace, 'Noto Color Emoji';
$monospace-font-family: 'Inconsolata',
'Twemoji',
'Apple Color Emoji',
'Segoe UI Emoji',
'Courier',
monospace,
'Noto Color Emoji';
// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120
// ********************
@ -57,7 +70,7 @@ $icon-button-color: $quaternary-content;
// Colors that aren't in Figma and are theme specific - we need to get rid of these
// ********************
$selection-fg-color: $background;
$yellow-background: #fff8e3;
$yellow-background: #fff8e3;
$secondary-accent-color: #f2f5f8;
$button-fg-color: $background;
$neutral-badge-color: #dbdbdb;
@ -79,7 +92,8 @@ $event-selected-color: #f6f7f8;
$topleftmenu-color: #212121;
$roomtopic-color: #9e9e9e;
$spacePanel-bg-color: rgba(232, 232, 232, 0.77);
$panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
$panel-gradient: rgba(242, 245, 248, 0),
rgba(242, 245, 248, 1);
$h3-color: #3d3b39;
$event-highlight-bg-color: $yellow-background;
$header-panel-text-primary-color: #91A1C0;
@ -118,6 +132,11 @@ $settings-profile-button-bg-color: $menu-border-color;
$settings-subsection-fg-color: $muted-fg-color;
// ********************
// Room
// ********************
$room-icon-unread-color: $secondary-content;
// ********************
// RoomHeader
// ********************
$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2);
@ -291,6 +310,7 @@ $focus-brightness: 105%;
:root {
--lp-background-blur: 40px;
}
// ********************
// Icon URLs
@ -325,8 +345,7 @@ $location-live-secondary-color: #deddfd;
outline: none;
}
@define-mixin mx_DialogButton_hover {
}
@define-mixin mx_DialogButton_hover {}
@define-mixin mx_DialogButton_danger {
background-color: $accent;
@ -350,6 +369,7 @@ $location-live-secondary-color: #deddfd;
color: $accent;
text-decoration: none;
}
// ********************
// diff highlight colors
@ -361,4 +381,5 @@ $location-live-secondary-color: #deddfd;
.hljs-deletion {
background: #fdd;
}
// ********************

3
src/Lifecycle.ts
View File

@ -36,6 +36,7 @@ import dis from './dispatcher/dispatcher';
import DMRoomMap from './utils/DMRoomMap';
import Modal from './Modal';
import ActiveWidgetStore from './stores/ActiveWidgetStore';
import VideoChannelStore from "./stores/VideoChannelStore";
import PlatformPeg from "./PlatformPeg";
import { sendLoginRequest } from "./Login";
import * as StorageManager from './utils/StorageManager';
@ -806,6 +807,7 @@ async function startMatrixClient(startSyncing = true): Promise<void> {
IntegrationManagers.sharedInstance().startWatching();
ActiveWidgetStore.instance.start();
CallHandler.instance.start();
if (SettingsStore.getValue("feature_video_rooms")) VideoChannelStore.instance.start();
// Start Mjolnir even though we haven't checked the feature flag yet. Starting
// the thing just wastes CPU cycles, but should result in no actual functionality
@ -919,6 +921,7 @@ export function stopMatrixClient(unsetClient = true): void {
UserActivity.sharedInstance().stop();
TypingStore.sharedInstance().reset();
Presence.stop();
if (SettingsStore.getValue("feature_video_rooms")) VideoChannelStore.instance.stop();
ActiveWidgetStore.instance.stop();
IntegrationManagers.sharedInstance().stopWatching();
Mjolnir.sharedInstance().stop();

2
src/components/structures/LeftPanel.tsx
View File

@ -40,7 +40,6 @@ import { UPDATE_EVENT } from "../../stores/AsyncStore";
import IndicatorScrollbar from "./IndicatorScrollbar";
import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs";
import SettingsStore from "../../settings/SettingsStore";
import VoiceChannelRadio from "../views/voip/VoiceChannelRadio";
import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
import { shouldShowComponent } from "../../customisations/helpers/UIComponents";
import { UIComponent } from "../../settings/UIFeature";
@ -439,7 +438,6 @@ export default class LeftPanel extends React.Component<IProps, IState> {
{ roomList }
</div>
</div>
{ SettingsStore.getValue("feature_voice_rooms") && <VoiceChannelRadio /> }
</aside>
</div>
);

6
src/components/structures/MatrixChat.tsx
View File

@ -31,6 +31,7 @@ import { defer, IDeferred, QueryDict } from "matrix-js-sdk/src/utils";
import { logger } from "matrix-js-sdk/src/logger";
import { throttle } from "lodash";
import { CryptoEvent } from "matrix-js-sdk/src/crypto";
import { RoomType } from "matrix-js-sdk/src/@types/event";
// focus-visible is a Polyfill for the :focus-visible CSS pseudo-attribute used by various components
import 'focus-visible';
@ -676,7 +677,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
break;
}
case 'view_create_room':
this.createRoom(payload.public, payload.defaultName);
this.createRoom(payload.public, payload.defaultName, payload.type);
// View the welcome or home page if we need something to look at
this.viewSomethingBehindModal();
@ -993,8 +994,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
this.setPage(PageType.LegacyGroupView);
}
private async createRoom(defaultPublic = false, defaultName?: string) {
private async createRoom(defaultPublic = false, defaultName?: string, type?: RoomType) {
const modal = Modal.createTrackedDialog('Create Room', '', CreateRoomDialog, {
type,
defaultPublic,
defaultName,
});

43
src/components/structures/RoomView.tsx
View File

@ -74,7 +74,7 @@ import EffectsOverlay from "../views/elements/EffectsOverlay";
import { containsEmoji } from '../../effects/utils';
import { CHAT_EFFECTS } from '../../effects';
import WidgetStore from "../../stores/WidgetStore";
import { getVoiceChannel } from "../../utils/VoiceChannelUtils";
import { getVideoChannel } from "../../utils/VideoChannelUtils";
import AppTile from "../views/elements/AppTile";
import { UPDATE_EVENT } from "../../stores/AsyncStore";
import Notifier from "../../Notifier";
@ -373,7 +373,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
};
private getMainSplitContentType = (room: Room) => {
if (SettingsStore.getValue("feature_voice_rooms") && room.isCallRoom()) {
if (SettingsStore.getValue("feature_video_rooms") && room.isElementVideoRoom()) {
return MainSplitContentType.Video;
}
if (WidgetLayoutStore.instance.hasMaximisedWidget(room)) {
@ -942,6 +942,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
if (ev.getType() === "m.room.encryption") {
this.updateE2EStatus(room);
this.updatePreviewUrlVisibility(room);
}
// ignore anything but real-time updates at the end of the room:
@ -2097,6 +2098,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
const mainClasses = classNames("mx_RoomView", {
mx_RoomView_inCall: Boolean(activeCall),
mx_RoomView_immersive: this.state.mainSplitContentType === MainSplitContentType.Video,
});
const showChatEffects = SettingsStore.getValue('showChatEffects');
@ -2138,7 +2140,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
</>;
break;
case MainSplitContentType.Video: {
const app = getVoiceChannel(this.state.room.roomId);
const app = getVideoChannel(this.state.room.roomId);
if (!app) break;
mainSplitContentClassName = "mx_MainSplit_video";
mainSplitBody = <AppTile
@ -2155,19 +2157,32 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
const mainSplitContentClasses = classNames("mx_RoomView_body", mainSplitContentClassName);
let excludedRightPanelPhaseButtons = [RightPanelPhases.Timeline];
let onCallPlaced = this.onCallPlaced;
let onAppsClick = this.onAppsClick;
let onForgetClick = this.onForgetClick;
let onSearchClick = this.onSearchClick;
if (this.state.mainSplitContentType !== MainSplitContentType.Timeline) {
// Disable phase buttons and action button to have a simplified header
// and enable (not disable) the RightPanelPhases.Timeline button
excludedRightPanelPhaseButtons = [
RightPanelPhases.ThreadPanel,
RightPanelPhases.PinnedMessages,
];
onAppsClick = null;
onForgetClick = null;
onSearchClick = null;
// Simplify the header for other main split types
switch (this.state.mainSplitContentType) {
case MainSplitContentType.MaximisedWidget:
excludedRightPanelPhaseButtons = [
RightPanelPhases.ThreadPanel,
RightPanelPhases.PinnedMessages,
];
onAppsClick = null;
onForgetClick = null;
onSearchClick = null;
break;
case MainSplitContentType.Video:
excludedRightPanelPhaseButtons = [
RightPanelPhases.ThreadPanel,
RightPanelPhases.PinnedMessages,
RightPanelPhases.NotificationPanel,
];
onCallPlaced = null;
onAppsClick = null;
onForgetClick = null;
onSearchClick = null;
}
return (
@ -2187,7 +2202,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
e2eStatus={this.state.e2eStatus}
onAppsClick={this.state.hasPinnedWidgets ? onAppsClick : null}
appsShown={this.state.showApps}
onCallPlaced={this.onCallPlaced}
onCallPlaced={onCallPlaced}
excludedRightPanelPhaseButtons={excludedRightPanelPhaseButtons}
/>
<MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier}>

51
src/components/structures/SpaceRoomView.tsx
View File

@ -15,7 +15,7 @@ limitations under the License.
*/
import React, { RefObject, useContext, useRef, useState } from "react";
import { EventType } from "matrix-js-sdk/src/@types/event";
import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
import { JoinRule, Preset } from "matrix-js-sdk/src/@types/partials";
import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
import { logger } from "matrix-js-sdk/src/logger";
@ -29,6 +29,7 @@ import RoomTopic from "../views/elements/RoomTopic";
import InlineSpinner from "../views/elements/InlineSpinner";
import { inviteMultipleToRoom, showRoomInviteDialog } from "../../RoomInvite";
import { useRoomMembers } from "../../hooks/useRoomMembers";
import { useFeatureEnabled } from "../../hooks/useSettings";
import createRoom, { IOpts } from "../../createRoom";
import Field from "../views/elements/Field";
import { useTypedEventEmitter } from "../../hooks/useEventEmitter";
@ -57,7 +58,7 @@ import {
} from "../../utils/space";
import SpaceHierarchy, { showRoom } from "./SpaceHierarchy";
import MemberAvatar from "../views/avatars/MemberAvatar";
import { RoomFacePile } from "../views/elements/FacePile";
import FacePile from "../views/elements/FacePile";
import {
AddExistingToSpace,
defaultDmsRenderer,
@ -297,7 +298,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }: ISp
</div>
}
</RoomTopic>
{ space.getJoinRule() === "public" && <RoomFacePile room={space} /> }
{ space.getJoinRule() === "public" && <FacePile room={space} /> }
<div className="mx_SpaceRoomView_preview_joinButtons">
{ joinButtons }
</div>
@ -309,6 +310,7 @@ const SpaceLandingAddButton = ({ space }) => {
const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu();
const canCreateRoom = shouldShowComponent(UIComponent.CreateRooms);
const canCreateSpace = shouldShowComponent(UIComponent.CreateSpaces);
const videoRoomsEnabled = useFeatureEnabled("feature_video_rooms");
let contextMenu;
if (menuDisplayed) {
@ -322,20 +324,35 @@ const SpaceLandingAddButton = ({ space }) => {
compact
>
<IconizedContextMenuOptionList first>
{ canCreateRoom && <IconizedContextMenuOption
label={_t("Create new room")}
iconClassName="mx_RoomList_iconPlus"
onClick={async (e) => {
e.preventDefault();
e.stopPropagation();
closeMenu();
{ canCreateRoom && <>
<IconizedContextMenuOption
label={_t("New room")}
iconClassName="mx_RoomList_iconPlus"
onClick={async (e) => {
e.preventDefault();
e.stopPropagation();
closeMenu();
PosthogTrackers.trackInteraction("WebSpaceHomeCreateRoomButton", e);
if (await showCreateNewRoom(space)) {
defaultDispatcher.fire(Action.UpdateSpaceHierarchy);
}
}}
/> }
PosthogTrackers.trackInteraction("WebSpaceHomeCreateRoomButton", e);
if (await showCreateNewRoom(space)) {
defaultDispatcher.fire(Action.UpdateSpaceHierarchy);
}
}}
/>
{ videoRoomsEnabled && <IconizedContextMenuOption
label={_t("New video room")}
iconClassName="mx_RoomList_iconNewVideoRoom"
onClick={async (e) => {
e.preventDefault();
e.stopPropagation();
closeMenu();
if (await showCreateNewRoom(space, RoomType.ElementVideo)) {
defaultDispatcher.fire(Action.UpdateSpaceHierarchy);
}
}}
/> }
</> }
<IconizedContextMenuOption
label={_t("Add existing room")}
iconClassName="mx_RoomList_iconAddExistingRoom"
@ -437,7 +454,7 @@ const SpaceLanding = ({ space }: { space: Room }) => {
<div className="mx_SpaceRoomView_landing_infoBar">
<SpaceInfo space={space} />
<div className="mx_SpaceRoomView_landing_infoBar_interactive">
<RoomFacePile room={space} onlyKnownUsers={false} numShown={7} onClick={onMembersClick} />
<FacePile room={space} onlyKnownUsers={false} numShown={7} onClick={onMembersClick} />
{ inviteButton }
{ settingsButton }
</div>

78
src/components/structures/ThreadPanel.tsx
View File

@ -31,7 +31,14 @@ import { Layout } from '../../settings/enums/Layout';
import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks';
import Measured from '../views/elements/Measured';
import PosthogTrackers from "../../PosthogTrackers";
import { ButtonEvent } from "../views/elements/AccessibleButton";
import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
import { BetaPill } from '../views/beta/BetaCard';
import SdkConfig from '../../SdkConfig';
import Modal from '../../Modal';
import BetaFeedbackDialog from '../views/dialogs/BetaFeedbackDialog';
import { Action } from '../../dispatcher/actions';
import { UserTab } from '../views/dialogs/UserSettingsDialog';
import dis from '../../dispatcher/dispatcher';
interface IProps {
roomId: string;
@ -101,7 +108,7 @@ export const ThreadPanelHeader = ({ filterOption, setFilterOption, empty }: {
isSelected={opt === value}
/>);
const contextMenu = menuDisplayed ? <ContextMenu
top={100}
top={108}
right={33}
onFinished={closeMenu}
chevronFace={ChevronFace.Top}
@ -129,25 +136,44 @@ export const ThreadPanelHeader = ({ filterOption, setFilterOption, empty }: {
};
interface EmptyThreadIProps {
hasThreads: boolean;
filterOption: ThreadFilterType;
showAllThreadsCallback: () => void;
}
const EmptyThread: React.FC<EmptyThreadIProps> = ({ filterOption, showAllThreadsCallback }) => {
const EmptyThread: React.FC<EmptyThreadIProps> = ({ hasThreads, filterOption, showAllThreadsCallback }) => {
let body: JSX.Element;
if (hasThreads) {
body = <>
<p>
{ _t("Reply to an ongoing thread or use “%(replyInThread)s” "
+ "when hovering over a message to start a new one.", {
replyInThread: _t("Reply in thread"),
}) }
</p>
<p>
{ /* Always display that paragraph to prevent layout shift when hiding the button */ }
{ (filterOption === ThreadFilterType.My)
? <button onClick={showAllThreadsCallback}>{ _t("Show all threads") }</button>
: <>&nbsp;</>
}
</p>
</>;
} else {
body = <>
<p>{ _t("Threads help keep your conversations on-topic and easy to track.") }</p>
<p className="mx_ThreadPanel_empty_tip">
{ _t('<b>Tip:</b> Use "Reply in thread" when hovering over a message.', {}, {
b: sub => <b>{ sub }</b>,
}) }
</p>
</>;
}
return <aside className="mx_ThreadPanel_empty">
<div className="mx_ThreadPanel_largeIcon" />
<h2>{ _t("Keep discussions organised with threads") }</h2>
<p>{ _t("Reply to an ongoing thread or use “%(replyInThread)s” "
+ "when hovering over a message to start a new one.", { replyInThread: _t("Reply in thread") }) }
</p>
<p>
{ /* Always display that paragraph to prevent layout shift
When hiding the button */ }
{ filterOption === ThreadFilterType.My
? <button onClick={showAllThreadsCallback}>{ _t("Show all threads") }</button>
: <>&nbsp;</>
}
</p>
{ body }
</aside>;
};
@ -214,6 +240,12 @@ const ThreadPanel: React.FC<IProps> = ({
}
}, [timelineSet, timelinePanel]);
const openFeedback = SdkConfig.get().bug_report_endpoint_url ? () => {
Modal.createTrackedDialog("Threads Feedback", "feature_thread", BetaFeedbackDialog, {
featureId: "feature_thread",
});
} : null;
return (
<RoomContext.Provider value={{
...roomContext,
@ -227,6 +259,22 @@ const ThreadPanel: React.FC<IProps> = ({
setFilterOption={setFilterOption}
empty={threadCount === 0}
/>}
footer={<>
<BetaPill
tooltipTitle={_t("Threads are a beta feature")}
tooltipCaption={_t("Click for more info")}
onClick={() => {
dis.dispatch({
action: Action.ViewUserSettings,
initialTabId: UserTab.Labs,
});
}}
/>
{ openFeedback && _t("<a>Give feedback</a>", {}, {
a: sub =>
<AccessibleButton kind="link_inline" onClick={openFeedback}>{ sub }</AccessibleButton>,
}) }
</>}
className="mx_ThreadPanel"
onClose={onClose}
withoutScrollContainer={true}
@ -238,6 +286,7 @@ const ThreadPanel: React.FC<IProps> = ({
/>
{ timelineSet && (
<TimelinePanel
key={timelineSet.getFilter().filterId}
ref={timelinePanel}
showReadReceipts={false} // No RR support in thread's MVP
manageReadReceipts={false} // No RR support in thread's MVP
@ -246,6 +295,7 @@ const ThreadPanel: React.FC<IProps> = ({
timelineSet={timelineSet}
showUrlPreview={false} // No URL previews at the threads list level
empty={<EmptyThread
hasThreads={room.threadsTimelineSets?.[0]?.getLiveTimeline().getEvents().length > 0}
filterOption={filterOption}
showAllThreadsCallback={() => setFilterOption(ThreadFilterType.All)}
/>}

18
src/components/views/beta/BetaCard.tsx
View File

@ -36,17 +36,27 @@ interface IProps {
featureId: string;
}
export const BetaPill = ({ onClick }: { onClick?: () => void }) => {
interface IBetaPillProps {
onClick?: () => void;
tooltipTitle?: string;
tooltipCaption?: string;
}
export const BetaPill = ({
onClick,
tooltipTitle = _t("This is a beta feature"),
tooltipCaption = _t("Click for more info"),
}: IBetaPillProps) => {
if (onClick) {
return <AccessibleTooltipButton
className="mx_BetaCard_betaPill"
title={_t("This is a beta feature. Click for more info")}
title={`${tooltipTitle} ${tooltipCaption}`}
tooltip={<div>
<div className="mx_Tooltip_title">
{ _t("This is a beta feature") }
{ tooltipTitle }
</div>
<div className="mx_Tooltip_sub">
{ _t("Click for more info") }
{ tooltipCaption }
</div>
</div>}
onClick={onClick}

8
src/components/views/context_menus/MessageContextMenu.tsx
View File

@ -41,7 +41,6 @@ import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
import { ChevronFace, IPosition } from '../../structures/ContextMenu';
import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';
import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
import { WidgetLayoutStore } from '../../../stores/widgets/WidgetLayoutStore';
import EndPollDialog from '../dialogs/EndPollDialog';
import { isPollEnded } from '../messages/MPollBody';
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
@ -471,14 +470,11 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
timelineRenderingType === TimelineRenderingType.Thread ||
timelineRenderingType === TimelineRenderingType.ThreadsList
);
const isThreadRootEvent = isThread && this.props.mxEvent?.getThread()?.rootEvent === this.props.mxEvent;
const isThreadRootEvent = isThread && this.props.mxEvent.isThreadRoot;
const isMainSplitTimelineShown = !WidgetLayoutStore.instance.hasMaximisedWidget(
MatrixClientPeg.get().getRoom(mxEvent.getRoomId()),
);
const commonItemsList = (
<IconizedContextMenuOptionList>
{ (isThreadRootEvent && isMainSplitTimelineShown) && <IconizedContextMenuOption
{ isThreadRootEvent && <IconizedContextMenuOption
iconClassName="mx_MessageContextMenu_iconViewInRoom"
label={_t("View in room")}
onClick={this.viewInRoom}

96
src/components/views/context_menus/RoomContextMenu.tsx
View File

@ -35,7 +35,7 @@ import { EchoChamber } from "../../../stores/local-echo/EchoChamber";
import { RoomNotifState } from "../../../RoomNotifs";
import Modal from "../../../Modal";
import ExportDialog from "../dialogs/ExportDialog";
import { useSettingValue } from "../../../hooks/useSettings";
import { useFeatureEnabled } from "../../../hooks/useSettings";
import { usePinnedEvents } from "../right_panel/PinnedMessagesCard";
import { RoomViewStore } from "../../../stores/RoomViewStore";
import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases';
@ -105,6 +105,7 @@ const RoomContextMenu = ({ room, onFinished, ...props }: IProps) => {
}
const isDm = DMRoomMap.shared().getUserIdForRoomId(room.roomId);
const isVideoRoom = useFeatureEnabled("feature_video_rooms") && room.isElementVideoRoom();
let inviteOption: JSX.Element;
if (room.canInvite(cli.getUserId()) && !isDm) {
@ -233,11 +234,27 @@ const RoomContextMenu = ({ room, onFinished, ...props }: IProps) => {
/>;
}
const pinningEnabled = useSettingValue("feature_pinning");
let filesOption: JSX.Element;
if (!isVideoRoom) {
filesOption = <IconizedContextMenuOption
onClick={(ev: ButtonEvent) => {
ev.preventDefault();
ev.stopPropagation();
ensureViewingRoom(ev);
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.FilePanel }, false);
onFinished();
}}
label={_t("Files")}
iconClassName="mx_RoomTile_iconFiles"
/>;
}
const pinningEnabled = useFeatureEnabled("feature_pinning");
const pinCount = usePinnedEvents(pinningEnabled && room)?.length;
let pinsOption: JSX.Element;
if (pinningEnabled) {
if (pinningEnabled && !isVideoRoom) {
pinsOption = <IconizedContextMenuOption
onClick={(ev: ButtonEvent) => {
ev.preventDefault();
@ -256,6 +273,37 @@ const RoomContextMenu = ({ room, onFinished, ...props }: IProps) => {
</IconizedContextMenuOption>;
}
let widgetsOption: JSX.Element;
if (!isVideoRoom) {
widgetsOption = <IconizedContextMenuOption
onClick={(ev: ButtonEvent) => {
ev.preventDefault();
ev.stopPropagation();
ensureViewingRoom(ev);
RightPanelStore.instance.setCard({ phase: RightPanelPhases.RoomSummary }, false);
onFinished();
}}
label={_t("Widgets")}
iconClassName="mx_RoomTile_iconWidgets"
/>;
}
let exportChatOption: JSX.Element;
if (!isVideoRoom) {
exportChatOption = <IconizedContextMenuOption
onClick={(ev: ButtonEvent) => {
ev.preventDefault();
ev.stopPropagation();
Modal.createTrackedDialog('Export room dialog', '', ExportDialog, { room });
onFinished();
}}
label={_t("Export chat")}
iconClassName="mx_RoomTile_iconExport"
/>;
}
const onTagRoom = (ev: ButtonEvent, tagId: TagID) => {
ev.preventDefault();
ev.stopPropagation();
@ -295,35 +343,9 @@ const RoomContextMenu = ({ room, onFinished, ...props }: IProps) => {
{ notificationOption }
{ favouriteOption }
{ peopleOption }
<IconizedContextMenuOption
onClick={(ev: ButtonEvent) => {
ev.preventDefault();
ev.stopPropagation();
ensureViewingRoom(ev);
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.FilePanel }, false);
onFinished();
}}
label={_t("Files")}
iconClassName="mx_RoomTile_iconFiles"
/>
{ filesOption }
{ pinsOption }
<IconizedContextMenuOption
onClick={(ev: ButtonEvent) => {
ev.preventDefault();
ev.stopPropagation();
ensureViewingRoom(ev);
RightPanelStore.instance.setCard({ phase: RightPanelPhases.RoomSummary }, false);
onFinished();
}}
label={_t("Widgets")}
iconClassName="mx_RoomTile_iconWidgets"
/>
{ widgetsOption }
{ lowPriorityOption }
{ copyLinkOption }
@ -343,17 +365,7 @@ const RoomContextMenu = ({ room, onFinished, ...props }: IProps) => {
iconClassName="mx_RoomTile_iconSettings"
/>
<IconizedContextMenuOption
onClick={(ev: ButtonEvent) => {
ev.preventDefault();
ev.stopPropagation();
Modal.createTrackedDialog('Export room dialog', '', ExportDialog, { room });
onFinished();
}}
label={_t("Export chat")}
iconClassName="mx_RoomTile_iconExport"
/>
{ exportChatOption }
{ SettingsStore.getValue("developerMode") && <IconizedContextMenuOption
onClick={(ev: ButtonEvent) => {

2
src/components/views/dialogs/BetaFeedbackDialog.tsx
View File

@ -35,7 +35,7 @@ const BetaFeedbackDialog: React.FC<IProps> = ({ featureId, onFinished }) => {
const info = SettingsStore.getBetaInfo(featureId);
return <GenericFeatureFeedbackDialog
title={_t("%(featureName)s beta feedback", { featureName: info.title })}
title={_t("%(featureName)s Beta feedback", { featureName: info.title })}
subheading={_t(info.feedbackSubheading)}
onFinished={onFinished}
rageshakeLabel={info.feedbackLabel}

40
src/components/views/dialogs/CreateRoomDialog.tsx
View File

@ -21,14 +21,11 @@ import { RoomType } from "matrix-js-sdk/src/@types/event";
import { JoinRule, Preset, Visibility } from "matrix-js-sdk/src/@types/partials";
import SdkConfig from '../../../SdkConfig';
import SettingsStore from "../../../settings/SettingsStore";
import withValidation, { IFieldState } from '../elements/Validation';
import { _t } from '../../../languageHandler';
import { MatrixClientPeg } from '../../../MatrixClientPeg';
import { IOpts } from "../../../createRoom";
import Heading from "../typography/Heading";
import { IOpts, privateShouldBeEncrypted } from "../../../createRoom";
import Field from "../elements/Field";
import StyledRadioGroup from "../elements/StyledRadioGroup";
import RoomAliasField from "../elements/RoomAliasField";
import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
import DialogButtons from "../elements/DialogButtons";
@ -40,6 +37,7 @@ import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
import { privateShouldBeEncrypted } from "../../../utils/rooms";
interface IProps {
type?: RoomType;
defaultPublic?: boolean;
defaultName?: string;
parentSpace?: Room;
@ -48,7 +46,6 @@ interface IProps {
}
interface IState {
type?: RoomType;
joinRule: JoinRule;
isPublic: boolean;
isEncrypted: boolean;
@ -79,7 +76,6 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
}
this.state = {
type: null,
isPublic: this.props.defaultPublic || false,
isEncrypted: this.props.defaultEncrypted ?? privateShouldBeEncrypted(),
joinRule,
@ -99,7 +95,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
private roomCreateOptions() {
const opts: IOpts = {};
const createOpts: IOpts["createOpts"] = opts.createOpts = {};
opts.roomType = this.state.type;
opts.roomType = this.props.type;
createOpts.name = this.state.name;
if (this.state.joinRule === JoinRule.Public) {
@ -179,10 +175,6 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
this.props.onFinished(false);
};
private onTypeChange = (type: RoomType | "text") => {
this.setState({ type: type === "text" ? null : type });
};
private onNameChange = (ev: ChangeEvent<HTMLInputElement>) => {
this.setState({ name: ev.target.value });
};
@ -228,6 +220,8 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
});
render() {
const isVideoRoom = this.props.type === RoomType.ElementVideo;
let aliasField;
if (this.state.joinRule === JoinRule.Public) {
const domain = MatrixClientPeg.get().getDomain();
@ -318,8 +312,12 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
);
}
let title = _t("Create a room");
if (!this.props.parentSpace) {
let title;
if (isVideoRoom) {
title = _t("Create a video room");
} else if (this.props.parentSpace) {
title = _t("Create a room");
} else {
title = this.state.joinRule === JoinRule.Public ? _t('Create a public room') : _t('Create a private room');
}
@ -332,20 +330,6 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
>
<form onSubmit={this.onOk} onKeyDown={this.onKeyDown}>
<div className="mx_Dialog_content">
{ SettingsStore.getValue("feature_voice_rooms") ? <>
<Heading size="h3">{ _t("Room type") }</Heading>
<StyledRadioGroup
name="type"
value={this.state.type ?? "text"}
onChange={this.onTypeChange}
definitions={[
{ value: "text", label: _t("Text room") },
{ value: RoomType.UnstableCall, label: _t("Voice & video room") },
]}
/>
<Heading size="h3">{ _t("Room details") }</Heading>
</> : null }
<Field
ref={this.nameField}
label={_t('Name')}
@ -389,7 +373,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
</details>
</div>
</form>
<DialogButtons primaryButton={_t('Create Room')}
<DialogButtons primaryButton={isVideoRoom ? _t('Create video room') : _t('Create room')}
onPrimaryButtonClick={this.onOk}
onCancel={this.onCancel} />
</BaseDialog>

54
src/components/views/elements/FacePile.tsx
View File

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { HTMLAttributes, ReactNode, useContext } from "react";
import React, { FC, HTMLAttributes, ReactNode, useContext } from "react";
import { Room } from "matrix-js-sdk/src/models/room";
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { sortBy } from "lodash";
@ -26,48 +26,17 @@ import TextWithTooltip from "../elements/TextWithTooltip";
import { useRoomMembers } from "../../../hooks/useRoomMembers";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
interface IProps extends HTMLAttributes<HTMLSpanElement> {
faces: ReactNode[];
overflow: boolean;
tooltip?: ReactNode;
children?: ReactNode;
}
const FacePile = ({ faces, overflow, tooltip, children, ...props }: IProps) => {
const pileContents = <>
{ overflow ? <span className="mx_FacePile_more" /> : null }
{ faces }
</>;
return <div {...props} className="mx_FacePile">
{ tooltip ? (
<TextWithTooltip class="mx_FacePile_faces" tooltip={tooltip} tooltipProps={{ yOffset: 32 }}>
{ pileContents }
</TextWithTooltip>
) : (
<div className="mx_FacePile_faces">
{ pileContents }
</div>
) }
{ children }
</div>;
};
export default FacePile;
const DEFAULT_NUM_FACES = 5;
const isKnownMember = (member: RoomMember) => !!DMRoomMap.shared().getDMRoomsForUserId(member.userId)?.length;
interface IRoomProps extends HTMLAttributes<HTMLSpanElement> {
interface IProps extends HTMLAttributes<HTMLSpanElement> {
room: Room;
onlyKnownUsers?: boolean;
numShown?: number;
}
export const RoomFacePile = (
{ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, ...props }: IRoomProps,
) => {
const isKnownMember = (member: RoomMember) => !!DMRoomMap.shared().getDMRoomsForUserId(member.userId)?.length;
const FacePile: FC<IProps> = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, ...props }) => {
const cli = useContext(MatrixClientContext);
const isJoined = room.getMyMembership() === "join";
let members = useRoomMembers(room);
@ -89,8 +58,6 @@ export const RoomFacePile = (
// We reverse the order of the shown faces in CSS to simplify their visual overlap,
// reverse members in tooltip order to make the order between the two match up.
const commaSeparatedMembers = shownMembers.map(m => m.rawDisplayName).reverse().join(", ");
const faces = shownMembers.map(m =>
<MemberAvatar key={m.userId} member={m} width={28} height={28} />);
let tooltip: ReactNode;
if (props.onClick) {
@ -123,9 +90,16 @@ export const RoomFacePile = (
}
}
return <FacePile faces={faces} overflow={members.length > numShown} tooltip={tooltip}>
return <div {...props} className="mx_FacePile">
<TextWithTooltip class="mx_FacePile_faces" tooltip={tooltip} tooltipProps={{ yOffset: 32 }}>
{ members.length > numShown ? <span className="mx_FacePile_face mx_FacePile_more" /> : null }
{ shownMembers.map(m =>
<MemberAvatar key={m.userId} member={m} width={28} height={28} className="mx_FacePile_face" />) }
</TextWithTooltip>
{ onlyKnownUsers && <span className="mx_FacePile_summary">
{ _t("%(count)s people you know have already joined", { count: members.length }) }
</span> }
</FacePile>;
</div>;
};
export default FacePile;

2
src/components/views/messages/JumpToDatePicker.tsx
View File

@ -77,7 +77,7 @@ const JumpToDatePicker: React.FC<IProps> = ({ ts, onDatePicked }: IProps) => {
className="mx_JumpToDatePicker_form"
onSubmit={onJumpToDateSubmit}
>
<span className="mx_JumpToDatePicker_label">Jump to date</span>
<span className="mx_JumpToDatePicker_label">{ _t("Jump to date") }</span>
<Field
componentClass={NativeOnChangeInput}
type="date"

53
src/components/views/messages/MessageActionBar.tsx
View File

@ -43,6 +43,8 @@ import { showThread } from "../../../dispatcher/dispatch-actions/threads";
import { shouldDisplayReply } from '../../../utils/Reply';
import { Key } from "../../../Keyboard";
import { ALTERNATE_KEY_NAME } from "../../../accessibility/KeyboardShortcuts";
import { UserTab } from '../dialogs/UserSettingsDialog';
import { Action } from '../../../dispatcher/actions';
interface IOptionsButtonProps {
mxEvent: MatrixEvent;
@ -221,7 +223,18 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
};
private onThreadClick = (isCard: boolean): void => {
showThread({ rootEvent: this.props.mxEvent, push: isCard });
if (localStorage.getItem("mx_seen_feature_thread") === null) {
localStorage.setItem("mx_seen_feature_thread", "true");
}
if (!SettingsStore.getValue("feature_thread")) {
dis.dispatch({
action: Action.ViewUserSettings,
initialTabId: UserTab.Labs,
});
} else {
showThread({ rootEvent: this.props.mxEvent, push: isCard });
}
};
private onEditClick = (): void => {
@ -233,14 +246,13 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
];
private get showReplyInThreadAction(): boolean {
const isThreadEnabled = SettingsStore.getValue("feature_thread");
const inNotThreadTimeline = this.context.timelineRenderingType !== TimelineRenderingType.Thread;
const isAllowedMessageType = !this.forbiddenThreadHeadMsgType.includes(
this.props.mxEvent.getContent().msgtype as MsgType,
);
return isThreadEnabled && inNotThreadTimeline && isAllowedMessageType;
return inNotThreadTimeline && isAllowedMessageType;
}
/**
@ -296,21 +308,42 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
key="cancel"
/>;
const hasARelation = !!this.props.mxEvent?.getRelation()?.rel_type;
const relationType = this.props.mxEvent?.getRelation()?.rel_type;
const hasARelation = !!relationType && relationType !== RelationType.Thread;
const firstTimeSeeingThreads = localStorage.getItem("mx_seen_feature_thread") === null &&
!SettingsStore.getValue("feature_thread");
const threadTooltipButton = <CardContext.Consumer key="thread">
{ context =>
<RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_threadButton"
disabled={hasARelation}
tooltip={<>
<div className="mx_Tooltip_title">
{ !hasARelation
? _t("Reply in thread")
: _t("Can't create a thread from an event with an existing relation") }
</div>
{ !hasARelation && (
<div className="mx_Tooltip_sub">
{ SettingsStore.getValue("feature_thread")
? _t("Beta feature")
: _t("Beta feature. Click to learn more.")
}
</div>
) }
</>}
title={!hasARelation
? _t("Reply in thread")
: _t("Can't create a thread from an event with an existing relation")
}
: _t("Can't create a thread from an event with an existing relation")}
onClick={this.onThreadClick.bind(null, context.isCard)}
/>
>
{ firstTimeSeeingThreads && (
<div className="mx_Indicator" />
) }
</RovingAccessibleTooltipButton>
}
</CardContext.Consumer>;
@ -385,14 +418,14 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
'mx_MessageActionBar_expandMessageButton': !this.props.isQuoteExpanded,
'mx_MessageActionBar_collapseMessageButton': this.props.isQuoteExpanded,
});
const tooltip = <div>
const tooltip = <>
<div className="mx_Tooltip_title">
{ this.props.isQuoteExpanded ? _t("Collapse quotes") : _t("Expand quotes") }
</div>
<div className="mx_Tooltip_sub">
{ _t(ALTERNATE_KEY_NAME[Key.SHIFT]) + " + " + _t("Click") }
</div>
</div>;
</>;
toolbarOpts.push(<RovingAccessibleTooltipButton
className={expandClassName}
title={this.props.isQuoteExpanded ? _t("Collapse quotes") : _t("Expand quotes")}

15
src/components/views/messages/TextualBody.tsx
View File

@ -605,9 +605,14 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
if (this.props.highlightLink) {
body = <a href={this.props.highlightLink}>{ body }</a>;
} else if (content.data && typeof content.data["org.matrix.neb.starter_link"] === "string") {
body = <AccessibleButton kind="link_inline"
onClick={this.onStarterLinkClick.bind(this, content.data["org.matrix.neb.starter_link"])}
>{ body }</AccessibleButton>;
body = (
<AccessibleButton
kind="link_inline"
onClick={this.onStarterLinkClick.bind(this, content.data["org.matrix.neb.starter_link"])}
>
{ body }
</AccessibleButton>
);
}
let widgets;
@ -649,9 +654,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
);
}
return (
<div className="mx_MTextBody mx_EventTile_content"
onClick={this.onBodyLinkClick}
>
<div className="mx_MTextBody mx_EventTile_content" onClick={this.onBodyLinkClick}>
{ body }
{ widgets }
</div>

4
src/components/views/right_panel/HeaderButton.tsx
View File

@ -28,6 +28,7 @@ import { ButtonEvent } from "../elements/AccessibleButton";
interface IProps {
// Whether this button is highlighted
isHighlighted: boolean;
isUnread?: boolean;
// click handler
onClick: (ev: ButtonEvent) => void;
// The parameters to track the click event
@ -48,11 +49,12 @@ export default class HeaderButton extends React.Component<IProps> {
public render() {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { isHighlighted, onClick, analytics, name, title, ...props } = this.props;
const { isHighlighted, isUnread = false, onClick, analytics, name, title, ...props } = this.props;
const classes = classNames({
mx_RightPanel_headerButton: true,
mx_RightPanel_headerButton_highlight: isHighlighted,
mx_RightPanel_headerButton_unread: isUnread,
[`mx_RightPanel_${name}`]: true,
});

3
src/components/views/right_panel/RoomHeaderButtons.tsx
View File

@ -60,6 +60,7 @@ const UnreadIndicator = ({ color }: IUnreadIndicatorProps) => {
}
const classes = classNames({
"mx_Indicator": true,
"mx_RightPanel_headerButton_unreadIndicator": true,
"mx_Indicator_bold": color === NotificationColor.Bold,
"mx_Indicator_gray": color === NotificationColor.Grey,
@ -92,6 +93,7 @@ const PinnedMessagesHeaderButton = ({ room, isHighlighted, onClick }: IHeaderBut
name="pinnedMessagesButton"
title={_t("Pinned messages")}
isHighlighted={isHighlighted}
isUnread={!!unreadIndicator}
onClick={onClick}
analytics={["Right Panel", "Pinned Messages Button", "click"]}
>
@ -241,6 +243,7 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
title={_t("Threads")}
onClick={this.onThreadsPanelClicked}
isHighlighted={this.isPhase(RoomHeaderButtons.THREAD_PHASES)}
isUnread={this.threadNotificationState.color > 0}
analytics={['Right Panel', 'Threads List Button', 'click']}>
<UnreadIndicator color={this.threadNotificationState.color} />
</HeaderButton>

25
src/components/views/right_panel/RoomSummaryCard.tsx
View File

@ -42,7 +42,7 @@ import { UIComponent, UIFeature } from "../../../settings/UIFeature";
import { ChevronFace, ContextMenuTooltipButton, useContextMenu } from "../../structures/ContextMenu";
import WidgetContextMenu from "../context_menus/WidgetContextMenu";
import { useRoomMemberCount } from "../../../hooks/useRoomMembers";
import { useSettingValue } from "../../../hooks/useSettings";
import { useFeatureEnabled } from "../../../hooks/useSettings";
import { usePinnedEvents } from "./PinnedMessagesCard";
import { Container, MAX_PINNED, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
import RoomName from "../elements/RoomName";
@ -269,6 +269,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
const isRoomEncrypted = useIsEncrypted(cli, room);
const roomContext = useContext(RoomContext);
const e2eStatus = roomContext.e2eStatus;
const isVideoRoom = useFeatureEnabled("feature_video_rooms") && room.isElementVideoRoom();
const alias = room.getCanonicalAlias() || room.getAltAliases()[0] || "";
const header = <React.Fragment>
@ -297,7 +298,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
</React.Fragment>;
const memberCount = useRoomMemberCount(room);
const pinningEnabled = useSettingValue("feature_pinning");
const pinningEnabled = useFeatureEnabled("feature_pinning");
const pinCount = usePinnedEvents(pinningEnabled && room)?.length;
return <BaseCard header={header} className="mx_RoomSummaryCard" onClose={onClose}>
@ -308,18 +309,19 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
{ memberCount }
</span>
</Button>
<Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomFilesClick}>
{ !isVideoRoom && <Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomFilesClick}>
{ _t("Files") }
</Button>
{ pinningEnabled && <Button className="mx_RoomSummaryCard_icon_pins" onClick={onRoomPinsClick}>
{ _t("Pinned") }
{ pinCount > 0 && <span className="mx_BaseCard_Button_sublabel">
{ pinCount }
</span> }
</Button> }
<Button className="mx_RoomSummaryCard_icon_export" onClick={onRoomExportClick}>
{ pinningEnabled && !isVideoRoom &&
<Button className="mx_RoomSummaryCard_icon_pins" onClick={onRoomPinsClick}>
{ _t("Pinned") }
{ pinCount > 0 && <span className="mx_BaseCard_Button_sublabel">
{ pinCount }
</span> }
</Button> }
{ !isVideoRoom && <Button className="mx_RoomSummaryCard_icon_export" onClick={onRoomExportClick}>
{ _t("Export chat") }
</Button>
</Button> }
<Button className="mx_RoomSummaryCard_icon_share" onClick={onShareRoomClick}>
{ _t("Share room") }
</Button>
@ -330,6 +332,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
{
SettingsStore.getValue(UIFeature.Widgets)
&& !isVideoRoom
&& shouldShowComponent(UIComponent.AddIntegrations)
&& <AppsSection room={room} />
}

40
src/components/views/rooms/EventTile.tsx
View File

@ -491,7 +491,7 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
* when we are at the sync stage
*/
const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
const thread = room?.threads.get(this.props.mxEvent.getId());
const thread = room?.threads?.get(this.props.mxEvent.getId());
return thread || null;
}
@ -510,12 +510,22 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
}
private renderThreadInfo(): React.ReactNode {
if (this.state.thread?.id === this.props.mxEvent.getId()) {
return <ThreadSummary mxEvent={this.props.mxEvent} thread={this.state.thread} />;
}
if (this.context.timelineRenderingType === TimelineRenderingType.Search && this.props.mxEvent.threadRootId) {
if (this.props.highlightLink) {
return (
<a className="mx_ThreadSummaryIcon" href={this.props.highlightLink}>
{ _t("From a thread") }
</a>
);
}
return (
<p className="mx_ThreadSummaryIcon">{ _t("From a thread") }</p>
);
} else if (this.state.thread?.id === this.props.mxEvent.getId()) {
return <ThreadSummary mxEvent={this.props.mxEvent} thread={this.state.thread} />;
}
}
@ -978,6 +988,7 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
let isContinuation = this.props.continuation;
if (this.context.timelineRenderingType !== TimelineRenderingType.Room &&
this.context.timelineRenderingType !== TimelineRenderingType.Search &&
this.context.timelineRenderingType !== TimelineRenderingType.Thread &&
this.props.layout !== Layout.Bubble
) {
isContinuation = false;
@ -1024,16 +1035,17 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
? undefined
: this.props.mxEvent.getId();
let avatar;
let sender;
let avatarSize;
let needsSenderProfile;
let avatar: JSX.Element;
let sender: JSX.Element;
let avatarSize: number;
let needsSenderProfile: boolean;
if (this.context.timelineRenderingType === TimelineRenderingType.Notification ||
this.context.timelineRenderingType === TimelineRenderingType.ThreadsList
) {
if (this.context.timelineRenderingType === TimelineRenderingType.Notification) {
avatarSize = 24;
needsSenderProfile = true;
} else if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList) {
avatarSize = 36;
needsSenderProfile = true;
} else if (eventType === EventType.RoomCreate || isBubbleMessage) {
avatarSize = 0;
needsSenderProfile = false;
@ -1281,9 +1293,7 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
</div>,
<div className="mx_EventTile_senderDetails" key="mx_EventTile_senderDetails">
{ avatar }
<a href={permalink} onClick={this.onPermalinkClicked}>
{ sender }
</a>
{ sender }
</div>,
<div className={lineClasses} key="mx_EventTile_line">
{ replyChain }
@ -1301,7 +1311,9 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
permalinkCreator: this.props.permalinkCreator,
}) }
{ actionBar }
{ timestamp }
<a href={permalink} onClick={this.onPermalinkClicked}>
{ timestamp }
</a>
</div>,
reactionsRow,
]);

1
src/components/views/rooms/RoomHeader.tsx
View File

@ -204,6 +204,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
const buttons: JSX.Element[] = [];
if (this.props.inRoom &&
this.props.onCallPlaced &&
!this.context.tombstone &&
SettingsStore.getValue("showCallButtonsInComposer")
) {

55
src/components/views/rooms/RoomList.tsx
View File

@ -16,6 +16,7 @@ limitations under the License.
import React, { ComponentType, createRef, ReactComponentElement, RefObject } from "react";
import { Room } from "matrix-js-sdk/src/models/room";
import { RoomType } from "matrix-js-sdk/src/@types/event";
import * as fbEmitter from "fbemitter";
import { EventType } from "matrix-js-sdk/src/@types/event";
@ -221,8 +222,8 @@ const UntaggedAuxButton = ({ tabIndex }: IAuxButtonProps) => {
showCreateRoom
? (<>
<IconizedContextMenuOption
label={_t("Create new room")}
iconClassName="mx_RoomList_iconCreateNewRoom"
label={_t("New room")}
iconClassName="mx_RoomList_iconNewRoom"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@ -234,6 +235,19 @@ 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("New 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")}
/> }
<IconizedContextMenuOption
label={_t("Add existing room")}
iconClassName="mx_RoomList_iconAddExistingRoom"
@ -253,17 +267,32 @@ const UntaggedAuxButton = ({ tabIndex }: IAuxButtonProps) => {
</IconizedContextMenuOptionList>;
} else if (menuDisplayed) {
contextMenuContent = <IconizedContextMenuOptionList first>
{ showCreateRoom && <IconizedContextMenuOption
label={_t("Create new room")}
iconClassName="mx_RoomList_iconCreateNewRoom"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
closeMenu();
defaultDispatcher.dispatch({ action: "view_create_room" });
PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuCreateRoomItem", e);
}}
/> }
{ showCreateRoom && <>
<IconizedContextMenuOption
label={_t("New room")}
iconClassName="mx_RoomList_iconNewRoom"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
closeMenu();
defaultDispatcher.dispatch({ action: "view_create_room" });
PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuCreateRoomItem", e);
}}
/>
{ SettingsStore.getValue("feature_video_rooms") && <IconizedContextMenuOption
label={_t("New video room")}
iconClassName="mx_RoomList_iconNewVideoRoom"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
closeMenu();
defaultDispatcher.dispatch({
action: "view_create_room",
type: RoomType.ElementVideo,
});
}}
/> }
</> }
<IconizedContextMenuOption
label={_t("Explore public rooms")}
iconClassName="mx_RoomList_iconExplore"

71
src/components/views/rooms/RoomListHeader.tsx
View File

@ -16,11 +16,12 @@ limitations under the License.
import React, { useContext, useEffect, useState } from "react";
import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
import { EventType } from "matrix-js-sdk/src/@types/event";
import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
import { ClientEvent } from "matrix-js-sdk/src/client";
import { _t } from "../../../languageHandler";
import { useEventEmitterState, useTypedEventEmitter, useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
import { useFeatureEnabled } from "../../../hooks/useSettings";
import SpaceStore from "../../../stores/spaces/SpaceStore";
import { ChevronFace, ContextMenuTooltipButton, useContextMenu } from "../../structures/ContextMenu";
import SpaceContextMenu from "../context_menus/SpaceContextMenu";
@ -127,6 +128,7 @@ const RoomListHeader = ({ onVisibilityChange }: IProps) => {
const allRoomsInHome = useEventEmitterState(SpaceStore.instance, UPDATE_HOME_BEHAVIOUR, () => {
return SpaceStore.instance.allRoomsInHome;
});
const videoRoomsEnabled = useFeatureEnabled("feature_video_rooms");
const pendingActions = usePendingActions();
const filterCondition = RoomListStore.instance.getFirstNameFilterCondition();
@ -195,19 +197,31 @@ const RoomListHeader = ({ onVisibilityChange }: IProps) => {
/>;
}
let createNewRoomOption: JSX.Element;
let newRoomOptions: JSX.Element;
if (activeSpace?.currentState.maySendStateEvent(EventType.RoomAvatar, cli.getUserId())) {
createNewRoomOption = <IconizedContextMenuOption
iconClassName="mx_RoomListHeader_iconCreateRoom"
label={_t("Create new room")}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
showCreateNewRoom(activeSpace);
PosthogTrackers.trackInteraction("WebRoomListHeaderPlusMenuCreateRoomItem", e);
closePlusMenu();
}}
/>;
newRoomOptions = <>
<IconizedContextMenuOption
iconClassName="mx_RoomListHeader_iconNewRoom"
label={_t("New room")}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
showCreateNewRoom(activeSpace);
PosthogTrackers.trackInteraction("WebRoomListHeaderPlusMenuCreateRoomItem", e);
closePlusMenu();
}}
/>
{ videoRoomsEnabled && <IconizedContextMenuOption
iconClassName="mx_RoomListHeader_iconNewVideoRoom"
label={_t("New video room")}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
showCreateNewRoom(activeSpace, RoomType.ElementVideo);
closePlusMenu();
}}
/> }
</>;
}
contextMenu = <IconizedContextMenu
@ -217,7 +231,7 @@ const RoomListHeader = ({ onVisibilityChange }: IProps) => {
>
<IconizedContextMenuOptionList first>
{ inviteOption }
{ createNewRoomOption }
{ newRoomOptions }
<IconizedContextMenuOption
label={_t("Explore rooms")}
iconClassName="mx_RoomListHeader_iconExplore"
@ -262,12 +276,11 @@ const RoomListHeader = ({ onVisibilityChange }: IProps) => {
</IconizedContextMenuOptionList>
</IconizedContextMenu>;
} else if (plusMenuDisplayed) {
let startChatOpt: JSX.Element;
let createRoomOpt: JSX.Element;
let newRoomOpts: JSX.Element;
let joinRoomOpt: JSX.Element;
if (canCreateRooms) {
startChatOpt = (
newRoomOpts = <>
<IconizedContextMenuOption
label={_t("Start new chat")}
iconClassName="mx_RoomListHeader_iconStartChat"
@ -278,11 +291,9 @@ const RoomListHeader = ({ onVisibilityChange }: IProps) => {
closePlusMenu();
}}
/>
);
createRoomOpt = (
<IconizedContextMenuOption
label={_t("Create new room")}
iconClassName="mx_RoomListHeader_iconCreateRoom"
label={_t("New room")}
iconClassName="mx_RoomListHeader_iconNewRoom"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
@ -291,7 +302,20 @@ const RoomListHeader = ({ onVisibilityChange }: IProps) => {
closePlusMenu();
}}
/>
);
{ videoRoomsEnabled && <IconizedContextMenuOption
label={_t("New video room")}
iconClassName="mx_RoomListHeader_iconNewVideoRoom"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
defaultDispatcher.dispatch({
action: "view_create_room",
type: RoomType.ElementVideo,
});
closePlusMenu();
}}
/> }
</>;
}
if (canExploreRooms) {
joinRoomOpt = (
@ -314,8 +338,7 @@ const RoomListHeader = ({ onVisibilityChange }: IProps) => {
compact
>
<IconizedContextMenuOptionList first>
{ startChatOpt }
{ createRoomOpt }
{ newRoomOpts }
{ joinRoomOpt }
</IconizedContextMenuOptionList>
</IconizedContextMenu>;

215
src/components/views/rooms/RoomTile.tsx
View File

@ -32,10 +32,7 @@ import { _t } from "../../../languageHandler";
import { ChevronFace, ContextMenuTooltipButton } from "../../structures/ContextMenu";
import { DefaultTagID, TagID } from "../../../stores/room-list/models";
import { MessagePreviewStore } from "../../../stores/room-list/MessagePreviewStore";
import BaseAvatar from "../avatars/BaseAvatar";
import MemberAvatar from "../avatars/MemberAvatar";
import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
import FacePile from "../elements/FacePile";
import { RoomNotifState } from "../../../RoomNotifs";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import NotificationBadge from "./NotificationBadge";
@ -54,17 +51,16 @@ import IconizedContextMenu, {
IconizedContextMenuOptionList,
IconizedContextMenuRadio,
} from "../context_menus/IconizedContextMenu";
import VoiceChannelStore, { VoiceChannelEvent, IJitsiParticipant } from "../../../stores/VoiceChannelStore";
import { getConnectedMembers } from "../../../utils/VoiceChannelUtils";
import VideoChannelStore, { VideoChannelEvent, IJitsiParticipant } from "../../../stores/VideoChannelStore";
import { getConnectedMembers } from "../../../utils/VideoChannelUtils";
import PosthogTrackers from "../../../PosthogTrackers";
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
import { getKeyBindingsManager } from "../../../KeyBindingsManager";
import { RoomViewStore } from "../../../stores/RoomViewStore";
enum VoiceConnectionState {
enum VideoStatus {
Disconnected,
Connecting,
Connected,
}
@ -82,10 +78,10 @@ interface IState {
notificationsMenuPosition: PartialDOMRect;
generalMenuPosition: PartialDOMRect;
messagePreview?: string;
voiceConnectionState: VoiceConnectionState;
// Active voice channel members, according to room state
voiceMembers: RoomMember[];
// Active voice channel members, according to Jitsi
videoStatus: VideoStatus;
// Active video channel members, according to room state
videoMembers: RoomMember[];
// Active video channel members, according to Jitsi
jitsiParticipants: IJitsiParticipant[];
}
@ -104,27 +100,28 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
private roomTileRef = createRef<HTMLDivElement>();
private notificationState: NotificationState;
private roomProps: RoomEchoChamber;
private isVoiceRoom: boolean;
private isVideoRoom: boolean;
constructor(props: IProps) {
super(props);
const videoConnected = VideoChannelStore.instance.roomId === this.props.room.roomId;
this.state = {
selected: RoomViewStore.instance.getRoomId() === this.props.room.roomId,
notificationsMenuPosition: null,
generalMenuPosition: null,
// generatePreview() will return nothing if the user has previews disabled
messagePreview: "",
voiceConnectionState: VoiceChannelStore.instance.roomId === this.props.room.roomId ?
VoiceConnectionState.Connected : VoiceConnectionState.Disconnected,
voiceMembers: [],
jitsiParticipants: [],
videoStatus: videoConnected ? VideoStatus.Connected : VideoStatus.Disconnected,
videoMembers: getConnectedMembers(this.props.room.currentState),
jitsiParticipants: videoConnected ? VideoChannelStore.instance.participants : [],
};
this.generatePreview();
this.notificationState = RoomNotificationStateStore.instance.getRoomState(this.props.room);
this.roomProps = EchoChamber.forRoom(this.props.room);
this.isVoiceRoom = SettingsStore.getValue("feature_voice_rooms") && this.props.room.isCallRoom();
this.isVideoRoom = SettingsStore.getValue("feature_video_rooms") && this.props.room.isElementVideoRoom();
}
private onRoomNameUpdate = (room: Room) => {
@ -163,8 +160,9 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
MessagePreviewStore.getPreviewChangedEventName(this.props.room),
this.onRoomPreviewChanged,
);
prevProps.room?.currentState?.off(RoomStateEvent.Events, this.updateVoiceMembers);
this.props.room?.currentState?.on(RoomStateEvent.Events, this.updateVoiceMembers);
prevProps.room?.currentState?.off(RoomStateEvent.Events, this.updateVideoMembers);
this.props.room?.currentState?.on(RoomStateEvent.Events, this.updateVideoMembers);
this.updateVideoStatus();
prevProps.room?.off(RoomEvent.Name, this.onRoomNameUpdate);
this.props.room?.on(RoomEvent.Name, this.onRoomNameUpdate);
}
@ -175,7 +173,6 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
if (this.state.selected) {
this.scrollIntoView();
}
this.updateVoiceMembers();
RoomViewStore.instance.addRoomListener(this.props.room.roomId, this.onActiveRoomUpdate);
this.dispatcherRef = defaultDispatcher.register(this.onAction);
@ -186,7 +183,13 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
this.notificationState.on(NotificationStateEvents.Update, this.onNotificationUpdate);
this.roomProps.on(PROPERTY_UPDATED, this.onRoomPropertyUpdate);
this.props.room.on(RoomEvent.Name, this.onRoomNameUpdate);
this.props.room.currentState.on(RoomStateEvent.Events, this.updateVoiceMembers);
this.props.room.currentState.on(RoomStateEvent.Events, this.updateVideoMembers);
VideoChannelStore.instance.on(VideoChannelEvent.Connect, this.updateVideoStatus);
VideoChannelStore.instance.on(VideoChannelEvent.Disconnect, this.updateVideoStatus);
if (VideoChannelStore.instance.roomId === this.props.room.roomId) {
VideoChannelStore.instance.on(VideoChannelEvent.Participants, this.updateJitsiParticipants);
}
}
public componentWillUnmount() {
@ -200,6 +203,9 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
defaultDispatcher.unregister(this.dispatcherRef);
this.notificationState.off(NotificationStateEvents.Update, this.onNotificationUpdate);
this.roomProps.off(PROPERTY_UPDATED, this.onRoomPropertyUpdate);
VideoChannelStore.instance.off(VideoChannelEvent.Connect, this.updateVideoStatus);
VideoChannelStore.instance.off(VideoChannelEvent.Disconnect, this.updateVideoStatus);
}
private onAction = (payload: ActionPayload) => {
@ -250,11 +256,6 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
metricsTrigger: "RoomList",
metricsViaKeyboard: ev.type !== "click",
});
// Connect to the voice channel if this is a voice room
if (this.isVoiceRoom && this.state.voiceConnectionState === VoiceConnectionState.Disconnected) {
await this.connectVoice();
}
};
private onActiveRoomUpdate = (isActive: boolean) => {
@ -579,87 +580,24 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
);
}
private updateVoiceMembers = () => {
this.setState({ voiceMembers: getConnectedMembers(this.props.room.currentState) });
private updateVideoMembers = () => {
this.setState({ videoMembers: getConnectedMembers(this.props.room.currentState) });
};
private updateVideoStatus = () => {
if (VideoChannelStore.instance.roomId === this.props.room?.roomId) {
this.setState({ videoStatus: VideoStatus.Connected });
VideoChannelStore.instance.on(VideoChannelEvent.Participants, this.updateJitsiParticipants);
} else {
this.setState({ videoStatus: VideoStatus.Disconnected });
VideoChannelStore.instance.off(VideoChannelEvent.Participants, this.updateJitsiParticipants);
}
};
private updateJitsiParticipants = (participants: IJitsiParticipant[]) => {
this.setState({ jitsiParticipants: participants });
};
private renderVoiceChannel(): React.ReactElement | null {
let faces;
if (this.state.voiceConnectionState === VoiceConnectionState.Connected) {
faces = this.state.jitsiParticipants.map(p =>
<BaseAvatar
key={p.participantId}
name={p.displayName ?? p.formattedDisplayName}
idName={p.participantId}
// This comes directly from Jitsi, so we shouldn't apply custom media routing to it
url={p.avatarURL}
width={24}
height={24}
/>,
);
} else if (this.state.voiceMembers.length) {
faces = this.state.voiceMembers.map(m =>
<MemberAvatar
key={m.userId}
member={m}
width={24}
height={24}
/>,
);
} else {
return null;
}
// TODO: The below "join" button will eventually show up on text rooms
// with an active voice channel, but that isn't implemented yet
return <div className="mx_RoomTile_voiceChannel">
<FacePile faces={faces} overflow={false} />
{ this.isVoiceRoom ? null : (
<AccessibleButton
kind="link"
className="mx_RoomTile_connectVoiceButton"
onClick={this.connectVoice.bind(this)}
>
{ _t("Join") }
</AccessibleButton>
) }
</div>;
}
private async connectVoice() {
this.setState({ voiceConnectionState: VoiceConnectionState.Connecting });
// TODO: Actually wait for the widget to be ready, instead of guessing.
// This hack is only in place until we find out for sure whether design
// wants the room view to open when connecting voice, or if this should
// somehow connect in the background. Until then, it's not worth the
// effort to solve this properly.
await new Promise(resolve => setTimeout(resolve, 1000));
const waitForConnect = VoiceChannelStore.instance.connect(this.props.room.roomId);
// Participant data comes down the event channel quickly, so prepare in advance
VoiceChannelStore.instance.on(VoiceChannelEvent.Participants, this.updateJitsiParticipants);
try {
await waitForConnect;
this.setState({ voiceConnectionState: VoiceConnectionState.Connected });
VoiceChannelStore.instance.once(VoiceChannelEvent.Disconnect, () => {
this.setState({
voiceConnectionState: VoiceConnectionState.Disconnected,
jitsiParticipants: [],
}),
VoiceChannelStore.instance.off(VoiceChannelEvent.Participants, this.updateJitsiParticipants);
});
} catch (e) {
// If it failed, clean up our advance preparations
logger.error("Failed to connect voice", e);
VoiceChannelStore.instance.off(VoiceChannelEvent.Participants, this.updateJitsiParticipants);
}
}
public render(): React.ReactElement {
const classes = classNames({
'mx_RoomTile': true,
@ -687,34 +625,44 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
}
let subtitle;
if (this.isVoiceRoom) {
switch (this.state.voiceConnectionState) {
case VoiceConnectionState.Disconnected:
subtitle = (
<div className="mx_RoomTile_subtitle mx_RoomTile_voiceIndicator">
{ _t("Voice room") }
</div>
);
if (this.isVideoRoom) {
let videoText: string;
let videoActive: boolean;
let participantCount: number;
switch (this.state.videoStatus) {
case VideoStatus.Disconnected:
videoText = _t("Video");
videoActive = false;
participantCount = this.state.videoMembers.length;
break;
case VoiceConnectionState.Connecting:
subtitle = (
<div className="mx_RoomTile_subtitle mx_RoomTile_voiceIndicator">
{ _t("Connecting...") }
</div>
);
break;
case VoiceConnectionState.Connected:
subtitle = (
<div
className={
"mx_RoomTile_subtitle mx_RoomTile_voiceIndicator " +
"mx_RoomTile_voiceIndicator_active"
}
>
{ _t("Connected") }
</div>
);
case VideoStatus.Connected:
videoText = _t("Connected");
videoActive = true;
participantCount = this.state.jitsiParticipants.length;
}
subtitle = (
<div className="mx_RoomTile_subtitle">
<span
className={classNames({
"mx_RoomTile_videoIndicator": true,
"mx_RoomTile_videoIndicator_active": videoActive,
})}
>
{ videoText }
</span>
{ participantCount ? <>
{ " · " }
<span
className="mx_RoomTile_videoParticipants"
aria-label={_t("%(count)s participants", { count: participantCount })}
>
{ participantCount }
</span>
</> : null }
</div>
);
} else if (this.showMessagePreview && this.state.messagePreview) {
subtitle = (
<div
@ -795,15 +743,10 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
displayBadge={this.props.isMinimized}
tooltipProps={{ tabIndex: isActive ? 0 : -1 }}
/>
<div className="mx_RoomTile_details">
<div className="mx_RoomTile_primaryDetails">
{ titleContainer }
{ badge }
{ this.renderGeneralMenu() }
{ this.renderNotificationsMenu(isActive) }
</div>
{ this.renderVoiceChannel() }
</div>
{ titleContainer }
{ badge }
{ this.renderGeneralMenu() }
{ this.renderNotificationsMenu(isActive) }
</Button>
}
</RovingTabIndexWrapper>

91
src/components/views/voip/VoiceChannelRadio.tsx
View File

@ -1,91 +0,0 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { FC, useState, useContext } from "react";
import classNames from "classnames";
import { _t } from "../../../languageHandler";
import { useEventEmitter } from "../../../hooks/useEventEmitter";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import VoiceChannelStore, { VoiceChannelEvent } from "../../../stores/VoiceChannelStore";
import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
import AccessibleButton from "../elements/AccessibleButton";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
const _VoiceChannelRadio: FC<{ roomId: string }> = ({ roomId }) => {
const cli = useContext(MatrixClientContext);
const room = cli.getRoom(roomId);
const store = VoiceChannelStore.instance;
const [audioMuted, setAudioMuted] = useState<boolean>(store.audioMuted);
const [videoMuted, setVideoMuted] = useState<boolean>(store.videoMuted);
useEventEmitter(store, VoiceChannelEvent.MuteAudio, () => setAudioMuted(true));
useEventEmitter(store, VoiceChannelEvent.UnmuteAudio, () => setAudioMuted(false));
useEventEmitter(store, VoiceChannelEvent.MuteVideo, () => setVideoMuted(true));
useEventEmitter(store, VoiceChannelEvent.UnmuteVideo, () => setVideoMuted(false));
return <div className="mx_VoiceChannelRadio">
<div className="mx_VoiceChannelRadio_statusBar">
<DecoratedRoomAvatar room={room} avatarSize={36} />
<div className="mx_VoiceChannelRadio_titleContainer">
<div className="mx_VoiceChannelRadio_status">{ _t("Connected") }</div>
<div className="mx_VoiceChannelRadio_name">{ room.name }</div>
</div>
<AccessibleTooltipButton
className="mx_VoiceChannelRadio_disconnectButton"
title={_t("Disconnect")}
onClick={() => store.disconnect()}
/>
</div>
<div className="mx_VoiceChannelRadio_controlBar">
<AccessibleButton
className={classNames({
"mx_VoiceChannelRadio_videoButton": true,
"mx_VoiceChannelRadio_button_active": !videoMuted,
})}
onClick={() => videoMuted ? store.unmuteVideo() : store.muteVideo()}
>
{ videoMuted ? _t("Video off") : _t("Video") }
</AccessibleButton>
<AccessibleButton
className={classNames({
"mx_VoiceChannelRadio_audioButton": true,
"mx_VoiceChannelRadio_button_active": !audioMuted,
})}
onClick={() => audioMuted ? store.unmuteAudio() : store.muteAudio()}
>
{ audioMuted ? _t("Mic off") : _t("Mic") }
</AccessibleButton>
</div>
</div>;
};
const VoiceChannelRadio: FC<{}> = () => {
const store = VoiceChannelStore.instance;
const [activeChannel, setActiveChannel] = useState<string>(VoiceChannelStore.instance.roomId);
useEventEmitter(store, VoiceChannelEvent.Connect, () =>
setActiveChannel(VoiceChannelStore.instance.roomId),
);
useEventEmitter(store, VoiceChannelEvent.Disconnect, () =>
setActiveChannel(null),
);
return activeChannel ? <_VoiceChannelRadio roomId={activeChannel} /> : null;
};
export default VoiceChannelRadio;

14
src/createRoom.ts
View File

@ -37,7 +37,7 @@ import { getAddressType } from "./UserAddress";
import { VIRTUAL_ROOM_EVENT_TYPE } from "./call-types";
import SpaceStore from "./stores/spaces/SpaceStore";
import { makeSpaceParentEvent } from "./utils/space";
import { VOICE_CHANNEL_MEMBER, addVoiceChannel } from "./utils/VoiceChannelUtils";
import { VIDEO_CHANNEL_MEMBER, addVideoChannel } from "./utils/VideoChannelUtils";
import { Action } from "./dispatcher/actions";
import ErrorDialog from "./components/views/dialogs/ErrorDialog";
import Spinner from "./components/views/elements/Spinner";
@ -126,11 +126,11 @@ export default async function createRoom(opts: IOpts): Promise<string | null> {
[RoomCreateTypeField]: opts.roomType,
};
// In voice rooms, allow all users to send voice member updates
if (opts.roomType === RoomType.UnstableCall) {
// In video rooms, allow all users to send video member updates
if (opts.roomType === RoomType.ElementVideo) {
createOpts.power_level_content_override = {
events: {
[VOICE_CHANNEL_MEMBER]: 0,
[VIDEO_CHANNEL_MEMBER]: 0,
// Annoyingly, we have to reiterate all the defaults here
[EventType.RoomName]: 50,
[EventType.RoomAvatar]: 50,
@ -260,9 +260,9 @@ export default async function createRoom(opts: IOpts): Promise<string | null> {
return SpaceStore.instance.addRoomToSpace(opts.parentSpace, roomId, [client.getDomain()], opts.suggested);
}
}).then(() => {
// Set up voice rooms with a Jitsi widget
if (opts.roomType === RoomType.UnstableCall) {
return addVoiceChannel(roomId, createOpts.name);
// Set up video rooms with a Jitsi widget
if (opts.roomType === RoomType.ElementVideo) {
return addVideoChannel(roomId, createOpts.name);
}
}).then(function() {
// NB createRoom doesn't block on the client seeing the echo that the

49
src/i18n/strings/en_EN.json
View File

@ -867,8 +867,15 @@
"Render LaTeX maths in messages": "Render LaTeX maths in messages",
"Message Pinning": "Message Pinning",
"Threaded messaging": "Threaded messaging",
"Keep discussions organised with threads.": "Keep discussions organised with threads.",
"Threads help keep conversations on-topic and easy to track. <a>Learn more</a>.": "Threads help keep conversations on-topic and easy to track. <a>Learn more</a>.",
"How can I start a thread?": "How can I start a thread?",
"Use \"Reply in thread\" when hovering over a message.": "Use \"Reply in thread\" when hovering over a message.",
"How can I leave the beta?": "How can I leave the beta?",
"To leave, return to this page and use the “Leave the beta” button.": "To leave, return to this page and use the “Leave the beta” button.",
"Thank you for trying the beta, please go into as much detail as you can so we can improve it.": "Thank you for trying the beta, please go into as much detail as you can so we can improve it.",
"Custom user status messages": "Custom user status messages",
"Voice & video rooms (under active development)": "Voice & video rooms (under active development)",
"Video rooms (under active development)": "Video rooms (under active development)",
"Render simple counters in room header": "Render simple counters in room header",
"Multiple integration managers (requires manual setup)": "Multiple integration managers (requires manual setup)",
"Try out new ways to ignore people (experimental)": "Try out new ways to ignore people (experimental)",
@ -886,9 +893,7 @@
"This feature is a work in progress, we'd love to hear your feedback.": "This feature is a work in progress, we'd love to hear your feedback.",
"How can I give feedback?": "How can I give feedback?",
"To feedback, join the beta, start a search and click on feedback.": "To feedback, join the beta, start a search and click on feedback.",
"How can I leave the beta?": "How can I leave the beta?",
"To leave, just return to this page or click on the beta badge when you search.": "To leave, just return to this page or click on the beta badge when you search.",
"Thank you for trying the beta, please go into as much detail as you can so we can improve it.": "Thank you for trying the beta, please go into as much detail as you can so we can improve it.",
"Right panel stays open (defaults to room member list)": "Right panel stays open (defaults to room member list)",
"Jump to date (adds /jumptodate and jump to date headers)": "Jump to date (adds /jumptodate and jump to date headers)",
"Don't send read receipts": "Don't send read receipts",
@ -1002,12 +1007,6 @@
"Your camera is turned off": "Your camera is turned off",
"Your camera is still enabled": "Your camera is still enabled",
"Dial": "Dial",
"Connected": "Connected",
"Disconnect": "Disconnect",
"Video off": "Video off",
"Video": "Video",
"Mic off": "Mic off",
"Mic": "Mic",
"Dialpad": "Dialpad",
"Mute the microphone": "Mute the microphone",
"Unmute the microphone": "Unmute the microphone",
@ -1359,6 +1358,7 @@
"The identity server you have chosen does not have any terms of service.": "The identity server you have chosen does not have any terms of service.",
"Disconnect identity server": "Disconnect identity server",
"Disconnect from the identity server <idserver />?": "Disconnect from the identity server <idserver />?",
"Disconnect": "Disconnect",
"You should <b>remove your personal data</b> from identity server <idserver /> before disconnecting. Unfortunately, identity server <idserver /> is currently offline or cannot be reached.": "You should <b>remove your personal data</b> from identity server <idserver /> before disconnecting. Unfortunately, identity server <idserver /> is currently offline or cannot be reached.",
"You should:": "You should:",
"check your browser plugins for anything that might block the identity server (such as Privacy Badger)": "check your browser plugins for anything that might block the identity server (such as Privacy Badger)",
@ -1757,8 +1757,9 @@
"Add people": "Add people",
"Start chat": "Start chat",
"Explore rooms": "Explore rooms",
"Create new room": "Create new room",
"New room": "New room",
"You do not have permissions to create new rooms in this space": "You do not have permissions to create new rooms in this space",
"New video room": "New video room",
"Add existing room": "Add existing room",
"You do not have permissions to add rooms to this space": "You do not have permissions to add rooms to this space",
"Explore public rooms": "Explore public rooms",
@ -1851,9 +1852,10 @@
"Low Priority": "Low Priority",
"Copy room link": "Copy room link",
"Leave": "Leave",
"Join": "Join",
"Voice room": "Voice room",
"Connecting...": "Connecting...",
"Video": "Video",
"Connected": "Connected",
"%(count)s participants|other": "%(count)s participants",
"%(count)s participants|one": "1 participant",
"%(count)s unread messages including mentions.|other": "%(count)s unread messages including mentions.",
"%(count)s unread messages including mentions.|one": "1 unread mention.",
"%(count)s unread messages.|other": "%(count)s unread messages.",
@ -2078,6 +2080,8 @@
"Edit": "Edit",
"Reply in thread": "Reply in thread",
"Can't create a thread from an event with an existing relation": "Can't create a thread from an event with an existing relation",
"Beta feature": "Beta feature",
"Beta feature. Click to learn more.": "Beta feature. Click to learn more.",
"Reply": "Reply",
"Collapse quotes": "Collapse quotes",
"Expand quotes": "Expand quotes",
@ -2207,6 +2211,7 @@
"Application window": "Application window",
"Share content": "Share content",
"Backspace": "Backspace",
"Join": "Join",
"Please <newIssueLink>create a new issue</newIssueLink> on GitHub so that we can investigate this bug.": "Please <newIssueLink>create a new issue</newIssueLink> on GitHub so that we can investigate this bug.",
"Something went wrong!": "Something went wrong!",
"%(nameList)s %(transitionList)s": "%(nameList)s %(transitionList)s",
@ -2373,7 +2378,7 @@
"Invite anyway and never warn me again": "Invite anyway and never warn me again",
"Invite anyway": "Invite anyway",
"Close dialog": "Close dialog",
"%(featureName)s beta feedback": "%(featureName)s beta feedback",
"%(featureName)s Beta feedback": "%(featureName)s Beta feedback",
"To leave the beta, visit your settings.": "To leave the beta, visit your settings.",
"Please tell us what went wrong or, better, create a GitHub issue that describes the problem.": "Please tell us what went wrong or, better, create a GitHub issue that describes the problem.",
"Preparing to send logs": "Preparing to send logs",
@ -2420,20 +2425,18 @@
"Enable end-to-end encryption": "Enable end-to-end encryption",
"You might enable this if the room will only be used for collaborating with internal teams on your homeserver. This cannot be changed later.": "You might enable this if the room will only be used for collaborating with internal teams on your homeserver. This cannot be changed later.",
"You might disable this if the room will be used for collaborating with external teams who have their own homeserver. This cannot be changed later.": "You might disable this if the room will be used for collaborating with external teams who have their own homeserver. This cannot be changed later.",
"Create a video room": "Create a video room",
"Create a room": "Create a room",
"Create a public room": "Create a public room",
"Create a private room": "Create a private room",
"Room type": "Room type",
"Text room": "Text room",
"Voice & video room": "Voice & video room",
"Room details": "Room details",
"Topic (optional)": "Topic (optional)",
"Room visibility": "Room visibility",
"Private room (invite only)": "Private room (invite only)",
"Public room": "Public room",
"Visible to space members": "Visible to space members",
"Block anyone not part of %(serverName)s from ever joining this room.": "Block anyone not part of %(serverName)s from ever joining this room.",
"Create Room": "Create Room",
"Create video room": "Create video room",
"Create room": "Create room",
"Anyone in <SpaceName/> will be able to find and join.": "Anyone in <SpaceName/> will be able to find and join.",
"Anyone will be able to find and join this space, not just members of <SpaceName/>.": "Anyone will be able to find and join this space, not just members of <SpaceName/>.",
"Only people invited will be able to find and join this space.": "Only people invited will be able to find and join this space.",
@ -2890,7 +2893,6 @@
"Revoke permissions": "Revoke permissions",
"Move left": "Move left",
"Move right": "Move right",
"This is a beta feature. Click for more info": "This is a beta feature. Click for more info",
"This is a beta feature": "This is a beta feature",
"Click for more info": "Click for more info",
"Beta": "Beta",
@ -3021,6 +3023,7 @@
"Unable to look up room ID from server": "Unable to look up room ID from server",
"Preview": "Preview",
"View": "View",
"Create new room": "Create new room",
"No results for \"%(query)s\"": "No results for \"%(query)s\"",
"Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.": "Try different words or check for typos. Some results may not be visible as they're private and you need an invite to join them.",
"Find a room…": "Find a room…",
@ -3102,9 +3105,13 @@
"My threads": "My threads",
"Shows all threads you've participated in": "Shows all threads you've participated in",
"Show:": "Show:",
"Keep discussions organised with threads": "Keep discussions organised with threads",
"Reply to an ongoing thread or use “%(replyInThread)s” when hovering over a message to start a new one.": "Reply to an ongoing thread or use “%(replyInThread)s” when hovering over a message to start a new one.",
"Show all threads": "Show all threads",
"Threads help keep your conversations on-topic and easy to track.": "Threads help keep your conversations on-topic and easy to track.",
"<b>Tip:</b> Use \"Reply in thread\" when hovering over a message.": "<b>Tip:</b> Use \"Reply in thread\" when hovering over a message.",
"Keep discussions organised with threads": "Keep discussions organised with threads",
"Threads are a beta feature": "Threads are a beta feature",
"<a>Give feedback</a>": "<a>Give feedback</a>",
"Thread": "Thread",
"Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.": "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.",
"Tried to load a specific point in this room's timeline, but was unable to find it.": "Tried to load a specific point in this room's timeline, but was unable to find it.",

30
src/settings/Settings.tsx
View File

@ -165,7 +165,7 @@ export interface IBaseSetting<T extends SettingValueType = SettingValueType> {
title: string; // _td
caption: () => ReactNode;
disclaimer?: (enabled: boolean) => ReactNode;
image: string; // require(...)
image?: string; // require(...)
feedbackSubheading?: string;
feedbackLabel?: string;
extraSettings?: string[];
@ -228,6 +228,30 @@ export const SETTINGS: {[setting: string]: ISetting} = {
displayName: _td("Threaded messaging"),
supportedLevels: LEVELS_FEATURE,
default: false,
betaInfo: {
title: _td("Threads"),
caption: () => <>
<p>{ _t("Keep discussions organised with threads.") }</p>
<p>{ _t("Threads help keep conversations on-topic and easy to track. <a>Learn more</a>.", {}, {
a: (sub) => <a href="https://element.io/help#threads" rel="noreferrer noopener" target="_blank">
{ sub }
</a>,
}) }</p>
</>,
disclaimer: () =>
SdkConfig.get().bug_report_endpoint_url && <>
<h4>{ _t("How can I start a thread?") }</h4>
<p>{ _t("Use \"Reply in thread\" when hovering over a message.") }</p>
<h4>{ _t("How can I leave the beta?") }</h4>
<p>{ _t("To leave, return to this page and use the “Leave the beta” button.") }</p>
</>,
feedbackLabel: "thread-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/threads.png"),
requiresRefresh: true,
},
},
"feature_custom_status": {
isFeature: true,
@ -237,10 +261,10 @@ export const SETTINGS: {[setting: string]: ISetting} = {
default: false,
controller: new CustomStatusController(),
},
"feature_voice_rooms": {
"feature_video_rooms": {
isFeature: true,
labsGroup: LabGroup.Rooms,
displayName: _td("Voice & video rooms (under active development)"),
displayName: _td("Video rooms (under active development)"),
supportedLevels: LEVELS_FEATURE,
default: false,
// Reload to ensure that the left panel etc. get remounted

164
src/stores/VideoChannelStore.ts Normal file
View File

@ -0,0 +1,164 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { EventEmitter } from "events";
import { logger } from "matrix-js-sdk/src/logger";
import { ClientWidgetApi, IWidgetApiRequest } from "matrix-widget-api";
import { MatrixClientPeg } from "../MatrixClientPeg";
import { ElementWidgetActions } from "./widgets/ElementWidgetActions";
import { WidgetMessagingStore } from "./widgets/WidgetMessagingStore";
import ActiveWidgetStore, { ActiveWidgetStoreEvent } from "./ActiveWidgetStore";
import {
VIDEO_CHANNEL,
VIDEO_CHANNEL_MEMBER,
IVideoChannelMemberContent,
getVideoChannel,
} from "../utils/VideoChannelUtils";
import WidgetUtils from "../utils/WidgetUtils";
export enum VideoChannelEvent {
Connect = "connect",
Disconnect = "disconnect",
Participants = "participants",
}
export interface IJitsiParticipant {
avatarURL: string;
displayName: string;
formattedDisplayName: string;
participantId: string;
}
/*
* Holds information about the currently active video channel.
*/
export default class VideoChannelStore extends EventEmitter {
private static _instance: VideoChannelStore;
public static get instance(): VideoChannelStore {
if (!VideoChannelStore._instance) {
VideoChannelStore._instance = new VideoChannelStore();
}
return VideoChannelStore._instance;
}
private readonly cli = MatrixClientPeg.get();
private activeChannel: ClientWidgetApi;
private _roomId: string;
private _participants: IJitsiParticipant[];
public get roomId(): string {
return this._roomId;
}
public get participants(): IJitsiParticipant[] {
return this._participants;
}
public start = () => {
ActiveWidgetStore.instance.on(ActiveWidgetStoreEvent.Update, this.onActiveWidgetUpdate);
};
public stop = () => {
ActiveWidgetStore.instance.off(ActiveWidgetStoreEvent.Update, this.onActiveWidgetUpdate);
};
private setConnected = async (roomId: string) => {
const jitsi = getVideoChannel(roomId);
if (!jitsi) throw new Error(`No video channel in room ${roomId}`);
const messaging = WidgetMessagingStore.instance.getMessagingForUid(WidgetUtils.getWidgetUid(jitsi));
if (!messaging) throw new Error(`Failed to bind video channel in room ${roomId}`);
this.activeChannel = messaging;
this._roomId = roomId;
this._participants = [];
this.activeChannel.once(`action:${ElementWidgetActions.HangupCall}`, this.onHangup);
this.activeChannel.on(`action:${ElementWidgetActions.CallParticipants}`, this.onParticipants);
this.emit(VideoChannelEvent.Connect);
// Tell others that we're connected, by adding our device to room state
await this.updateDevices(devices => Array.from(new Set(devices).add(this.cli.getDeviceId())));
};
private setDisconnected = async () => {
this.activeChannel.off(`action:${ElementWidgetActions.HangupCall}`, this.onHangup);
this.activeChannel.off(`action:${ElementWidgetActions.CallParticipants}`, this.onParticipants);
this.activeChannel = null;
this._participants = null;
try {
// Tell others that we're disconnected, by removing our device from room state
await this.updateDevices(devices => {
const devicesSet = new Set(devices);
devicesSet.delete(this.cli.getDeviceId());
return Array.from(devicesSet);
});
} finally {
// Save this for last, since updateDevices needs the room ID
this._roomId = null;
this.emit(VideoChannelEvent.Disconnect);
}
};
private ack = (ev: CustomEvent<IWidgetApiRequest>) => {
// Even if we don't have a reply to a given widget action, we still need
// to give the widget API something to acknowledge receipt
this.activeChannel.transport.reply(ev.detail, {});
};
private updateDevices = async (fn: (devices: string[]) => string[]) => {
if (!this.roomId) {
logger.error("Tried to update devices while disconnected");
return;
}
const room = this.cli.getRoom(this.roomId);
const devicesState = room.currentState.getStateEvents(VIDEO_CHANNEL_MEMBER, this.cli.getUserId());
const devices = devicesState?.getContent<IVideoChannelMemberContent>()?.devices ?? [];
await this.cli.sendStateEvent(
this.roomId, VIDEO_CHANNEL_MEMBER, { devices: fn(devices) }, this.cli.getUserId(),
);
};
private onHangup = async (ev: CustomEvent<IWidgetApiRequest>) => {
this.ack(ev);
await this.setDisconnected();
};
private onParticipants = (ev: CustomEvent<IWidgetApiRequest>) => {
this._participants = ev.detail.data.participants as IJitsiParticipant[];
this.emit(VideoChannelEvent.Participants, ev.detail.data.participants);
this.ack(ev);
};
private onActiveWidgetUpdate = async () => {
if (this.activeChannel) {
// We got disconnected from the previous video channel, so clean up
await this.setDisconnected();
}
// If the new active widget is a video channel, that means we joined
if (ActiveWidgetStore.instance.getPersistentWidgetId() === VIDEO_CHANNEL) {
await this.setConnected(ActiveWidgetStore.instance.getPersistentRoomId());
}
};
}

267
src/stores/VoiceChannelStore.ts
View File

@ -1,267 +0,0 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { EventEmitter } from "events";
import { logger } from "matrix-js-sdk/src/logger";
import { ClientWidgetApi, IWidgetApiRequest } from "matrix-widget-api";
import { MatrixClientPeg } from "../MatrixClientPeg";
import { ElementWidgetActions } from "./widgets/ElementWidgetActions";
import { WidgetMessagingStore } from "./widgets/WidgetMessagingStore";
import {
VOICE_CHANNEL_MEMBER,
IVoiceChannelMemberContent,
getVoiceChannel,
} from "../utils/VoiceChannelUtils";
import { timeout } from "../utils/promise";
import WidgetUtils from "../utils/WidgetUtils";
export enum VoiceChannelEvent {
Connect = "connect",
Disconnect = "disconnect",
Participants = "participants",
MuteAudio = "mute_audio",
UnmuteAudio = "unmute_audio",
MuteVideo = "mute_video",
UnmuteVideo = "unmute_video",
}
export interface IJitsiParticipant {
avatarURL: string;
displayName: string;
formattedDisplayName: string;
participantId: string;
}
/*
* Holds information about the currently active voice channel.
*/
export default class VoiceChannelStore extends EventEmitter {
private static _instance: VoiceChannelStore;
private static readonly TIMEOUT = 8000;
public static get instance(): VoiceChannelStore {
if (!VoiceChannelStore._instance) {
VoiceChannelStore._instance = new VoiceChannelStore();
}
return VoiceChannelStore._instance;
}
private readonly cli = MatrixClientPeg.get();
private activeChannel: ClientWidgetApi;
private _roomId: string;
private _participants: IJitsiParticipant[];
private _audioMuted: boolean;
private _videoMuted: boolean;
public get roomId(): string {
return this._roomId;
}
public get participants(): IJitsiParticipant[] {
return this._participants;
}
public get audioMuted(): boolean {
return this._audioMuted;
}
public get videoMuted(): boolean {
return this._videoMuted;
}
public connect = async (roomId: string) => {
if (this.activeChannel) await this.disconnect();
const jitsi = getVoiceChannel(roomId);
if (!jitsi) throw new Error(`No voice channel in room ${roomId}`);
const messaging = WidgetMessagingStore.instance.getMessagingForUid(WidgetUtils.getWidgetUid(jitsi));
if (!messaging) throw new Error(`Failed to bind voice channel in room ${roomId}`);
this.activeChannel = messaging;
this._roomId = roomId;
// Participant data and mute state will come down the event pipeline very quickly,
// so prepare in advance
messaging.on(`action:${ElementWidgetActions.CallParticipants}`, this.onParticipants);
messaging.on(`action:${ElementWidgetActions.MuteAudio}`, this.onMuteAudio);
messaging.on(`action:${ElementWidgetActions.UnmuteAudio}`, this.onUnmuteAudio);
messaging.on(`action:${ElementWidgetActions.MuteVideo}`, this.onMuteVideo);
messaging.on(`action:${ElementWidgetActions.UnmuteVideo}`, this.onUnmuteVideo);
// Actually perform the join
const waitForJoin = this.waitForAction(ElementWidgetActions.JoinCall);
messaging.transport.send(ElementWidgetActions.JoinCall, {});
try {
await waitForJoin;
} catch (e) {
// If it timed out, clean up our advance preparations
this.activeChannel = null;
this._roomId = null;
messaging.off(`action:${ElementWidgetActions.CallParticipants}`, this.onParticipants);
messaging.off(`action:${ElementWidgetActions.MuteAudio}`, this.onMuteAudio);
messaging.off(`action:${ElementWidgetActions.UnmuteAudio}`, this.onUnmuteAudio);
messaging.off(`action:${ElementWidgetActions.MuteVideo}`, this.onMuteVideo);
messaging.off(`action:${ElementWidgetActions.UnmuteVideo}`, this.onUnmuteVideo);
throw e;
}
messaging.once(`action:${ElementWidgetActions.HangupCall}`, this.onHangup);
this.emit(VoiceChannelEvent.Connect);
// Tell others that we're connected, by adding our device to room state
await this.updateDevices(devices => Array.from(new Set(devices).add(this.cli.getDeviceId())));
};
public disconnect = async () => {
this.assertConnected();
const waitForHangup = this.waitForAction(ElementWidgetActions.HangupCall);
this.activeChannel.transport.send(ElementWidgetActions.HangupCall, {});
await waitForHangup;
// onHangup cleans up for us
};
public muteAudio = async () => {
this.assertConnected();
const waitForMute = this.waitForAction(ElementWidgetActions.MuteAudio);
this.activeChannel.transport.send(ElementWidgetActions.MuteAudio, {});
await waitForMute;
};
public unmuteAudio = async () => {
this.assertConnected();
const waitForUnmute = this.waitForAction(ElementWidgetActions.UnmuteAudio);
this.activeChannel.transport.send(ElementWidgetActions.UnmuteAudio, {});
await waitForUnmute;
};
public muteVideo = async () => {
this.assertConnected();
const waitForMute = this.waitForAction(ElementWidgetActions.MuteVideo);
this.activeChannel.transport.send(ElementWidgetActions.MuteVideo, {});
await waitForMute;
};
public unmuteVideo = async () => {
this.assertConnected();
const waitForUnmute = this.waitForAction(ElementWidgetActions.UnmuteVideo);
this.activeChannel.transport.send(ElementWidgetActions.UnmuteVideo, {});
await waitForUnmute;
};
private assertConnected = () => {
if (!this.activeChannel) throw new Error("Not connected to any voice channel");
};
private waitForAction = async (action: ElementWidgetActions) => {
const wait = new Promise<void>(resolve =>
this.activeChannel.once(`action:${action}`, (ev: CustomEvent<IWidgetApiRequest>) => {
this.ack(ev);
resolve();
}),
);
if (await timeout(wait, false, VoiceChannelStore.TIMEOUT) === false) {
throw new Error("Communication with voice channel timed out");
}
};
private ack = (ev: CustomEvent<IWidgetApiRequest>) => {
this.activeChannel.transport.reply(ev.detail, {});
};
private updateDevices = async (fn: (devices: string[]) => string[]) => {
if (!this.roomId) {
logger.error("Tried to update devices while disconnected");
return;
}
const devices = this.cli.getRoom(this.roomId)
.currentState.getStateEvents(VOICE_CHANNEL_MEMBER, this.cli.getUserId())
?.getContent<IVoiceChannelMemberContent>()?.devices ?? [];
await this.cli.sendStateEvent(
this.roomId, VOICE_CHANNEL_MEMBER, { devices: fn(devices) }, this.cli.getUserId(),
);
};
private onHangup = async (ev: CustomEvent<IWidgetApiRequest>) => {
this.ack(ev);
this.activeChannel.off(`action:${ElementWidgetActions.CallParticipants}`, this.onParticipants);
this.activeChannel.off(`action:${ElementWidgetActions.MuteAudio}`, this.onMuteAudio);
this.activeChannel.off(`action:${ElementWidgetActions.UnmuteAudio}`, this.onUnmuteAudio);
this.activeChannel.off(`action:${ElementWidgetActions.MuteVideo}`, this.onMuteVideo);
this.activeChannel.off(`action:${ElementWidgetActions.UnmuteVideo}`, this.onUnmuteVideo);
this.activeChannel = null;
this._participants = null;
this._audioMuted = null;
this._videoMuted = null;
try {
// Tell others that we're disconnected, by removing our device from room state
await this.updateDevices(devices => {
const devicesSet = new Set(devices);
devicesSet.delete(this.cli.getDeviceId());
return Array.from(devicesSet);
});
} finally {
// Save this for last, since updateDevices needs the room ID
this._roomId = null;
this.emit(VoiceChannelEvent.Disconnect);
}
};
private onParticipants = (ev: CustomEvent<IWidgetApiRequest>) => {
this._participants = ev.detail.data.participants as IJitsiParticipant[];
this.emit(VoiceChannelEvent.Participants, ev.detail.data.participants);
this.ack(ev);
};
private onMuteAudio = (ev: CustomEvent<IWidgetApiRequest>) => {
this._audioMuted = true;
this.emit(VoiceChannelEvent.MuteAudio);
this.ack(ev);
};
private onUnmuteAudio = (ev: CustomEvent<IWidgetApiRequest>) => {
this._audioMuted = false;
this.emit(VoiceChannelEvent.UnmuteAudio);
this.ack(ev);
};
private onMuteVideo = (ev: CustomEvent<IWidgetApiRequest>) => {
this._videoMuted = true;
this.emit(VoiceChannelEvent.MuteVideo);
this.ack(ev);
};
private onUnmuteVideo = (ev: CustomEvent<IWidgetApiRequest>) => {
this._videoMuted = false;
this.emit(VoiceChannelEvent.UnmuteVideo);
this.ack(ev);
};
}

3
src/stores/spaces/SpaceStore.ts
View File

@ -1116,7 +1116,8 @@ export class SpaceStoreClass extends AsyncStoreWithClient<IState> {
case Action.ViewRoom: {
// Don't auto-switch rooms when reacting to a context-switch or for new rooms being created
// as this is not helpful and can create loops of rooms/space switching
if (payload.context_switch || payload.justCreatedOpts) break;
const isSpace = payload.justCreatedOpts?.roomType === RoomType.Space;
if (payload.context_switch || (payload.justCreatedOpts && !isSpace)) break;
let roomId = payload.room_id;
if (payload.room_alias && !roomId) {

18
src/utils/VoiceChannelUtils.ts → src/utils/VideoChannelUtils.ts
View File

@ -22,26 +22,26 @@ import WidgetStore, { IApp } from "../stores/WidgetStore";
import { WidgetType } from "../widgets/WidgetType";
import WidgetUtils from "./WidgetUtils";
export const VOICE_CHANNEL = "io.element.voice";
export const VOICE_CHANNEL_MEMBER = "io.element.voice.member";
export const VIDEO_CHANNEL = "io.element.video";
export const VIDEO_CHANNEL_MEMBER = "io.element.video.member";
export interface IVoiceChannelMemberContent {
export interface IVideoChannelMemberContent {
// Connected device IDs
devices: string[];
}
export const getVoiceChannel = (roomId: string): IApp => {
export const getVideoChannel = (roomId: string): IApp => {
const apps = WidgetStore.instance.getApps(roomId);
return apps.find(app => WidgetType.JITSI.matches(app.type) && app.id === VOICE_CHANNEL);
return apps.find(app => WidgetType.JITSI.matches(app.type) && app.id === VIDEO_CHANNEL);
};
export const addVoiceChannel = async (roomId: string, roomName: string) => {
await WidgetUtils.addJitsiWidget(roomId, CallType.Voice, "Voice channel", VOICE_CHANNEL, roomName);
export const addVideoChannel = async (roomId: string, roomName: string) => {
await WidgetUtils.addJitsiWidget(roomId, CallType.Video, "Video channel", VIDEO_CHANNEL, roomName);
};
export const getConnectedMembers = (state: RoomState): RoomMember[] =>
state.getStateEvents(VOICE_CHANNEL_MEMBER)
state.getStateEvents(VIDEO_CHANNEL_MEMBER)
// Must have a device connected and still be joined to the room
.filter(e => e.getContent<IVoiceChannelMemberContent>().devices?.length)
.filter(e => e.getContent<IVideoChannelMemberContent>().devices?.length)
.map(e => state.getMember(e.getStateKey()))
.filter(member => member.membership === "join");

3
src/utils/WidgetUtils.ts
View File

@ -36,6 +36,7 @@ import { Jitsi } from "../widgets/Jitsi";
import { objectClone } from "./objects";
import { _t } from "../languageHandler";
import { IApp } from "../stores/WidgetStore";
import { VIDEO_CHANNEL } from "./VideoChannelUtils";
// How long we wait for the state event echo to come back from the server
// before waitFor[Room/User]Widget rejects its promise
@ -469,6 +470,7 @@ export default class WidgetUtils {
conferenceId: confId,
roomName: oobRoomName ?? MatrixClientPeg.get().getRoom(roomId)?.name,
isAudioOnly: type === CallType.Voice,
isVideoChannel: widgetId === VIDEO_CHANNEL,
domain,
auth,
});
@ -515,6 +517,7 @@ export default class WidgetUtils {
'conferenceDomain=$domain',
'conferenceId=$conferenceId',
'isAudioOnly=$isAudioOnly',
'isVideoChannel=$isVideoChannel',
'displayName=$matrix_display_name',
'avatarUrl=$matrix_avatar_url',
'userId=$matrix_user_id',

4
src/utils/space.tsx
View File

@ -16,6 +16,7 @@ limitations under the License.
import React from "react";
import { Room } from "matrix-js-sdk/src/models/room";
import { RoomType } from "matrix-js-sdk/src/@types/event";
import { EventType } from "matrix-js-sdk/src/@types/event";
import { JoinRule } from "matrix-js-sdk/src/@types/partials";
@ -72,12 +73,13 @@ export const showAddExistingRooms = (space: Room): void => {
});
};
export const showCreateNewRoom = async (space: Room): Promise<boolean> => {
export const showCreateNewRoom = async (space: Room, type?: RoomType): Promise<boolean> => {
const modal = Modal.createTrackedDialog<[boolean, IOpts]>(
"Space Landing",
"Create Room",
CreateRoomDialog,
{
type,
defaultPublic: space.getJoinRule() === JoinRule.Public,
parentSpace: space,
},

0
test/UserActivity-test.js → test/UserActivity-test.ts
View File

0
test/autocomplete/QueryMatcher-test.js → test/autocomplete/QueryMatcher-test.ts
View File

69
test/components/views/rooms/RoomTile-test.tsx
View File

@ -28,20 +28,19 @@ import {
mkEvent,
stubVoiceChannelStore,
} from "../../../test-utils";
import { stubVideoChannelStore } from "../../../test-utils/video";
import RoomTile from "../../../../src/components/views/rooms/RoomTile";
import MemberAvatar from "../../../../src/components/views/avatars/MemberAvatar";
import SettingsStore from "../../../../src/settings/SettingsStore";
import VoiceChannelStore, { VoiceChannelEvent } from "../../../../src/stores/VoiceChannelStore";
import { DefaultTagID } from "../../../../src/stores/room-list/models";
import DMRoomMap from "../../../../src/utils/DMRoomMap";
import { VOICE_CHANNEL_MEMBER } from "../../../../src/utils/VoiceChannelUtils";
import { VIDEO_CHANNEL_MEMBER } from "../../../../src/utils/VideoChannelUtils";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import PlatformPeg from "../../../../src/PlatformPeg";
import BasePlatform from "../../../../src/BasePlatform";
const mkVoiceChannelMember = (userId: string, devices: string[]): MatrixEvent => mkEvent({
const mkVideoChannelMember = (userId: string, devices: string[]): MatrixEvent => mkEvent({
event: true,
type: VOICE_CHANNEL_MEMBER,
type: VIDEO_CHANNEL_MEMBER,
room: "!1:example.org",
user: userId,
skey: userId,
@ -58,36 +57,25 @@ describe("RoomTile", () => {
beforeEach(() => {
const realGetValue = SettingsStore.getValue;
SettingsStore.getValue = <T, >(name: string, roomId?: string): T => {
if (name === "feature_voice_rooms") {
if (name === "feature_video_rooms") {
return true as unknown as T;
}
return realGetValue(name, roomId);
};
stubClient();
stubVoiceChannelStore();
DMRoomMap.makeShared();
cli = mocked(MatrixClientPeg.get());
store = VoiceChannelStore.instance;
store = stubVideoChannelStore();
DMRoomMap.makeShared();
});
afterEach(() => jest.clearAllMocks());
describe("voice rooms", () => {
describe("video rooms", () => {
const room = mkRoom(cli, "!1:example.org");
room.isCallRoom.mockReturnValue(true);
it("tracks connection state", async () => {
// Insert a breakpoint in the connect method, so we can see the intermediate connecting state
let continueJoin;
const breakpoint = new Promise(resolve => continueJoin = resolve);
const realConnect = store.connect;
store.connect = async () => {
await breakpoint;
await realConnect();
};
room.isElementVideoRoom.mockReturnValue(true);
it("tracks connection state", () => {
const tile = mount(
<RoomTile
room={room}
@ -96,39 +84,25 @@ describe("RoomTile", () => {
tag={DefaultTagID.Untagged}
/>,
);
expect(tile.find(".mx_RoomTile_voiceIndicator").text()).toEqual("Voice room");
expect(tile.find(".mx_RoomTile_videoIndicator").text()).toEqual("Video");
act(() => { tile.simulate("click"); });
act(() => { store.connect("!1:example.org"); });
tile.update();
expect(tile.find(".mx_RoomTile_voiceIndicator").text()).toEqual("Connecting...");
// Now we confirm the join and wait for the store to update
const waitForConnect = new Promise<void>(resolve =>
store.once(VoiceChannelEvent.Connect, resolve),
);
continueJoin();
await waitForConnect;
// Wait exactly 2 ticks for the room tile to update
await Promise.resolve();
await Promise.resolve();
expect(tile.find(".mx_RoomTile_videoIndicator").text()).toEqual("Connected");
act(() => { store.disconnect(); });
tile.update();
expect(tile.find(".mx_RoomTile_voiceIndicator").text()).toEqual("Connected");
await store.disconnect();
tile.update();
expect(tile.find(".mx_RoomTile_voiceIndicator").text()).toEqual("Voice room");
expect(tile.find(".mx_RoomTile_videoIndicator").text()).toEqual("Video");
});
it("displays connected members", async () => {
it("displays connected members", () => {
mocked(room.currentState).getStateEvents.mockImplementation(mockStateEventImplementation([
// A user connected from 2 devices
mkVoiceChannelMember("@alice:example.org", ["device 1", "device 2"]),
mkVideoChannelMember("@alice:example.org", ["device 1", "device 2"]),
// A disconnected user
mkVoiceChannelMember("@bob:example.org", []),
mkVideoChannelMember("@bob:example.org", []),
// A user that claims to have a connected device, but has left the room
mkVoiceChannelMember("@chris:example.org", ["device 1"]),
mkVideoChannelMember("@chris:example.org", ["device 1"]),
]));
mocked(room.currentState).getMember.mockImplementation(userId => ({
@ -151,9 +125,8 @@ describe("RoomTile", () => {
);
// Only Alice should display as connected
const avatar = tile.find(MemberAvatar);
expect(avatar.length).toEqual(1);
expect(avatar.props().member.userId).toEqual("@alice:example.org");
const participants = tile.find(".mx_RoomTile_videoParticipants");
expect(participants.text()).toEqual("1");
});
});
});

110
test/components/views/voip/VoiceChannelRadio-test.tsx
View File

@ -1,110 +0,0 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import { mount } from "enzyme";
import { act } from "react-dom/test-utils";
import { mocked } from "jest-mock";
import {
stubClient,
mkStubRoom,
wrapInMatrixClientContext,
stubVoiceChannelStore,
} from "../../../test-utils";
import _VoiceChannelRadio from "../../../../src/components/views/voip/VoiceChannelRadio";
import VoiceChannelStore from "../../../../src/stores/VoiceChannelStore";
import DMRoomMap from "../../../../src/utils/DMRoomMap";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
const VoiceChannelRadio = wrapInMatrixClientContext(_VoiceChannelRadio);
describe("VoiceChannelRadio", () => {
const cli = mocked(MatrixClientPeg.get());
const room = mkStubRoom("!1:example.org", "voice channel", cli);
room.isCallRoom = () => true;
beforeEach(() => {
stubClient();
stubVoiceChannelStore();
DMRoomMap.makeShared();
});
it("shows when connecting voice", async () => {
const radio = mount(<VoiceChannelRadio />);
expect(radio.children().children().exists()).toEqual(false);
act(() => { VoiceChannelStore.instance.connect("!1:example.org"); });
radio.update();
expect(radio.children().children().exists()).toEqual(true);
});
it("hides when disconnecting voice", () => {
VoiceChannelStore.instance.connect("!1:example.org");
const radio = mount(<VoiceChannelRadio />);
expect(radio.children().children().exists()).toEqual(true);
act(() => { VoiceChannelStore.instance.disconnect(); });
radio.update();
expect(radio.children().children().exists()).toEqual(false);
});
describe("disconnect button", () => {
it("works", () => {
VoiceChannelStore.instance.connect("!1:example.org");
const radio = mount(<VoiceChannelRadio />);
act(() => {
radio.find("AccessibleButton.mx_VoiceChannelRadio_disconnectButton").simulate("click");
});
expect(VoiceChannelStore.instance.disconnect).toHaveBeenCalled();
});
});
describe("video button", () => {
it("works", () => {
VoiceChannelStore.instance.connect("!1:example.org");
const radio = mount(<VoiceChannelRadio />);
act(() => {
radio.find("AccessibleButton.mx_VoiceChannelRadio_videoButton").simulate("click");
});
expect(VoiceChannelStore.instance.unmuteVideo).toHaveBeenCalled();
act(() => {
radio.find("AccessibleButton.mx_VoiceChannelRadio_videoButton").simulate("click");
});
expect(VoiceChannelStore.instance.muteVideo).toHaveBeenCalled();
});
});
describe("audio button", () => {
it("works", () => {
VoiceChannelStore.instance.connect("!1:example.org");
const radio = mount(<VoiceChannelRadio />);
act(() => {
radio.find("AccessibleButton.mx_VoiceChannelRadio_audioButton").simulate("click");
});
expect(VoiceChannelStore.instance.unmuteAudio).toHaveBeenCalled();
act(() => {
radio.find("AccessibleButton.mx_VoiceChannelRadio_audioButton").simulate("click");
});
expect(VoiceChannelStore.instance.muteAudio).toHaveBeenCalled();
});
});
});

2
test/end-to-end-tests/src/usecases/create-room.ts
View File

@ -36,7 +36,7 @@ export async function createRoom(session: ElementSession, roomName: string, encr
const addRoomButton = await roomsSublist.$(".mx_RoomSublist_auxButton");
await addRoomButton.click();
const createRoomButton = await session.query('.mx_AccessibleButton[aria-label="Create new room"]');
const createRoomButton = await session.query('.mx_AccessibleButton[aria-label="New room"]');
await createRoomButton.click();
const roomNameInput = await session.query('.mx_CreateRoomDialog_name input');

24
test/notifications/ContentRules-test.js → test/notifications/ContentRules-test.ts
View File

@ -1,5 +1,6 @@
/*
Copyright 2016 OpenMarket Ltd
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -14,16 +15,16 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
const notifications = require('../../src/notifications');
import { TweakName, PushRuleActionName, TweakHighlight, TweakSound } from "matrix-js-sdk/src/matrix";
const ContentRules = notifications.ContentRules;
const PushRuleVectorState = notifications.PushRuleVectorState;
import { ContentRules, PushRuleVectorState } from "../../src/notifications";
const NORMAL_RULE = {
actions: [
"notify",
{ set_tweak: "highlight", value: false },
PushRuleActionName.Notify,
{ set_tweak: TweakName.Highlight, value: false } as TweakHighlight,
],
default: false,
enabled: true,
pattern: "vdh2",
rule_id: "vdh2",
@ -31,10 +32,11 @@ const NORMAL_RULE = {
const LOUD_RULE = {
actions: [
"notify",
{ set_tweak: "highlight" },
{ set_tweak: "sound", value: "default" },
PushRuleActionName.Notify,
{ set_tweak: TweakName.Highlight } as TweakHighlight,
{ set_tweak: TweakName.Sound, value: "default" } as TweakSound,
],
default: false,
enabled: true,
pattern: "vdh2",
rule_id: "vdh2",
@ -42,9 +44,9 @@ const LOUD_RULE = {
const USERNAME_RULE = {
actions: [
"notify",
{ set_tweak: "sound", value: "default" },
{ set_tweak: "highlight" },
PushRuleActionName.Notify,
{ set_tweak: TweakName.Sound, value: "default" } as TweakSound,
{ set_tweak: TweakName.Highlight } as TweakHighlight,
],
default: true,
enabled: true,

60
test/notifications/PushRuleVectorState-test.js
View File

@ -1,60 +0,0 @@
/*
Copyright 2016 OpenMarket Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
const notifications = require('../../src/notifications');
const prvs = notifications.PushRuleVectorState;
describe("PushRuleVectorState", function() {
describe("contentRuleVectorStateKind", function() {
it("should understand normal notifications", function() {
const rule = {
actions: [
"notify",
],
};
expect(prvs.contentRuleVectorStateKind(rule)).
toEqual(prvs.ON);
});
it("should handle loud notifications", function() {
const rule = {
actions: [
"notify",
{ set_tweak: "highlight", value: true },
{ set_tweak: "sound", value: "default" },
],
};
expect(prvs.contentRuleVectorStateKind(rule)).
toEqual(prvs.LOUD);
});
it("should understand missing highlight.value", function() {
const rule = {
actions: [
"notify",
{ set_tweak: "highlight" },
{ set_tweak: "sound", value: "default" },
],
};
expect(prvs.contentRuleVectorStateKind(rule)).
toEqual(prvs.LOUD);
});
});
});

75
test/notifications/PushRuleVectorState-test.ts Normal file
View File

@ -0,0 +1,75 @@
/*
Copyright 2016 OpenMarket Ltd
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import {
PushRuleActionName,
TweakHighlight,
TweakName,
TweakSound,
} from "matrix-js-sdk/src/matrix";
import { PushRuleVectorState } from "../../src/notifications";
describe("PushRuleVectorState", function() {
describe("contentRuleVectorStateKind", function() {
it("should understand normal notifications", function() {
const rule = {
actions: [
PushRuleActionName.Notify,
],
default: false,
enabled: false,
rule_id: '1',
};
expect(PushRuleVectorState.contentRuleVectorStateKind(rule)).
toEqual(PushRuleVectorState.ON);
});
it("should handle loud notifications", function() {
const rule = {
actions: [
PushRuleActionName.Notify,
{ set_tweak: TweakName.Highlight, value: true } as TweakHighlight,
{ set_tweak: TweakName.Sound, value: "default" } as TweakSound,
],
default: false,
enabled: false,
rule_id: '1',
};
expect(PushRuleVectorState.contentRuleVectorStateKind(rule)).
toEqual(PushRuleVectorState.LOUD);
});
it("should understand missing highlight.value", function() {
const rule = {
actions: [
PushRuleActionName.Notify,
{ set_tweak: TweakName.Highlight } as TweakHighlight,
{ set_tweak: TweakName.Sound, value: "default" } as TweakSound,
],
default: false,
enabled: false,
rule_id: '1',
};
expect(PushRuleVectorState.contentRuleVectorStateKind(rule)).
toEqual(PushRuleVectorState.LOUD);
});
});
});

83
test/stores/VideoChannelStore-test.ts Normal file
View File

@ -0,0 +1,83 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { ClientWidgetApi, MatrixWidgetType } from "matrix-widget-api";
import "../skinned-sdk";
import { stubClient, mkRoom } from "../test-utils";
import { MatrixClientPeg } from "../../src/MatrixClientPeg";
import WidgetStore from "../../src/stores/WidgetStore";
import ActiveWidgetStore from "../../src/stores/ActiveWidgetStore";
import { WidgetMessagingStore } from "../../src/stores/widgets/WidgetMessagingStore";
import VideoChannelStore, { VideoChannelEvent } from "../../src/stores/VideoChannelStore";
import { VIDEO_CHANNEL } from "../../src/utils/VideoChannelUtils";
describe("VideoChannelStore", () => {
stubClient();
mkRoom(MatrixClientPeg.get(), "!1:example.org");
const videoStore = VideoChannelStore.instance;
const widgetStore = ActiveWidgetStore.instance;
jest.spyOn(WidgetStore.instance, "getApps").mockReturnValue([{
id: VIDEO_CHANNEL,
eventId: "$1:example.org",
roomId: "!1:example.org",
type: MatrixWidgetType.JitsiMeet,
url: "",
name: "Video channel",
creatorUserId: "@alice:example.org",
avatar_url: null,
}]);
jest.spyOn(WidgetMessagingStore.instance, "getMessagingForUid").mockReturnValue({
on: () => {},
off: () => {},
once: () => {},
transport: {
send: () => {},
reply: () => {},
},
} as unknown as ClientWidgetApi);
beforeEach(() => {
videoStore.start();
});
afterEach(() => {
videoStore.stop();
jest.clearAllMocks();
});
it("tracks connection state", async () => {
expect(videoStore.roomId).toBeFalsy();
const waitForConnect = new Promise<void>(resolve =>
videoStore.once(VideoChannelEvent.Connect, resolve),
);
widgetStore.setWidgetPersistence(VIDEO_CHANNEL, "!1:example.org", true);
await waitForConnect;
expect(videoStore.roomId).toEqual("!1:example.org");
const waitForDisconnect = new Promise<void>(resolve =>
videoStore.once(VideoChannelEvent.Disconnect, resolve),
);
widgetStore.setWidgetPersistence(VIDEO_CHANNEL, "!1:example.org", false);
await waitForDisconnect;
expect(videoStore.roomId).toBeFalsy();
});
});

94
test/stores/VoiceChannelStore-test.ts
View File

@ -1,94 +0,0 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { ClientWidgetApi, MatrixWidgetType } from "matrix-widget-api";
import { stubClient } from "../test-utils";
import WidgetStore from "../../src/stores/WidgetStore";
import { WidgetMessagingStore } from "../../src/stores/widgets/WidgetMessagingStore";
import { ElementWidgetActions } from "../../src/stores/widgets/ElementWidgetActions";
import VoiceChannelStore, { VoiceChannelEvent } from "../../src/stores/VoiceChannelStore";
import { VOICE_CHANNEL } from "../../src/utils/VoiceChannelUtils";
describe("VoiceChannelStore", () => {
// Set up mocks to simulate the remote end of the widget API
let messageSent;
let messageSendMock;
let onceMock;
beforeEach(() => {
stubClient();
let resolveMessageSent;
messageSent = new Promise(resolve => resolveMessageSent = resolve);
messageSendMock = jest.fn().mockImplementation(() => resolveMessageSent());
onceMock = jest.fn();
jest.spyOn(WidgetStore.instance, "getApps").mockReturnValue([{
id: VOICE_CHANNEL,
eventId: "$1:example.org",
roomId: "!1:example.org",
type: MatrixWidgetType.JitsiMeet,
url: "",
name: "Voice channel",
creatorUserId: "@alice:example.org",
avatar_url: null,
}]);
jest.spyOn(WidgetMessagingStore.instance, "getMessagingForUid").mockReturnValue({
on: () => {},
off: () => {},
once: onceMock,
transport: {
send: messageSendMock,
reply: () => {},
},
} as unknown as ClientWidgetApi);
});
it("connects and disconnects", async () => {
const store = VoiceChannelStore.instance;
expect(store.roomId).toBeFalsy();
store.connect("!1:example.org");
// Wait for the store to contact the widget API
await messageSent;
// Then, locate the callback that will confirm the join
const [, join] = onceMock.mock.calls.find(([action]) =>
action === `action:${ElementWidgetActions.JoinCall}`,
);
// Confirm the join, and wait for the store to update
const waitForConnect = new Promise<void>(resolve =>
store.once(VoiceChannelEvent.Connect, resolve),
);
join({ detail: {} });
await waitForConnect;
expect(store.roomId).toEqual("!1:example.org");
store.disconnect();
// Locate the callback that will perform the hangup
const [, hangup] = onceMock.mock.calls.find(([action]) =>
action === `action:${ElementWidgetActions.HangupCall}`,
);
// Hangup and wait for the store, once again
const waitForHangup = new Promise<void>(resolve =>
store.once(VoiceChannelEvent.Disconnect, resolve),
);
hangup({ detail: {} });
await waitForHangup;
expect(store.roomId).toBeFalsy();
});
});

2
test/test-utils/index.ts
View File

@ -4,6 +4,6 @@ export * from './location';
export * from './platform';
export * from './room';
export * from './test-utils';
export * from './voice';
export * from './video';
export * from './wrappers';
export * from './utilities';

2
test/test-utils/test-utils.ts
View File

@ -367,7 +367,7 @@ export function mkStubRoom(roomId: string = null, name: string, client: MatrixCl
getAvatarUrl: () => 'mxc://avatar.url/room.png',
getMxcAvatarUrl: () => 'mxc://avatar.url/room.png',
isSpaceRoom: jest.fn().mockReturnValue(false),
isCallRoom: jest.fn().mockReturnValue(false),
isElementVideoRoom: jest.fn().mockReturnValue(false),
getUnreadNotificationCount: jest.fn(() => 0),
getEventReadUpTo: jest.fn(() => null),
getCanonicalAlias: jest.fn(),

39
test/test-utils/video.ts Normal file
View File

@ -0,0 +1,39 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { EventEmitter } from "events";
import VideoChannelStore, { VideoChannelEvent } from "../../src/stores/VideoChannelStore";
class StubVideoChannelStore extends EventEmitter {
private _roomId: string;
public get roomId(): string { return this._roomId; }
public connect = (roomId: string) => {
this._roomId = roomId;
this.emit(VideoChannelEvent.Connect);
};
public disconnect = () => {
this._roomId = null;
this.emit(VideoChannelEvent.Disconnect);
};
}
export const stubVideoChannelStore = (): StubVideoChannelStore => {
const store = new StubVideoChannelStore();
jest.spyOn(VideoChannelStore, "instance", "get").mockReturnValue(store as unknown as VideoChannelStore);
return store;
};

60
test/test-utils/voice.ts
View File

@ -1,60 +0,0 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { EventEmitter } from "events";
import VoiceChannelStore, { VoiceChannelEvent } from "../../src/stores/VoiceChannelStore";
class StubVoiceChannelStore extends EventEmitter {
private _roomId: string;
public get roomId(): string { return this._roomId; }
private _audioMuted: boolean;
public get audioMuted(): boolean { return this._audioMuted; }
private _videoMuted: boolean;
public get videoMuted(): boolean { return this._videoMuted; }
public connect = jest.fn().mockImplementation(async (roomId: string) => {
this._roomId = roomId;
this._audioMuted = true;
this._videoMuted = true;
this.emit(VoiceChannelEvent.Connect);
});
public disconnect = jest.fn().mockImplementation(async () => {
this._roomId = null;
this.emit(VoiceChannelEvent.Disconnect);
});
public muteAudio = jest.fn().mockImplementation(async () => {
this._audioMuted = true;
this.emit(VoiceChannelEvent.MuteAudio);
});
public unmuteAudio = jest.fn().mockImplementation(async () => {
this._audioMuted = false;
this.emit(VoiceChannelEvent.UnmuteAudio);
});
public muteVideo = jest.fn().mockImplementation(async () => {
this._videoMuted = true;
this.emit(VoiceChannelEvent.MuteVideo);
});
public unmuteVideo = jest.fn().mockImplementation(async () => {
this._videoMuted = false;
this.emit(VoiceChannelEvent.UnmuteVideo);
});
}
export const stubVoiceChannelStore = () => {
jest.spyOn(VoiceChannelStore, "instance", "get")
.mockReturnValue(new StubVoiceChannelStore() as unknown as VoiceChannelStore);
};