Skip to content

Commit 1cb9d35

Browse files
Merge tag 'v2.8.1'
Change-Id: Ibc95d5dc3d6552eec9c9a616753a8bca121e115a
2 parents 0afe52d + e43311c commit 1cb9d35

File tree

913 files changed

+32767
-13155
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

913 files changed

+32767
-13155
lines changed

.eslintignore.errorfiles

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,20 @@ src/components/structures/RoomView.js
66
src/components/structures/ScrollPanel.js
77
src/components/structures/SearchBox.js
88
src/components/structures/UploadBar.js
9-
src/components/views/avatars/BaseAvatar.js
109
src/components/views/avatars/MemberAvatar.js
1110
src/components/views/create_room/RoomAlias.js
1211
src/components/views/dialogs/SetPasswordDialog.js
13-
src/components/views/dialogs/UnknownDeviceDialog.js
1412
src/components/views/elements/AddressSelector.js
1513
src/components/views/elements/DirectorySearchBox.js
1614
src/components/views/elements/MemberEventListSummary.js
1715
src/components/views/elements/UserSelector.js
18-
src/components/views/globals/MatrixToolbar.js
1916
src/components/views/globals/NewVersionBar.js
20-
src/components/views/globals/UpdateCheckBar.js
2117
src/components/views/messages/MFileBody.js
2218
src/components/views/messages/TextualBody.js
2319
src/components/views/room_settings/ColorSettings.js
2420
src/components/views/rooms/Autocomplete.js
2521
src/components/views/rooms/AuxPanel.js
2622
src/components/views/rooms/LinkPreviewWidget.js
27-
src/components/views/rooms/MemberDeviceInfo.js
2823
src/components/views/rooms/MemberInfo.js
2924
src/components/views/rooms/MemberList.js
3025
src/components/views/rooms/RoomList.js

CHANGELOG.md

Lines changed: 1023 additions & 0 deletions
Large diffs are not rendered by default.

README.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ Code should be committed as follows:
4545
* In practice, `matrix-react-sdk` is still evolving so fast that the maintenance
4646
burden of customising and overriding these components for Riot can seriously
4747
impede development. So right now, there should be very few (if any) customisations for Riot.
48-
* CSS: https://github.com/vector-im/riot-web/tree/master/src/skins/vector/css/matrix-react-sdk
48+
* CSS: https://github.com/matrix-org/matrix-react-sdk/tree/master/res/css
4949
* Theme specific CSS & resources: https://github.com/matrix-org/matrix-react-sdk/tree/master/res/themes
5050

5151
React components in matrix-react-sdk are come in two different flavours:
@@ -133,8 +133,10 @@ Development
133133

134134
Ensure you have the latest LTS version of Node.js installed.
135135

136-
Using `yarn` instead of `npm` is recommended. Please see the Yarn [install
137-
guide](https://yarnpkg.com/docs/install/) if you do not have it already.
136+
Using `yarn` instead of `npm` is recommended. Please see the Yarn 1 [install
137+
guide](https://classic.yarnpkg.com/docs/install) if you do not have it
138+
already. This project has not yet been migrated to Yarn 2, so please ensure
139+
`yarn --version` shows a version from the 1.x series.
138140

139141
`matrix-react-sdk` depends on `matrix-js-sdk`. To make use of changes in the
140142
latter and to ensure tests run against the develop branch of `matrix-js-sdk`,

code_style.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Matrix JavaScript/ECMAScript Style Guide
44
The intention of this guide is to make Matrix's JavaScript codebase clean,
55
consistent with other popular JavaScript styles and consistent with the rest of
66
the Matrix codebase. For reference, the Matrix Python style guide can be found
7-
at https://github.com/matrix-org/synapse/blob/master/docs/code_style.rst
7+
at https://github.com/matrix-org/synapse/blob/master/docs/code_style.md
88

99
This document reflects how we would like Matrix JavaScript code to look, with
1010
acknowledgement that a significant amount of code is written to older
@@ -17,7 +17,7 @@ writing in modern ECMAScript and using a transpile step to generate the file
1717
that applications can then include. There are significant benefits in being
1818
able to use modern ECMAScript, although the tooling for doing so can be awkward
1919
for library code, especially with regard to translating source maps and line
20-
number throgh from the original code to the final application.
20+
number through from the original code to the final application.
2121

2222
General Style
2323
-------------
@@ -151,6 +151,7 @@ General Style
151151
Don't set things to undefined. Reserve that value to mean "not yet set to anything."
152152
Boolean objects are verboten.
153153
- Use JSDoc
154+
- Use switch-case statements where there are 5 or more branches running against the same variable.
154155

155156
ECMAScript
156157
----------

docs/img/RoomListStore2.png

74.5 KB
Loading

docs/room-list-store.md

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
# Room list sorting
2+
3+
It's so complicated it needs its own README.
4+
5+
![](img/RoomListStore2.png)
6+
7+
Legend:
8+
* Orange = External event.
9+
* Purple = Deterministic flow.
10+
* Green = Algorithm definition.
11+
* Red = Exit condition/point.
12+
* Blue = Process definition.
13+
14+
## Algorithms involved
15+
16+
There's two main kinds of algorithms involved in the room list store: list ordering and tag sorting.
17+
Throughout the code an intentional decision has been made to call them the List Algorithm and Sorting
18+
Algorithm respectively. The list algorithm determines the primary ordering of a given tag whereas the
19+
tag sorting defines how rooms within that tag get sorted, at the discretion of the list ordering.
20+
21+
Behaviour of the overall room list (sticky rooms, etc) are determined by the generically-named Algorithm
22+
class. Here is where much of the coordination from the room list store is done to figure out which list
23+
algorithm to call, instead of having all the logic in the room list store itself.
24+
25+
26+
Tag sorting is effectively the comparator supplied to the list algorithm. This gives the list algorithm
27+
the power to decide when and how to apply the tag sorting, if at all. For example, the importance algorithm,
28+
later described in this document, heavily uses the list ordering behaviour to break the tag into categories.
29+
Each category then gets sorted by the appropriate tag sorting algorithm.
30+
31+
### Tag sorting algorithm: Alphabetical
32+
33+
When used, rooms in a given tag will be sorted alphabetically, where the alphabet's order is a problem
34+
for the browser. All we do is a simple string comparison and expect the browser to return something
35+
useful.
36+
37+
### Tag sorting algorithm: Manual
38+
39+
Manual sorting makes use of the `order` property present on all tags for a room, per the
40+
[Matrix specification](https://matrix.org/docs/spec/client_server/r0.6.0#room-tagging). Smaller values
41+
of `order` cause rooms to appear closer to the top of the list.
42+
43+
### Tag sorting algorithm: Recent
44+
45+
Rooms get ordered by the timestamp of the most recent useful message. Usefulness is yet another algorithm
46+
in the room list system which determines whether an event type is capable of bubbling up in the room list.
47+
Normally events like room messages, stickers, and room security changes will be considered useful enough
48+
to cause a shift in time.
49+
50+
Note that this is reliant on the event timestamps of the most recent message. Because Matrix is eventually
51+
consistent this means that from time to time a room might plummet or skyrocket across the tag due to the
52+
timestamp contained within the event (generated server-side by the sender's server).
53+
54+
### List ordering algorithm: Natural
55+
56+
This is the easiest of the algorithms to understand because it does essentially nothing. It imposes no
57+
behavioural changes over the tag sorting algorithm and is by far the simplest way to order a room list.
58+
Historically, it's been the only option in Riot and extremely common in most chat applications due to
59+
its relative deterministic behaviour.
60+
61+
### List ordering algorithm: Importance
62+
63+
On the other end of the spectrum, this is the most complicated algorithm which exists. There's major
64+
behavioural changes, and the tag sorting algorithm gets selectively applied depending on circumstances.
65+
66+
Each tag which is not manually ordered gets split into 4 sections or "categories". Manually ordered tags
67+
simply get the manual sorting algorithm applied to them with no further involvement from the importance
68+
algorithm. There are 4 categories: Red, Grey, Bold, and Idle. Each has their own definition based off
69+
relative (perceived) importance to the user:
70+
71+
* **Red**: The room has unread mentions waiting for the user.
72+
* **Grey**: The room has unread notifications waiting for the user. Notifications are simply unread
73+
messages which cause a push notification or badge count. Typically, this is the default as rooms get
74+
set to 'All Messages'.
75+
* **Bold**: The room has unread messages waiting for the user. Essentially this is a grey room without
76+
a badge/notification count (or 'Mentions Only'/'Muted').
77+
* **Idle**: No useful (see definition of useful above) activity has occurred in the room since the user
78+
last read it.
79+
80+
Conveniently, each tag gets ordered by those categories as presented: red rooms appear above grey, grey
81+
above bold, etc.
82+
83+
Once the algorithm has determined which rooms belong in which categories, the tag sorting algorithm
84+
gets applied to each category in a sub-list fashion. This should result in the red rooms (for example)
85+
being sorted alphabetically amongst each other as well as the grey rooms sorted amongst each other, but
86+
collectively the tag will be sorted into categories with red being at the top.
87+
88+
## Sticky rooms
89+
90+
When the user visits a room, that room becomes 'sticky' in the list, regardless of ordering algorithm.
91+
From a code perspective, the underlying algorithm is not aware of a sticky room and instead the base class
92+
manages which room is sticky. This is to ensure that all algorithms handle it the same.
93+
94+
The sticky flag is simply to say it will not move higher or lower down the list while it is active. For
95+
example, if using the importance algorithm, the room would naturally become idle once viewed and thus
96+
would normally fly down the list out of sight. The sticky room concept instead holds it in place, never
97+
letting it fly down until the user moves to another room.
98+
99+
Only one room can be sticky at a time. Room updates around the sticky room will still hold the sticky
100+
room in place. The best example of this is the importance algorithm: if the user has 3 red rooms and
101+
selects the middle room, they will see exactly one room above their selection at all times. If they
102+
receive another notification which causes the room to move into the topmost position, the room that was
103+
above the sticky room will move underneath to allow for the new room to take the top slot, maintaining
104+
the sticky room's position.
105+
106+
Though only applicable to the importance algorithm, the sticky room is not aware of category boundaries
107+
and thus the user can see a shift in what kinds of rooms move around their selection. An example would
108+
be the user having 4 red rooms, the user selecting the third room (leaving 2 above it), and then having
109+
the rooms above it read on another device. This would result in 1 red room and 1 other kind of room
110+
above the sticky room as it will try to maintain 2 rooms above the sticky room.
111+
112+
An exception for the sticky room placement is when there's suddenly not enough rooms to maintain the placement
113+
exactly. This typically happens if the user selects a room and leaves enough rooms where it cannot maintain
114+
the N required rooms above the sticky room. In this case, the sticky room will simply decrease N as needed.
115+
The N value will never increase while selection remains unchanged: adding a bunch of rooms after having
116+
put the sticky room in a position where it's had to decrease N will not increase N.
117+
118+
## Responsibilities of the store
119+
120+
The store is responsible for the ordering, upkeep, and tracking of all rooms. The room list component simply gets
121+
an object containing the tags it needs to worry about and the rooms within. The room list component will
122+
decide which tags need rendering (as it commonly filters out empty tags in most cases), and will deal with
123+
all kinds of filtering.
124+
125+
## Filtering
126+
127+
Filters are provided to the store as condition classes, which are then passed along to the algorithm
128+
implementations. The implementations then get to decide how to actually filter the rooms, however in
129+
practice the base `Algorithm` class deals with the filtering in a more optimized/generic way.
130+
131+
The results of filters get cached to avoid needlessly iterating over potentially thousands of rooms,
132+
as the old room list store does. When a filter condition changes, it emits an update which (in this
133+
case) the `Algorithm` class will pick up and act accordingly. Typically, this also means filtering a
134+
minor subset where possible to avoid over-iterating rooms.
135+
136+
All filter conditions are considered "stable" by the consumers, meaning that the consumer does not
137+
expect a change in the condition unless the condition says it has changed. This is intentional to
138+
maintain the caching behaviour described above.
139+
140+
## Class breakdowns
141+
142+
The `RoomListStore` is the major coordinator of various algorithm implementations, which take care
143+
of the various `ListAlgorithm` and `SortingAlgorithm` options. The `Algorithm` class is responsible
144+
for figuring out which tags get which rooms, as Matrix specifies them as a reverse map: tags get
145+
defined on rooms and are not defined as a collection of rooms (unlike how they are presented to the
146+
user). Various list-specific utilities are also included, though they are expected to move somewhere
147+
more general when needed. For example, the `membership` utilities could easily be moved elsewhere
148+
as needed.
149+
150+
The various bits throughout the room list store should also have jsdoc of some kind to help describe
151+
what they do and how they work.

docs/settings.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,17 @@ Settings are the different options a user may set or experience in the applicati
5151
}
5252
```
5353

54+
Settings that support the config level can be set in the config file under the `settingDefaults` key (note that some settings, like the "theme" setting, are special cased in the config file):
55+
```json
56+
{
57+
...
58+
"settingDefaults": {
59+
"settingName": true
60+
},
61+
...
62+
}
63+
```
64+
5465
### Getting values for a setting
5566

5667
After importing `SettingsStore`, simply make a call to `SettingsStore.getValue`. The `roomId` parameter should always

package.json

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "matrix-react-sdk",
3-
"version": "2.3.1",
3+
"version": "2.8.1",
44
"description": "SDK for matrix.org using React",
55
"author": "matrix.org",
66
"repository": {
@@ -55,6 +55,7 @@
5555
},
5656
"dependencies": {
5757
"@babel/runtime": "^7.8.3",
58+
"await-lock": "^2.0.1",
5859
"blueimp-canvas-to-blob": "^3.5.0",
5960
"browser-encrypt-attachment": "^0.3.0",
6061
"browser-request": "^0.3.3",
@@ -64,8 +65,8 @@
6465
"create-react-class": "^15.6.0",
6566
"diff-dom": "^4.1.3",
6667
"diff-match-patch": "^1.0.4",
67-
"emojibase-data": "^4.0.2",
68-
"emojibase-regex": "^3.0.0",
68+
"emojibase-data": "^5.0.1",
69+
"emojibase-regex": "^4.0.1",
6970
"escape-html": "^1.0.3",
7071
"file-saver": "^1.3.3",
7172
"filesize": "3.5.6",
@@ -79,20 +80,21 @@
7980
"is-ip": "^2.0.0",
8081
"linkifyjs": "^2.1.6",
8182
"lodash": "^4.17.14",
82-
"matrix-js-sdk": "5.2.0",
83+
"matrix-js-sdk": "7.0.0",
8384
"minimist": "^1.2.0",
8485
"pako": "^1.0.5",
86+
"parse5": "^5.1.1",
8587
"png-chunks-extract": "^1.0.0",
8688
"project-name-generator": "^2.1.7",
8789
"prop-types": "^15.5.8",
8890
"qrcode": "^1.4.4",
89-
"qrcode-react": "^0.1.16",
9091
"qs": "^6.6.0",
9192
"react": "^16.9.0",
92-
"react-addons-css-transition-group": "15.6.2",
9393
"react-beautiful-dnd": "^4.0.1",
9494
"react-dom": "^16.9.0",
9595
"react-focus-lock": "^2.2.1",
96+
"react-resizable": "^1.10.1",
97+
"react-transition-group": "^4.4.1",
9698
"resize-observer-polyfill": "^1.5.0",
9799
"sanitize-html": "^1.18.4",
98100
"text-encoding-utf-8": "^1.0.1",
@@ -118,7 +120,15 @@
118120
"@babel/register": "^7.7.4",
119121
"@peculiar/webcrypto": "^1.0.22",
120122
"@types/classnames": "^2.2.10",
121-
"@types/react": "16.9",
123+
"@types/flux": "^3.1.9",
124+
"@types/lodash": "^4.14.152",
125+
"@types/modernizr": "^3.5.3",
126+
"@types/node": "^12.12.41",
127+
"@types/qrcode": "^1.3.4",
128+
"@types/react": "^16.9",
129+
"@types/react-dom": "^16.9.8",
130+
"@types/react-transition-group": "^4.4.0",
131+
"@types/zxcvbn": "^4.4.0",
122132
"babel-eslint": "^10.0.3",
123133
"babel-jest": "^24.9.0",
124134
"chokidar": "^3.3.1",
@@ -137,6 +147,7 @@
137147
"flow-parser": "^0.57.3",
138148
"glob": "^5.0.14",
139149
"jest": "^24.9.0",
150+
"jest-canvas-mock": "^2.2.0",
140151
"lolex": "^5.1.2",
141152
"matrix-mock-request": "^1.2.3",
142153
"matrix-react-test-utils": "^0.2.2",
@@ -156,6 +167,9 @@
156167
"testMatch": [
157168
"<rootDir>/test/**/*-test.js"
158169
],
170+
"setupFiles": [
171+
"jest-canvas-mock"
172+
],
159173
"setupFilesAfterEnv": [
160174
"<rootDir>/test/setupTests.js"
161175
],

0 commit comments

Comments
 (0)