Compare commits

..

256 commits

Author SHA1 Message Date
a33d9981bd
fix: secrets 2022-08-16 17:05:59 +05:30
8335a50308
feat: switch to python, debian doesn't have make installed by default 2022-08-16 17:02:10 +05:30
ee9e73d8c7
fix: use debian latest img to get git with git branch --show-current 2022-08-16 16:59:15 +05:30
63f77feb7b
fix: set project root 2022-08-16 16:55:52 +05:30
04de39596f
feat: bump ci node to 16 2022-08-16 16:52:22 +05:30
25b634bb78
fix: use same tests as github actions 2022-08-16 16:47:23 +05:30
96c9ea8de7
fix: use node 14, same as github actions config 2022-08-16 16:44:15 +05:30
d80e970117
feat: conditional deploy pipeline 2022-08-16 16:38:53 +05:30
6db5f34ac2
feat: multi-pipeline workflow 2022-08-16 16:36:05 +05:30
df0000783d
feat: deploy to librepages 2022-08-16 16:14:27 +05:30
Bruno Windels
c898bcb46a release v0.3.1 2022-08-02 12:16:55 +02:00
Bruno Windels
97391663d3 sdk version 0.1.0 2022-08-01 14:32:26 +02:00
R Midhun Suresh
7d3f22c106
Merge pull request #824 from vector-im/fix-dev-server-1
Fix develop server breaking due to import syntax
2022-08-01 17:29:52 +05:30
RMidhunSuresh
832597447a Add explaining doc 2022-08-01 17:01:36 +05:30
RMidhunSuresh
236a4ab49b Ignore error 2022-08-01 17:01:36 +05:30
RMidhunSuresh
ba8cdea6b4 Use default import if other not found 2022-08-01 17:01:36 +05:30
RMidhunSuresh
ef9f90bc36 Fix imports breaking on dev 2022-08-01 17:01:36 +05:30
R Midhun Suresh
67e94bd642
Merge pull request #825 from vector-im/fix-sdk-fail-1
Fix sdk build failing after derived theme implementation
2022-08-01 16:17:09 +05:30
R Midhun Suresh
f7839135a4
Merge pull request #823 from vector-im/fix-tmp-dir
Fix .tmp being created in `/`
2022-08-01 16:16:35 +05:30
RMidhunSuresh
4571ecd851 Specify theme as array 2022-07-29 23:45:58 +05:30
RMidhunSuresh
5091090795 Produce .tmp directory within root 2022-07-29 23:11:17 +05:30
Bruno Windels
db2b4e693c release v0.3.0 2022-07-29 17:10:24 +02:00
Bruno Windels
eee8412621
Merge pull request #822 from vector-im/bwindels/move-runtime-theme-test-out-of-root
move semi-automatic test for runtime themes into dedicated directory
2022-07-29 15:00:34 +00:00
Bruno Windels
5e83eca3b9 move semi-automatic test for runtime themes into dedicated directory 2022-07-29 16:43:28 +02:00
Bruno Windels
041e628520
Merge pull request #769 from vector-im/implement-derived-theme
Support for derived themes
2022-07-29 14:25:05 +00:00
Bruno Windels
4838e19c92
Merge pull request #811 from vector-im/bwindels/sharekeyswithinvitees
Key sharing based on room history visibility
2022-07-29 14:23:26 +00:00
Bruno Windels
cb0ac846c7 remove obsolete comment 2022-07-29 16:22:01 +02:00
Bruno Windels
b40ce6137e
Merge pull request #676 from vector-im/ts-conversion-domain-navigation
Convert /domain/navigation to typescript
2022-07-29 14:21:17 +00:00
Bruno Windels
fdefea5b88 Merge branch 'master' into ts-conversion-domain-navigation 2022-07-29 16:18:22 +02:00
RMidhunSuresh
39817dc36b Revert back option 2022-07-29 17:33:33 +05:30
RMidhunSuresh
708637e390 No need for this complex resolve 2022-07-29 16:45:25 +05:30
Bruno Windels
b6f795505d fix lint 2022-07-29 12:21:16 +02:00
Bruno Windels
10522cacef
Merge pull request #813 from vector-im/doc-derived-theming
[Documentation] - Add information about derived themes to doc
2022-07-29 10:16:41 +00:00
Bruno Windels
02116103a1
Merge pull request #816 from Kaki-In/restore_last
Opening the last opened room at start
2022-07-29 10:16:23 +00:00
Bruno Windels
06da5a8ae4
clarification 2022-07-29 10:14:58 +00:00
Bruno Windels
02bc7d1d7e
fix typo 2022-07-29 10:14:41 +00:00
Kaki In
09bc77073b
Merge branch 'vector-im:master' into restore_last 2022-07-29 12:06:49 +02:00
Bruno Windels
4a2e14925a
Merge pull request #812 from vector-im/doc-config
[Documentation] - Add type for config options
2022-07-29 10:05:27 +00:00
Bruno Windels
224ab2672a
Merge pull request #809 from Kaki-In/implement-join
Implemented /join
2022-07-29 10:03:18 +00:00
Bruno Windels
170460f5a9 add link to sygnal webpush docs as well 2022-07-29 12:02:09 +02:00
Bruno Windels
2a5e0302dc
Merge pull request #785 from vector-im/hs/log-when-storage-access-fails
Log the error when we can't get storage access
2022-07-29 09:47:58 +00:00
Kaki In
f512bfcfc1 Pretty syntaxed the RoomViewModel 2022-07-29 11:47:47 +02:00
Half-Shot
5b5c852401 Revert "use logging items"
This reverts commit d937b9b14b.
2022-07-29 10:44:37 +01:00
Kaki In
58a2d1f34c Restored the common.js indentation 2022-07-29 11:44:23 +02:00
Half-Shot
d937b9b14b use logging items 2022-07-29 10:39:41 +01:00
Bruno Windels
d3e93196e3
Merge pull request #777 from ibeckermayer/ibeckermayer/ts-conversion-loginviewmodel
TS conversion for `LoginViewModel`
2022-07-29 09:27:10 +00:00
Bruno Windels
62b3a67e33 write unit tests for correctly reading history visibility when needed 2022-07-28 17:09:41 +02:00
Bruno Windels
319ec37864 fix typos preventing to load the history visibility 2022-07-28 11:44:50 +02:00
Kaki In
f5dacb4e42 Fixed last check 2022-07-28 10:26:59 +02:00
Kaki In
302131c447 Review last checks 2022-07-28 10:14:21 +02:00
Kaki In
fb79326747 Forgot one change 2022-07-28 09:26:08 +02:00
Kaki In
3c64f7d49b Finals checks about https://github.com/vector-im/hydrogen-web/pull/809#pullrequestreview-1053501341
- joined the processJoinRoom and joinRoom methods;
 - fixed some precisions miss;
 - removed some useless code;
 - change the error message height from absolute (40px) to relative (auto)
2022-07-28 09:23:30 +02:00
Isaiah Becker-Mayer
a82df95b82 marking private methods as such 2022-07-27 22:09:30 -07:00
Isaiah Becker-Mayer
cadca70946 fixes linter errors and removes some unneeded async/await 2022-07-27 22:09:30 -07:00
Isaiah Becker-Mayer
8b91d8fac8 adds newline 2022-07-27 22:09:30 -07:00
Isaiah Becker-Mayer
a5b9cb6b95 removes unnecessary awaits 2022-07-27 22:09:30 -07:00
Isaiah Becker-Mayer
aeed978789 changes signature of emitChange to require changedProps 2022-07-27 22:09:30 -07:00
Isaiah Becker-Mayer
7b7b19476c updates some signatures to be more verbose, fixes wrong type for attemptLogin 2022-07-27 22:09:30 -07:00
Isaiah Becker-Mayer
ad0bd82bda creating default exports 2022-07-27 22:09:30 -07:00
Isaiah Becker-Mayer
d7657dcc4d first draft of fully typescriptified LoginViewModel.ts 2022-07-27 22:09:30 -07:00
Kaki In
176caf340f Placed the join command outside of the processCommand method 2022-07-27 16:42:44 +02:00
Kaki In
a40bb59dc0 Some fixes :
- fixed a pretty syntax miss (a !== b);
 - fixed a type error : replaced "msgtype" by "type" when instantied the "messinfo" variable;
 - some indentation fixes
2022-07-27 16:36:58 +02:00
Kaki In
ab64ce02b2 Separated the _processCommand and the joinRoom command
- renamed executeJoinCommand as joinRoom;
 - separated the joinRoom process and the parse and result process
2022-07-27 15:18:32 +02:00
Kaki In
2d3b6fe973 Canceled indentation modification. 2022-07-27 12:40:19 +02:00
Kaki In
550b9db4dc Separated the join instructions into a executeJoinCommand method 2022-07-27 12:21:00 +02:00
Bruno Windels
0df66b5aea track room before listing user ids when sharing key 2022-07-27 12:06:55 +02:00
Bruno Windels
f18520a2fe let loadMembers use own txn in case members haven't been fetched yet
if they haven't, it will need a network request, meaning that the txn
will get closed, so we can't reuse it afterwards
2022-07-27 11:39:50 +02:00
Bruno Windels
50b6ee91d7 don't need history visibility here 2022-07-27 11:39:36 +02:00
Kaki In
9b0ab0c8f1 Used "null" instead of "undefined"
When creating the this._lastSessionHash attribute of History
2022-07-27 09:19:36 +02:00
Bruno Windels
402cf17d22 Merge branch 'master' into bwindels/sharekeyswithinvitees 2022-07-27 09:17:31 +02:00
Bruno Windels
bfaba63f47 fix ts error 2022-07-26 17:55:21 +02:00
Bruno Windels
544afef902 test adding and removing when tracking multiple rooms 2022-07-26 17:41:26 +02:00
Bruno Windels
dd878bb8d6 also take rejecting invites into account to remove user identity 2022-07-26 16:58:07 +02:00
Bruno Windels
dea3852425 add some tests for sharing keys with invitees 2022-07-26 16:57:28 +02:00
Bruno Windels
4c17612b05 allow passing txn to loadMembers so we can do it as part of sync txn
to rewrite useridentities upon receiving new history visibility
2022-07-26 16:53:02 +02:00
Kaki In
f9f49b7640 Fixed an error and improving css
If the /join command success, an error was thrown, because of a copy-pasted command not well integrated
The button of the error on "theme.css" contains now an unicode cross. The :after/:before cross was disformed when opening the room informations.
2022-07-26 14:48:03 +02:00
Kaki In
0718f1e77e Fixed the https://github.com/vector-im/hydrogen-web/pull/816#discussion_r929692693 comment
Added the _lastSessionHash attribute inside the History constructor
2022-07-26 11:11:16 +02:00
Kaki In
09fd1a5113 Use "args.join" instead of "message.substring"
into RoomViewModel._processCommands
2022-07-26 10:37:05 +02:00
Kaki In
832b840a15 Merge remote-tracking branch 'origin' into restore_last 2022-07-26 10:06:31 +02:00
Kaki In
adfecf0778 Fix restoring the last url at start
The last session url is now remembered for being restored at the beginning of the session. Thanks for the help of @bwindels
2022-07-26 10:02:20 +02:00
Kaki In
5fa6793958
Merge branch 'vector-im:master' into implement-join 2022-07-25 16:30:50 +02:00
Kaki In
1e5179f835 - Application des différents commentaires du Pull Request (#809)
- Correction des erreurs d'indentations.
2022-07-25 15:22:06 +02:00
Bruno Windels
bc385e2cdc
Merge pull request #778 from vector-im/bwindels/uidocs
more detailed docs for IView, TemplateView and ListView
2022-07-25 13:02:22 +00:00
Kaki In
0bf021ea87 The room is now joined after having actualised the rooms list, to avoid the synchronisations waits that can sometimes disable to enter the room (message "You're not into this room" or simply "You're not in this room yet. *Join the room*") 2022-07-25 13:37:03 +02:00
RMidhunSuresh
fdd60a7516 Add documentation for derived themes 2022-07-25 11:38:50 +05:30
RMidhunSuresh
63bdbee39c Make optional fields optional 2022-07-25 11:33:22 +05:30
RMidhunSuresh
8a976861fb Add type 2022-07-25 11:31:14 +05:30
Bruno Windels
a23df8a545 pass history visibility to device tracker
and delegate adding and removing members to share keys with to it
2022-07-22 17:49:59 +02:00
Bruno Windels
17f42f523a add write method for when history visibility changes
also returning added and removed user ids
2022-07-22 17:49:26 +02:00
Bruno Windels
f6011f3f34 take history visibility into account in device tracker
and return added and removed userids to their userIdentity for the given
room, so room encryption can share and discard the keys for them
2022-07-22 17:48:26 +02:00
Bruno Windels
86c0e9e669 logic for whether a key should be shared by membership and h. visibility 2022-07-22 17:46:53 +02:00
Bruno Windels
f337940202 this migration shouldn't be needed anymore
and undoes the export of addRoomToIdentity, which is somewhat internal
2022-07-22 17:46:29 +02:00
Kaki In
b7fd22c7f9 SyntaxError fixed 2022-07-22 17:10:29 +02:00
Kaki In
66a59e6f4d Error of interpretation of the 403 status at the last update. Fixed 2022-07-22 17:09:43 +02:00
Kaki In
e345d0b33e Added the 403 status when joining an unknown room 2022-07-22 17:06:09 +02:00
Kaki In
be8962cec2 Fixed priority operations when checking request status 2022-07-22 16:59:48 +02:00
Kaki In
8b39346409 The error message can now be closed 2022-07-22 16:34:52 +02:00
Kaki In
fb58d9c9ef Corrected some syntax dismiss 2022-07-22 16:08:53 +02:00
Bruno Windels
22831e710c support async callback in iterateResponseStateEvents 2022-07-22 14:15:26 +02:00
Kaki In
faa8cae532 Added the possibility to join a room using /join (also added the global commands uses, and some others commands like /shrug .) 2022-07-21 13:55:23 +02:00
RMidhunSuresh
8d766ac504 Remove await within loop 2022-07-21 12:05:10 +05:30
Bruno Windels
c8a8eb10b5 get user ids for sharing a new key when the message is sent
rather than when the key happens to get sent
2022-07-20 15:21:33 +02:00
Bruno Windels
d79e5f7806 create key share operations for invitees when history visibility=invited 2022-07-20 15:20:23 +02:00
RMidhunSuresh
7feaa479c0 Typescript update to support .mjs files 2022-07-20 15:55:11 +05:30
RMidhunSuresh
1456e308a8 Add type and fix formatting 2022-07-20 15:36:02 +05:30
RMidhunSuresh
313e65e00c Write tests 2022-07-20 12:30:41 +05:30
RMidhunSuresh
612b878793 Update theme name 2022-07-19 21:21:35 +05:30
RMidhunSuresh
8aa96e8031 Update log label 2022-07-19 21:19:22 +05:30
RMidhunSuresh
7ac2c7c7fa Get tests to work 2022-07-19 21:06:55 +05:30
RMidhunSuresh
de02456641 Add explaining comment 2022-07-19 19:46:36 +05:30
RMidhunSuresh
994667205f Remove change 2022-07-19 19:38:36 +05:30
RMidhunSuresh
ecb3a66dfc WIP 2022-07-19 17:56:08 +05:30
RMidhunSuresh
e1ee258630 Change path 2022-07-19 17:56:08 +05:30
RMidhunSuresh
83b5d3b68e Change directory name 2022-07-19 17:56:08 +05:30
RMidhunSuresh
7a1591e0ce Move code 2022-07-19 17:56:08 +05:30
RMidhunSuresh
07db5450b7 Aliases can also be derived 2022-07-19 17:56:08 +05:30
RMidhunSuresh
081de5afa8 .js --> .mjs 2022-07-19 17:56:08 +05:30
RMidhunSuresh
dece42dce3 Do not store all the manifests in memory 2022-07-19 17:56:08 +05:30
RMidhunSuresh
b29287c47e await in loop --> Promise.all() 2022-07-19 17:56:08 +05:30
RMidhunSuresh
9bdf9c500b Add return types 2022-07-19 17:56:08 +05:30
RMidhunSuresh
9e2d355573 Add logging 2022-07-19 17:56:08 +05:30
RMidhunSuresh
ce5db47708 Support using derived theme as default theme 2022-07-19 17:56:08 +05:30
RMidhunSuresh
da0a918c18 This code should only run once 2022-07-19 17:56:08 +05:30
RMidhunSuresh
043cc9f12c Use ThemeManifest type 2022-07-19 17:56:08 +05:30
RMidhunSuresh
80fb953688 Don't fail on erros; expect the code to throw! 2022-07-19 17:56:08 +05:30
RMidhunSuresh
f15e23762a Add more missing keys to type 2022-07-19 17:56:08 +05:30
RMidhunSuresh
f440457875 Use ThemeManifest type where possible 2022-07-19 17:56:08 +05:30
RMidhunSuresh
a8cab98666 Add mroe missing types 2022-07-19 17:56:08 +05:30
RMidhunSuresh
ac7be0c7a1 WIP 2022-07-19 17:56:08 +05:30
RMidhunSuresh
d731eab51c Support fetching text 2022-07-19 17:56:08 +05:30
RMidhunSuresh
f7b302d34f Don't optimzie colors 2022-07-19 17:56:08 +05:30
RMidhunSuresh
5ba74b1d75 Use script to copy over runtime theme after build 2022-07-19 17:56:08 +05:30
RMidhunSuresh
c5f4a75d4b Split code so that it can be reused 2022-07-19 17:56:08 +05:30
RMidhunSuresh
2f3db89e0a Let ts know that we can use replaceAll() 2022-07-19 17:56:08 +05:30
RMidhunSuresh
1ef382f3a9 Add gruvbox color scheme 2022-07-19 17:56:08 +05:30
RMidhunSuresh
161e29b36e Use existing code 2022-07-19 17:56:08 +05:30
RMidhunSuresh
2947f9f6ff Remove console.log 2022-07-19 17:56:08 +05:30
RMidhunSuresh
c873804543 produce asset hashed icons 2022-07-19 17:56:08 +05:30
RMidhunSuresh
43e8cc9e52 Add svgo for optimizing svgs as dev dependency 2022-07-19 17:56:08 +05:30
RMidhunSuresh
bf87ed7eae Do not add variables to root for runtime theme 2022-07-19 17:56:08 +05:30
RMidhunSuresh
8c02541b69 WIP - 1 2022-07-19 17:56:08 +05:30
RMidhunSuresh
599e519f22 Convert color code to use es6 module 2022-07-19 17:56:08 +05:30
RMidhunSuresh
d5e24bf6e8 Convert color.js to color.mjs 2022-07-19 17:56:08 +05:30
Bruno Windels
bb5711db7e
Merge pull request #802 from vector-im/fix-dev-server
Fix bug that stops hydrogen from running in dev server
2022-07-19 10:22:36 +00:00
RMidhunSuresh
88808b0b06 Fix bug preventing yarn start 2022-07-19 15:50:01 +05:30
R Midhun Suresh
c9bca52e82
Merge pull request #760 from vector-im/refactor-rollup-plugin
Refactor theme builder plugin
2022-07-11 16:54:18 +05:30
RMidhunSuresh
6718198d9c Continue with other items if this throws 2022-07-11 12:40:24 +05:30
Bruno Windels
7b9e681d55 sdk v0.0.15 2022-07-07 15:25:17 +02:00
R Midhun Suresh
8291aea2f7
Merge pull request #790 from vector-im/fix-hide-composer
Pass childOptions to LowPowerLevelViewModel
2022-07-07 18:19:08 +05:30
RMidhunSuresh
f073f40e31 Fix error 2022-07-07 18:16:33 +05:30
R Midhun Suresh
963324c767
Merge pull request #789 from vector-im/support-pl-room-creation
Support power_level_content_override option on room creation
2022-07-07 17:42:19 +05:30
R Midhun Suresh
eac75644e7
Merge pull request #788 from vector-im/pl-composer
Disable composer when user lacks powerlevel needed to send messages
2022-07-07 17:35:29 +05:30
RMidhunSuresh
0bdbb96036 Use same kind 2022-07-07 17:26:43 +05:30
RMidhunSuresh
d292e1f5ad Extract into function 2022-07-07 17:23:23 +05:30
RMidhunSuresh
cd9e00b847 Support power_level_content_override 2022-07-07 17:17:05 +05:30
RMidhunSuresh
3941b7e3f0 Rename method 2022-07-07 16:45:18 +05:30
RMidhunSuresh
efd9f70e92 WIP 2022-07-07 16:39:45 +05:30
Isaiah Becker-Mayer
204948db64 changing filename to ts 2022-07-06 21:06:36 -04:00
Will Hunt
a85d2c96d6
Log the error when we can't get storage access
This is quite useful when debugging why a session isn't working properly.
2022-07-06 10:06:00 +01:00
R Midhun Suresh
28b686dae7
Merge pull request #784 from vector-im/fix-build-race
Fix build error caused due to race in postcss plugin
2022-07-05 20:13:57 +05:30
RMidhunSuresh
dd82469ab4 Don't assume object is available 2022-07-05 20:07:48 +05:30
Bruno Windels
3bf6a46a39 release sdk 0.0.14 2022-07-05 16:02:47 +02:00
Bruno Windels
e42e76a21c
Merge pull request #782 from vector-im/image-view-fix
Do not render images as links if lightboxUrl is empty
2022-07-05 14:00:53 +00:00
RMidhunSuresh
8ec0bd7295 Check if lightbox url is available 2022-07-05 17:55:51 +05:30
Bruno Windels
ff2129f36a
Merge pull request #773 from vector-im/madlittlemods/consistent-test-selector
Add a couple consistent selectors to reference in tests
2022-07-04 14:19:09 +00:00
Bruno Windels
1aa2ff5c10
Merge pull request #781 from vector-im/bwindels/fixlint-2022-7-4
fix lint
2022-07-04 14:18:05 +00:00
Bruno Windels
34ce8a8e3c fix lint 2022-07-04 16:15:59 +02:00
Bruno Windels
652e2c6d3b
Merge pull request #780 from vector-im/bwindels/update-olm-3.2.8
update olm to 3.2.8
2022-07-04 14:15:04 +00:00
Bruno Windels
c0445f2182 update lock file 2022-07-04 15:40:17 +02:00
Bruno Windels
b76fd1d792 update olm to 3.2.8 2022-07-04 15:39:11 +02:00
R Midhun Suresh
751dfa66a8
Merge pull request #758 from vector-im/document-theming
Document theming in Hydrogen
2022-07-04 17:20:53 +05:30
RMidhunSuresh
a3c6d744f5 Add link to ts file 2022-07-04 17:18:50 +05:30
R Midhun Suresh
b9f316e7c3 Better sentence structure
Co-authored-by: Bruno Windels <274386+bwindels@users.noreply.github.com>
2022-07-04 17:16:43 +05:30
R Midhun Suresh
d448ee1722 Fix typo
Co-authored-by: Bruno Windels <274386+bwindels@users.noreply.github.com>
2022-07-04 17:16:43 +05:30
RMidhunSuresh
da87470996 Store images in source tree 2022-07-04 17:16:43 +05:30
RMidhunSuresh
b319c0acb0 Remvoe stray newlines 2022-07-04 17:16:43 +05:30
RMidhunSuresh
e90e573bf9 Add doc 2022-07-04 17:16:43 +05:30
R Midhun Suresh
a68f0bba39
Merge pull request #752 from vector-im/theme-document-manifest
Create a type for theme-manifest
2022-07-04 17:11:08 +05:30
Bruno Windels
ca94c65dac clarify LazyListView constraints 2022-07-04 10:19:56 +02:00
Bruno Windels
fba3275f5b
Merge pull request #746 from vector-im/madlittlemods/assets-path-for-assets
Import SDK assets from the `assets/` directory
2022-07-04 06:53:37 +00:00
Bruno Windels
fc93acfd8d some rewording 2022-07-01 14:09:06 +02:00
Bruno Windels
d398e490eb some rewording 2022-07-01 13:59:57 +02:00
Bruno Windels
0ab611b013 more detailed docs for IView, TemplateView and ListView 2022-07-01 13:08:50 +02:00
Bruno Windels
bb923b8eb9 bump sdk version 2022-06-30 10:54:11 +02:00
Bruno Windels
73cd96fe3a abort release script on error 2022-06-30 10:54:00 +02:00
Bruno Windels
4929839fe9 release v0.2.33 2022-06-30 10:51:11 +02:00
Eric Eastwood
c59f65e43b Add a couple consistent selectors to reference in tests
Using `data-testid` because it seems generic out of the list from:

 - https://docs.cypress.io/guides/core-concepts/cypress-app#Uniqueness
 - https://docs.cypress.io/guides/references/best-practices#How-It-Works
2022-06-29 12:56:20 +02:00
Eric Eastwood
fd3a0f0126 Merge branch 'master' into madlittlemods/assets-path-for-assets 2022-06-28 16:35:54 +02:00
Eric Eastwood
ccfd63dfeb Restore backwards compatible theme paths
See https://github.com/vector-im/hydrogen-web/pull/746#discussion_r901347536
2022-06-28 16:35:30 +02:00
Eric Eastwood
5b54280ac2
Ignore macOS metadata .DS_Store (#770) 2022-06-28 05:08:24 -05:00
Bruno Windels
bd5bf7d456
Merge pull request #761 from vector-im/hs/node-15-replaceal
Require node 15+
2022-06-25 18:22:35 +00:00
Bruno Windels
ad8ad22cc1
Merge pull request #767 from vector-im/bwindels/download-media
Menu option to download attached image or video of event
2022-06-25 18:21:17 +00:00
Bruno Windels
3369bda2f0 offer menu options to download media
also always show status (before sendStatus), not just when isPending
as we are recycling it to show download status as well
2022-06-25 20:15:33 +02:00
Bruno Windels
7430aa7aab allow download media in media view model 2022-06-25 20:14:32 +02:00
Bruno Windels
3bc453d5ca
Merge pull request #766 from vector-im/bwindels/fix-765
Also allow undefined, which means at the end of the paginated direction
2022-06-25 17:40:26 +00:00
Bruno Windels
84bac0afe9 Also allow undefined, which means at the end of the paginated direction
we already detect the end by chunk.length===0, so we just need to not throw
2022-06-25 19:37:36 +02:00
Will Hunt
9cb7d89097 Require node 15.
We use replaceAll in scripts/postcss/svg-colorizer.js which is a ES2021 feature. https://node.green/#ES2021-features--String-prototype-replaceAll
2022-06-24 13:27:09 +01:00
RMidhunSuresh
d688fa4737 Get the theme-collection id from manifest 2022-06-23 15:06:22 +05:30
RMidhunSuresh
0dfd24af22 Update info on path
path is now relative to the manifest!
2022-06-21 12:52:10 +05:30
RMidhunSuresh
34eac94da3 Make everything optional
Now typescript will force us to validate everything.
2022-06-20 21:27:02 +05:30
RMidhunSuresh
fbdd512e06 Split functions into smaller functions 2022-06-20 21:10:11 +05:30
RMidhunSuresh
5eec724712 Locations must be relative to manifest 2022-06-20 20:35:06 +05:30
RMidhunSuresh
93165cb947 runtime theme chunks should also be stored in map
There will be more than one runtime theme file when multiple theme
collections exist.
2022-06-20 13:46:14 +05:30
RMidhunSuresh
e3372f0f2b Don't use theme-name in manifest file names 2022-06-20 12:54:18 +05:30
R Midhun Suresh
5a3cf03f0b
Merge pull request #759 from vector-im/move-scope-down
Refactor out global variables in postcss plugins
2022-06-20 12:14:06 +05:30
R Midhun Suresh
c050ade03c
Merge pull request #756 from vector-im/themeing-improvement-1
Improve code quality in css-url-variables plugin
2022-06-20 11:19:47 +05:30
RMidhunSuresh
cc29dc045d Move scope down in css-url-processor 2022-06-17 16:38:13 +05:30
RMidhunSuresh
09b2437e72 Move scope of variables down in compile-variables 2022-06-17 16:35:18 +05:30
RMidhunSuresh
cfd347335b Move scope of variables down
This was causing icons to be repeated in the css-file
2022-06-16 21:29:33 +05:30
RMidhunSuresh
d322f380ad Fix typo here
This was causing the icons section to be omitted from the source section
of the manifest.
2022-06-16 21:26:16 +05:30
RMidhunSuresh
f658dc2e4b Make comment clearer 2022-06-15 15:06:16 +05:30
RMidhunSuresh
7a3eabf39c Formatting fix 2022-06-15 15:04:33 +05:30
RMidhunSuresh
48da6c782c Remove base key 2022-06-15 15:04:12 +05:30
RMidhunSuresh
b00bbc7daf Fix formatting 2022-06-15 15:03:41 +05:30
RMidhunSuresh
9fbe8a4e32 Change description of version key 2022-06-15 15:02:15 +05:30
Bruno Windels
623939c671 release v0.2.32 2022-06-15 11:29:29 +02:00
Bruno Windels
fccc41f4b9
Merge pull request #753 from vector-im/bwindels/rageshake-submit
Allow sending logs to rageshake server
2022-06-15 11:28:54 +02:00
Bruno Windels
3b66ed8c17 fix type 2022-06-15 11:24:16 +02:00
Bruno Windels
8fe8981ffa add options to send logs to server in settings ui 2022-06-15 11:14:06 +02:00
Bruno Windels
375d8b066c complete settings view model for logs ui 2022-06-15 11:13:46 +02:00
Bruno Windels
69ada73dd4 cleanup rageshake code 2022-06-15 11:13:05 +02:00
Bruno Windels
2129a97588 remove unused param 2022-06-15 11:12:49 +02:00
Bruno Windels
4caabae895 extract map -> formdata conversion and also suppor this for xhr 2022-06-15 10:15:15 +02:00
RMidhunSuresh
d0375141f8 WIP - write type for manifest 2022-06-15 12:11:15 +05:30
Bruno Windels
a644621889 basic support for sending rageshake in view model 2022-06-14 18:46:02 +02:00
RMidhunSuresh
d31f127982 Add explaining comment 2022-06-07 13:28:56 +05:30
Eric Eastwood
9d8a578dce Better comment 2022-05-31 15:35:48 -05:00
Eric Eastwood
38c3774869 Import assets from the assets/ directory
> Will be easier towards the future when adding more assets. Probably best to keep style.css for now for backwards compat though.
>
> *-- https://github.com/vector-im/hydrogen-web/pull/693#discussion_r853844282*
2022-05-31 15:30:56 -05:00
RMidhunSuresh
ba647d012d Fix type in observeNavigation 2022-05-29 20:38:14 +05:30
RMidhunSuresh
fc873757d8 WIP 2022-05-27 22:42:21 +05:30
RMidhunSuresh
ec1cc89cf9 Make URLRouter in options conditional on generic
URLRouter can be passed in option to vm only if the SegmentType used
contains session.
ViewModel.urlCreator returns undefined when used with a SegmentType that
lacks session.
2022-05-27 22:42:21 +05:30
RMidhunSuresh
a336623f3a Generic parameter should extend object 2022-05-27 22:42:21 +05:30
RMidhunSuresh
9300347e9b Give defaultt type 2022-05-27 22:42:21 +05:30
RMidhunSuresh
f49d580d49 WIP 2022-05-27 22:42:21 +05:30
RMidhunSuresh
263948faa3 Remove unwanted export 2022-05-27 22:42:21 +05:30
RMidhunSuresh
52f0690c70 Add return type 2022-05-27 22:42:21 +05:30
RMidhunSuresh
7a24059337 Remove empty line 2022-05-27 22:42:21 +05:30
RMidhunSuresh
4fd1918202 Remove comment 2022-05-27 22:42:21 +05:30
RMidhunSuresh
4ae3a5bf7a Use undefined instead of null 2022-05-27 22:42:21 +05:30
RMidhunSuresh
5be00f051f Use subtype instead of whole SegmentType 2022-05-27 22:42:21 +05:30
RMidhunSuresh
e7f4ce6175 Mark methods as private 2022-05-27 22:42:21 +05:30
RMidhunSuresh
09bc0f1b60 Extract complex type as type alias 2022-05-27 22:42:21 +05:30
RMidhunSuresh
76d04ee277 Make defaultSessionId optional 2022-05-27 22:42:21 +05:30
RMidhunSuresh
f28dfc6964 Type createRouter function 2022-05-27 22:42:21 +05:30
RMidhunSuresh
c14e4f3eed Use segment type 2022-05-27 22:42:21 +05:30
RMidhunSuresh
5d42f372f6 Pass as separate arguments to constructor 2022-05-27 22:42:21 +05:30
RMidhunSuresh
4c3e0a6ff0 Convert URLRouter.js to typescript 2022-05-27 22:42:21 +05:30
RMidhunSuresh
d9bfca10e1 Type function 2022-05-27 22:42:21 +05:30
RMidhunSuresh
bf2fb52691 Fix formatting 2022-05-27 22:42:21 +05:30
RMidhunSuresh
646cbe0fff Make all keys string 2022-05-27 22:42:21 +05:30
RMidhunSuresh
92e8fc8ad3 Remove deprecated method 2022-05-27 22:42:21 +05:30
RMidhunSuresh
92c79c853d Convert index.js to typescript 2022-05-27 22:42:21 +05:30
RMidhunSuresh
55229252d7 Type allowsChild 2022-05-27 22:42:21 +05:30
RMidhunSuresh
3efc426fed Complete converting Navigation.js to ts 2022-05-27 22:42:21 +05:30
RMidhunSuresh
04d5b9bfda WIP - 2 2022-05-27 22:42:21 +05:30
RMidhunSuresh
66f6c4aba1 WIP 2022-05-27 22:42:18 +05:30
86 changed files with 3236 additions and 754 deletions

2
.gitignore vendored
View file

@ -1,5 +1,6 @@
*.sublime-project
*.sublime-workspace
.DS_Store
node_modules
fetchlogs
sessionexports
@ -9,3 +10,4 @@ lib
*.tar.gz
.eslintcache
.tmp
tmp/

View file

@ -19,6 +19,7 @@ module.exports = {
],
rules: {
"@typescript-eslint/no-floating-promises": 2,
"@typescript-eslint/no-misused-promises": 2
"@typescript-eslint/no-misused-promises": 2,
"semi": ["error", "always"]
}
};

18
.woodpecker.yml Normal file
View file

@ -0,0 +1,18 @@
pipeline:
buildfrontend:
image: node:16
commands:
- yarn install --prefer-offline --frozen-lockfile
- yarn test
- yarn run lint-ci
- yarn run tsc
- yarn build
deploy:
image: python
when:
event: push
branch: master
commands:
- make ci-deploy
secrets: [ GITEA_WRITE_DEPLOY_KEY, LIBREPAGES_DEPLOY_SECRET ]

14
Makefile Normal file
View file

@ -0,0 +1,14 @@
ci-deploy: ## Deploy from CI/CD. Only call from within CI
@if [ "${CI}" != "woodpecker" ]; \
then echo "Only call from within CI. Will re-write your local Git configuration. To override, set export CI=woodpecker"; \
exit 1; \
fi
git config --global user.email "${CI_COMMIT_AUTHOR_EMAIL}"
git config --global user.name "${CI_COMMIT_AUTHOR}"
./scripts/ci.sh --commit-files librepages target "${CI_COMMIT_AUTHOR} <${CI_COMMIT_AUTHOR_EMAIL}>"
./scripts/ci.sh --init "$$GITEA_WRITE_DEPLOY_KEY"
./scripts/ci.sh --deploy ${LIBREPAGES_DEPLOY_SECRET} librepages
./scripts/ci.sh --clean
help: ## Prints help for targets with comments
@cat $(MAKEFILE_LIST) | grep -E '^[a-zA-Z_-]+:.*?## .*$$' | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'

11
doc/IMPORT-ISSUES.md Normal file
View file

@ -0,0 +1,11 @@
## How to import common-js dependency using ES6 syntax
---
Until [#6632](https://github.com/vitejs/vite/issues/6632) is fixed, such imports should be done as follows:
```ts
import * as pkg from "off-color";
// @ts-ignore
const offColor = pkg.offColor ?? pkg.default.offColor;
```
This way build, dev server and unit tests should all work.

View file

@ -48,8 +48,8 @@ const assetPaths = {
wasmBundle: olmJsPath
}
};
import "hydrogen-view-sdk/theme-element-light.css";
// OR import "hydrogen-view-sdk/theme-element-dark.css";
import "hydrogen-view-sdk/assets/theme-element-light.css";
// OR import "hydrogen-view-sdk/assets/theme-element-dark.css";
async function main() {
const app = document.querySelector<HTMLDivElement>('#app')!

204
doc/THEMING.md Normal file
View file

@ -0,0 +1,204 @@
# Theming Documentation
## Basic Architecture
A **theme collection** in Hydrogen is represented by a `manifest.json` file and a `theme.css` file.
The manifest specifies variants (eg: dark,light ...) each of which is a **theme** and maps to a single css file in the build output.
Each such theme is produced by changing the values of variables in the base `theme.css` file with those specified in the variant section of the manifest:
![](images/theming-architecture.png)
More in depth explanations can be found in later sections.
## Structure of `manifest.json`
[See theme.ts](../src/platform/types/theme.ts)
## Variables
CSS variables specific to a particular variant are specified in the `variants` section of the manifest:
```json=
"variants": {
"light": {
...
"variables": {
"background-color-primary": "#fff",
"text-color": "#2E2F32",
}
},
"dark": {
...
"variables": {
"background-color-primary": "#21262b",
"text-color": "#fff",
}
}
}
```
These variables will appear in the css file (theme.css):
```css=
body {
background-color: var(--background-color-primary);
color: var(--text-color);
}
```
During the build process, this would result in the creation of two css files (one for each variant) where the variables are substitued with the corresponding values specified in the manifest:
*element-light.css*:
```css=
body {
background-color: #fff;
color: #2E2F32;
}
```
*element-dark.css*:
```css=
body {
background-color: #21262b;
color: #fff;
}
```
## Derived Variables
In addition to simple substitution of variables in the stylesheet, it is also possible to instruct the build system to first produce a new value from the base variable value before the substitution.
Such derived variables have the form `base_css_variable--operation-arg` and can be read as:
apply `operation` to `base_css_variable` with argument `arg`.
Continuing with the previous example, it possible to specify:
```css=
.left-panel {
/* background color should be 20% more darker
than background-color-primary */
background-color: var(--background-color-primary--darker-20);
}
```
Currently supported operations are:
| Operation | Argument | Operates On |
| -------- | -------- | -------- |
| darker | percentage | color |
| lighter | percentage | color |
## Aliases
It is possible give aliases to variables in the `theme.css` file:
```css=
:root {
font-size: 10px;
/* Theme aliases */
--icon-color: var(--background-color-secondary--darker-40);
}
```
It is possible to further derive from these aliased variables:
```css=
div {
background: var(--icon-color--darker-20);
--my-alias: var(--icon-color--darker-20);
/* Derive from aliased variable */
color: var(--my-alias--lighter-15);
}
```
## Colorizing svgs
Along with a change in color-scheme, it may be necessary to change the colors in the svg icons and images.
This can be done by supplying the preferred colors with query parameters:
`my-awesome-logo.svg?primary=base-variable-1&secondary=base-variable-2`
This instructs the build system to colorize the svg with the given primary and secondary colors.
`base-variable-1` and `base-variable-2` are the css-variables specified in the `variables` section of the manifest.
For colorizing svgs, the source svg must use `#ff00ff` as the primary color and `#00ffff` as the secondary color:
| ![](images/svg-icon-example.png) | ![](images/coloring-process.png) |
| :--: |:--: |
| **original source image** | **transformation process** |
## Creating your own theme variant in Hydrogen
If you're looking to change the color-scheme of the existing Element theme, you only need to add your own variant to the existing `manifest.json`.
The steps are fairly simple:
1. Copy over an existing variant to the variants section of the manifest.
2. Change `dark`, `default` and `name` fields.
3. Give new values to each variable in the `variables` section.
4. Build hydrogen.
## Creating your own theme collection in Hydrogen
If a theme variant does not solve your needs, you can create a new theme collection with a different base `theme.css` file.
1. Create a directory for your new theme-collection under `src/platform/web/ui/css/themes/`.
2. Create `manifest.json` and `theme.css` files within the newly created directory.
3. Populate `manifest.json` with the base css variables you wish to use.
4. Write styles in your `theme.css` file using the base variables, derived variables and colorized svg icons.
5. Tell the build system where to find this theme-collection by providing the location of this directory to the `themeBuilder` plugin in `vite.config.js`:
```json=
...
themeBuilder({
themeConfig: {
themes: {
element: "./src/platform/web/ui/css/themes/element",
awesome: "path/to/theme-directory"
},
default: "element",
},
compiledVariables,
}),
...
```
6. Build Hydrogen.
## Changing the default theme
To change the default theme used in Hydrogen, modify the `defaultTheme` field in `config.json` file (which can be found in the build output):
```json=
"defaultTheme": {
"light": theme-id,
"dark": theme-id
}
```
Here *theme-id* is of the form `theme-variant` where `theme` is the key used when specifying the manifest location of the theme collection in `vite.config.js` and `variant` is the key used in variants section of the manifest.
Some examples of theme-ids are `element-dark` and `element-light`.
To find the theme-id of some theme, you can look at the built-asset section of the manifest in the build output.
This default theme will render as "Default" option in the theme-chooser dropdown. If the device preference is for dark theme, the dark default is selected and vice versa.
**You'll need to reload twice so that Hydrogen picks up the config changes!**
# Derived Theme(Collection)
This allows users to theme Hydrogen without the need for rebuilding. Derived theme collections can be thought of as extensions (derivations) of some existing build time theme.
## Creating a derived theme:
Here's how you create a new derived theme:
1. You create a new theme manifest file (eg: theme-awesome.json) and mention which build time theme you're basing your new theme on using the `extends` field. The base css file of the mentioned theme is used for your new theme.
2. You configure the theme manifest as usual by populating the `variants` field with your desired colors.
3. You add your new theme manifest to the list of themes in `config.json`.
Refresh Hydrogen twice (once to refresh cache, and once to load) and the new theme should show up in the theme chooser.
## How does it work?
For every theme collection in hydrogen, the build process emits a runtime css file which like the built theme css file contains variables in the css code. But unlike the theme css file, the runtime css file lacks the definition for these variables:
CSS for the built theme:
```css
:root {
--background-color-primary: #f2f20f;
}
body {
background-color: var(--background-color-primary);
}
```
and the corresponding runtime theme:
```css
/* Notice the lack of definiton for --background-color-primary here! */
body {
background-color: var(--background-color-primary);
}
```
When hydrogen loads a derived theme, it takes the runtime css file of the extended theme and dynamically adds the variable definition based on the values specified in the manifest. Icons are also colored dynamically and injected as variables using Data URIs.

206
doc/UI/ui.md Normal file
View file

@ -0,0 +1,206 @@
## IView components
The [interface](https://github.com/vector-im/hydrogen-web/blob/master/src/platform/web/ui/general/types.ts) adopted by view components is agnostic of how they are rendered to the DOM. This has several benefits:
- it allows Hydrogen to not ship a [heavy view framework](https://bundlephobia.com/package/react-dom@18.2.0) that may or may not be used by its SDK users, and also keep bundle size of the app down.
- Given the interface is quite simple, is should be easy to integrate this interface into the render lifecycle of other frameworks.
- The main implementations used in Hydrogen are [`ListView`](https://github.com/vector-im/hydrogen-web/blob/master/src/platform/web/ui/general/ListView.ts) (rendering [`ObservableList`](https://github.com/vector-im/hydrogen-web/blob/master/src/observable/list/BaseObservableList.ts)s) and [`TemplateView`](https://github.com/vector-im/hydrogen-web/blob/master/src/platform/web/ui/general/TemplateView.ts) (templating and one-way databinding), each only a few 100 lines of code and tailored towards their specific use-case. They work straight with the DOM API and have no other dependencies.
- a common inteface allows us to mix and match between these different implementations (and gradually shift if need be in the future) with the code.
## Templates
### Template language
Templates use a mini-DSL language in pure javascript to express declarative templates. This is basically a very thin wrapper around `document.createElement`, `document.createTextNode`, `node.setAttribute` and `node.appendChild` to quickly create DOM trees. The general syntax is as follows:
```js
t.tag_name({attribute1: value, attribute2: value, ...}, [child_elements]);
t.tag_name(child_element);
t.tag_name([child_elements]);
```
**tag_name** can be [most HTML or SVG tags](https://github.com/vector-im/hydrogen-web/blob/master/src/platform/web/ui/general/html.ts#L102-L110).
eg:
Here is an example HTML segment followed with the code to create it in Hydrogen.
```html
<section class="main-section">
<h1>Demo</h1>
<button class="btn_cool">Click me</button>
</section>
```
```js
t.section({className: "main-section"},[
t.h1("Demo"),
t.button({className:"btn_cool"}, "Click me")
]);
```
All these functions return DOM element nodes, e.g. the result of `document.createElement`.
### TemplateView
`TemplateView` builds on top of templating by adopting the IView component model and adding event handling attributes, sub views and one-way databinding.
In views based on `TemplateView`, you will see a render method with a `t` argument.
`t` is `TemplateBuilder` object passed to the render function in `TemplateView`. It also takes a data object to render and bind to, often called `vm`, short for view model from the MVVM pattern Hydrogen uses.
You either subclass `TemplateView` and override the `render` method:
```js
class MyView extends TemplateView {
render(t, vm) {
return t.div(...);
}
}
```
Or you pass a render function to `InlineTemplateView`:
```js
new InlineTemplateView(vm, (t, vm) => {
return t.div(...);
});
```
**Note:** the render function is only called once to build the initial DOM tree and setup bindings, etc ... Any subsequent updates to the DOM of a component happens through bindings.
#### Event handlers
Any attribute starting with `on` and having a function as a value will be attached as an event listener on the given node. The event handler will be removed during unmounting.
```js
t.button({onClick: evt => {
vm.doSomething(evt.target.value);
}}, "Click me");
```
#### Subviews
`t.view(instance)` will mount the sub view (can be any IView) and return its root node so it can be attached in the DOM tree.
All subviews will be unmounted when the parent view gets unmounted.
```js
t.div({className: "Container"}, t.view(new ChildView(vm.childViewModel)));
```
#### One-way data-binding
A binding couples a part of the DOM to a value on the view model. The view model emits an update when any of its properties change, to which the view can subscribe. When an update is received by the view, it will reevaluate all the bindings, and update the DOM accordingly.
A binding can appear in many places where a static value can usually be used in the template tree.
To create a binding, you pass a function that maps the view value to a static value.
##### Text binding
```js
t.p(["I've got ", vm => vm.counter, " beans"])
```
##### Attribute binding
```js
t.button({disabled: vm => vm.isBusy}, "Submit");
```
##### Class-name binding
```js
t.div({className: {
button: true,
active: vm => vm.isActive
}})
```
##### Subview binding
So far, all the bindings can only change node values within our tree, but don't change the structure of the DOM. A sub view binding allows you to conditionally add a subview based on the result of a binding function.
All sub view bindings return a DOM (element or comment) node and can be directly added to the DOM tree by including them in your template.
###### map
`t.mapView` allows you to choose a view based on the result of the binding function:
```js
t.mapView(vm => vm.count, count => {
return count > 5 ? new LargeView(count) : new SmallView(count);
});
```
Every time the first or binding function returns a different value, the second function is run to create a new view to replace the previous view.
You can also return `null` or `undefined` from the second function to indicate a view should not be rendered. In this case a comment node will be used as a placeholder.
There is also a `t.map` which will create a new template view (with the same value) and you directly provide a render function for it:
```js
t.map(vm => vm.shape, (shape, t, vm) => {
switch (shape) {
case "rect": return t.rect();
case "circle": return t.circle();
}
})
```
###### if
`t.ifView` will render the subview if the binding returns a truthy value:
```js
t.ifView(vm => vm.isActive, vm => new View(vm.someValue));
```
You equally have `t.if`, which creates a `TemplateView` and passes you the `TemplateBuilder`:
```js
t.if(vm => vm.isActive, (t, vm) => t.div("active!"));
```
##### Side-effects
Sometimes you want to imperatively modify your DOM tree based on the value of a binding.
`mapSideEffect` makes this easy to do:
```js
let node = t.div();
t.mapSideEffect(vm => vm.color, (color, oldColor) => node.style.background = color);
return node;
```
**Note:** you shouldn't add any bindings, subviews or event handlers from the side-effect callback,
the safest is to not use the `t` argument at all.
If you do, they will be added every time the callback is run and only cleaned up when the view is unmounted.
#### `tag` vs `t`
If you don't need a view component with data-binding, sub views and event handler attributes, the template language also is available in `ui/general/html.js` without any of these bells and whistles, exported as `tag`. As opposed to static templates with `tag`, you always use
`TemplateView` as an instance of a class, as there is some extra state to keep track (bindings, event handlers and subviews).
Although syntactically similar, `TemplateBuilder` and `tag` are not functionally equivalent.
Primarily `t` **supports** bindings and event handlers while `tag` **does not**. This is because to remove event listeners, we need to keep track of them, and thus we need to keep this state somewhere which
we can't do with a simple function call but we can insite the TemplateView class.
```js
// The onClick here wont work!!
tag.button({className:"awesome-btn", onClick: () => this.foo()});
class MyView extends TemplateView {
render(t, vm){
// The onClick works here.
t.button({className:"awesome-btn", onClick: () => this.foo()});
}
}
```
## ListView
A view component that renders and updates a list of sub views for every item in a `ObservableList`.
```js
const list = new ListView({
list: someObservableList
}, listValue => return new ChildView(listValue))
```
As items are added, removed, moved (change position) and updated, the DOM will be kept in sync.
There is also a `LazyListView` that only renders items in and around the current viewport, with the restriction that all items in the list must be rendered with the same height.
### Sub view updates
Unless the `parentProvidesUpdates` option in the constructor is set to `false`, the ListView will call the `update` method on the child `IView` component when it receives an update event for one of the items in the `ObservableList`.
This way, not every sub view has to have an individual listener on it's view model (a value from the observable list), and all updates go from the observable list to the list view, who then notifies the correct sub view.

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

View file

@ -1,10 +1,13 @@
{
"name": "hydrogen-web",
"version": "0.2.31",
"version": "0.3.1",
"description": "A javascript matrix client prototype, trying to minize RAM usage by offloading as much as possible to IndexedDB",
"directories": {
"doc": "doc"
},
"enginesStrict": {
"node": ">=15"
},
"scripts": {
"lint": "eslint --cache src/",
"lint-ts": "eslint src/ -c .ts-eslintrc.js --ext .ts",
@ -47,13 +50,14 @@
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-value-parser": "^4.2.0",
"regenerator-runtime": "^0.13.7",
"svgo": "^2.8.0",
"text-encoding": "^0.7.0",
"typescript": "^4.3.5",
"typescript": "^4.7.0",
"vite": "^2.9.8",
"xxhashjs": "^0.2.2"
},
"dependencies": {
"@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz",
"@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
"another-json": "^0.2.0",
"base64-arraybuffer": "^0.2.0",
"dompurify": "^2.3.0",

View file

@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
const path = require('path').posix;
const {optimize} = require('svgo');
async function readCSSSource(location) {
const fs = require("fs").promises;
const path = require("path");
const resolvedLocation = path.resolve(__dirname, "../../", `${location}/theme.css`);
const data = await fs.readFile(resolvedLocation);
return data;
@ -43,29 +43,54 @@ function addThemesToConfig(bundle, manifestLocations, defaultThemes) {
}
}
function parseBundle(bundle) {
/**
* Returns an object where keys are the svg file names and the values
* are the svg code (optimized)
* @param {*} icons Object where keys are css variable names and values are locations of the svg
* @param {*} manifestLocation Location of manifest used for resolving path
*/
async function generateIconSourceMap(icons, manifestLocation) {
const sources = {};
const fileNames = [];
const promises = [];
const fs = require("fs").promises;
for (const icon of Object.values(icons)) {
const [location] = icon.split("?");
// resolve location against manifestLocation
const resolvedLocation = path.resolve(manifestLocation, location);
const iconData = fs.readFile(resolvedLocation);
promises.push(iconData);
const fileName = path.basename(resolvedLocation);
fileNames.push(fileName);
}
const results = await Promise.all(promises);
for (let i = 0; i < results.length; ++i) {
const svgString = results[i].toString();
const result = optimize(svgString, {
plugins: [
{
name: "preset-default",
params: {
overrides: { convertColors: false, },
},
},
],
});
const optimizedSvgString = result.data;
sources[fileNames[i]] = optimizedSvgString;
}
return sources;
}
/**
* Returns a mapping from location (of manifest file) to an array containing all the chunks (of css files) generated from that location.
* To understand what chunk means in this context, see https://rollupjs.org/guide/en/#generatebundle.
* @param {*} bundle Mapping from fileName to AssetInfo | ChunkInfo
*/
function getMappingFromLocationToChunkArray(bundle) {
const chunkMap = new Map();
const assetMap = new Map();
let runtimeThemeChunk;
for (const [fileName, info] of Object.entries(bundle)) {
if (!fileName.endsWith(".css")) {
continue;
}
if (info.type === "asset") {
/**
* So this is the css assetInfo that contains the asset hashed file name.
* We'll store it in a separate map indexed via fileName (unhashed) to avoid
* searching through the bundle array later.
*/
assetMap.set(info.name, info);
continue;
}
if (info.facadeModuleId?.includes("type=runtime")) {
/**
* We have a separate field in manifest.source just for the runtime theme,
* so store this separately.
*/
runtimeThemeChunk = info;
if (!fileName.endsWith(".css") || info.type === "asset" || info.facadeModuleId?.includes("type=runtime")) {
continue;
}
const location = info.facadeModuleId?.match(/(.+)\/.+\.css/)?.[1];
@ -80,7 +105,56 @@ function parseBundle(bundle) {
array.push(info);
}
}
return { chunkMap, assetMap, runtimeThemeChunk };
return chunkMap;
}
/**
* Returns a mapping from unhashed file name (of css files) to AssetInfo.
* To understand what AssetInfo means in this context, see https://rollupjs.org/guide/en/#generatebundle.
* @param {*} bundle Mapping from fileName to AssetInfo | ChunkInfo
*/
function getMappingFromFileNameToAssetInfo(bundle) {
const assetMap = new Map();
for (const [fileName, info] of Object.entries(bundle)) {
if (!fileName.endsWith(".css")) {
continue;
}
if (info.type === "asset") {
/**
* So this is the css assetInfo that contains the asset hashed file name.
* We'll store it in a separate map indexed via fileName (unhashed) to avoid
* searching through the bundle array later.
*/
assetMap.set(info.name, info);
}
}
return assetMap;
}
/**
* Returns a mapping from location (of manifest file) to ChunkInfo of the runtime css asset
* To understand what ChunkInfo means in this context, see https://rollupjs.org/guide/en/#generatebundle.
* @param {*} bundle Mapping from fileName to AssetInfo | ChunkInfo
*/
function getMappingFromLocationToRuntimeChunk(bundle) {
let runtimeThemeChunkMap = new Map();
for (const [fileName, info] of Object.entries(bundle)) {
if (!fileName.endsWith(".css") || info.type === "asset") {
continue;
}
const location = info.facadeModuleId?.match(/(.+)\/.+\.css/)?.[1];
if (!location) {
throw new Error("Cannot find location of css chunk!");
}
if (info.facadeModuleId?.includes("type=runtime")) {
/**
* We have a separate field in manifest.source just for the runtime theme,
* so store this separately.
*/
runtimeThemeChunkMap.set(location, info);
}
}
return runtimeThemeChunkMap;
}
module.exports = function buildThemes(options) {
@ -88,6 +162,7 @@ module.exports = function buildThemes(options) {
let isDevelopment = false;
const virtualModuleId = '@theme/'
const resolvedVirtualModuleId = '\0' + virtualModuleId;
const themeToManifestLocation = new Map();
return {
name: "build-themes",
@ -100,37 +175,34 @@ module.exports = function buildThemes(options) {
},
async buildStart() {
if (isDevelopment) { return; }
const { themeConfig } = options;
for (const [name, location] of Object.entries(themeConfig.themes)) {
for (const location of themeConfig.themes) {
manifest = require(`${location}/manifest.json`);
const themeCollectionId = manifest.id;
themeToManifestLocation.set(themeCollectionId, location);
variants = manifest.values.variants;
for (const [variant, details] of Object.entries(variants)) {
const fileName = `theme-${name}-${variant}.css`;
if (name === themeConfig.default && details.default) {
const fileName = `theme-${themeCollectionId}-${variant}.css`;
if (themeCollectionId === themeConfig.default && details.default) {
// This is the default theme, stash the file name for later
if (details.dark) {
defaultDark = fileName;
defaultThemes["dark"] = `${name}-${variant}`;
defaultThemes["dark"] = `${themeCollectionId}-${variant}`;
}
else {
defaultLight = fileName;
defaultThemes["light"] = `${name}-${variant}`;
defaultThemes["light"] = `${themeCollectionId}-${variant}`;
}
}
// emit the css as built theme bundle
this.emitFile({
type: "chunk",
id: `${location}/theme.css?variant=${variant}${details.dark? "&dark=true": ""}`,
fileName,
});
if (!isDevelopment) {
this.emitFile({ type: "chunk", id: `${location}/theme.css?variant=${variant}${details.dark ? "&dark=true" : ""}`, fileName, });
}
}
// emit the css as runtime theme bundle
this.emitFile({
type: "chunk",
id: `${location}/theme.css?type=runtime`,
fileName: `theme-${name}-runtime.css`,
});
if (!isDevelopment) {
this.emitFile({ type: "chunk", id: `${location}/theme.css?type=runtime`, fileName: `theme-${themeCollectionId}-runtime.css`, });
}
}
},
@ -152,7 +224,7 @@ module.exports = function buildThemes(options) {
if (theme === "default") {
theme = options.themeConfig.default;
}
const location = options.themeConfig.themes[theme];
const location = themeToManifestLocation.get(theme);
const manifest = require(`${location}/manifest.json`);
const variants = manifest.values.variants;
if (!variant || variant === "default") {
@ -245,30 +317,53 @@ module.exports = function buildThemes(options) {
];
},
generateBundle(_, bundle) {
// assetMap: Mapping from asset-name (eg: element-dark.css) to AssetInfo
// chunkMap: Mapping from theme-location (eg: hydrogen-web/src/.../css/themes/element) to a list of ChunkInfo
// types of AssetInfo and ChunkInfo can be found at https://rollupjs.org/guide/en/#generatebundle
const { assetMap, chunkMap, runtimeThemeChunk } = parseBundle(bundle);
async generateBundle(_, bundle) {
const assetMap = getMappingFromFileNameToAssetInfo(bundle);
const chunkMap = getMappingFromLocationToChunkArray(bundle);
const runtimeThemeChunkMap = getMappingFromLocationToRuntimeChunk(bundle);
const manifestLocations = [];
// Location of the directory containing manifest relative to the root of the build output
const manifestLocation = "assets";
for (const [location, chunkArray] of chunkMap) {
const manifest = require(`${location}/manifest.json`);
const compiledVariables = options.compiledVariables.get(location);
const derivedVariables = compiledVariables["derived-variables"];
const icon = compiledVariables["icon"];
const builtAssets = {};
let themeKey;
for (const chunk of chunkArray) {
const [, name, variant] = chunk.fileName.match(/theme-(.+)-(.+)\.css/);
builtAssets[`${name}-${variant}`] = assetMap.get(chunk.fileName).fileName;
themeKey = name;
const locationRelativeToBuildRoot = assetMap.get(chunk.fileName).fileName;
const locationRelativeToManifest = path.relative(manifestLocation, locationRelativeToBuildRoot);
builtAssets[`${name}-${variant}`] = locationRelativeToManifest;
}
// Emit the base svg icons as asset
const nameToAssetHashedLocation = [];
const nameToSource = await generateIconSourceMap(icon, location);
for (const [name, source] of Object.entries(nameToSource)) {
const ref = this.emitFile({ type: "asset", name, source });
const assetHashedName = this.getFileName(ref);
nameToAssetHashedLocation[name] = assetHashedName;
}
// Update icon section in output manifest with paths to the icon in build output
for (const [variable, location] of Object.entries(icon)) {
const [locationWithoutQueryParameters, queryParameters] = location.split("?");
const name = path.basename(locationWithoutQueryParameters);
const locationRelativeToBuildRoot = nameToAssetHashedLocation[name];
const locationRelativeToManifest = path.relative(manifestLocation, locationRelativeToBuildRoot);
icon[variable] = `${locationRelativeToManifest}?${queryParameters}`;
}
const runtimeThemeChunk = runtimeThemeChunkMap.get(location);
const runtimeAssetLocation = path.relative(manifestLocation, assetMap.get(runtimeThemeChunk.fileName).fileName);
manifest.source = {
"built-assets": builtAssets,
"runtime-asset": assetMap.get(runtimeThemeChunk.fileName).fileName,
"runtime-asset": runtimeAssetLocation,
"derived-variables": derivedVariables,
"icon": icon
"icon": icon,
};
const name = `theme-${manifest.name}.json`;
manifestLocations.push(`assets/${name}`);
const name = `theme-${themeKey}.json`;
manifestLocations.push(`${manifestLocation}/${name}`);
this.emitFile({
type: "asset",
name,

165
scripts/ci.sh Executable file
View file

@ -0,0 +1,165 @@
#!/bin/bash
# ci.sh: Helper script to automate deployment operations on CI/CD
# Copyright © 2022 Aravinth Manivannan <realaravinth@batsense.net>
#
# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU Affero General Public License as
# published by the Free Software Foundation, either version 3 of the
# License, or (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU Affero General Public License for more details.
#
# You should have received a copy of the GNU Affero General Public License
# along with this program. If not, see <http://www.gnu.org/licenses/>.
set -xEeuo pipefail
#source $(pwd)/scripts/lib.sh
readonly SSH_ID_FILE=/tmp/ci-ssh-id
readonly SSH_REMOTE_NAME=origin-ssh
readonly PROJECT_ROOT=$(pwd)
match_arg() {
if [ $1 == $2 ] || [ $1 == $3 ]
then
return 0
else
return 1
fi
}
help() {
cat << EOF
USAGE: ci.sh [SUBCOMMAND]
Helper script to automate deployment operations on CI/CD
Subcommands
-c --clean cleanup secrets, SSH key and other runtime data
-i --init <SSH_PRIVATE_KEY> initialize environment, write SSH private to file
-d --deploy <PAGES-SECRET> <TARGET BRANCH> push branch to Gitea and call Pages server
-h --help print this help menu
EOF
}
# $1: SSH private key
write_ssh(){
truncate --size 0 $SSH_ID_FILE
echo "$1" > $SSH_ID_FILE
chmod 600 $SSH_ID_FILE
}
set_ssh_remote() {
http_remote_url=$(git remote get-url origin)
remote_hostname=$(echo $http_remote_url | cut -d '/' -f 3)
repository_owner=$(echo $http_remote_url | cut -d '/' -f 4)
repository_name=$(echo $http_remote_url | cut -d '/' -f 5)
ssh_remote="git@$remote_hostname:$repository_owner/$repository_name"
ssh_remote="git@git.batsense.net:mystiq/hydrogen-web.git"
git remote add $SSH_REMOTE_NAME $ssh_remote
}
clean() {
if [ -f $SSH_ID_FILE ]
then
shred $SSH_ID_FILE
rm $SSH_ID_FILE
fi
}
# $1: branch name
# $2: directory containing build assets
# $3: Author in <author-name author@example.com> format
commit_files() {
cd $PROJECT_ROOT
original_branch=$(git branch --show-current)
tmp_dir=$(mktemp -d)
cp -r $2/* $tmp_dir
if [[ -z $(git ls-remote --heads origin ${1}) ]]
then
echo "[*] Creating deployment branch $1"
git checkout --orphan $1
else
echo "[*] Deployment branch $1 exists, pulling changes from remote"
git fetch origin $1
git switch $1
fi
git rm -rf .
/bin/rm -rf *
cp -r $tmp_dir/* .
git add --all
if [ $(git status --porcelain | xargs | sed '/^$/d' | wc -l) -gt 0 ];
then
echo "[*] Repository has changed, committing changes"
git commit \
--author="$3" \
--message="new deploy: $(date --iso-8601=seconds)"
fi
git checkout $original_branch
}
# $1: Pages API secret
# $2: Deployment target branch
deploy() {
if (( "$#" < 2 ))
then
help
else
git -c core.sshCommand="/usr/bin/ssh -oStrictHostKeyChecking=no -i $SSH_ID_FILE"\
push --force $SSH_REMOTE_NAME $2
curl -vv --location --request \
POST "https://deploy.batsense.net/api/v1/update"\
--header 'Content-Type: application/json' \
--data-raw "{ \"secret\": \"$1\", \"branch\": \"$2\" }"
fi
}
if (( "$#" < 1 ))
then
help
exit -1
fi
if match_arg $1 '-i' '--init'
then
if (( "$#" < 2 ))
then
help
exit -1
fi
set_ssh_remote
write_ssh "$2"
elif match_arg $1 '-c' '--clean'
then
clean
elif match_arg $1 '-cf' '--commit-files'
then
if (( "$#" < 4 ))
then
help
exit -1
fi
commit_files $2 $3 $4
elif match_arg $1 '-d' '--deploy'
then
if (( "$#" < 3 ))
then
help
exit -1
fi
deploy $2 $3
elif match_arg $1 '-h' '--help'
then
help
else
help
fi

View file

@ -30,12 +30,7 @@ const valueParser = require("postcss-value-parser");
* The actual derivation is done outside the plugin in a callback.
*/
let aliasMap;
let resolvedMap;
let baseVariables;
let isDark;
function getValueFromAlias(alias) {
function getValueFromAlias(alias, {aliasMap, baseVariables, resolvedMap}) {
const derivedVariable = aliasMap.get(alias);
return baseVariables.get(derivedVariable) ?? resolvedMap.get(derivedVariable);
}
@ -68,14 +63,15 @@ function parseDeclarationValue(value) {
return variables;
}
function resolveDerivedVariable(decl, derive) {
function resolveDerivedVariable(decl, derive, maps, isDark) {
const { baseVariables, resolvedMap } = maps;
const RE_VARIABLE_VALUE = /(?:--)?((.+)--(.+)-(.+))/;
const variableCollection = parseDeclarationValue(decl.value);
for (const variable of variableCollection) {
const matches = variable.match(RE_VARIABLE_VALUE);
if (matches) {
const [, wholeVariable, baseVariable, operation, argument] = matches;
const value = baseVariables.get(baseVariable) ?? getValueFromAlias(baseVariable);
const value = baseVariables.get(baseVariable) ?? getValueFromAlias(baseVariable, maps);
if (!value) {
throw new Error(`Cannot derive from ${baseVariable} because it is neither defined in config nor is it an alias!`);
}
@ -85,7 +81,7 @@ function resolveDerivedVariable(decl, derive) {
}
}
function extract(decl) {
function extract(decl, {aliasMap, baseVariables}) {
if (decl.variable) {
// see if right side is of form "var(--foo)"
const wholeVariable = decl.value.match(/var\(--(.+)\)/)?.[1];
@ -100,7 +96,7 @@ function extract(decl) {
}
}
function addResolvedVariablesToRootSelector(root, {Rule, Declaration}) {
function addResolvedVariablesToRootSelector(root, {Rule, Declaration}, {resolvedMap}) {
const newRule = new Rule({ selector: ":root", source: root.source });
// Add derived css variables to :root
resolvedMap.forEach((value, key) => {
@ -110,13 +106,20 @@ function addResolvedVariablesToRootSelector(root, {Rule, Declaration}) {
root.append(newRule);
}
function populateMapWithDerivedVariables(map, cssFileLocation) {
function populateMapWithDerivedVariables(map, cssFileLocation, {resolvedMap, aliasMap}) {
const location = cssFileLocation.match(/(.+)\/.+\.css/)?.[1];
const derivedVariables = [
...([...resolvedMap.keys()].filter(v => !aliasMap.has(v))),
...([...aliasMap.entries()].map(([alias, variable]) => `${alias}=${variable}`))
];
map.set(location, { "derived-variables": derivedVariables });
const sharedObject = map.get(location);
const output = { "derived-variables": derivedVariables };
if (sharedObject) {
Object.assign(sharedObject, output);
}
else {
map.set(location, output);
}
}
/**
@ -133,10 +136,10 @@ function populateMapWithDerivedVariables(map, cssFileLocation) {
* @param {Map} opts.compiledVariables - A map that stores derived variables so that manifest source sections can be produced
*/
module.exports = (opts = {}) => {
aliasMap = new Map();
resolvedMap = new Map();
baseVariables = new Map();
isDark = false;
const aliasMap = new Map();
const resolvedMap = new Map();
const baseVariables = new Map();
const maps = { aliasMap, resolvedMap, baseVariables };
return {
postcssPlugin: "postcss-compile-variables",
@ -147,16 +150,16 @@ module.exports = (opts = {}) => {
// If this is a runtime theme, don't derive variables.
return;
}
isDark = cssFileLocation.includes("dark=true");
const isDark = cssFileLocation.includes("dark=true");
/*
Go through the CSS file once to extract all aliases and base variables.
We use these when resolving derived variables later.
*/
root.walkDecls(decl => extract(decl));
root.walkDecls(decl => resolveDerivedVariable(decl, opts.derive));
addResolvedVariablesToRootSelector(root, {Rule, Declaration});
root.walkDecls(decl => extract(decl, maps));
root.walkDecls(decl => resolveDerivedVariable(decl, opts.derive, maps, isDark));
addResolvedVariablesToRootSelector(root, {Rule, Declaration}, maps);
if (opts.compiledVariables){
populateMapWithDerivedVariables(opts.compiledVariables, cssFileLocation);
populateMapWithDerivedVariables(opts.compiledVariables, cssFileLocation, maps);
}
// Also produce a mapping from alias to completely resolved color
const resolvedAliasMap = new Map();

View file

@ -16,7 +16,6 @@ limitations under the License.
const valueParser = require("postcss-value-parser");
const resolve = require("path").resolve;
let cssPath;
function colorsFromURL(url, colorMap) {
const params = new URL(`file://${url}`).searchParams;
@ -36,7 +35,7 @@ function colorsFromURL(url, colorMap) {
return [primaryColor, secondaryColor];
}
function processURL(decl, replacer, colorMap) {
function processURL(decl, replacer, colorMap, cssPath) {
const value = decl.value;
const parsed = valueParser(value);
parsed.walk(node => {
@ -84,8 +83,8 @@ module.exports = (opts = {}) => {
Go through each declaration and if it contains an URL, replace the url with the result
of running replacer(url)
*/
cssPath = root.source?.input.file.replace(/[^/]*$/, "");
root.walkDecls(decl => processURL(decl, opts.replacer, colorMap));
const cssPath = root.source?.input.file.replace(/[^/]*$/, "");
root.walkDecls(decl => processURL(decl, opts.replacer, colorMap, cssPath));
},
};
};

View file

@ -20,11 +20,9 @@ const valueParser = require("postcss-value-parser");
* This plugin extracts content inside url() into css variables and adds the variables to the root section.
* This plugin is used in conjunction with css-url-processor plugin to colorize svg icons.
*/
let counter;
let urlVariables;
const idToPrepend = "icon-url";
function findAndReplaceUrl(decl) {
function findAndReplaceUrl(decl, urlVariables, counter) {
const value = decl.value;
const parsed = valueParser(value);
parsed.walk(node => {
@ -35,7 +33,8 @@ function findAndReplaceUrl(decl) {
if (!url.match(/\.svg\?primary=.+/)) {
return;
}
const variableName = `${idToPrepend}-${counter++}`;
const count = counter.next().value;
const variableName = `${idToPrepend}-${count}`;
urlVariables.set(variableName, url);
node.value = "var";
node.nodes = [{ type: "word", value: `--${variableName}` }];
@ -43,7 +42,7 @@ function findAndReplaceUrl(decl) {
decl.assign({prop: decl.prop, value: parsed.toString()})
}
function addResolvedVariablesToRootSelector(root, { Rule, Declaration }) {
function addResolvedVariablesToRootSelector(root, { Rule, Declaration }, urlVariables) {
const newRule = new Rule({ selector: ":root", source: root.source });
// Add derived css variables to :root
urlVariables.forEach((value, key) => {
@ -53,29 +52,42 @@ function addResolvedVariablesToRootSelector(root, { Rule, Declaration }) {
root.append(newRule);
}
function populateMapWithIcons(map, cssFileLocation) {
function populateMapWithIcons(map, cssFileLocation, urlVariables) {
const location = cssFileLocation.match(/(.+)\/.+\.css/)?.[1];
const sharedObject = map.get(location);
sharedObject["icon"] = Object.fromEntries(urlVariables);
const output = {"icon": Object.fromEntries(urlVariables)};
if (sharedObject) {
Object.assign(sharedObject, output);
}
else {
map.set(location, output);
}
}
function *createCounter() {
for (let i = 0; ; ++i) {
yield i;
}
}
/* *
* @type {import('postcss').PluginCreator}
*/
module.exports = (opts = {}) => {
urlVariables = new Map();
counter = 0;
return {
postcssPlugin: "postcss-url-to-variable",
Once(root, { Rule, Declaration }) {
root.walkDecls(decl => findAndReplaceUrl(decl));
if (urlVariables.size) {
addResolvedVariablesToRootSelector(root, { Rule, Declaration });
const urlVariables = new Map();
const counter = createCounter();
root.walkDecls(decl => findAndReplaceUrl(decl, urlVariables, counter));
const cssFileLocation = root.source.input.from;
if (urlVariables.size && !cssFileLocation.includes("type=runtime")) {
addResolvedVariablesToRootSelector(root, { Rule, Declaration }, urlVariables);
}
if (opts.compiledVariables){
const cssFileLocation = root.source.input.from;
populateMapWithIcons(opts.compiledVariables, cssFileLocation);
populateMapWithIcons(opts.compiledVariables, cssFileLocation, urlVariables);
}
},
};

View file

@ -14,12 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
const fs = require("fs");
const path = require("path");
const xxhash = require('xxhashjs');
import {readFileSync, mkdirSync, writeFileSync} from "fs";
import {resolve} from "path";
import {h32} from "xxhashjs";
import {getColoredSvgString} from "../../src/platform/web/theming/shared/svg-colorizer.mjs";
function createHash(content) {
const hasher = new xxhash.h32(0);
const hasher = new h32(0);
hasher.update(content);
return hasher.digest();
}
@ -30,18 +31,14 @@ function createHash(content) {
* @param {string} primaryColor Primary color for the new svg
* @param {string} secondaryColor Secondary color for the new svg
*/
module.exports.buildColorizedSVG = function (svgLocation, primaryColor, secondaryColor) {
const svgCode = fs.readFileSync(svgLocation, { encoding: "utf8"});
let coloredSVGCode = svgCode.replaceAll("#ff00ff", primaryColor);
coloredSVGCode = coloredSVGCode.replaceAll("#00ffff", secondaryColor);
if (svgCode === coloredSVGCode) {
throw new Error("svg-colorizer made no color replacements! The input svg should only contain colors #ff00ff (primary, case-sensitive) and #00ffff (secondary, case-sensitive).");
}
export function buildColorizedSVG(svgLocation, primaryColor, secondaryColor) {
const svgCode = readFileSync(svgLocation, { encoding: "utf8"});
const coloredSVGCode = getColoredSvgString(svgCode, primaryColor, secondaryColor);
const fileName = svgLocation.match(/.+[/\\](.+\.svg)/)[1];
const outputName = `${fileName.substring(0, fileName.length - 4)}-${createHash(coloredSVGCode)}.svg`;
const outputPath = path.resolve(__dirname, "../../.tmp");
const outputPath = resolve(__dirname, "./.tmp");
try {
fs.mkdirSync(outputPath);
mkdirSync(outputPath);
}
catch (e) {
if (e.code !== "EEXIST") {
@ -49,6 +46,6 @@ module.exports.buildColorizedSVG = function (svgLocation, primaryColor, secondar
}
}
const outputFile = `${outputPath}/${outputName}`;
fs.writeFileSync(outputFile, coloredSVGCode);
writeFileSync(outputFile, coloredSVGCode);
return outputFile;
}

View file

@ -1,3 +1,4 @@
set -e
if [ -z "$1" ]; then
echo "provide a new version, current version is $(jq '.version' package.json)"
exit 1

View file

@ -1,7 +1,7 @@
{
"name": "hydrogen-view-sdk",
"description": "Embeddable matrix client library, including view components",
"version": "0.0.12",
"version": "0.1.0",
"main": "./lib-build/hydrogen.cjs.js",
"exports": {
".": {

View file

@ -13,7 +13,7 @@ const assetPaths = {
wasmBundle: olmJsPath
}
};
import "hydrogen-view-sdk/theme-element-light.css";
import "hydrogen-view-sdk/assets/theme-element-light.css";
console.log('hydrogenViewSdk', hydrogenViewSdk);
console.log('assetPaths', assetPaths);

View file

@ -6,7 +6,7 @@ const hydrogenViewSdk = require('hydrogen-view-sdk');
// Worker
require.resolve('hydrogen-view-sdk/main.js');
// Styles
require.resolve('hydrogen-view-sdk/theme-element-light.css');
require.resolve('hydrogen-view-sdk/assets/theme-element-light.css');
// Can access files in the assets/* directory
require.resolve('hydrogen-view-sdk/assets/main.js');

View file

@ -0,0 +1,5 @@
#!/bin/sh
cp scripts/test-derived-theme/theme.json target/assets/theme-customer.json
cat target/config.json | jq '.themeManifests += ["assets/theme-customer.json"]' | cat > target/config.temp.json
rm target/config.json
mv target/config.temp.json target/config.json

View file

@ -0,0 +1,51 @@
{
"name": "Customer",
"extends": "element",
"id": "customer",
"values": {
"variants": {
"dark": {
"dark": true,
"default": true,
"name": "Dark",
"variables": {
"background-color-primary": "#21262b",
"background-color-secondary": "#2D3239",
"text-color": "#fff",
"accent-color": "#F03F5B",
"error-color": "#FF4B55",
"fixed-white": "#fff",
"room-badge": "#61708b",
"link-color": "#238cf5"
}
},
"light": {
"default": true,
"name": "Dark",
"variables": {
"background-color-primary": "#21262b",
"background-color-secondary": "#2D3239",
"text-color": "#fff",
"accent-color": "#F03F5B",
"error-color": "#FF4B55",
"fixed-white": "#fff",
"room-badge": "#61708b",
"link-color": "#238cf5"
}
},
"red": {
"name": "Gruvbox",
"variables": {
"background-color-primary": "#282828",
"background-color-secondary": "#3c3836",
"text-color": "#fbf1c7",
"accent-color": "#8ec07c",
"error-color": "#fb4934",
"fixed-white": "#fff",
"room-badge": "#cc241d",
"link-color": "#fe8019"
}
}
}
}
}

View file

@ -14,18 +14,19 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import {Options, ViewModel} from "./ViewModel";
import {Options as BaseOptions, ViewModel} from "./ViewModel";
import {Client} from "../matrix/Client.js";
import {SegmentType} from "./navigation/index";
type LogoutOptions = { sessionId: string; } & Options;
type Options = { sessionId: string; } & BaseOptions;
export class LogoutViewModel extends ViewModel<LogoutOptions> {
export class LogoutViewModel extends ViewModel<SegmentType, Options> {
private _sessionId: string;
private _busy: boolean;
private _showConfirm: boolean;
private _error?: Error;
constructor(options: LogoutOptions) {
constructor(options: Options) {
super(options);
this._sessionId = options.sessionId;
this._busy = false;
@ -41,7 +42,7 @@ export class LogoutViewModel extends ViewModel<LogoutOptions> {
return this._busy;
}
get cancelUrl(): string {
get cancelUrl(): string | undefined {
return this.urlCreator.urlForSegment("session", true);
}

View file

@ -17,7 +17,7 @@ limitations under the License.
import {Client} from "../matrix/Client.js";
import {SessionViewModel} from "./session/SessionViewModel.js";
import {SessionLoadViewModel} from "./SessionLoadViewModel.js";
import {LoginViewModel} from "./login/LoginViewModel.js";
import {LoginViewModel} from "./login/LoginViewModel";
import {LogoutViewModel} from "./LogoutViewModel";
import {SessionPickerViewModel} from "./SessionPickerViewModel.js";
import {ViewModel} from "./ViewModel";

View file

@ -27,17 +27,19 @@ import type {Platform} from "../platform/web/Platform";
import type {Clock} from "../platform/web/dom/Clock";
import type {ILogger} from "../logging/types";
import type {Navigation} from "./navigation/Navigation";
import type {URLRouter} from "./navigation/URLRouter";
import type {SegmentType} from "./navigation/index";
import type {IURLRouter} from "./navigation/URLRouter";
export type Options = {
platform: Platform
logger: ILogger
urlCreator: URLRouter
navigation: Navigation
emitChange?: (params: any) => void
export type Options<T extends object = SegmentType> = {
platform: Platform;
logger: ILogger;
urlCreator: IURLRouter<T>;
navigation: Navigation<T>;
emitChange?: (params: any) => void;
}
export class ViewModel<O extends Options = Options> extends EventEmitter<{change: never}> {
export class ViewModel<N extends object = SegmentType, O extends Options<N> = Options<N>> extends EventEmitter<{change: never}> {
private disposables?: Disposables;
private _isDisposed = false;
private _options: Readonly<O>;
@ -47,7 +49,7 @@ export class ViewModel<O extends Options = Options> extends EventEmitter<{change
this._options = options;
}
childOptions<T extends Object>(explicitOptions: T): T & Options {
childOptions<T extends Object>(explicitOptions: T): T & Options<N> {
return Object.assign({}, this._options, explicitOptions);
}
@ -58,11 +60,11 @@ export class ViewModel<O extends Options = Options> extends EventEmitter<{change
return this._options[name];
}
observeNavigation(type: string, onChange: (value: string | true | undefined, type: string) => void) {
observeNavigation<T extends keyof N>(type: T, onChange: (value: N[T], type: T) => void): void {
const segmentObservable = this.navigation.observe(type);
const unsubscribe = segmentObservable.subscribe((value: string | true | undefined) => {
const unsubscribe = segmentObservable.subscribe((value: N[T]) => {
onChange(value, type);
})
});
this.track(unsubscribe);
}
@ -103,7 +105,7 @@ export class ViewModel<O extends Options = Options> extends EventEmitter<{change
//
// translated string should probably always be bindings, unless we're fine with a refresh when changing the language?
// we probably are, if we're using routing with a url, we could just refresh.
i18n(parts: TemplateStringsArray, ...expr: any[]) {
i18n(parts: TemplateStringsArray, ...expr: any[]): string {
// just concat for now
let result = "";
for (let i = 0; i < parts.length; ++i) {
@ -135,11 +137,12 @@ export class ViewModel<O extends Options = Options> extends EventEmitter<{change
return this.platform.logger;
}
get urlCreator(): URLRouter {
get urlCreator(): IURLRouter<N> {
return this._options.urlCreator;
}
get navigation(): Navigation {
return this._options.navigation;
get navigation(): Navigation<N> {
// typescript needs a little help here
return this._options.navigation as unknown as Navigation<N>;
}
}

View file

@ -15,101 +15,145 @@ limitations under the License.
*/
import {Client} from "../../matrix/Client.js";
import {ViewModel} from "../ViewModel";
import {Options as BaseOptions, ViewModel} from "../ViewModel";
import {PasswordLoginViewModel} from "./PasswordLoginViewModel.js";
import {StartSSOLoginViewModel} from "./StartSSOLoginViewModel.js";
import {CompleteSSOLoginViewModel} from "./CompleteSSOLoginViewModel.js";
import {LoadStatus} from "../../matrix/Client.js";
import {SessionLoadViewModel} from "../SessionLoadViewModel.js";
import {SegmentType} from "../navigation/index";
export class LoginViewModel extends ViewModel {
constructor(options) {
import type {PasswordLoginMethod, SSOLoginHelper, TokenLoginMethod, ILoginMethod} from "../../matrix/login";
type Options = {
defaultHomeserver: string;
ready: ReadyFn;
loginToken?: string;
} & BaseOptions;
export class LoginViewModel extends ViewModel<SegmentType, Options> {
private _ready: ReadyFn;
private _loginToken?: string;
private _client: Client;
private _loginOptions?: LoginOptions;
private _passwordLoginViewModel?: PasswordLoginViewModel;
private _startSSOLoginViewModel?: StartSSOLoginViewModel;
private _completeSSOLoginViewModel?: CompleteSSOLoginViewModel;
private _loadViewModel?: SessionLoadViewModel;
private _loadViewModelSubscription?: () => void;
private _homeserver: string;
private _queriedHomeserver?: string;
private _abortHomeserverQueryTimeout?: () => void;
private _abortQueryOperation?: () => void;
private _hideHomeserver: boolean = false;
private _isBusy: boolean = false;
private _errorMessage: string = "";
constructor(options: Readonly<Options>) {
super(options);
const {ready, defaultHomeserver, loginToken} = options;
this._ready = ready;
this._loginToken = loginToken;
this._client = new Client(this.platform);
this._loginOptions = null;
this._passwordLoginViewModel = null;
this._startSSOLoginViewModel = null;
this._completeSSOLoginViewModel = null;
this._loadViewModel = null;
this._loadViewModelSubscription = null;
this._homeserver = defaultHomeserver;
this._queriedHomeserver = null;
this._errorMessage = "";
this._hideHomeserver = false;
this._isBusy = false;
this._abortHomeserverQueryTimeout = null;
this._abortQueryOperation = null;
this._initViewModels();
}
get passwordLoginViewModel() { return this._passwordLoginViewModel; }
get startSSOLoginViewModel() { return this._startSSOLoginViewModel; }
get completeSSOLoginViewModel(){ return this._completeSSOLoginViewModel; }
get homeserver() { return this._homeserver; }
get resolvedHomeserver() { return this._loginOptions?.homeserver; }
get errorMessage() { return this._errorMessage; }
get showHomeserver() { return !this._hideHomeserver; }
get loadViewModel() {return this._loadViewModel; }
get isBusy() { return this._isBusy; }
get isFetchingLoginOptions() { return !!this._abortQueryOperation; }
get passwordLoginViewModel(): PasswordLoginViewModel {
return this._passwordLoginViewModel;
}
goBack() {
get startSSOLoginViewModel(): StartSSOLoginViewModel {
return this._startSSOLoginViewModel;
}
get completeSSOLoginViewModel(): CompleteSSOLoginViewModel {
return this._completeSSOLoginViewModel;
}
get homeserver(): string {
return this._homeserver;
}
get resolvedHomeserver(): string | undefined {
return this._loginOptions?.homeserver;
}
get errorMessage(): string {
return this._errorMessage;
}
get showHomeserver(): boolean {
return !this._hideHomeserver;
}
get loadViewModel(): SessionLoadViewModel {
return this._loadViewModel;
}
get isBusy(): boolean {
return this._isBusy;
}
get isFetchingLoginOptions(): boolean {
return !!this._abortQueryOperation;
}
goBack(): void {
this.navigation.push("session");
}
async _initViewModels() {
private _initViewModels(): void {
if (this._loginToken) {
this._hideHomeserver = true;
this._completeSSOLoginViewModel = this.track(new CompleteSSOLoginViewModel(
this.childOptions(
{
client: this._client,
attemptLogin: loginMethod => this.attemptLogin(loginMethod),
attemptLogin: (loginMethod: TokenLoginMethod) => this.attemptLogin(loginMethod),
loginToken: this._loginToken
})));
this.emitChange("completeSSOLoginViewModel");
}
else {
await this.queryHomeserver();
void this.queryHomeserver();
}
}
_showPasswordLogin() {
private _showPasswordLogin(): void {
this._passwordLoginViewModel = this.track(new PasswordLoginViewModel(
this.childOptions({
loginOptions: this._loginOptions,
attemptLogin: loginMethod => this.attemptLogin(loginMethod)
attemptLogin: (loginMethod: PasswordLoginMethod) => this.attemptLogin(loginMethod)
})));
this.emitChange("passwordLoginViewModel");
}
_showSSOLogin() {
private _showSSOLogin(): void {
this._startSSOLoginViewModel = this.track(
new StartSSOLoginViewModel(this.childOptions({loginOptions: this._loginOptions}))
);
this.emitChange("startSSOLoginViewModel");
}
_showError(message) {
private _showError(message: string): void {
this._errorMessage = message;
this.emitChange("errorMessage");
}
_setBusy(status) {
private _setBusy(status: boolean): void {
this._isBusy = status;
this._passwordLoginViewModel?.setBusy(status);
this._startSSOLoginViewModel?.setBusy(status);
this.emitChange("isBusy");
}
async attemptLogin(loginMethod) {
async attemptLogin(loginMethod: ILoginMethod): Promise<null> {
this._setBusy(true);
this._client.startWithLogin(loginMethod, {inspectAccountSetup: true});
void this._client.startWithLogin(loginMethod, {inspectAccountSetup: true});
const loadStatus = this._client.loadStatus;
const handle = loadStatus.waitFor(status => status !== LoadStatus.Login);
const handle = loadStatus.waitFor((status: LoadStatus) => status !== LoadStatus.Login);
await handle.promise;
this._setBusy(false);
const status = loadStatus.get();
@ -119,11 +163,11 @@ export class LoginViewModel extends ViewModel {
this._hideHomeserver = true;
this.emitChange("hideHomeserver");
this._disposeViewModels();
this._createLoadViewModel();
void this._createLoadViewModel();
return null;
}
_createLoadViewModel() {
private _createLoadViewModel(): void {
this._loadViewModelSubscription = this.disposeTracked(this._loadViewModelSubscription);
this._loadViewModel = this.disposeTracked(this._loadViewModel);
this._loadViewModel = this.track(
@ -139,7 +183,7 @@ export class LoginViewModel extends ViewModel {
})
)
);
this._loadViewModel.start();
void this._loadViewModel.start();
this.emitChange("loadViewModel");
this._loadViewModelSubscription = this.track(
this._loadViewModel.disposableOn("change", () => {
@ -151,22 +195,22 @@ export class LoginViewModel extends ViewModel {
);
}
_disposeViewModels() {
this._startSSOLoginViewModel = this.disposeTracked(this._ssoLoginViewModel);
private _disposeViewModels(): void {
this._startSSOLoginViewModel = this.disposeTracked(this._startSSOLoginViewModel);
this._passwordLoginViewModel = this.disposeTracked(this._passwordLoginViewModel);
this._completeSSOLoginViewModel = this.disposeTracked(this._completeSSOLoginViewModel);
this.emitChange("disposeViewModels");
}
async setHomeserver(newHomeserver) {
async setHomeserver(newHomeserver: string): Promise<void> {
this._homeserver = newHomeserver;
// clear everything set by queryHomeserver
this._loginOptions = null;
this._queriedHomeserver = null;
this._loginOptions = undefined;
this._queriedHomeserver = undefined;
this._showError("");
this._disposeViewModels();
this._abortQueryOperation = this.disposeTracked(this._abortQueryOperation);
this.emitChange(); // multiple fields changing
this.emitChange("loginViewModels"); // multiple fields changing
// also clear the timeout if it is still running
this.disposeTracked(this._abortHomeserverQueryTimeout);
const timeout = this.clock.createTimeout(1000);
@ -181,10 +225,10 @@ export class LoginViewModel extends ViewModel {
}
}
this._abortHomeserverQueryTimeout = this.disposeTracked(this._abortHomeserverQueryTimeout);
this.queryHomeserver();
void this.queryHomeserver();
}
async queryHomeserver() {
async queryHomeserver(): Promise<void> {
// don't repeat a query we've just done
if (this._homeserver === this._queriedHomeserver || this._homeserver === "") {
return;
@ -210,7 +254,7 @@ export class LoginViewModel extends ViewModel {
if (e.name === "AbortError") {
return; //aborted, bail out
} else {
this._loginOptions = null;
this._loginOptions = undefined;
}
} finally {
this._abortQueryOperation = this.disposeTracked(this._abortQueryOperation);
@ -228,12 +272,22 @@ export class LoginViewModel extends ViewModel {
}
}
dispose() {
dispose(): void {
super.dispose();
if (this._client) {
// if we move away before we're done with initial sync
// delete the session
this._client.deleteSession();
void this._client.deleteSession();
}
}
}
type ReadyFn = (client: Client) => void;
// TODO: move to Client.js when its converted to typescript.
type LoginOptions = {
homeserver: string;
password?: (username: string, password: string) => PasswordLoginMethod;
sso?: SSOLoginHelper;
token?: (loginToken: string) => TokenLoginMethod;
};

View file

@ -16,27 +16,49 @@ limitations under the License.
import {BaseObservableValue, ObservableValue} from "../../observable/ObservableValue";
export class Navigation {
constructor(allowsChild) {
type AllowsChild<T> = (parent: Segment<T> | undefined, child: Segment<T>) => boolean;
/**
* OptionalValue is basically stating that if SegmentType[type] = true:
* - Allow this type to be optional
* - Give it a default value of undefined
* - Also allow it to be true
* This lets us do:
* const s: Segment<SegmentType> = new Segment("create-room");
* instead of
* const s: Segment<SegmentType> = new Segment("create-room", undefined);
*/
export type OptionalValue<T> = T extends true? [(undefined | true)?]: [T];
export class Navigation<T extends object> {
private readonly _allowsChild: AllowsChild<T>;
private _path: Path<T>;
private readonly _observables: Map<keyof T, SegmentObservable<T>> = new Map();
private readonly _pathObservable: ObservableValue<Path<T>>;
constructor(allowsChild: AllowsChild<T>) {
this._allowsChild = allowsChild;
this._path = new Path([], allowsChild);
this._observables = new Map();
this._pathObservable = new ObservableValue(this._path);
}
get pathObservable() {
get pathObservable(): ObservableValue<Path<T>> {
return this._pathObservable;
}
get path() {
get path(): Path<T> {
return this._path;
}
push(type, value = undefined) {
return this.applyPath(this.path.with(new Segment(type, value)));
push<K extends keyof T>(type: K, ...value: OptionalValue<T[K]>): void {
const newPath = this.path.with(new Segment(type, ...value));
if (newPath) {
this.applyPath(newPath);
}
}
applyPath(path) {
applyPath(path: Path<T>): void {
// Path is not exported, so you can only create a Path through Navigation,
// so we assume it respects the allowsChild rules
const oldPath = this._path;
@ -60,7 +82,7 @@ export class Navigation {
this._pathObservable.set(this._path);
}
observe(type) {
observe(type: keyof T): SegmentObservable<T> {
let observable = this._observables.get(type);
if (!observable) {
observable = new SegmentObservable(this, type);
@ -69,9 +91,9 @@ export class Navigation {
return observable;
}
pathFrom(segments) {
let parent;
let i;
pathFrom(segments: Segment<any>[]): Path<T> {
let parent: Segment<any> | undefined;
let i: number;
for (i = 0; i < segments.length; i += 1) {
if (!this._allowsChild(parent, segments[i])) {
return new Path(segments.slice(0, i), this._allowsChild);
@ -81,12 +103,12 @@ export class Navigation {
return new Path(segments, this._allowsChild);
}
segment(type, value) {
return new Segment(type, value);
segment<K extends keyof T>(type: K, ...value: OptionalValue<T[K]>): Segment<T> {
return new Segment(type, ...value);
}
}
function segmentValueEqual(a, b) {
function segmentValueEqual<T>(a?: T[keyof T], b?: T[keyof T]): boolean {
if (a === b) {
return true;
}
@ -103,24 +125,29 @@ function segmentValueEqual(a, b) {
return false;
}
export class Segment {
constructor(type, value) {
this.type = type;
this.value = value === undefined ? true : value;
export class Segment<T, K extends keyof T = any> {
public value: T[K];
constructor(public type: K, ...value: OptionalValue<T[K]>) {
this.value = (value[0] === undefined ? true : value[0]) as unknown as T[K];
}
}
class Path {
constructor(segments = [], allowsChild) {
class Path<T> {
private readonly _segments: Segment<T, any>[];
private readonly _allowsChild: AllowsChild<T>;
constructor(segments: Segment<T>[] = [], allowsChild: AllowsChild<T>) {
this._segments = segments;
this._allowsChild = allowsChild;
}
clone() {
clone(): Path<T> {
return new Path(this._segments.slice(), this._allowsChild);
}
with(segment) {
with(segment: Segment<T>): Path<T> | undefined {
let index = this._segments.length - 1;
do {
if (this._allowsChild(this._segments[index], segment)) {
@ -132,10 +159,10 @@ class Path {
index -= 1;
} while(index >= -1);
// allow -1 as well so we check if the segment is allowed as root
return null;
return undefined;
}
until(type) {
until(type: keyof T): Path<T> {
const index = this._segments.findIndex(s => s.type === type);
if (index !== -1) {
return new Path(this._segments.slice(0, index + 1), this._allowsChild)
@ -143,11 +170,11 @@ class Path {
return new Path([], this._allowsChild);
}
get(type) {
get(type: keyof T): Segment<T> | undefined {
return this._segments.find(s => s.type === type);
}
replace(segment) {
replace(segment: Segment<T>): Path<T> | undefined {
const index = this._segments.findIndex(s => s.type === segment.type);
if (index !== -1) {
const parent = this._segments[index - 1];
@ -160,10 +187,10 @@ class Path {
}
}
}
return null;
return undefined;
}
get segments() {
get segments(): Segment<T>[] {
return this._segments;
}
}
@ -172,43 +199,49 @@ class Path {
* custom observable so it always returns what is in navigation.path, even if we haven't emitted the change yet.
* This ensures that observers of a segment can also read the most recent value of other segments.
*/
class SegmentObservable extends BaseObservableValue {
constructor(navigation, type) {
class SegmentObservable<T extends object> extends BaseObservableValue<T[keyof T] | undefined> {
private readonly _navigation: Navigation<T>;
private _type: keyof T;
private _lastSetValue?: T[keyof T];
constructor(navigation: Navigation<T>, type: keyof T) {
super();
this._navigation = navigation;
this._type = type;
this._lastSetValue = navigation.path.get(type)?.value;
}
get() {
get(): T[keyof T] | undefined {
const path = this._navigation.path;
const segment = path.get(this._type);
const value = segment?.value;
return value;
}
emitIfChanged() {
emitIfChanged(): void {
const newValue = this.get();
if (!segmentValueEqual(newValue, this._lastSetValue)) {
if (!segmentValueEqual<T>(newValue, this._lastSetValue)) {
this._lastSetValue = newValue;
this.emit(newValue);
}
}
}
export type {Path};
export function tests() {
function createMockNavigation() {
return new Navigation((parent, {type}) => {
switch (parent?.type) {
case undefined:
return type === "1" || "2";
return type === "1" || type === "2";
case "1":
return type === "1.1";
case "1.1":
return type === "1.1.1";
case "2":
return type === "2.1" || "2.2";
return type === "2.1" || type === "2.2";
default:
return false;
}
@ -216,7 +249,7 @@ export function tests() {
}
function observeTypes(nav, types) {
const changes = [];
const changes: {type:string, value:any}[] = [];
for (const type of types) {
nav.observe(type).subscribe(value => {
changes.push({type, value});
@ -225,6 +258,12 @@ export function tests() {
return changes;
}
type SegmentType = {
"foo": number;
"bar": number;
"baz": number;
}
return {
"applying a path emits an event on the observable": assert => {
const nav = createMockNavigation();
@ -242,18 +281,18 @@ export function tests() {
assert.equal(changes[1].value, 8);
},
"path.get": assert => {
const path = new Path([new Segment("foo", 5), new Segment("bar", 6)], () => true);
assert.equal(path.get("foo").value, 5);
assert.equal(path.get("bar").value, 6);
const path = new Path<SegmentType>([new Segment("foo", 5), new Segment("bar", 6)], () => true);
assert.equal(path.get("foo")!.value, 5);
assert.equal(path.get("bar")!.value, 6);
},
"path.replace success": assert => {
const path = new Path([new Segment("foo", 5), new Segment("bar", 6)], () => true);
const path = new Path<SegmentType>([new Segment("foo", 5), new Segment("bar", 6)], () => true);
const newPath = path.replace(new Segment("foo", 1));
assert.equal(newPath.get("foo").value, 1);
assert.equal(newPath.get("bar").value, 6);
assert.equal(newPath!.get("foo")!.value, 1);
assert.equal(newPath!.get("bar")!.value, 6);
},
"path.replace not found": assert => {
const path = new Path([new Segment("foo", 5), new Segment("bar", 6)], () => true);
const path = new Path<SegmentType>([new Segment("foo", 5), new Segment("bar", 6)], () => true);
const newPath = path.replace(new Segment("baz", 1));
assert.equal(newPath, null);
}

View file

@ -14,28 +14,55 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
export class URLRouter {
constructor({history, navigation, parseUrlPath, stringifyPath}) {
import type {History} from "../../platform/web/dom/History.js";
import type {Navigation, Segment, Path, OptionalValue} from "./Navigation";
import type {SubscriptionHandle} from "../../observable/BaseObservable";
type ParseURLPath<T> = (urlPath: string, currentNavPath: Path<T>, defaultSessionId?: string) => Segment<T>[];
type StringifyPath<T> = (path: Path<T>) => string;
export interface IURLRouter<T> {
attach(): void;
dispose(): void;
pushUrl(url: string): void;
tryRestoreLastUrl(): boolean;
urlForSegments(segments: Segment<T>[]): string | undefined;
urlForSegment<K extends keyof T>(type: K, ...value: OptionalValue<T[K]>): string | undefined;
urlUntilSegment(type: keyof T): string;
urlForPath(path: Path<T>): string;
openRoomActionUrl(roomId: string): string;
createSSOCallbackURL(): string;
normalizeUrl(): void;
}
export class URLRouter<T extends {session: string | boolean}> implements IURLRouter<T> {
private readonly _history: History;
private readonly _navigation: Navigation<T>;
private readonly _parseUrlPath: ParseURLPath<T>;
private readonly _stringifyPath: StringifyPath<T>;
private _subscription?: SubscriptionHandle;
private _pathSubscription?: SubscriptionHandle;
private _isApplyingUrl: boolean = false;
private _defaultSessionId?: string;
constructor(history: History, navigation: Navigation<T>, parseUrlPath: ParseURLPath<T>, stringifyPath: StringifyPath<T>) {
this._history = history;
this._navigation = navigation;
this._parseUrlPath = parseUrlPath;
this._stringifyPath = stringifyPath;
this._subscription = null;
this._pathSubscription = null;
this._isApplyingUrl = false;
this._defaultSessionId = this._getLastSessionId();
}
_getLastSessionId() {
const navPath = this._urlAsNavPath(this._history.getLastUrl() || "");
private _getLastSessionId(): string | undefined {
const navPath = this._urlAsNavPath(this._history.getLastSessionUrl() || "");
const sessionId = navPath.get("session")?.value;
if (typeof sessionId === "string") {
return sessionId;
}
return null;
return undefined;
}
attach() {
attach(): void {
this._subscription = this._history.subscribe(url => this._applyUrl(url));
// subscribe to path before applying initial url
// so redirects in _applyNavPathToHistory are reflected in url bar
@ -43,12 +70,12 @@ export class URLRouter {
this._applyUrl(this._history.get());
}
dispose() {
this._subscription = this._subscription();
this._pathSubscription = this._pathSubscription();
dispose(): void {
if (this._subscription) { this._subscription = this._subscription(); }
if (this._pathSubscription) { this._pathSubscription = this._pathSubscription(); }
}
_applyNavPathToHistory(path) {
private _applyNavPathToHistory(path: Path<T>): void {
const url = this.urlForPath(path);
if (url !== this._history.get()) {
if (this._isApplyingUrl) {
@ -60,7 +87,7 @@ export class URLRouter {
}
}
_applyNavPathToNavigation(navPath) {
private _applyNavPathToNavigation(navPath: Path<T>): void {
// this will cause _applyNavPathToHistory to be called,
// so set a flag whether this request came from ourselves
// (in which case it is a redirect if the url does not match the current one)
@ -69,22 +96,22 @@ export class URLRouter {
this._isApplyingUrl = false;
}
_urlAsNavPath(url) {
private _urlAsNavPath(url: string): Path<T> {
const urlPath = this._history.urlAsPath(url);
return this._navigation.pathFrom(this._parseUrlPath(urlPath, this._navigation.path, this._defaultSessionId));
}
_applyUrl(url) {
private _applyUrl(url: string): void {
const navPath = this._urlAsNavPath(url);
this._applyNavPathToNavigation(navPath);
}
pushUrl(url) {
pushUrl(url: string): void {
this._history.pushUrl(url);
}
tryRestoreLastUrl() {
const lastNavPath = this._urlAsNavPath(this._history.getLastUrl() || "");
tryRestoreLastUrl(): boolean {
const lastNavPath = this._urlAsNavPath(this._history.getLastSessionUrl() || "");
if (lastNavPath.segments.length !== 0) {
this._applyNavPathToNavigation(lastNavPath);
return true;
@ -92,8 +119,8 @@ export class URLRouter {
return false;
}
urlForSegments(segments) {
let path = this._navigation.path;
urlForSegments(segments: Segment<T>[]): string | undefined {
let path: Path<T> | undefined = this._navigation.path;
for (const segment of segments) {
path = path.with(segment);
if (!path) {
@ -103,29 +130,29 @@ export class URLRouter {
return this.urlForPath(path);
}
urlForSegment(type, value) {
return this.urlForSegments([this._navigation.segment(type, value)]);
urlForSegment<K extends keyof T>(type: K, ...value: OptionalValue<T[K]>): string | undefined {
return this.urlForSegments([this._navigation.segment(type, ...value)]);
}
urlUntilSegment(type) {
urlUntilSegment(type: keyof T): string {
return this.urlForPath(this._navigation.path.until(type));
}
urlForPath(path) {
urlForPath(path: Path<T>): string {
return this._history.pathAsUrl(this._stringifyPath(path));
}
openRoomActionUrl(roomId) {
openRoomActionUrl(roomId: string): string {
// not a segment to navigation knowns about, so append it manually
const urlPath = `${this._stringifyPath(this._navigation.path.until("session"))}/open-room/${roomId}`;
return this._history.pathAsUrl(urlPath);
}
createSSOCallbackURL() {
createSSOCallbackURL(): string {
return window.location.origin;
}
normalizeUrl() {
normalizeUrl(): void {
// Remove any queryParameters from the URL
// Gets rid of the loginToken after SSO
this._history.replaceUrlSilently(`${window.location.origin}/${window.location.hash}`);

View file

@ -14,18 +14,36 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import {Navigation, Segment} from "./Navigation.js";
import {URLRouter} from "./URLRouter.js";
import {Navigation, Segment} from "./Navigation";
import {URLRouter} from "./URLRouter";
import type {Path, OptionalValue} from "./Navigation";
export function createNavigation() {
export type SegmentType = {
"login": true;
"session": string | boolean;
"sso": string;
"logout": true;
"room": string;
"rooms": string[];
"settings": true;
"create-room": true;
"empty-grid-tile": number;
"lightbox": string;
"right-panel": true;
"details": true;
"members": true;
"member": string;
};
export function createNavigation(): Navigation<SegmentType> {
return new Navigation(allowsChild);
}
export function createRouter({history, navigation}) {
return new URLRouter({history, navigation, stringifyPath, parseUrlPath});
export function createRouter({history, navigation}: {history: History, navigation: Navigation<SegmentType>}): URLRouter<SegmentType> {
return new URLRouter(history, navigation, parseUrlPath, stringifyPath);
}
function allowsChild(parent, child) {
function allowsChild(parent: Segment<SegmentType> | undefined, child: Segment<SegmentType>): boolean {
const {type} = child;
switch (parent?.type) {
case undefined:
@ -45,8 +63,9 @@ function allowsChild(parent, child) {
}
}
export function removeRoomFromPath(path, roomId) {
const rooms = path.get("rooms");
export function removeRoomFromPath(path: Path<SegmentType>, roomId: string): Path<SegmentType> | undefined {
let newPath: Path<SegmentType> | undefined = path;
const rooms = newPath.get("rooms");
let roomIdGridIndex = -1;
// first delete from rooms segment
if (rooms) {
@ -54,22 +73,22 @@ export function removeRoomFromPath(path, roomId) {
if (roomIdGridIndex !== -1) {
const idsWithoutRoom = rooms.value.slice();
idsWithoutRoom[roomIdGridIndex] = "";
path = path.replace(new Segment("rooms", idsWithoutRoom));
newPath = newPath.replace(new Segment("rooms", idsWithoutRoom));
}
}
const room = path.get("room");
const room = newPath!.get("room");
// then from room (which occurs with or without rooms)
if (room && room.value === roomId) {
if (roomIdGridIndex !== -1) {
path = path.with(new Segment("empty-grid-tile", roomIdGridIndex));
newPath = newPath!.with(new Segment("empty-grid-tile", roomIdGridIndex));
} else {
path = path.until("session");
newPath = newPath!.until("session");
}
}
return path;
return newPath;
}
function roomsSegmentWithRoom(rooms, roomId, path) {
function roomsSegmentWithRoom(rooms: Segment<SegmentType, "rooms">, roomId: string, path: Path<SegmentType>): Segment<SegmentType, "rooms"> {
if(!rooms.value.includes(roomId)) {
const emptyGridTile = path.get("empty-grid-tile");
const oldRoom = path.get("room");
@ -87,28 +106,28 @@ function roomsSegmentWithRoom(rooms, roomId, path) {
}
}
function pushRightPanelSegment(array, segment, value = true) {
function pushRightPanelSegment<T extends keyof SegmentType>(array: Segment<SegmentType>[], segment: T, ...value: OptionalValue<SegmentType[T]>): void {
array.push(new Segment("right-panel"));
array.push(new Segment(segment, value));
array.push(new Segment(segment, ...value));
}
export function addPanelIfNeeded(navigation, path) {
export function addPanelIfNeeded<T extends SegmentType>(navigation: Navigation<T>, path: Path<T>): Path<T> {
const segments = navigation.path.segments;
const i = segments.findIndex(segment => segment.type === "right-panel");
let _path = path;
if (i !== -1) {
_path = path.until("room");
_path = _path.with(segments[i]);
_path = _path.with(segments[i + 1]);
_path = _path.with(segments[i])!;
_path = _path.with(segments[i + 1])!;
}
return _path;
}
export function parseUrlPath(urlPath, currentNavPath, defaultSessionId) {
// substr(1) to take of initial /
const parts = urlPath.substr(1).split("/");
export function parseUrlPath(urlPath: string, currentNavPath: Path<SegmentType>, defaultSessionId?: string): Segment<SegmentType>[] {
// substring(1) to take of initial /
const parts = urlPath.substring(1).split("/");
const iterator = parts[Symbol.iterator]();
const segments = [];
const segments: Segment<SegmentType>[] = [];
let next;
while (!(next = iterator.next()).done) {
const type = next.value;
@ -170,9 +189,9 @@ export function parseUrlPath(urlPath, currentNavPath, defaultSessionId) {
return segments;
}
export function stringifyPath(path) {
export function stringifyPath(path: Path<SegmentType>): string {
let urlPath = "";
let prevSegment;
let prevSegment: Segment<SegmentType> | undefined;
for (const segment of path.segments) {
switch (segment.type) {
case "rooms":
@ -205,9 +224,15 @@ export function stringifyPath(path) {
}
export function tests() {
function createEmptyPath() {
const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([]);
return path;
}
return {
"stringify grid url with focused empty tile": assert => {
const nav = new Navigation(allowsChild);
const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([
new Segment("session", 1),
new Segment("rooms", ["a", "b", "c"]),
@ -217,7 +242,7 @@ export function tests() {
assert.equal(urlPath, "/session/1/rooms/a,b,c/3");
},
"stringify grid url with focused room": assert => {
const nav = new Navigation(allowsChild);
const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([
new Segment("session", 1),
new Segment("rooms", ["a", "b", "c"]),
@ -227,7 +252,7 @@ export function tests() {
assert.equal(urlPath, "/session/1/rooms/a,b,c/1");
},
"stringify url with right-panel and details segment": assert => {
const nav = new Navigation(allowsChild);
const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([
new Segment("session", 1),
new Segment("rooms", ["a", "b", "c"]),
@ -239,13 +264,15 @@ export function tests() {
assert.equal(urlPath, "/session/1/rooms/a,b,c/1/details");
},
"Parse loginToken query parameter into SSO segment": assert => {
const segments = parseUrlPath("?loginToken=a1232aSD123");
const path = createEmptyPath();
const segments = parseUrlPath("?loginToken=a1232aSD123", path);
assert.equal(segments.length, 1);
assert.equal(segments[0].type, "sso");
assert.equal(segments[0].value, "a1232aSD123");
},
"parse grid url path with focused empty tile": assert => {
const segments = parseUrlPath("/session/1/rooms/a,b,c/3");
const path = createEmptyPath();
const segments = parseUrlPath("/session/1/rooms/a,b,c/3", path);
assert.equal(segments.length, 3);
assert.equal(segments[0].type, "session");
assert.equal(segments[0].value, "1");
@ -255,7 +282,8 @@ export function tests() {
assert.equal(segments[2].value, 3);
},
"parse grid url path with focused room": assert => {
const segments = parseUrlPath("/session/1/rooms/a,b,c/1");
const path = createEmptyPath();
const segments = parseUrlPath("/session/1/rooms/a,b,c/1", path);
assert.equal(segments.length, 3);
assert.equal(segments[0].type, "session");
assert.equal(segments[0].value, "1");
@ -265,7 +293,8 @@ export function tests() {
assert.equal(segments[2].value, "b");
},
"parse empty grid url": assert => {
const segments = parseUrlPath("/session/1/rooms/");
const path = createEmptyPath();
const segments = parseUrlPath("/session/1/rooms/", path);
assert.equal(segments.length, 3);
assert.equal(segments[0].type, "session");
assert.equal(segments[0].value, "1");
@ -275,7 +304,8 @@ export function tests() {
assert.equal(segments[2].value, 0);
},
"parse empty grid url with focus": assert => {
const segments = parseUrlPath("/session/1/rooms//1");
const path = createEmptyPath();
const segments = parseUrlPath("/session/1/rooms//1", path);
assert.equal(segments.length, 3);
assert.equal(segments[0].type, "session");
assert.equal(segments[0].value, "1");
@ -285,7 +315,7 @@ export function tests() {
assert.equal(segments[2].value, 1);
},
"parse open-room action replacing the current focused room": assert => {
const nav = new Navigation(allowsChild);
const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([
new Segment("session", 1),
new Segment("rooms", ["a", "b", "c"]),
@ -301,7 +331,7 @@ export function tests() {
assert.equal(segments[2].value, "d");
},
"parse open-room action changing focus to an existing room": assert => {
const nav = new Navigation(allowsChild);
const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([
new Segment("session", 1),
new Segment("rooms", ["a", "b", "c"]),
@ -317,7 +347,7 @@ export function tests() {
assert.equal(segments[2].value, "a");
},
"parse open-room action changing focus to an existing room with details open": assert => {
const nav = new Navigation(allowsChild);
const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([
new Segment("session", 1),
new Segment("rooms", ["a", "b", "c"]),
@ -339,7 +369,7 @@ export function tests() {
assert.equal(segments[4].value, true);
},
"open-room action should only copy over previous segments if there are no parts after open-room": assert => {
const nav = new Navigation(allowsChild);
const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([
new Segment("session", 1),
new Segment("rooms", ["a", "b", "c"]),
@ -361,7 +391,7 @@ export function tests() {
assert.equal(segments[4].value, "foo");
},
"parse open-room action setting a room in an empty tile": assert => {
const nav = new Navigation(allowsChild);
const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([
new Segment("session", 1),
new Segment("rooms", ["a", "b", "c"]),
@ -377,82 +407,83 @@ export function tests() {
assert.equal(segments[2].value, "d");
},
"parse session url path without id": assert => {
const segments = parseUrlPath("/session");
const path = createEmptyPath();
const segments = parseUrlPath("/session", path);
assert.equal(segments.length, 1);
assert.equal(segments[0].type, "session");
assert.strictEqual(segments[0].value, true);
},
"remove active room from grid path turns it into empty tile": assert => {
const nav = new Navigation(allowsChild);
const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([
new Segment("session", 1),
new Segment("rooms", ["a", "b", "c"]),
new Segment("room", "b")
]);
const newPath = removeRoomFromPath(path, "b");
assert.equal(newPath.segments.length, 3);
assert.equal(newPath.segments[0].type, "session");
assert.equal(newPath.segments[0].value, 1);
assert.equal(newPath.segments[1].type, "rooms");
assert.deepEqual(newPath.segments[1].value, ["a", "", "c"]);
assert.equal(newPath.segments[2].type, "empty-grid-tile");
assert.equal(newPath.segments[2].value, 1);
assert.equal(newPath?.segments.length, 3);
assert.equal(newPath?.segments[0].type, "session");
assert.equal(newPath?.segments[0].value, 1);
assert.equal(newPath?.segments[1].type, "rooms");
assert.deepEqual(newPath?.segments[1].value, ["a", "", "c"]);
assert.equal(newPath?.segments[2].type, "empty-grid-tile");
assert.equal(newPath?.segments[2].value, 1);
},
"remove inactive room from grid path": assert => {
const nav = new Navigation(allowsChild);
const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([
new Segment("session", 1),
new Segment("rooms", ["a", "b", "c"]),
new Segment("room", "b")
]);
const newPath = removeRoomFromPath(path, "a");
assert.equal(newPath.segments.length, 3);
assert.equal(newPath.segments[0].type, "session");
assert.equal(newPath.segments[0].value, 1);
assert.equal(newPath.segments[1].type, "rooms");
assert.deepEqual(newPath.segments[1].value, ["", "b", "c"]);
assert.equal(newPath.segments[2].type, "room");
assert.equal(newPath.segments[2].value, "b");
assert.equal(newPath?.segments.length, 3);
assert.equal(newPath?.segments[0].type, "session");
assert.equal(newPath?.segments[0].value, 1);
assert.equal(newPath?.segments[1].type, "rooms");
assert.deepEqual(newPath?.segments[1].value, ["", "b", "c"]);
assert.equal(newPath?.segments[2].type, "room");
assert.equal(newPath?.segments[2].value, "b");
},
"remove inactive room from grid path with empty tile": assert => {
const nav = new Navigation(allowsChild);
const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([
new Segment("session", 1),
new Segment("rooms", ["a", "b", ""]),
new Segment("empty-grid-tile", 3)
]);
const newPath = removeRoomFromPath(path, "b");
assert.equal(newPath.segments.length, 3);
assert.equal(newPath.segments[0].type, "session");
assert.equal(newPath.segments[0].value, 1);
assert.equal(newPath.segments[1].type, "rooms");
assert.deepEqual(newPath.segments[1].value, ["a", "", ""]);
assert.equal(newPath.segments[2].type, "empty-grid-tile");
assert.equal(newPath.segments[2].value, 3);
assert.equal(newPath?.segments.length, 3);
assert.equal(newPath?.segments[0].type, "session");
assert.equal(newPath?.segments[0].value, 1);
assert.equal(newPath?.segments[1].type, "rooms");
assert.deepEqual(newPath?.segments[1].value, ["a", "", ""]);
assert.equal(newPath?.segments[2].type, "empty-grid-tile");
assert.equal(newPath?.segments[2].value, 3);
},
"remove active room": assert => {
const nav = new Navigation(allowsChild);
const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([
new Segment("session", 1),
new Segment("room", "b")
]);
const newPath = removeRoomFromPath(path, "b");
assert.equal(newPath.segments.length, 1);
assert.equal(newPath.segments[0].type, "session");
assert.equal(newPath.segments[0].value, 1);
assert.equal(newPath?.segments.length, 1);
assert.equal(newPath?.segments[0].type, "session");
assert.equal(newPath?.segments[0].value, 1);
},
"remove inactive room doesn't do anything": assert => {
const nav = new Navigation(allowsChild);
const nav: Navigation<SegmentType> = new Navigation(allowsChild);
const path = nav.pathFrom([
new Segment("session", 1),
new Segment("room", "b")
]);
const newPath = removeRoomFromPath(path, "a");
assert.equal(newPath.segments.length, 2);
assert.equal(newPath.segments[0].type, "session");
assert.equal(newPath.segments[0].value, 1);
assert.equal(newPath.segments[1].type, "room");
assert.equal(newPath.segments[1].value, "b");
assert.equal(newPath?.segments.length, 2);
assert.equal(newPath?.segments[0].type, "session");
assert.equal(newPath?.segments[0].value, 1);
assert.equal(newPath?.segments[1].type, "room");
assert.equal(newPath?.segments[1].value, "b");
},
}

65
src/domain/rageshake.ts Normal file
View file

@ -0,0 +1,65 @@
/*
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 type {BlobHandle} from "../platform/web/dom/BlobHandle";
import type {RequestFunction} from "../platform/types/types";
// see https://github.com/matrix-org/rageshake#readme
type RageshakeData = {
// A textual description of the problem. Included in the details.log.gz file.
text: string | undefined;
// Application user-agent. Included in the details.log.gz file.
userAgent: string;
// Identifier for the application (eg 'riot-web'). Should correspond to a mapping configured in the configuration file for github issue reporting to work.
app: string;
// Application version. Included in the details.log.gz file.
version: string;
// Label to attach to the github issue, and include in the details file.
label: string | undefined;
};
export async function submitLogsToRageshakeServer(data: RageshakeData, logsBlob: BlobHandle, submitUrl: string, request: RequestFunction): Promise<void> {
const formData = new Map<string, string | {name: string, blob: BlobHandle}>();
if (data.text) {
formData.set("text", data.text);
}
formData.set("user_agent", data.userAgent);
formData.set("app", data.app);
formData.set("version", data.version);
if (data.label) {
formData.set("label", data.label);
}
formData.set("file", {name: "logs.json", blob: logsBlob});
const headers: Map<string, string> = new Map();
headers.set("Accept", "application/json");
const result = request(submitUrl, {
method: "POST",
body: formData,
headers
});
let response;
try {
response = await result.response();
} catch (err) {
throw new Error(`Could not submit logs to ${submitUrl}, got error ${err.message}`);
}
const {status, body} = response;
if (status < 200 || status >= 300) {
throw new Error(`Could not submit logs to ${submitUrl}, got status code ${status} with body ${body}`);
}
// we don't bother with reading report_url from the body as the rageshake server doesn't always return it
// and would have to have CORS setup properly for us to be able to read it.
}

View file

@ -15,7 +15,7 @@ limitations under the License.
*/
import {ViewModel} from "../ViewModel";
import {addPanelIfNeeded} from "../navigation/index.js";
import {addPanelIfNeeded} from "../navigation/index";
function dedupeSparse(roomIds) {
return roomIds.map((id, idx) => {
@ -185,7 +185,7 @@ export class RoomGridViewModel extends ViewModel {
}
}
import {createNavigation} from "../navigation/index.js";
import {createNavigation} from "../navigation/index";
import {ObservableValue} from "../../observable/ObservableValue";
export function tests() {

View file

@ -21,7 +21,7 @@ import {InviteTileViewModel} from "./InviteTileViewModel.js";
import {RoomBeingCreatedTileViewModel} from "./RoomBeingCreatedTileViewModel.js";
import {RoomFilter} from "./RoomFilter.js";
import {ApplyMap} from "../../../observable/map/ApplyMap.js";
import {addPanelIfNeeded} from "../../navigation/index.js";
import {addPanelIfNeeded} from "../../navigation/index";
export class LeftPanelViewModel extends ViewModel {
constructor(options) {

View file

@ -23,6 +23,7 @@ import {imageToInfo} from "../common.js";
// TODO: remove fallback so default isn't included in bundle for SDK users that have their custom tileClassForEntry
// this is a breaking SDK change though to make this option mandatory
import {tileClassForEntry as defaultTileClassForEntry} from "./timeline/tiles/index";
import {RoomStatus} from "../../../matrix/room/common";
export class RoomViewModel extends ViewModel {
constructor(options) {
@ -37,9 +38,9 @@ export class RoomViewModel extends ViewModel {
this._sendError = null;
this._composerVM = null;
if (room.isArchived) {
this._composerVM = new ArchivedViewModel(this.childOptions({archivedRoom: room}));
this._composerVM = this.track(new ArchivedViewModel(this.childOptions({archivedRoom: room})));
} else {
this._composerVM = new ComposerViewModel(this);
this._recreateComposerOnPowerLevelChange();
}
this._clearUnreadTimout = null;
this._closeUrl = this.urlCreator.urlUntilSegment("session");
@ -67,6 +68,30 @@ export class RoomViewModel extends ViewModel {
this._clearUnreadAfterDelay();
}
async _recreateComposerOnPowerLevelChange() {
const powerLevelObservable = await this._room.observePowerLevels();
const canSendMessage = () => powerLevelObservable.get().canSendType("m.room.message");
let oldCanSendMessage = canSendMessage();
const recreateComposer = newCanSendMessage => {
this._composerVM = this.disposeTracked(this._composerVM);
if (newCanSendMessage) {
this._composerVM = this.track(new ComposerViewModel(this));
}
else {
this._composerVM = this.track(new LowerPowerLevelViewModel(this.childOptions()));
}
this.emitChange("powerLevelObservable")
};
this.track(powerLevelObservable.subscribe(() => {
const newCanSendMessage = canSendMessage();
if (oldCanSendMessage !== newCanSendMessage) {
recreateComposer(newCanSendMessage);
oldCanSendMessage = newCanSendMessage;
}
}));
recreateComposer(oldCanSendMessage);
}
async _clearUnreadAfterDelay() {
if (this._room.isArchived || this._clearUnreadTimout) {
return;
@ -173,19 +198,90 @@ export class RoomViewModel extends ViewModel {
}
}
async _processCommandJoin(roomName) {
try {
const roomId = await this._options.client.session.joinRoom(roomName);
const roomStatusObserver = await this._options.client.session.observeRoomStatus(roomId);
await roomStatusObserver.waitFor(status => status === RoomStatus.Joined);
this.navigation.push("room", roomId);
} catch (err) {
let exc;
if ((err.statusCode ?? err.status) === 400) {
exc = new Error(`/join : '${roomName}' was not legal room ID or room alias`);
} else if ((err.statusCode ?? err.status) === 404 || (err.statusCode ?? err.status) === 502 || err.message == "Internal Server Error") {
exc = new Error(`/join : room '${roomName}' not found`);
} else if ((err.statusCode ?? err.status) === 403) {
exc = new Error(`/join : you're not invited to join '${roomName}'`);
} else {
exc = err;
}
this._sendError = exc;
this._timelineError = null;
this.emitChange("error");
}
}
async _processCommand (message) {
let msgtype;
const [commandName, ...args] = message.substring(1).split(" ");
switch (commandName) {
case "me":
message = args.join(" ");
msgtype = "m.emote";
break;
case "join":
if (args.length === 1) {
const roomName = args[0];
await this._processCommandJoin(roomName);
} else {
this._sendError = new Error("join syntax: /join <room-id>");
this._timelineError = null;
this.emitChange("error");
}
break;
case "shrug":
message = "¯\\_(ツ)_/¯ " + args.join(" ");
msgtype = "m.text";
break;
case "tableflip":
message = "(╯°□°)╯︵ ┻━┻ " + args.join(" ");
msgtype = "m.text";
break;
case "unflip":
message = "┬──┬ ( ゜-゜ノ) " + args.join(" ");
msgtype = "m.text";
break;
case "lenny":
message = "( ͡° ͜ʖ ͡°) " + args.join(" ");
msgtype = "m.text";
break;
default:
this._sendError = new Error(`no command name "${commandName}". To send the message instead of executing, please type "/${message}"`);
this._timelineError = null;
this.emitChange("error");
message = undefined;
}
return {type: msgtype, message: message};
}
async _sendMessage(message, replyingTo) {
if (!this._room.isArchived && message) {
try {
let msgtype = "m.text";
if (message.startsWith("/me ")) {
message = message.substr(4).trim();
msgtype = "m.emote";
let messinfo = {type : "m.text", message : message};
if (message.startsWith("//")) {
messinfo.message = message.substring(1).trim();
} else if (message.startsWith("/")) {
messinfo = await this._processCommand(message);
}
try {
const msgtype = messinfo.type;
const message = messinfo.message;
if (msgtype && message) {
if (replyingTo) {
await replyingTo.reply(msgtype, message);
} else {
await this._room.sendEvent("m.room.message", {msgtype, body: message});
}
}
} catch (err) {
console.error(`room.sendMessage(): ${err.message}:\n${err.stack}`);
this._sendError = err;
@ -329,6 +425,11 @@ export class RoomViewModel extends ViewModel {
this._composerVM.setReplyingTo(entry);
}
}
dismissError() {
this._sendError = null;
this.emitChange("error");
}
}
function videoToInfo(video) {
@ -362,6 +463,16 @@ class ArchivedViewModel extends ViewModel {
}
get kind() {
return "archived";
return "disabled";
}
}
class LowerPowerLevelViewModel extends ViewModel {
get description() {
return this.i18n`You do not have the powerlevel necessary to send messages`;
}
get kind() {
return "disabled";
}
}

View file

@ -27,6 +27,29 @@ export class BaseMediaTile extends BaseMessageTile {
this._decryptedFile = null;
this._isVisible = false;
this._error = null;
this._downloading = false;
this._downloadError = null;
}
async downloadMedia() {
if (this._downloading || this.isPending) {
return;
}
const content = this._getContent();
const filename = content.body;
this._downloading = true;
this.emitChange("status");
let blob;
try {
blob = await this._mediaRepository.downloadAttachment(content);
this.platform.saveFileAs(blob, filename);
} catch (err) {
this._downloadError = err;
} finally {
blob?.dispose();
this._downloading = false;
}
this.emitChange("status");
}
get isUploading() {
@ -38,7 +61,7 @@ export class BaseMediaTile extends BaseMessageTile {
return pendingEvent && Math.round((pendingEvent.attachmentsSentBytes / pendingEvent.attachmentsTotalBytes) * 100);
}
get sendStatus() {
get status() {
const {pendingEvent} = this._entry;
switch (pendingEvent?.status) {
case SendStatus.Waiting:
@ -53,6 +76,12 @@ export class BaseMediaTile extends BaseMessageTile {
case SendStatus.Error:
return this.i18n`Error: ${pendingEvent.error.message}`;
default:
if (this._downloadError) {
return `Download failed`;
}
if (this._downloading) {
return this.i18n`Downloading…`;
}
return "";
}
}

View file

@ -16,6 +16,7 @@ limitations under the License.
import {ViewModel} from "../../ViewModel";
import {KeyBackupViewModel} from "./KeyBackupViewModel.js";
import {submitLogsToRageshakeServer} from "../../../domain/rageshake";
class PushNotificationStatus {
constructor() {
@ -51,6 +52,7 @@ export class SettingsViewModel extends ViewModel {
this.maxSentImageSizeLimit = 4000;
this.pushNotifications = new PushNotificationStatus();
this._activeTheme = undefined;
this._logsFeedbackMessage = undefined;
}
get _session() {
@ -152,6 +154,51 @@ export class SettingsViewModel extends ViewModel {
this.platform.saveFileAs(logExport.asBlob(), `hydrogen-logs-${this.platform.clock.now()}.json`);
}
get canSendLogsToServer() {
return !!this.platform.config.bugReportEndpointUrl;
}
get logsServer() {
const {bugReportEndpointUrl} = this.platform.config;
try {
if (bugReportEndpointUrl) {
return new URL(bugReportEndpointUrl).hostname;
}
} catch (e) {}
return "";
}
async sendLogsToServer() {
const {bugReportEndpointUrl} = this.platform.config;
if (bugReportEndpointUrl) {
this._logsFeedbackMessage = this.i18n`Sending logs…`;
this.emitChange();
try {
const logExport = await this.logger.export();
await submitLogsToRageshakeServer(
{
app: "hydrogen",
userAgent: this.platform.description,
version: DEFINE_VERSION,
text: `Submit logs from settings for user ${this._session.userId} on device ${this._session.deviceId}`,
},
logExport.asBlob(),
bugReportEndpointUrl,
this.platform.request
);
this._logsFeedbackMessage = this.i18n`Logs sent succesfully!`;
this.emitChange();
} catch (err) {
this._logsFeedbackMessage = err.message;
this.emitChange();
}
}
}
get logsFeedbackMessage() {
return this._logsFeedbackMessage;
}
async togglePushNotifications() {
this.pushNotifications.updating = true;
this.pushNotifications.enabledOnServer = null;

View file

@ -18,7 +18,7 @@ export {Platform} from "./platform/web/Platform.js";
export {Client, LoadStatus} from "./matrix/Client.js";
export {RoomStatus} from "./matrix/room/common";
// export main view & view models
export {createNavigation, createRouter} from "./domain/navigation/index.js";
export {createNavigation, createRouter} from "./domain/navigation/index";
export {RootViewModel} from "./domain/RootViewModel.js";
export {RootView} from "./platform/web/ui/RootView.js";
export {SessionViewModel} from "./domain/session/SessionViewModel.js";

View file

@ -100,6 +100,8 @@ export class Client {
});
}
// TODO: When converted to typescript this should return the same type
// as this._loginOptions is in LoginViewModel.ts (LoginOptions).
_parseLoginOptions(options, homeserver) {
/*
Take server response and return new object which has two props password and sso which

View file

@ -15,11 +15,13 @@ limitations under the License.
*/
import {verifyEd25519Signature, SIGNATURE_ALGORITHM} from "./common.js";
import {HistoryVisibility, shouldShareKey} from "./common.js";
import {RoomMember} from "../room/members/RoomMember.js";
const TRACKING_STATUS_OUTDATED = 0;
const TRACKING_STATUS_UPTODATE = 1;
export function addRoomToIdentity(identity, userId, roomId) {
function addRoomToIdentity(identity, userId, roomId) {
if (!identity) {
identity = {
userId: userId,
@ -79,28 +81,57 @@ export class DeviceTracker {
}));
}
writeMemberChanges(room, memberChanges, txn) {
return Promise.all(Array.from(memberChanges.values()).map(async memberChange => {
return this._applyMemberChange(memberChange, txn);
/** @return Promise<{added: string[], removed: string[]}> the user ids for who the room was added or removed to the userIdentity,
* and with who a key should be now be shared
**/
async writeMemberChanges(room, memberChanges, historyVisibility, txn) {
const added = [];
const removed = [];
await Promise.all(Array.from(memberChanges.values()).map(async memberChange => {
// keys should now be shared with this member?
// add the room to the userIdentity if so
if (shouldShareKey(memberChange.membership, historyVisibility)) {
if (await this._addRoomToUserIdentity(memberChange.roomId, memberChange.userId, txn)) {
added.push(memberChange.userId);
}
} else if (shouldShareKey(memberChange.previousMembership, historyVisibility)) {
// try to remove room we were previously sharing the key with the member but not anymore
const {roomId} = memberChange;
// if we left the room, remove room from all user identities in the room
if (memberChange.userId === this._ownUserId) {
const userIds = await txn.roomMembers.getAllUserIds(roomId);
await Promise.all(userIds.map(userId => {
return this._removeRoomFromUserIdentity(roomId, userId, txn);
}));
} else {
await this._removeRoomFromUserIdentity(roomId, memberChange.userId, txn);
}
removed.push(memberChange.userId);
}
}));
return {added, removed};
}
async trackRoom(room, log) {
async trackRoom(room, historyVisibility, log) {
if (room.isTrackingMembers || !room.isEncrypted) {
return;
}
const memberList = await room.loadMemberList(log);
try {
const memberList = await room.loadMemberList(undefined, log);
const txn = await this._storage.readWriteTxn([
this._storage.storeNames.roomSummary,
this._storage.storeNames.userIdentities,
]);
try {
let isTrackingChanges;
try {
isTrackingChanges = room.writeIsTrackingMembers(true, txn);
const members = Array.from(memberList.members.values());
log.set("members", members.length);
await this._writeJoinedMembers(members, txn);
await Promise.all(members.map(async member => {
if (shouldShareKey(member.membership, historyVisibility)) {
await this._addRoomToUserIdentity(member.roomId, member.userId, txn);
}
}));
} catch (err) {
txn.abort();
throw err;
@ -112,21 +143,43 @@ export class DeviceTracker {
}
}
async _writeJoinedMembers(members, txn) {
async writeHistoryVisibility(room, historyVisibility, syncTxn, log) {
const added = [];
const removed = [];
if (room.isTrackingMembers && room.isEncrypted) {
await log.wrap("rewriting userIdentities", async log => {
const memberList = await room.loadMemberList(syncTxn, log);
try {
const members = Array.from(memberList.members.values());
log.set("members", members.length);
await Promise.all(members.map(async member => {
if (member.membership === "join") {
await this._writeMember(member, txn);
if (shouldShareKey(member.membership, historyVisibility)) {
if (await this._addRoomToUserIdentity(member.roomId, member.userId, syncTxn)) {
added.push(member.userId);
}
} else {
if (await this._removeRoomFromUserIdentity(member.roomId, member.userId, syncTxn)) {
removed.push(member.userId);
}
}
}));
} finally {
memberList.release();
}
});
}
return {added, removed};
}
async _writeMember(member, txn) {
async _addRoomToUserIdentity(roomId, userId, txn) {
const {userIdentities} = txn;
const identity = await userIdentities.get(member.userId);
const updatedIdentity = addRoomToIdentity(identity, member.userId, member.roomId);
const identity = await userIdentities.get(userId);
const updatedIdentity = addRoomToIdentity(identity, userId, roomId);
if (updatedIdentity) {
userIdentities.set(updatedIdentity);
return true;
}
return false;
}
async _removeRoomFromUserIdentity(roomId, userId, txn) {
@ -141,28 +194,9 @@ export class DeviceTracker {
} else {
userIdentities.set(identity);
}
return true;
}
}
async _applyMemberChange(memberChange, txn) {
// TODO: depends whether we encrypt for invited users??
// add room
if (memberChange.hasJoined) {
await this._writeMember(memberChange.member, txn);
}
// remove room
else if (memberChange.hasLeft) {
const {roomId} = memberChange;
// if we left the room, remove room from all user identities in the room
if (memberChange.userId === this._ownUserId) {
const userIds = await txn.roomMembers.getAllUserIds(roomId);
await Promise.all(userIds.map(userId => {
return this._removeRoomFromUserIdentity(roomId, userId, txn);
}));
} else {
await this._removeRoomFromUserIdentity(roomId, memberChange.userId, txn);
}
}
return false;
}
async _queryKeys(userIds, hsApi, log) {
@ -367,16 +401,18 @@ export class DeviceTracker {
import {createMockStorage} from "../../mocks/Storage";
import {Instance as NullLoggerInstance} from "../../logging/NullLogger";
import {MemberChange} from "../room/members/RoomMember";
export function tests() {
function createUntrackedRoomMock(roomId, joinedUserIds, invitedUserIds = []) {
return {
id: roomId,
isTrackingMembers: false,
isEncrypted: true,
loadMemberList: () => {
const joinedMembers = joinedUserIds.map(userId => {return {membership: "join", roomId, userId};});
const invitedMembers = invitedUserIds.map(userId => {return {membership: "invite", roomId, userId};});
const joinedMembers = joinedUserIds.map(userId => {return RoomMember.fromUserId(roomId, userId, "join");});
const invitedMembers = invitedUserIds.map(userId => {return RoomMember.fromUserId(roomId, userId, "invite");});
const members = joinedMembers.concat(invitedMembers);
const memberMap = members.reduce((map, member) => {
map.set(member.userId, member);
@ -440,10 +476,29 @@ export function tests() {
}
};
}
async function writeMemberListToStorage(room, storage) {
const txn = await storage.readWriteTxn([
storage.storeNames.roomMembers,
]);
const memberList = await room.loadMemberList(txn);
try {
for (const member of memberList.members.values()) {
txn.roomMembers.set(member.serialize());
}
} catch (err) {
txn.abort();
throw err;
} finally {
memberList.release();
}
await txn.complete();
}
const roomId = "!abc:hs.tld";
return {
"trackRoom only writes joined members": async assert => {
"trackRoom only writes joined members with history visibility of joined": async assert => {
const storage = await createMockStorage();
const tracker = new DeviceTracker({
storage,
@ -453,7 +508,7 @@ export function tests() {
ownDeviceId: "ABCD",
});
const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld", "@bob:hs.tld"], ["@charly:hs.tld"]);
await tracker.trackRoom(room, NullLoggerInstance.item);
await tracker.trackRoom(room, HistoryVisibility.Joined, NullLoggerInstance.item);
const txn = await storage.readTxn([storage.storeNames.userIdentities]);
assert.deepEqual(await txn.userIdentities.get("@alice:hs.tld"), {
userId: "@alice:hs.tld",
@ -477,7 +532,7 @@ export function tests() {
ownDeviceId: "ABCD",
});
const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld", "@bob:hs.tld"]);
await tracker.trackRoom(room, NullLoggerInstance.item);
await tracker.trackRoom(room, HistoryVisibility.Joined, NullLoggerInstance.item);
const hsApi = createQueryKeysHSApiMock();
const devices = await tracker.devicesForRoomMembers(roomId, ["@alice:hs.tld", "@bob:hs.tld"], hsApi, NullLoggerInstance.item);
assert.equal(devices.length, 2);
@ -494,7 +549,7 @@ export function tests() {
ownDeviceId: "ABCD",
});
const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld", "@bob:hs.tld"]);
await tracker.trackRoom(room, NullLoggerInstance.item);
await tracker.trackRoom(room, HistoryVisibility.Joined, NullLoggerInstance.item);
const hsApi = createQueryKeysHSApiMock();
// query devices first time
await tracker.devicesForRoomMembers(roomId, ["@alice:hs.tld", "@bob:hs.tld"], hsApi, NullLoggerInstance.item);
@ -512,6 +567,169 @@ export function tests() {
const txn2 = await storage.readTxn([storage.storeNames.deviceIdentities]);
// also check the modified key was not stored
assert.equal((await txn2.deviceIdentities.get("@alice:hs.tld", "device1")).ed25519Key, "ed25519:@alice:hs.tld:device1:key");
}
},
"change history visibility from joined to invited adds invitees": async assert => {
const storage = await createMockStorage();
const tracker = new DeviceTracker({
storage,
getSyncToken: () => "token",
olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
ownUserId: "@alice:hs.tld",
ownDeviceId: "ABCD",
});
// alice is joined, bob is invited
const room = await createUntrackedRoomMock(roomId,
["@alice:hs.tld"], ["@bob:hs.tld"]);
await tracker.trackRoom(room, HistoryVisibility.Joined, NullLoggerInstance.item);
const txn = await storage.readWriteTxn([storage.storeNames.userIdentities, storage.storeNames.deviceIdentities]);
assert.equal(await txn.userIdentities.get("@bob:hs.tld"), undefined);
const {added, removed} = await tracker.writeHistoryVisibility(room, HistoryVisibility.Invited, txn, NullLoggerInstance.item);
assert.equal((await txn.userIdentities.get("@bob:hs.tld")).userId, "@bob:hs.tld");
assert.deepEqual(added, ["@bob:hs.tld"]);
assert.deepEqual(removed, []);
},
"change history visibility from invited to joined removes invitees": async assert => {
const storage = await createMockStorage();
const tracker = new DeviceTracker({
storage,
getSyncToken: () => "token",
olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
ownUserId: "@alice:hs.tld",
ownDeviceId: "ABCD",
});
// alice is joined, bob is invited
const room = await createUntrackedRoomMock(roomId,
["@alice:hs.tld"], ["@bob:hs.tld"]);
await tracker.trackRoom(room, HistoryVisibility.Invited, NullLoggerInstance.item);
const txn = await storage.readWriteTxn([storage.storeNames.userIdentities, storage.storeNames.deviceIdentities]);
assert.equal((await txn.userIdentities.get("@bob:hs.tld")).userId, "@bob:hs.tld");
const {added, removed} = await tracker.writeHistoryVisibility(room, HistoryVisibility.Joined, txn, NullLoggerInstance.item);
assert.equal(await txn.userIdentities.get("@bob:hs.tld"), undefined);
assert.deepEqual(added, []);
assert.deepEqual(removed, ["@bob:hs.tld"]);
},
"adding invitee with history visibility of invited adds room to userIdentities": async assert => {
const storage = await createMockStorage();
const tracker = new DeviceTracker({
storage,
getSyncToken: () => "token",
olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
ownUserId: "@alice:hs.tld",
ownDeviceId: "ABCD",
});
const room = await createUntrackedRoomMock(roomId, ["@alice:hs.tld"]);
await tracker.trackRoom(room, HistoryVisibility.Invited, NullLoggerInstance.item);
const txn = await storage.readWriteTxn([storage.storeNames.userIdentities, storage.storeNames.deviceIdentities]);
// inviting a new member
const inviteChange = new MemberChange(RoomMember.fromUserId(roomId, "@bob:hs.tld", "invite"));
const {added, removed} = await tracker.writeMemberChanges(room, [inviteChange], HistoryVisibility.Invited, txn);
assert.deepEqual(added, ["@bob:hs.tld"]);
assert.deepEqual(removed, []);
assert.equal((await txn.userIdentities.get("@bob:hs.tld")).userId, "@bob:hs.tld");
},
"adding invitee with history visibility of joined doesn't add room": async assert => {
const storage = await createMockStorage();
const tracker = new DeviceTracker({
storage,
getSyncToken: () => "token",
olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
ownUserId: "@alice:hs.tld",
ownDeviceId: "ABCD",
});
const room = await createUntrackedRoomMock(roomId, ["@alice:hs.tld"]);
await tracker.trackRoom(room, HistoryVisibility.Joined, NullLoggerInstance.item);
const txn = await storage.readWriteTxn([storage.storeNames.userIdentities, storage.storeNames.deviceIdentities]);
// inviting a new member
const inviteChange = new MemberChange(RoomMember.fromUserId(roomId, "@bob:hs.tld", "invite"));
const memberChanges = new Map([[inviteChange.userId, inviteChange]]);
const {added, removed} = await tracker.writeMemberChanges(room, memberChanges, HistoryVisibility.Joined, txn);
assert.deepEqual(added, []);
assert.deepEqual(removed, []);
assert.equal(await txn.userIdentities.get("@bob:hs.tld"), undefined);
},
"getting all devices after changing history visibility now includes invitees": async assert => {
const storage = await createMockStorage();
const tracker = new DeviceTracker({
storage,
getSyncToken: () => "token",
olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
ownUserId: "@alice:hs.tld",
ownDeviceId: "ABCD",
});
const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld"], ["@bob:hs.tld"]);
await tracker.trackRoom(room, HistoryVisibility.Invited, NullLoggerInstance.item);
const hsApi = createQueryKeysHSApiMock();
// write memberlist from room mock to mock storage,
// as devicesForTrackedRoom reads directly from roomMembers store.
await writeMemberListToStorage(room, storage);
const devices = await tracker.devicesForTrackedRoom(roomId, hsApi, NullLoggerInstance.item);
assert.equal(devices.length, 2);
assert.equal(devices.find(d => d.userId === "@alice:hs.tld").ed25519Key, "ed25519:@alice:hs.tld:device1:key");
assert.equal(devices.find(d => d.userId === "@bob:hs.tld").ed25519Key, "ed25519:@bob:hs.tld:device1:key");
},
"rejecting invite with history visibility of invited removes room from user identity": async assert => {
const storage = await createMockStorage();
const tracker = new DeviceTracker({
storage,
getSyncToken: () => "token",
olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
ownUserId: "@alice:hs.tld",
ownDeviceId: "ABCD",
});
// alice is joined, bob is invited
const room = await createUntrackedRoomMock(roomId, ["@alice:hs.tld"], ["@bob:hs.tld"]);
await tracker.trackRoom(room, HistoryVisibility.Invited, NullLoggerInstance.item);
const txn = await storage.readWriteTxn([storage.storeNames.userIdentities, storage.storeNames.deviceIdentities]);
// reject invite
const inviteChange = new MemberChange(RoomMember.fromUserId(roomId, "@bob:hs.tld", "leave"), "invite");
const memberChanges = new Map([[inviteChange.userId, inviteChange]]);
const {added, removed} = await tracker.writeMemberChanges(room, memberChanges, HistoryVisibility.Invited, txn);
assert.deepEqual(added, []);
assert.deepEqual(removed, ["@bob:hs.tld"]);
assert.equal(await txn.userIdentities.get("@bob:hs.tld"), undefined);
},
"remove room from user identity sharing multiple rooms with us preserves other room": async assert => {
const storage = await createMockStorage();
const tracker = new DeviceTracker({
storage,
getSyncToken: () => "token",
olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
ownUserId: "@alice:hs.tld",
ownDeviceId: "ABCD",
});
// alice is joined, bob is invited
const room1 = await createUntrackedRoomMock("!abc:hs.tld", ["@alice:hs.tld", "@bob:hs.tld"]);
const room2 = await createUntrackedRoomMock("!def:hs.tld", ["@alice:hs.tld", "@bob:hs.tld"]);
await tracker.trackRoom(room1, HistoryVisibility.Joined, NullLoggerInstance.item);
await tracker.trackRoom(room2, HistoryVisibility.Joined, NullLoggerInstance.item);
const txn1 = await storage.readTxn([storage.storeNames.userIdentities]);
assert.deepEqual((await txn1.userIdentities.get("@bob:hs.tld")).roomIds, ["!abc:hs.tld", "!def:hs.tld"]);
const leaveChange = new MemberChange(RoomMember.fromUserId(room2.id, "@bob:hs.tld", "leave"), "join");
const memberChanges = new Map([[leaveChange.userId, leaveChange]]);
const txn2 = await storage.readWriteTxn([storage.storeNames.userIdentities, storage.storeNames.deviceIdentities]);
await tracker.writeMemberChanges(room2, memberChanges, HistoryVisibility.Joined, txn2);
await txn2.complete();
const txn3 = await storage.readTxn([storage.storeNames.userIdentities]);
assert.deepEqual((await txn3.userIdentities.get("@bob:hs.tld")).roomIds, ["!abc:hs.tld"]);
},
"add room to user identity sharing multiple rooms with us preserves other room": async assert => {
const storage = await createMockStorage();
const tracker = new DeviceTracker({
storage,
getSyncToken: () => "token",
olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
ownUserId: "@alice:hs.tld",
ownDeviceId: "ABCD",
});
// alice is joined, bob is invited
const room1 = await createUntrackedRoomMock("!abc:hs.tld", ["@alice:hs.tld", "@bob:hs.tld"]);
const room2 = await createUntrackedRoomMock("!def:hs.tld", ["@alice:hs.tld", "@bob:hs.tld"]);
await tracker.trackRoom(room1, HistoryVisibility.Joined, NullLoggerInstance.item);
const txn1 = await storage.readTxn([storage.storeNames.userIdentities]);
assert.deepEqual((await txn1.userIdentities.get("@bob:hs.tld")).roomIds, ["!abc:hs.tld"]);
await tracker.trackRoom(room2, HistoryVisibility.Joined, NullLoggerInstance.item);
const txn2 = await storage.readTxn([storage.storeNames.userIdentities]);
assert.deepEqual((await txn2.userIdentities.get("@bob:hs.tld")).roomIds, ["!abc:hs.tld", "!def:hs.tld"]);
},
}
}

View file

@ -19,8 +19,10 @@ import {groupEventsBySession} from "./megolm/decryption/utils";
import {mergeMap} from "../../utils/mergeMap";
import {groupBy} from "../../utils/groupBy";
import {makeTxnId} from "../common.js";
import {iterateResponseStateEvents} from "../room/common";
const ENCRYPTED_TYPE = "m.room.encrypted";
const ROOM_HISTORY_VISIBILITY_TYPE = "m.room.history_visibility";
// how often ensureMessageKeyIsShared can check if it needs to
// create a new outbound session
// note that encrypt could still create a new session
@ -45,6 +47,7 @@ export class RoomEncryption {
this._isFlushingRoomKeyShares = false;
this._lastKeyPreShareTime = null;
this._keySharePromise = null;
this._historyVisibility = undefined;
this._disposed = false;
}
@ -77,22 +80,68 @@ export class RoomEncryption {
this._senderDeviceCache = new Map(); // purge the sender device cache
}
async writeMemberChanges(memberChanges, txn, log) {
let shouldFlush = false;
const memberChangesArray = Array.from(memberChanges.values());
// this also clears our session if we leave the room ourselves
if (memberChangesArray.some(m => m.hasLeft)) {
async writeSync(roomResponse, memberChanges, txn, log) {
let historyVisibility = await this._loadHistoryVisibilityIfNeeded(this._historyVisibility, txn);
const addedMembers = [];
const removedMembers = [];
// update the historyVisibility if needed
await iterateResponseStateEvents(roomResponse, event => {
// TODO: can the same state event appear twice? Hence we would be rewriting the useridentities twice...
// we'll see in the logs
if(event.state_key === "" && event.type === ROOM_HISTORY_VISIBILITY_TYPE) {
const newHistoryVisibility = event?.content?.history_visibility;
if (newHistoryVisibility !== historyVisibility) {
return log.wrap({
l: "history_visibility changed",
from: historyVisibility,
to: newHistoryVisibility
}, async log => {
historyVisibility = newHistoryVisibility;
const result = await this._deviceTracker.writeHistoryVisibility(this._room, historyVisibility, txn, log);
addedMembers.push(...result.added);
removedMembers.push(...result.removed);
});
}
}
});
// process member changes
if (memberChanges.size) {
const result = await this._deviceTracker.writeMemberChanges(
this._room, memberChanges, historyVisibility, txn);
addedMembers.push(...result.added);
removedMembers.push(...result.removed);
}
// discard key if somebody (including ourselves) left
if (removedMembers.length) {
log.log({
l: "discardOutboundSession",
leftUsers: memberChangesArray.filter(m => m.hasLeft).map(m => m.userId),
leftUsers: removedMembers,
});
this._megolmEncryption.discardOutboundSession(this._room.id, txn);
}
if (memberChangesArray.some(m => m.hasJoined)) {
shouldFlush = await this._addShareRoomKeyOperationForNewMembers(memberChangesArray, txn, log);
let shouldFlush = false;
// add room to userIdentities if needed, and share the current key with them
if (addedMembers.length) {
shouldFlush = await this._addShareRoomKeyOperationForMembers(addedMembers, txn, log);
}
await this._deviceTracker.writeMemberChanges(this._room, memberChanges, txn);
return shouldFlush;
return {shouldFlush, historyVisibility};
}
afterSync({historyVisibility}) {
this._historyVisibility = historyVisibility;
}
async _loadHistoryVisibilityIfNeeded(historyVisibility, txn = undefined) {
if (!historyVisibility) {
if (!txn) {
txn = await this._storage.readTxn([this._storage.storeNames.roomState]);
}
const visibilityEntry = await txn.roomState.get(this._room.id, ROOM_HISTORY_VISIBILITY_TYPE, "");
if (visibilityEntry) {
return visibilityEntry.event?.content?.history_visibility;
}
}
return historyVisibility;
}
async prepareDecryptAll(events, newKeys, source, txn) {
@ -274,10 +323,15 @@ export class RoomEncryption {
}
async _shareNewRoomKey(roomKeyMessage, hsApi, log) {
this._historyVisibility = await this._loadHistoryVisibilityIfNeeded(this._historyVisibility);
await this._deviceTracker.trackRoom(this._room, this._historyVisibility, log);
const devices = await this._deviceTracker.devicesForTrackedRoom(this._room.id, hsApi, log);
const userIds = Array.from(devices.reduce((set, device) => set.add(device.userId), new Set()));
let writeOpTxn = await this._storage.readWriteTxn([this._storage.storeNames.operations]);
let operation;
try {
operation = this._writeRoomKeyShareOperation(roomKeyMessage, null, writeOpTxn);
operation = this._writeRoomKeyShareOperation(roomKeyMessage, userIds, writeOpTxn);
} catch (err) {
writeOpTxn.abort();
throw err;
@ -288,8 +342,7 @@ export class RoomEncryption {
await this._processShareRoomKeyOperation(operation, hsApi, log);
}
async _addShareRoomKeyOperationForNewMembers(memberChangesArray, txn, log) {
const userIds = memberChangesArray.filter(m => m.hasJoined).map(m => m.userId);
async _addShareRoomKeyOperationForMembers(userIds, txn, log) {
const roomKeyMessage = await this._megolmEncryption.createRoomKeyMessage(
this._room.id, txn);
if (roomKeyMessage) {
@ -342,18 +395,9 @@ export class RoomEncryption {
async _processShareRoomKeyOperation(operation, hsApi, log) {
log.set("id", operation.id);
await this._deviceTracker.trackRoom(this._room, log);
let devices;
if (operation.userIds === null) {
devices = await this._deviceTracker.devicesForTrackedRoom(this._room.id, hsApi, log);
const userIds = Array.from(devices.reduce((set, device) => set.add(device.userId), new Set()));
operation.userIds = userIds;
await this._updateOperationsStore(operations => operations.update(operation));
} else {
devices = await this._deviceTracker.devicesForRoomMembers(this._room.id, operation.userIds, hsApi, log);
}
this._historyVisibility = await this._loadHistoryVisibilityIfNeeded(this._historyVisibility);
await this._deviceTracker.trackRoom(this._room, this._historyVisibility, log);
const devices = await this._deviceTracker.devicesForRoomMembers(this._room.id, operation.userIds, hsApi, log);
const messages = await log.wrap("olm encrypt", log => this._olmEncryption.encrypt(
"m.room_key", operation.roomKeyMessage, devices, hsApi, log));
const missingDevices = devices.filter(d => !messages.some(m => m.device === d));
@ -507,3 +551,143 @@ class BatchDecryptionResult {
}));
}
}
import {createMockStorage} from "../../mocks/Storage";
import {Clock as MockClock} from "../../mocks/Clock";
import {poll} from "../../mocks/poll";
import {Instance as NullLoggerInstance} from "../../logging/NullLogger";
import {ConsoleLogger} from "../../logging/ConsoleLogger";
import {HomeServer as MockHomeServer} from "../../mocks/HomeServer.js";
export function tests() {
const roomId = "!abc:hs.tld";
return {
"ensureMessageKeyIsShared tracks room and passes correct history visibility to deviceTracker": async assert => {
const storage = await createMockStorage();
const megolmMock = {
async ensureOutboundSession() { return { }; }
};
const olmMock = {
async encrypt() { return []; }
}
let isRoomTracked = false;
let isDevicesRequested = false;
const deviceTracker = {
async trackRoom(room, historyVisibility) {
// only assert on first call
if (isRoomTracked) { return; }
assert(!isDevicesRequested);
assert.equal(room.id, roomId);
assert.equal(historyVisibility, "invited");
isRoomTracked = true;
},
async devicesForTrackedRoom() {
assert(isRoomTracked);
isDevicesRequested = true;
return [];
},
async devicesForRoomMembers() {
return [];
}
}
const writeTxn = await storage.readWriteTxn([storage.storeNames.roomState]);
writeTxn.roomState.set(roomId, {state_key: "", type: ROOM_HISTORY_VISIBILITY_TYPE, content: {
history_visibility: "invited"
}});
await writeTxn.complete();
const roomEncryption = new RoomEncryption({
room: {id: roomId},
megolmEncryption: megolmMock,
olmEncryption: olmMock,
storage,
deviceTracker,
clock: new MockClock()
});
const homeServer = new MockHomeServer();
const promise = roomEncryption.ensureMessageKeyIsShared(homeServer.api, NullLoggerInstance.item);
// need to poll because sendToDevice isn't first async step
const request = await poll(() => homeServer.requests.sendToDevice?.[0]);
request.respond({});
await promise;
assert(isRoomTracked);
assert(isDevicesRequested);
},
"encrypt tracks room and passes correct history visibility to deviceTracker": async assert => {
const storage = await createMockStorage();
const megolmMock = {
async encrypt() { return { roomKeyMessage: {} }; }
};
const olmMock = {
async encrypt() { return []; }
}
let isRoomTracked = false;
let isDevicesRequested = false;
const deviceTracker = {
async trackRoom(room, historyVisibility) {
// only assert on first call
if (isRoomTracked) { return; }
assert(!isDevicesRequested);
assert.equal(room.id, roomId);
assert.equal(historyVisibility, "invited");
isRoomTracked = true;
},
async devicesForTrackedRoom() {
assert(isRoomTracked);
isDevicesRequested = true;
return [];
},
async devicesForRoomMembers() {
return [];
}
}
const writeTxn = await storage.readWriteTxn([storage.storeNames.roomState]);
writeTxn.roomState.set(roomId, {state_key: "", type: ROOM_HISTORY_VISIBILITY_TYPE, content: {
history_visibility: "invited"
}});
await writeTxn.complete();
const roomEncryption = new RoomEncryption({
room: {id: roomId},
megolmEncryption: megolmMock,
olmEncryption: olmMock,
storage,
deviceTracker
});
const homeServer = new MockHomeServer();
const promise = roomEncryption.encrypt("m.room.message", {body: "hello"}, homeServer.api, NullLoggerInstance.item);
// need to poll because sendToDevice isn't first async step
const request = await poll(() => homeServer.requests.sendToDevice?.[0]);
request.respond({});
await promise;
assert(isRoomTracked);
assert(isDevicesRequested);
},
"writeSync passes correct history visibility to deviceTracker": async assert => {
const storage = await createMockStorage();
let isMemberChangesCalled = false;
const deviceTracker = {
async writeMemberChanges(room, memberChanges, historyVisibility, txn) {
assert.equal(historyVisibility, "invited");
isMemberChangesCalled = true;
return {removed: [], added: []};
},
async devicesForRoomMembers() {
return [];
}
}
const writeTxn = await storage.readWriteTxn([storage.storeNames.roomState]);
writeTxn.roomState.set(roomId, {state_key: "", type: ROOM_HISTORY_VISIBILITY_TYPE, content: {
history_visibility: "invited"
}});
const memberChanges = new Map([["@alice:hs.tld", {}]]);
const roomEncryption = new RoomEncryption({
room: {id: roomId},
storage,
deviceTracker
});
const roomResponse = {};
const txn = await storage.readWriteTxn([storage.storeNames.roomState]);
await roomEncryption.writeSync(roomResponse, memberChanges, txn, NullLoggerInstance.item);
assert(isMemberChangesCalled);
},
}
}

View file

@ -69,3 +69,28 @@ export function createRoomEncryptionEvent() {
}
}
}
// Use enum when converting to TS
export const HistoryVisibility = Object.freeze({
Joined: "joined",
Invited: "invited",
WorldReadable: "world_readable",
Shared: "shared",
});
export function shouldShareKey(membership, historyVisibility) {
switch (historyVisibility) {
case HistoryVisibility.WorldReadable:
return true;
case HistoryVisibility.Shared:
// was part of room at some time
return membership !== undefined;
case HistoryVisibility.Joined:
return membership === "join";
case HistoryVisibility.Invited:
return membership === "invite" || membership === "join";
default:
return false;
}
}

View file

@ -0,0 +1,7 @@
import {ILoginMethod} from "./LoginMethod";
import {PasswordLoginMethod} from "./PasswordLoginMethod";
import {SSOLoginHelper} from "./SSOLoginHelper";
import {TokenLoginMethod} from "./TokenLoginMethod";
export {PasswordLoginMethod, SSOLoginHelper, TokenLoginMethod, ILoginMethod};

View file

@ -17,9 +17,12 @@ limitations under the License.
import {BlobHandle} from "../../platform/web/dom/BlobHandle.js";
export type RequestBody = BlobHandle | string | Map<string, string | {blob: BlobHandle, name: string}>;
export type EncodedBody = {
mimeType: string;
body: BlobHandle | string;
// the map gets transformed to a FormData object on the web
body: RequestBody
}
export function encodeQueryParams(queryParams?: object): string {
@ -41,6 +44,11 @@ export function encodeBody(body: BlobHandle | object): EncodedBody {
mimeType: blob.mimeType,
body: blob // will be unwrapped in request fn
};
} else if (body instanceof Map) {
return {
mimeType: "multipart/form-data",
body: body
}
} else if (typeof body === "object") {
const json = JSON.stringify(body);
return {

View file

@ -243,7 +243,7 @@ export class BaseRoom extends EventEmitter {
/** @public */
async loadMemberList(log = null) {
async loadMemberList(txn = undefined, log = null) {
if (this._memberList) {
// TODO: also await fetchOrLoadMembers promise here
this._memberList.retain();
@ -254,6 +254,9 @@ export class BaseRoom extends EventEmitter {
roomId: this._roomId,
hsApi: this._hsApi,
storage: this._storage,
// pass in a transaction if we know we won't need to fetch (which would abort the transaction)
// and we want to make this operation part of the larger transaction
txn,
syncToken: this._getSyncToken(),
// to handle race between /members and /sync
setChangedMembersMap: map => this._changedMembersDuringSync = map,

View file

@ -139,11 +139,11 @@ export class Room extends BaseRoom {
}
log.set("newEntries", newEntries.length);
log.set("updatedEntries", updatedEntries.length);
let shouldFlushKeyShares = false;
let encryptionChanges;
// pass member changes to device tracker
if (roomEncryption && this.isTrackingMembers && memberChanges?.size) {
shouldFlushKeyShares = await roomEncryption.writeMemberChanges(memberChanges, txn, log);
log.set("shouldFlushKeyShares", shouldFlushKeyShares);
if (roomEncryption) {
encryptionChanges = await roomEncryption.writeSync(roomResponse, memberChanges, txn, log);
log.set("shouldFlushKeyShares", encryptionChanges.shouldFlush);
}
const allEntries = newEntries.concat(updatedEntries);
// also apply (decrypted) timeline entries to the summary changes
@ -188,7 +188,7 @@ export class Room extends BaseRoom {
memberChanges,
heroChanges,
powerLevelsEvent,
shouldFlushKeyShares,
encryptionChanges,
};
}
@ -201,11 +201,14 @@ export class Room extends BaseRoom {
const {
summaryChanges, newEntries, updatedEntries, newLiveKey,
removedPendingEvents, memberChanges, powerLevelsEvent,
heroChanges, roomEncryption
heroChanges, roomEncryption, encryptionChanges
} = changes;
log.set("id", this.id);
this._syncWriter.afterSync(newLiveKey);
this._setEncryption(roomEncryption);
if (this._roomEncryption) {
this._roomEncryption.afterSync(encryptionChanges);
}
if (memberChanges.size) {
if (this._changedMembersDuringSync) {
for (const [userId, memberChange] of memberChanges.entries()) {
@ -288,8 +291,8 @@ export class Room extends BaseRoom {
}
}
needsAfterSyncCompleted({shouldFlushKeyShares}) {
return shouldFlushKeyShares;
needsAfterSyncCompleted({encryptionChanges}) {
return encryptionChanges?.shouldFlush;
}
/**

View file

@ -37,7 +37,8 @@ type CreateRoomPayload = {
invite?: string[];
room_alias_name?: string;
creation_content?: {"m.federate": boolean};
initial_state: {type: string; state_key: string; content: Record<string, any>}[]
initial_state: { type: string; state_key: string; content: Record<string, any> }[];
power_level_content_override?: Record<string, any>;
}
type ImageInfo = {
@ -62,6 +63,7 @@ type Options = {
invites?: string[];
avatar?: Avatar;
alias?: string;
powerLevelContentOverride?: Record<string, any>;
}
function defaultE2EEStatusForType(type: RoomType): boolean {
@ -151,6 +153,9 @@ export class RoomBeingCreated extends EventEmitter<{change: never}> {
"m.federate": false
};
}
if (this.options.powerLevelContentOverride) {
createOptions.power_level_content_override = this.options.powerLevelContentOverride;
}
if (this.isEncrypted) {
createOptions.initial_state.push(createRoomEncryptionEvent());
}

View file

@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import type {StateEvent} from "../storage/types";
export function getPrevContentFromStateEvent(event) {
// where to look for prev_content is a bit of a mess,
// see https://matrix.to/#/!NasysSDfxKxZBzJJoE:matrix.org/$DvrAbZJiILkOmOIuRsNoHmh2v7UO5CWp_rYhlGk34fQ?via=matrix.org&via=pixie.town&via=amorgan.xyz
@ -40,3 +42,83 @@ export enum RoomType {
Private,
Public
}
type RoomResponse = {
state?: {
events?: Array<StateEvent>
},
timeline?: {
events?: Array<StateEvent>
}
}
/** iterates over any state events in a sync room response, in the order that they should be applied (from older to younger events) */
export function iterateResponseStateEvents(roomResponse: RoomResponse, callback: (StateEvent) => Promise<void> | void): Promise<void> | void {
let promises: Promise<void>[] | undefined = undefined;
const callCallback = stateEvent => {
const result = callback(stateEvent);
if (result instanceof Promise) {
promises = promises ?? [];
promises.push(result);
}
};
// first iterate over state events, they precede the timeline
const stateEvents = roomResponse.state?.events;
if (stateEvents) {
for (let i = 0; i < stateEvents.length; i++) {
callCallback(stateEvents[i]);
}
}
// now see if there are any state events within the timeline
let timelineEvents = roomResponse.timeline?.events;
if (timelineEvents) {
for (let i = 0; i < timelineEvents.length; i++) {
const event = timelineEvents[i];
if (typeof event.state_key === "string") {
callCallback(event);
}
}
}
if (promises) {
return Promise.all(promises).then(() => undefined);
}
}
export function tests() {
return {
"test iterateResponseStateEvents with both state and timeline sections": assert => {
const roomResponse = {
state: {
events: [
{type: "m.room.member", state_key: "1"},
{type: "m.room.member", state_key: "2", content: {a: 1}},
]
},
timeline: {
events: [
{type: "m.room.message"},
{type: "m.room.member", state_key: "3"},
{type: "m.room.message"},
{type: "m.room.member", state_key: "2", content: {a: 2}},
]
}
} as unknown as RoomResponse;
const expectedStateKeys = ["1", "2", "3", "2"];
const expectedAForMember2 = [1, 2];
iterateResponseStateEvents(roomResponse, event => {
assert.strictEqual(event.type, "m.room.member");
assert.strictEqual(expectedStateKeys.shift(), event.state_key);
if (event.state_key === "2") {
assert.strictEqual(expectedAForMember2.shift(), event.content.a);
}
});
assert.strictEqual(expectedStateKeys.length, 0);
assert.strictEqual(expectedAForMember2.length, 0);
},
"test iterateResponseStateEvents with empty response": assert => {
iterateResponseStateEvents({}, () => {
assert.fail("no events expected");
});
}
}
}

View file

@ -137,6 +137,10 @@ export class MemberChange {
return this.member.membership;
}
get wasInvited() {
return this.previousMembership === "invite" && this.membership !== "invite";
}
get hasLeft() {
return this.previousMembership === "join" && this.membership !== "join";
}

View file

@ -17,10 +17,12 @@ limitations under the License.
import {RoomMember} from "./RoomMember.js";
async function loadMembers({roomId, storage}) {
const txn = await storage.readTxn([
async function loadMembers({roomId, storage, txn}) {
if (!txn) {
txn = await storage.readTxn([
storage.storeNames.roomMembers,
]);
}
const memberDatas = await txn.roomMembers.getAll(roomId);
return memberDatas.map(d => new RoomMember(d));
}

View file

@ -163,7 +163,7 @@ export class GapWriter {
if (!Array.isArray(chunk)) {
throw new Error("Invalid chunk in response");
}
if (typeof end !== "string") {
if (typeof end !== "string" && typeof end !== "undefined") {
throw new Error("Invalid end token in response");
}

View file

@ -42,6 +42,7 @@ async function requestPersistedStorage(): Promise<boolean> {
await glob.document.requestStorageAccess();
return true;
} catch (err) {
console.warn("requestStorageAccess threw an error:", err);
return false;
}
} else {

View file

@ -2,7 +2,6 @@ import {IDOMStorage} from "./types";
import {ITransaction} from "./QueryTarget";
import {iterateCursor, NOT_DONE, reqAsPromise} from "./utils";
import {RoomMember, EVENT_TYPE as MEMBER_EVENT_TYPE} from "../../room/members/RoomMember.js";
import {addRoomToIdentity} from "../../e2ee/DeviceTracker.js";
import {SESSION_E2EE_KEY_PREFIX} from "../../e2ee/common.js";
import {SummaryData} from "../../room/RoomSummary";
import {RoomMemberStore, MemberData} from "./stores/RoomMemberStore";
@ -183,51 +182,12 @@ function createTimelineRelationsStore(db: IDBDatabase) : void {
db.createObjectStore("timelineRelations", {keyPath: "key"});
}
//v11 doesn't change the schema, but ensures all userIdentities have all the roomIds they should (see #470)
async function fixMissingRoomsInUserIdentities(db: IDBDatabase, txn: IDBTransaction, localStorage: IDOMStorage, log: ILogItem) {
const roomSummaryStore = txn.objectStore("roomSummary");
const trackedRoomIds: string[] = [];
await iterateCursor<SummaryData>(roomSummaryStore.openCursor(), roomSummary => {
if (roomSummary.isTrackingMembers) {
trackedRoomIds.push(roomSummary.roomId);
}
return NOT_DONE;
});
const outboundGroupSessionsStore = txn.objectStore("outboundGroupSessions");
const userIdentitiesStore: IDBObjectStore = txn.objectStore("userIdentities");
const roomMemberStore = txn.objectStore("roomMembers");
for (const roomId of trackedRoomIds) {
let foundMissing = false;
const joinedUserIds: string[] = [];
const memberRange = IDBKeyRange.bound(roomId, `${roomId}|${MAX_UNICODE}`, true, true);
await log.wrap({l: "room", id: roomId}, async log => {
await iterateCursor<MemberData>(roomMemberStore.openCursor(memberRange), member => {
if (member.membership === "join") {
joinedUserIds.push(member.userId);
}
return NOT_DONE;
});
log.set("joinedUserIds", joinedUserIds.length);
for (const userId of joinedUserIds) {
const identity = await reqAsPromise(userIdentitiesStore.get(userId));
const originalRoomCount = identity?.roomIds?.length;
const updatedIdentity = addRoomToIdentity(identity, userId, roomId);
if (updatedIdentity) {
log.log({l: `fixing up`, id: userId,
roomsBefore: originalRoomCount, roomsAfter: updatedIdentity.roomIds.length});
userIdentitiesStore.put(updatedIdentity);
foundMissing = true;
}
}
log.set("foundMissing", foundMissing);
if (foundMissing) {
// clear outbound megolm session,
// so we'll create a new one on the next message that will be properly shared
outboundGroupSessionsStore.delete(roomId);
}
});
}
}
//v11 doesn't change the schema,
// but ensured all userIdentities have all the roomIds they should (see #470)
// 2022-07-20: The fix dated from August 2021, and have removed it now because of a
// refactoring needed in the device tracker, which made it inconvenient to expose addRoomToIdentity
function fixMissingRoomsInUserIdentities() {}
// v12 move ssssKey to e2ee:ssssKey so it will get backed up in the next step
async function changeSSSSKeyPrefix(db: IDBDatabase, txn: IDBTransaction) {

View file

@ -0,0 +1,64 @@
/*
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.
*/
export type Config = {
/**
* The default homeserver used by Hydrogen; auto filled in the login UI.
* eg: https://matrix.org
* REQUIRED
*/
defaultHomeServer: string;
/**
* The submit endpoint for your preferred rageshake server.
* eg: https://element.io/bugreports/submit
* Read more about rageshake at https://github.com/matrix-org/rageshake
* OPTIONAL
*/
bugReportEndpointUrl?: string;
/**
* Paths to theme-manifests
* eg: ["assets/theme-element.json", "assets/theme-awesome.json"]
* REQUIRED
*/
themeManifests: string[];
/**
* This configures the default theme(s) used by Hydrogen.
* These themes appear as "Default" option in the theme chooser UI and are also
* used as a fallback when other themes fail to load.
* Whether the dark or light variant is used depends on the system preference.
* OPTIONAL
*/
defaultTheme?: {
// id of light theme
light: string;
// id of dark theme
dark: string;
};
/**
* Configuration for push notifications.
* See https://spec.matrix.org/latest/client-server-api/#post_matrixclientv3pushersset
* and https://github.com/matrix-org/sygnal/blob/main/docs/applications.md#webpush
* OPTIONAL
*/
push?: {
// See app_id in the request body in above link
appId: string;
// The host used for pushing notification
gatewayUrl: string;
// See pushkey in above link
applicationServerKey: string;
};
};

View file

@ -0,0 +1,83 @@
/*
Copyright 2021 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.
*/
export type ThemeManifest = Partial<{
/**
* Version number of the theme manifest.
* This must be incremented when backwards incompatible changes are introduced.
*/
version: number;
// A user-facing string that is the name for this theme-collection.
name: string;
// An identifier for this theme
id: string;
/**
* Id of the theme that this theme derives from.
* Only present for derived/runtime themes.
*/
extends: string;
/**
* This is added to the manifest during the build process and includes data
* that is needed to load themes at runtime.
*/
source: {
/**
* This is a mapping from theme-id to location of css file relative to the location of the
* manifest.
* eg: {"element-light": "theme-element-light.10f9bb22.css", ...}
*
* Here theme-id is 'theme-variant' where 'theme' is the key used to specify the manifest
* location for this theme-collection in vite.config.js (where the themeBuilder plugin is
* initialized) and 'variant' is the key used to specify the variant details in the values
* section below.
*/
"built-asset": Record<string, string>;
// Location of css file that will be used for themes derived from this theme.
"runtime-asset": string;
// Array of derived-variables
"derived-variables": Array<string>;
/**
* Mapping from icon variable to location of icon in build output with query parameters
* indicating how it should be colored for this particular theme.
* eg: "icon-url-1": "element-logo.86bc8565.svg?primary=accent-color"
*/
icon: Record<string, string>;
};
values: {
/**
* Mapping from variant key to details pertaining to this theme-variant.
* This variant key is used for forming theme-id as mentioned above.
*/
variants: Record<string, Variant>;
};
}>;
type Variant = Partial<{
/**
* If true, this variant is used a default dark/light variant and will be the selected theme
* when "Match system theme" is selected for this theme collection in settings.
*/
default: boolean;
// A user-facing string that is the name for this variant.
name: string;
// A boolean indicating whether this is a dark theme or not
dark: boolean;
/**
* Mapping from css variable to its value.
* eg: {"background-color-primary": "#21262b", ...}
*/
variables: Record<string, string>;
}>;

View file

@ -15,13 +15,13 @@ limitations under the License.
*/
import type {RequestResult} from "../web/dom/request/fetch.js";
import type {EncodedBody} from "../../matrix/net/common";
import type {RequestBody} from "../../matrix/net/common";
import type {ILogItem} from "../../logging/types";
export interface IRequestOptions {
uploadProgress?: (loadedBytes: number) => void;
timeout?: number;
body?: EncodedBody;
body?: RequestBody;
headers?: Map<string, string|number>;
cache?: boolean;
method?: string;

View file

@ -38,7 +38,7 @@ import {downloadInIframe} from "./dom/download.js";
import {Disposables} from "../../utils/Disposables";
import {parseHTML} from "./parsehtml.js";
import {handleAvatarError} from "./ui/avatar";
import {ThemeLoader} from "./ThemeLoader";
import {ThemeLoader} from "./theming/ThemeLoader";
function addScript(src) {
return new Promise(function (resolve, reject) {
@ -338,13 +338,17 @@ export class Platform {
document.querySelectorAll(".theme").forEach(e => e.remove());
// add new theme
const styleTag = document.createElement("link");
styleTag.href = `./${newPath}`;
styleTag.href = newPath;
styleTag.rel = "stylesheet";
styleTag.type = "text/css";
styleTag.className = "theme";
head.appendChild(styleTag);
}
get description() {
return navigator.userAgent ?? "<unknown>";
}
dispose() {
this._disposables.dispose();
}

View file

@ -1,207 +0,0 @@
/*
Copyright 2020 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 type {ILogItem} from "../../logging/types.js";
import type {Platform} from "./Platform.js";
type NormalVariant = {
id: string;
cssLocation: string;
};
type DefaultVariant = {
dark: {
id: string;
cssLocation: string;
variantName: string;
};
light: {
id: string;
cssLocation: string;
variantName: string;
};
default: {
id: string;
cssLocation: string;
variantName: string;
};
}
type ThemeInformation = NormalVariant | DefaultVariant;
export enum ColorSchemePreference {
Dark,
Light
};
export class ThemeLoader {
private _platform: Platform;
private _themeMapping: Record<string, ThemeInformation>;
constructor(platform: Platform) {
this._platform = platform;
}
async init(manifestLocations: string[], log?: ILogItem): Promise<void> {
await this._platform.logger.wrapOrRun(log, "ThemeLoader.init", async (log) => {
this._themeMapping = {};
const results = await Promise.all(
manifestLocations.map( location => this._platform.request(location, { method: "GET", format: "json", cache: true, }).response())
);
results.forEach(({ body }) => this._populateThemeMap(body, log));
});
}
private _populateThemeMap(manifest, log: ILogItem) {
log.wrap("populateThemeMap", (l) => {
/*
After build has finished, the source section of each theme manifest
contains `built-assets` which is a mapping from the theme-id to
cssLocation of theme
*/
const builtAssets: Record<string, string> = manifest.source?.["built-assets"];
const themeName = manifest.name;
let defaultDarkVariant: any = {}, defaultLightVariant: any = {};
for (const [themeId, cssLocation] of Object.entries(builtAssets)) {
const variant = themeId.match(/.+-(.+)/)?.[1];
const { name: variantName, default: isDefault, dark } = manifest.values.variants[variant!];
const themeDisplayName = `${themeName} ${variantName}`;
if (isDefault) {
/**
* This is a default variant!
* We'll add these to the themeMapping (separately) keyed with just the
* theme-name (i.e "Element" instead of "Element Dark").
* We need to be able to distinguish them from other variants!
*
* This allows us to render radio-buttons with "dark" and
* "light" options.
*/
const defaultVariant = dark ? defaultDarkVariant : defaultLightVariant;
defaultVariant.variantName = variantName;
defaultVariant.id = themeId
defaultVariant.cssLocation = cssLocation;
continue;
}
// Non-default variants are keyed in themeMapping with "theme_name variant_name"
// eg: "Element Dark"
this._themeMapping[themeDisplayName] = {
cssLocation,
id: themeId
};
}
if (defaultDarkVariant.id && defaultLightVariant.id) {
/**
* As mentioned above, if there's both a default dark and a default light variant,
* add them to themeMapping separately.
*/
const defaultVariant = this.preferredColorScheme === ColorSchemePreference.Dark ? defaultDarkVariant : defaultLightVariant;
this._themeMapping[themeName] = { dark: defaultDarkVariant, light: defaultLightVariant, default: defaultVariant };
}
else {
/**
* If only one default variant is found (i.e only dark default or light default but not both),
* treat it like any other variant.
*/
const variant = defaultDarkVariant.id ? defaultDarkVariant : defaultLightVariant;
this._themeMapping[`${themeName} ${variant.variantName}`] = { id: variant.id, cssLocation: variant.cssLocation };
}
//Add the default-theme as an additional option to the mapping
const defaultThemeId = this.getDefaultTheme();
if (defaultThemeId) {
const themeDetails = this._findThemeDetailsFromId(defaultThemeId);
if (themeDetails) {
this._themeMapping["Default"] = { id: "default", cssLocation: themeDetails.cssLocation };
}
}
l.log({ l: "Default Theme", theme: defaultThemeId});
l.log({ l: "Preferred colorscheme", scheme: this.preferredColorScheme === ColorSchemePreference.Dark ? "dark" : "light" });
l.log({ l: "Result", themeMapping: this._themeMapping });
});
}
setTheme(themeName: string, themeVariant?: "light" | "dark" | "default", log?: ILogItem) {
this._platform.logger.wrapOrRun(log, { l: "change theme", name: themeName, variant: themeVariant }, () => {
let cssLocation: string;
let themeDetails = this._themeMapping[themeName];
if ("id" in themeDetails) {
cssLocation = themeDetails.cssLocation;
}
else {
if (!themeVariant) {
throw new Error("themeVariant is undefined!");
}
cssLocation = themeDetails[themeVariant].cssLocation;
}
this._platform.replaceStylesheet(cssLocation);
this._platform.settingsStorage.setString("theme-name", themeName);
if (themeVariant) {
this._platform.settingsStorage.setString("theme-variant", themeVariant);
}
else {
this._platform.settingsStorage.remove("theme-variant");
}
});
}
/** Maps theme display name to theme information */
get themeMapping(): Record<string, ThemeInformation> {
return this._themeMapping;
}
async getActiveTheme(): Promise<{themeName: string, themeVariant?: string}> {
let themeName = await this._platform.settingsStorage.getString("theme-name");
let themeVariant = await this._platform.settingsStorage.getString("theme-variant");
if (!themeName || !this._themeMapping[themeName]) {
themeName = "Default" in this._themeMapping ? "Default" : Object.keys(this._themeMapping)[0];
if (!this._themeMapping[themeName][themeVariant]) {
themeVariant = "default" in this._themeMapping[themeName] ? "default" : undefined;
}
}
return { themeName, themeVariant };
}
getDefaultTheme(): string | undefined {
switch (this.preferredColorScheme) {
case ColorSchemePreference.Dark:
return this._platform.config["defaultTheme"]?.dark;
case ColorSchemePreference.Light:
return this._platform.config["defaultTheme"]?.light;
}
}
private _findThemeDetailsFromId(themeId: string): {themeName: string, cssLocation: string, variant?: string} | undefined {
for (const [themeName, themeData] of Object.entries(this._themeMapping)) {
if ("id" in themeData && themeData.id === themeId) {
return { themeName, cssLocation: themeData.cssLocation };
}
else if ("light" in themeData && themeData.light?.id === themeId) {
return { themeName, cssLocation: themeData.light.cssLocation, variant: "light" };
}
else if ("dark" in themeData && themeData.dark?.id === themeId) {
return { themeName, cssLocation: themeData.dark.cssLocation, variant: "dark" };
}
}
}
get preferredColorScheme(): ColorSchemePreference | undefined {
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
return ColorSchemePreference.Dark;
}
else if (window.matchMedia("(prefers-color-scheme: light)").matches) {
return ColorSchemePreference.Light;
}
}
}

View file

@ -4,5 +4,6 @@
"gatewayUrl": "https://matrix.org",
"applicationServerKey": "BC-gpSdVHEXhvHSHS0AzzWrQoukv2BE7KzpoPO_FfPacqOo3l1pdqz7rSgmB04pZCWaHPz7XRe6fjLaC-WPDopM"
},
"defaultHomeServer": "matrix.org"
"defaultHomeServer": "matrix.org",
"bugReportEndpointUrl": "https://element.io/bugreports/submit"
}

View file

@ -17,6 +17,12 @@ limitations under the License.
import {BaseObservableValue} from "../../../observable/ObservableValue";
export class History extends BaseObservableValue {
constructor() {
super();
this._lastSessionHash = undefined;
}
handleEvent(event) {
if (event.type === "hashchange") {
this.emit(this.get());
@ -65,6 +71,7 @@ export class History extends BaseObservableValue {
}
onSubscribeFirst() {
this._lastSessionHash = window.localStorage?.getItem("hydrogen_last_url_hash");
window.addEventListener('hashchange', this);
}
@ -76,7 +83,7 @@ export class History extends BaseObservableValue {
window.localStorage?.setItem("hydrogen_last_url_hash", hash);
}
getLastUrl() {
return window.localStorage?.getItem("hydrogen_last_url_hash");
getLastSessionUrl() {
return this._lastSessionHash;
}
}

View file

@ -27,6 +27,20 @@ export function addCacheBuster(urlStr, random = Math.random) {
return urlStr + `_cacheBuster=${Math.ceil(random() * Number.MAX_SAFE_INTEGER)}`;
}
export function mapAsFormData(map) {
const formData = new FormData();
for (const [name, value] of map) {
// Special case {name: string, blob: BlobHandle} to set a filename.
// This is the format returned by platform.openFile
if (value.blob?.nativeBlob && value.name) {
formData.set(name, value.blob.nativeBlob, value.name);
} else {
formData.set(name, value);
}
}
return formData;
}
export function tests() {
return {
"add cache buster": assert => {

View file

@ -20,7 +20,7 @@ import {
ConnectionError
} from "../../../../matrix/error.js";
import {abortOnTimeout} from "../../../../utils/timeout";
import {addCacheBuster} from "./common.js";
import {addCacheBuster, mapAsFormData} from "./common.js";
import {xhrRequest} from "./xhr.js";
class RequestResult {
@ -70,6 +70,9 @@ export function createFetchRequest(createTimeout, serviceWorkerHandler) {
if (body?.nativeBlob) {
body = body.nativeBlob;
}
if (body instanceof Map) {
body = mapAsFormData(body);
}
let options = {method, body};
if (controller) {
options = Object.assign(options, {
@ -112,6 +115,9 @@ export function createFetchRequest(createTimeout, serviceWorkerHandler) {
} else if (format === "buffer") {
body = await response.arrayBuffer();
}
else if (format === "text") {
body = await response.text();
}
} catch (err) {
// some error pages return html instead of json, ignore error
if (!(err.name === "SyntaxError" && status >= 400)) {

View file

@ -18,7 +18,7 @@ import {
AbortError,
ConnectionError
} from "../../../../matrix/error.js";
import {addCacheBuster} from "./common.js";
import {addCacheBuster, mapAsFormData} from "./common.js";
class RequestResult {
constructor(promise, xhr) {
@ -94,6 +94,9 @@ export function xhrRequest(url, options) {
if (body?.nativeBlob) {
body = body.nativeBlob;
}
if (body instanceof Map) {
body = mapAsFormData(body);
}
xhr.send(body || null);
return new RequestResult(promise, xhr);

View file

@ -17,7 +17,7 @@ limitations under the License.
// import {RecordRequester, ReplayRequester} from "./matrix/net/request/replay";
import {RootViewModel} from "../../domain/RootViewModel.js";
import {createNavigation, createRouter} from "../../domain/navigation/index.js";
import {createNavigation, createRouter} from "../../domain/navigation/index";
// Don't use a default export here, as we use multiple entries during legacy build,
// which does not support default exports,
// see https://github.com/rollup/plugins/tree/master/packages/multi-entry

View file

@ -0,0 +1,131 @@
/*
Copyright 2020 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 {derive} from "./shared/color.mjs";
export class DerivedVariables {
private _baseVariables: Record<string, string>;
private _variablesToDerive: string[]
private _isDark: boolean
private _aliases: Record<string, string> = {};
private _derivedAliases: string[] = [];
constructor(baseVariables: Record<string, string>, variablesToDerive: string[], isDark: boolean) {
this._baseVariables = baseVariables;
this._variablesToDerive = variablesToDerive;
this._isDark = isDark;
}
toVariables(): Record<string, string> {
const resolvedVariables: any = {};
this._detectAliases();
for (const variable of this._variablesToDerive) {
const resolvedValue = this._derive(variable);
if (resolvedValue) {
resolvedVariables[variable] = resolvedValue;
}
}
for (const [alias, variable] of Object.entries(this._aliases) as any) {
resolvedVariables[alias] = this._baseVariables[variable] ?? resolvedVariables[variable];
}
for (const variable of this._derivedAliases) {
const resolvedValue = this._deriveAlias(variable, resolvedVariables);
if (resolvedValue) {
resolvedVariables[variable] = resolvedValue;
}
}
return resolvedVariables;
}
private _detectAliases(): void {
const newVariablesToDerive: string[] = [];
for (const variable of this._variablesToDerive) {
const [alias, value] = variable.split("=");
if (value) {
this._aliases[alias] = value;
}
else {
newVariablesToDerive.push(variable);
}
}
this._variablesToDerive = newVariablesToDerive;
}
private _derive(variable: string): string | undefined {
const RE_VARIABLE_VALUE = /(.+)--(.+)-(.+)/;
const matches = variable.match(RE_VARIABLE_VALUE);
if (matches) {
const [, baseVariable, operation, argument] = matches;
const value = this._baseVariables[baseVariable];
if (!value ) {
if (this._aliases[baseVariable]) {
this._derivedAliases.push(variable);
return;
}
else {
throw new Error(`Cannot find value for base variable "${baseVariable}"!`);
}
}
const resolvedValue = derive(value, operation, argument, this._isDark);
return resolvedValue;
}
}
private _deriveAlias(variable: string, resolvedVariables: Record<string, string>): string | undefined {
const RE_VARIABLE_VALUE = /(.+)--(.+)-(.+)/;
const matches = variable.match(RE_VARIABLE_VALUE);
if (matches) {
const [, baseVariable, operation, argument] = matches;
const value = resolvedVariables[baseVariable];
if (!value ) {
throw new Error(`Cannot find value for alias "${baseVariable}" when trying to derive ${variable}!`);
}
const resolvedValue = derive(value, operation, argument, this._isDark);
return resolvedValue;
}
}
}
import * as pkg from "off-color";
// @ts-ignore
const offColor = pkg.offColor ?? pkg.default.offColor;
export function tests() {
return {
"Simple variable derivation": assert => {
const deriver = new DerivedVariables({ "background-color": "#ff00ff" }, ["background-color--darker-5"], false);
const result = deriver.toVariables();
const resultColor = offColor("#ff00ff").darken(5/100).hex();
assert.deepEqual(result, {"background-color--darker-5": resultColor});
},
"For dark themes, lighten and darken are inverted": assert => {
const deriver = new DerivedVariables({ "background-color": "#ff00ff" }, ["background-color--darker-5"], true);
const result = deriver.toVariables();
const resultColor = offColor("#ff00ff").lighten(5/100).hex();
assert.deepEqual(result, {"background-color--darker-5": resultColor});
},
"Aliases can be derived": assert => {
const deriver = new DerivedVariables({ "background-color": "#ff00ff" }, ["my-awesome-alias=background-color","my-awesome-alias--darker-5"], false);
const result = deriver.toVariables();
const resultColor = offColor("#ff00ff").darken(5/100).hex();
assert.deepEqual(result, {
"my-awesome-alias": "#ff00ff",
"my-awesome-alias--darker-5": resultColor,
});
},
}
}

View file

@ -0,0 +1,79 @@
/*
Copyright 2020 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 type {Platform} from "../Platform.js";
import {getColoredSvgString} from "./shared/svg-colorizer.mjs";
type ParsedStructure = {
[variableName: string]: {
svg: Promise<{ status: number; body: string }>;
primary: string | null;
secondary: string | null;
};
};
export class IconColorizer {
private _iconVariables: Record<string, string>;
private _resolvedVariables: Record<string, string>;
private _manifestLocation: string;
private _platform: Platform;
constructor(platform: Platform, iconVariables: Record<string, string>, resolvedVariables: Record<string, string>, manifestLocation: string) {
this._platform = platform;
this._iconVariables = iconVariables;
this._resolvedVariables = resolvedVariables;
this._manifestLocation = manifestLocation;
}
async toVariables(): Promise<Record<string, string>> {
const { parsedStructure, promises } = await this._fetchAndParseIcons();
await Promise.all(promises);
return this._produceColoredIconVariables(parsedStructure);
}
private async _fetchAndParseIcons(): Promise<{ parsedStructure: ParsedStructure, promises: any[] }> {
const promises: any[] = [];
const parsedStructure: ParsedStructure = {};
for (const [variable, url] of Object.entries(this._iconVariables)) {
const urlObject = new URL(`https://${url}`);
const pathWithoutQueryParams = urlObject.hostname;
const relativePath = new URL(pathWithoutQueryParams, new URL(this._manifestLocation, window.location.origin));
const responsePromise = this._platform.request(relativePath, { method: "GET", format: "text", cache: true, }).response()
promises.push(responsePromise);
const searchParams = urlObject.searchParams;
parsedStructure[variable] = {
svg: responsePromise,
primary: searchParams.get("primary"),
secondary: searchParams.get("secondary")
};
}
return { parsedStructure, promises };
}
private async _produceColoredIconVariables(parsedStructure: ParsedStructure): Promise<Record<string, string>> {
let coloredVariables: Record<string, string> = {};
for (const [variable, { svg, primary, secondary }] of Object.entries(parsedStructure)) {
const { body: svgCode } = await svg;
if (!primary) {
throw new Error(`Primary color variable ${primary} not in list of variables!`);
}
const primaryColor = this._resolvedVariables[primary], secondaryColor = this._resolvedVariables[secondary!];
const coloredSvgCode = getColoredSvgString(svgCode, primaryColor, secondaryColor);
const dataURI = `url('data:image/svg+xml;utf8,${encodeURIComponent(coloredSvgCode)}')`;
coloredVariables[variable] = dataURI;
}
return coloredVariables;
}
}

View file

@ -0,0 +1,188 @@
/*
Copyright 2020 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 type {ILogItem} from "../../../logging/types";
import type {Platform} from "../Platform.js";
import {RuntimeThemeParser} from "./parsers/RuntimeThemeParser";
import type {Variant, ThemeInformation} from "./parsers/types";
import {ColorSchemePreference} from "./parsers/types";
import {BuiltThemeParser} from "./parsers/BuiltThemeParser";
export class ThemeLoader {
private _platform: Platform;
private _themeMapping: Record<string, ThemeInformation>;
private _injectedVariables?: Record<string, string>;
constructor(platform: Platform) {
this._platform = platform;
}
async init(manifestLocations: string[], log?: ILogItem): Promise<void> {
await this._platform.logger.wrapOrRun(log, "ThemeLoader.init", async (log) => {
const results = await Promise.all(
manifestLocations.map(location => this._platform.request(location, { method: "GET", format: "json", cache: true, }).response())
);
const runtimeThemeParser = new RuntimeThemeParser(this._platform, this.preferredColorScheme);
const builtThemeParser = new BuiltThemeParser(this.preferredColorScheme);
const runtimeThemePromises: Promise<void>[] = [];
for (let i = 0; i < results.length; ++i) {
const { body } = results[i];
try {
if (body.extends) {
const indexOfBaseManifest = results.findIndex(manifest => manifest.body.id === body.extends);
if (indexOfBaseManifest === -1) {
throw new Error(`Base manifest for derived theme at ${manifestLocations[i]} not found!`);
}
const {body: baseManifest} = results[indexOfBaseManifest];
const baseManifestLocation = manifestLocations[indexOfBaseManifest];
const promise = runtimeThemeParser.parse(body, baseManifest, baseManifestLocation, log);
runtimeThemePromises.push(promise);
}
else {
builtThemeParser.parse(body, manifestLocations[i], log);
}
}
catch(e) {
console.error(e);
}
}
await Promise.all(runtimeThemePromises);
this._themeMapping = { ...builtThemeParser.themeMapping, ...runtimeThemeParser.themeMapping };
Object.assign(this._themeMapping, builtThemeParser.themeMapping, runtimeThemeParser.themeMapping);
this._addDefaultThemeToMapping(log);
log.log({ l: "Preferred colorscheme", scheme: this.preferredColorScheme === ColorSchemePreference.Dark ? "dark" : "light" });
log.log({ l: "Result", themeMapping: this._themeMapping });
});
}
setTheme(themeName: string, themeVariant?: "light" | "dark" | "default", log?: ILogItem) {
this._platform.logger.wrapOrRun(log, { l: "change theme", name: themeName, variant: themeVariant }, () => {
let cssLocation: string, variables: Record<string, string>;
let themeDetails = this._themeMapping[themeName];
if ("id" in themeDetails) {
cssLocation = themeDetails.cssLocation;
variables = themeDetails.variables;
}
else {
if (!themeVariant) {
throw new Error("themeVariant is undefined!");
}
cssLocation = themeDetails[themeVariant].cssLocation;
variables = themeDetails[themeVariant].variables;
}
this._platform.replaceStylesheet(cssLocation);
if (variables) {
log?.log({l: "Derived Theme", variables});
this._injectCSSVariables(variables);
}
else {
this._removePreviousCSSVariables();
}
this._platform.settingsStorage.setString("theme-name", themeName);
if (themeVariant) {
this._platform.settingsStorage.setString("theme-variant", themeVariant);
}
else {
this._platform.settingsStorage.remove("theme-variant");
}
});
}
private _injectCSSVariables(variables: Record<string, string>): void {
const root = document.documentElement;
for (const [variable, value] of Object.entries(variables)) {
root.style.setProperty(`--${variable}`, value);
}
this._injectedVariables = variables;
}
private _removePreviousCSSVariables(): void {
if (!this._injectedVariables) {
return;
}
const root = document.documentElement;
for (const variable of Object.keys(this._injectedVariables)) {
root.style.removeProperty(`--${variable}`);
}
this._injectedVariables = undefined;
}
/** Maps theme display name to theme information */
get themeMapping(): Record<string, ThemeInformation> {
return this._themeMapping;
}
async getActiveTheme(): Promise<{themeName: string, themeVariant?: string}> {
let themeName = await this._platform.settingsStorage.getString("theme-name");
let themeVariant = await this._platform.settingsStorage.getString("theme-variant");
if (!themeName || !this._themeMapping[themeName]) {
themeName = "Default" in this._themeMapping ? "Default" : Object.keys(this._themeMapping)[0];
if (!this._themeMapping[themeName][themeVariant]) {
themeVariant = "default" in this._themeMapping[themeName] ? "default" : undefined;
}
}
return { themeName, themeVariant };
}
getDefaultTheme(): string | undefined {
switch (this.preferredColorScheme) {
case ColorSchemePreference.Dark:
return this._platform.config["defaultTheme"]?.dark;
case ColorSchemePreference.Light:
return this._platform.config["defaultTheme"]?.light;
}
}
private _findThemeDetailsFromId(themeId: string): {themeName: string, themeData: Partial<Variant>} | undefined {
for (const [themeName, themeData] of Object.entries(this._themeMapping)) {
if ("id" in themeData && themeData.id === themeId) {
return { themeName, themeData };
}
else if ("light" in themeData && themeData.light?.id === themeId) {
return { themeName, themeData: themeData.light };
}
else if ("dark" in themeData && themeData.dark?.id === themeId) {
return { themeName, themeData: themeData.dark };
}
}
}
private _addDefaultThemeToMapping(log: ILogItem) {
log.wrap("addDefaultThemeToMapping", l => {
const defaultThemeId = this.getDefaultTheme();
if (defaultThemeId) {
const themeDetails = this._findThemeDetailsFromId(defaultThemeId);
if (themeDetails) {
this._themeMapping["Default"] = { id: "default", cssLocation: themeDetails.themeData.cssLocation! };
const variables = themeDetails.themeData.variables;
if (variables) {
this._themeMapping["Default"].variables = variables;
}
}
}
l.log({ l: "Default Theme", theme: defaultThemeId});
});
}
get preferredColorScheme(): ColorSchemePreference | undefined {
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
return ColorSchemePreference.Dark;
}
else if (window.matchMedia("(prefers-color-scheme: light)").matches) {
return ColorSchemePreference.Light;
}
}
}

View file

@ -0,0 +1,106 @@
/*
Copyright 2020 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 type {ThemeInformation} from "./types";
import type {ThemeManifest} from "../../../types/theme";
import type {ILogItem} from "../../../../logging/types";
import {ColorSchemePreference} from "./types";
export class BuiltThemeParser {
private _themeMapping: Record<string, ThemeInformation> = {};
private _preferredColorScheme?: ColorSchemePreference;
constructor(preferredColorScheme?: ColorSchemePreference) {
this._preferredColorScheme = preferredColorScheme;
}
parse(manifest: ThemeManifest, manifestLocation: string, log: ILogItem) {
log.wrap("BuiltThemeParser.parse", () => {
/*
After build has finished, the source section of each theme manifest
contains `built-assets` which is a mapping from the theme-id to
cssLocation of theme
*/
const builtAssets: Record<string, string> = manifest.source?.["built-assets"];
const themeName = manifest.name;
if (!themeName) {
throw new Error(`Theme name not found in manifest at ${manifestLocation}`);
}
let defaultDarkVariant: any = {}, defaultLightVariant: any = {};
for (let [themeId, cssLocation] of Object.entries(builtAssets)) {
try {
/**
* This cssLocation is relative to the location of the manifest file.
* So we first need to resolve it relative to the root of this hydrogen instance.
*/
cssLocation = new URL(cssLocation, new URL(manifestLocation, window.location.origin)).href;
}
catch {
continue;
}
const variant = themeId.match(/.+-(.+)/)?.[1];
const variantDetails = manifest.values?.variants[variant!];
if (!variantDetails) {
throw new Error(`Variant ${variant} is missing in manifest at ${manifestLocation}`);
}
const { name: variantName, default: isDefault, dark } = variantDetails;
const themeDisplayName = `${themeName} ${variantName}`;
if (isDefault) {
/**
* This is a default variant!
* We'll add these to the themeMapping (separately) keyed with just the
* theme-name (i.e "Element" instead of "Element Dark").
* We need to be able to distinguish them from other variants!
*
* This allows us to render radio-buttons with "dark" and
* "light" options.
*/
const defaultVariant = dark ? defaultDarkVariant : defaultLightVariant;
defaultVariant.variantName = variantName;
defaultVariant.id = themeId
defaultVariant.cssLocation = cssLocation;
continue;
}
// Non-default variants are keyed in themeMapping with "theme_name variant_name"
// eg: "Element Dark"
this._themeMapping[themeDisplayName] = {
cssLocation,
id: themeId
};
}
if (defaultDarkVariant.id && defaultLightVariant.id) {
/**
* As mentioned above, if there's both a default dark and a default light variant,
* add them to themeMapping separately.
*/
const defaultVariant = this._preferredColorScheme === ColorSchemePreference.Dark ? defaultDarkVariant : defaultLightVariant;
this._themeMapping[themeName] = { dark: defaultDarkVariant, light: defaultLightVariant, default: defaultVariant };
}
else {
/**
* If only one default variant is found (i.e only dark default or light default but not both),
* treat it like any other variant.
*/
const variant = defaultDarkVariant.id ? defaultDarkVariant : defaultLightVariant;
this._themeMapping[`${themeName} ${variant.variantName}`] = { id: variant.id, cssLocation: variant.cssLocation };
}
});
}
get themeMapping(): Record<string, ThemeInformation> {
return this._themeMapping;
}
}

View file

@ -0,0 +1,98 @@
/*
Copyright 2020 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 type {ThemeInformation} from "./types";
import type {Platform} from "../../Platform.js";
import type {ThemeManifest} from "../../../types/theme";
import {ColorSchemePreference} from "./types";
import {IconColorizer} from "../IconColorizer";
import {DerivedVariables} from "../DerivedVariables";
import {ILogItem} from "../../../../logging/types";
export class RuntimeThemeParser {
private _themeMapping: Record<string, ThemeInformation> = {};
private _preferredColorScheme?: ColorSchemePreference;
private _platform: Platform;
constructor(platform: Platform, preferredColorScheme?: ColorSchemePreference) {
this._preferredColorScheme = preferredColorScheme;
this._platform = platform;
}
async parse(manifest: ThemeManifest, baseManifest: ThemeManifest, baseManifestLocation: string, log: ILogItem): Promise<void> {
await log.wrap("RuntimeThemeParser.parse", async () => {
const {cssLocation, derivedVariables, icons} = this._getSourceData(baseManifest, baseManifestLocation, log);
const themeName = manifest.name;
if (!themeName) {
throw new Error(`Theme name not found in manifest!`);
}
let defaultDarkVariant: any = {}, defaultLightVariant: any = {};
for (const [variant, variantDetails] of Object.entries(manifest.values?.variants!) as [string, any][]) {
try {
const themeId = `${manifest.id}-${variant}`;
const { name: variantName, default: isDefault, dark, variables } = variantDetails;
const resolvedVariables = new DerivedVariables(variables, derivedVariables, dark).toVariables();
Object.assign(variables, resolvedVariables);
const iconVariables = await new IconColorizer(this._platform, icons, variables, baseManifestLocation).toVariables();
Object.assign(variables, resolvedVariables, iconVariables);
const themeDisplayName = `${themeName} ${variantName}`;
if (isDefault) {
const defaultVariant = dark ? defaultDarkVariant : defaultLightVariant;
Object.assign(defaultVariant, { variantName, id: themeId, cssLocation, variables });
continue;
}
this._themeMapping[themeDisplayName] = { cssLocation, id: themeId, variables: variables, };
}
catch (e) {
console.error(e);
continue;
}
}
if (defaultDarkVariant.id && defaultLightVariant.id) {
const defaultVariant = this._preferredColorScheme === ColorSchemePreference.Dark ? defaultDarkVariant : defaultLightVariant;
this._themeMapping[themeName] = { dark: defaultDarkVariant, light: defaultLightVariant, default: defaultVariant };
}
else {
const variant = defaultDarkVariant.id ? defaultDarkVariant : defaultLightVariant;
this._themeMapping[`${themeName} ${variant.variantName}`] = { id: variant.id, cssLocation: variant.cssLocation };
}
});
}
private _getSourceData(manifest: ThemeManifest, location: string, log: ILogItem)
: { cssLocation: string, derivedVariables: string[], icons: Record<string, string>} {
return log.wrap("getSourceData", () => {
const runtimeCSSLocation = manifest.source?.["runtime-asset"];
if (!runtimeCSSLocation) {
throw new Error(`Run-time asset not found in source section for theme at ${location}`);
}
const cssLocation = new URL(runtimeCSSLocation, new URL(location, window.location.origin)).href;
const derivedVariables = manifest.source?.["derived-variables"];
if (!derivedVariables) {
throw new Error(`Derived variables not found in source section for theme at ${location}`);
}
const icons = manifest.source?.["icon"];
if (!icons) {
throw new Error(`Icon mapping not found in source section for theme at ${location}`);
}
return { cssLocation, derivedVariables, icons };
});
}
get themeMapping(): Record<string, ThemeInformation> {
return this._themeMapping;
}
}

View file

@ -0,0 +1,38 @@
/*
Copyright 2020 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.
*/
export type NormalVariant = {
id: string;
cssLocation: string;
variables?: any;
};
export type Variant = NormalVariant & {
variantName: string;
};
export type DefaultVariant = {
dark: Variant;
light: Variant;
default: Variant;
}
export type ThemeInformation = NormalVariant | DefaultVariant;
export enum ColorSchemePreference {
Dark,
Light
};

View file

@ -13,10 +13,10 @@ 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 * as pkg from 'off-color';
const offColor = pkg.offColor ?? pkg.default.offColor;
const offColor = require("off-color").offColor;
module.exports.derive = function (value, operation, argument, isDark) {
export function derive(value, operation, argument, isDark) {
const argumentAsNumber = parseInt(argument);
if (isDark) {
// For dark themes, invert the operation

View file

@ -0,0 +1,24 @@
/*
Copyright 2021 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.
*/
export function getColoredSvgString(svgString, primaryColor, secondaryColor) {
let coloredSVGCode = svgString.replaceAll("#ff00ff", primaryColor);
coloredSVGCode = coloredSVGCode.replaceAll("#00ffff", secondaryColor);
if (svgString === coloredSVGCode) {
throw new Error("svg-colorizer made no color replacements! The input svg should only contain colors #ff00ff (primary, case-sensitive) and #00ffff (secondary, case-sensitive).");
}
return coloredSVGCode;
}

View file

@ -31,7 +31,7 @@ export function renderStaticAvatar(vm, size, extraClasses = undefined) {
avatarClasses += ` ${extraClasses}`;
}
const avatarContent = hasAvatar ? renderImg(vm, size) : text(vm.avatarLetter);
const avatar = tag.div({className: avatarClasses}, [avatarContent]);
const avatar = tag.div({className: avatarClasses, "data-testid": "avatar"}, [avatarContent]);
if (hasAvatar) {
setAttribute(avatar, "data-avatar-letter", vm.avatarLetter);
setAttribute(avatar, "data-avatar-color", vm.avatarColorNumber);

View file

@ -1,6 +1,7 @@
{
"version": 1,
"name": "Element",
"id": "element",
"values": {
"variants": {
"light": {

View file

@ -521,6 +521,62 @@ a {
.RoomView_error {
color: var(--error-color);
background : #efefef;
height : 0px;
font-weight : bold;
transition : 0.25s all ease-out;
padding-right : 20px;
padding-left : 20px;
}
.RoomView_error div{
overflow : hidden;
height: 100%;
width: 100%;
position : relative;
display : flex;
align-items : center;
}
.RoomView_error:not(:empty) {
height : auto;
padding-top : 20px;
padding-bottom : 20px;
}
.RoomView_error p {
position : relative;
display : block;
width : 100%;
height : auto;
margin : 0;
}
.RoomView_error button {
width : 40px;
padding-top : 20px;
padding-bottom : 20px;
background : none;
border : none;
position : relative;
border-radius : 5px;
transition: 0.1s all ease-out;
cursor: pointer;
}
.RoomView_error button:hover {
background : #cfcfcf;
}
.RoomView_error button:before {
content:"\274c";
position : absolute;
top : 15px;
left: 9px;
width : 20px;
height : 10px;
font-size : 10px;
align-self : middle;
}
.MessageComposer_replyPreview .Timeline_message {
@ -894,12 +950,12 @@ button.link {
width: 100%;
}
.RoomArchivedView {
.DisabledComposerView {
padding: 12px;
background-color: var(--background-color-secondary);
}
.RoomArchivedView h3 {
.DisabledComposerView h3 {
margin: 0;
}

View file

@ -233,7 +233,7 @@ only loads when the top comes into view*/
align-self: stretch;
}
.Timeline_messageBody .media > .sendStatus {
.Timeline_messageBody .media > .status {
align-self: end;
justify-self: start;
font-size: 0.8em;
@ -251,7 +251,7 @@ only loads when the top comes into view*/
}
.Timeline_messageBody .media > time,
.Timeline_messageBody .media > .sendStatus {
.Timeline_messageBody .media > .status {
color: var(--text-color);
display: block;
padding: 2px;

View file

@ -54,3 +54,11 @@ export function insertAt(parentNode: Element, idx: number, childNode: Node): voi
export function removeChildren(parentNode: Element): void {
parentNode.innerHTML = '';
}
export function disableTargetCallback(callback: (evt: Event) => Promise<void>): (evt: Event) => Promise<void> {
return async (evt: Event) => {
(evt.target as HTMLElement)?.setAttribute("disabled", "disabled");
await callback(evt);
(evt.target as HTMLElement)?.removeAttribute("disabled");
}
}

View file

@ -16,8 +16,8 @@ limitations under the License.
import {TemplateView} from "../../general/TemplateView";
export class RoomArchivedView extends TemplateView {
export class DisabledComposerView extends TemplateView {
render(t) {
return t.div({className: "RoomArchivedView"}, t.h3(vm => vm.description));
return t.div({className: "DisabledComposerView"}, t.h3(vm => vm.description));
}
}

View file

@ -21,7 +21,7 @@ import {Menu} from "../../general/Menu.js";
import {TimelineView} from "./TimelineView";
import {TimelineLoadingView} from "./TimelineLoadingView.js";
import {MessageComposer} from "./MessageComposer.js";
import {RoomArchivedView} from "./RoomArchivedView.js";
import {DisabledComposerView} from "./DisabledComposerView.js";
import {AvatarView} from "../../AvatarView.js";
export class RoomView extends TemplateView {
@ -32,12 +32,6 @@ export class RoomView extends TemplateView {
}
render(t, vm) {
let bottomView;
if (vm.composerViewModel.kind === "composer") {
bottomView = new MessageComposer(vm.composerViewModel, this._viewClassForTile);
} else if (vm.composerViewModel.kind === "archived") {
bottomView = new RoomArchivedView(vm.composerViewModel);
}
return t.main({className: "RoomView middle"}, [
t.div({className: "RoomHeader middle-header"}, [
t.a({className: "button-utility close-middle", href: vm.closeUrl, title: vm.i18n`Close room`}),
@ -52,13 +46,27 @@ export class RoomView extends TemplateView {
})
]),
t.div({className: "RoomView_body"}, [
t.div({className: "RoomView_error"}, vm => vm.error),
t.div({className: "RoomView_error"}, [
t.if(vm => vm.error, t => t.div(
[
t.p({}, vm => vm.error),
t.button({ className: "RoomView_error_closerButton", onClick: evt => vm.dismissError(evt) })
])
)]),
t.mapView(vm => vm.timelineViewModel, timelineViewModel => {
return timelineViewModel ?
new TimelineView(timelineViewModel, this._viewClassForTile) :
new TimelineLoadingView(vm); // vm is just needed for i18n
}),
t.view(bottomView),
t.mapView(vm => vm.composerViewModel,
composerViewModel => {
switch (composerViewModel?.kind) {
case "composer":
return new MessageComposer(vm.composerViewModel, this._viewClassForTile);
case "disabled":
return new DisabledComposerView(vm.composerViewModel);
}
}),
])
]);
}

View file

@ -15,6 +15,7 @@ limitations under the License.
*/
import {BaseMessageView} from "./BaseMessageView.js";
import {Menu} from "../../../general/Menu.js";
export class BaseMediaView extends BaseMessageView {
renderMessageBody(t, vm) {
@ -35,24 +36,39 @@ export class BaseMediaView extends BaseMessageView {
this.renderMedia(t, vm),
t.time(vm.date + " " + vm.time),
];
if (vm.isPending) {
const sendStatus = t.div({
const status = t.div({
className: {
sendStatus: true,
hidden: vm => !vm.sendStatus
status: true,
hidden: vm => !vm.status
},
}, vm => vm.sendStatus);
}, vm => vm.status);
children.push(status);
if (vm.isPending) {
const progress = t.progress({
min: 0,
max: 100,
value: vm => vm.uploadPercentage,
className: {hidden: vm => !vm.isUploading}
});
children.push(sendStatus, progress);
children.push(progress);
}
return t.div({className: "Timeline_messageBody"}, [
t.div({className: "media", style: `max-width: ${vm.width}px`}, children),
t.div({className: "media", style: `max-width: ${vm.width}px`, "data-testid": "media"}, children),
t.if(vm => vm.error, t => t.p({className: "error"}, vm.error))
]);
}
createMenuOptions(vm) {
const options = super.createMenuOptions(vm);
if (!vm.isPending) {
let label;
switch (vm.shape) {
case "image": label = vm.i18n`Download image`; break;
case "video": label = vm.i18n`Download video`; break;
default: label = vm.i18n`Download media`; break;
}
options.push(Menu.option(label, () => vm.downloadMedia()));
}
return options;
}
}

View file

@ -24,6 +24,6 @@ export class ImageView extends BaseMediaView {
title: vm => vm.label,
style: `max-width: ${vm.width}px; max-height: ${vm.height}px;`
});
return vm.isPending ? img : t.a({href: vm.lightboxUrl}, img);
return vm.isPending || !vm.lightboxUrl ? img : t.a({href: vm.lightboxUrl}, img);
}
}

View file

@ -15,6 +15,7 @@ limitations under the License.
*/
import {TemplateView} from "../../general/TemplateView";
import {disableTargetCallback} from "../../general/utils";
import {KeyBackupSettingsView} from "./KeyBackupSettingsView.js"
export class SettingsView extends TemplateView {
@ -101,11 +102,17 @@ export class SettingsView extends TemplateView {
return row(t, vm.i18n`Use the following theme`, this._themeOptions(t, vm));
}),
);
const logButtons = [];
if (vm.canSendLogsToServer) {
logButtons.push(t.button({onClick: disableTargetCallback(() => vm.sendLogsToServer())}, `Submit logs to ${vm.logsServer}`));
}
logButtons.push(t.button({onClick: () => vm.exportLogs()}, "Download logs"));
settingNodes.push(
t.h3("Application"),
row(t, vm.i18n`Version`, version),
row(t, vm.i18n`Storage usage`, vm => `${vm.storageUsage} / ${vm.storageQuota}`),
row(t, vm.i18n`Debug logs`, t.button({onClick: () => vm.exportLogs()}, "Export")),
row(t, vm.i18n`Debug logs`, logButtons),
t.p({className: {hidden: vm => !vm.logsFeedbackMessage}}, vm => vm.logsFeedbackMessage),
t.p(["Debug logs contain application usage data including your username, the IDs or aliases of the rooms or groups you have visited, the usernames of other users and the names of files you send. They do not contain messages. For more information, review our ",
t.a({href: "https://element.io/privacy", target: "_blank", rel: "noopener"}, "privacy policy"), "."]),
);

View file

@ -8,8 +8,8 @@ const path = require("path");
const manifest = require("./package.json");
const version = manifest.version;
const compiledVariables = new Map();
const derive = require("./scripts/postcss/color").derive;
const replacer = require("./scripts/postcss/svg-colorizer").buildColorizedSVG;
import {buildColorizedSVG as replacer} from "./scripts/postcss/svg-builder.mjs";
import {derive} from "./src/platform/web/theming/shared/color.mjs";
const commonOptions = {
logLevel: "warn",
@ -40,7 +40,7 @@ const commonOptions = {
postcss: {
plugins: [
compileVariables({derive, compiledVariables}),
urlVariables({compileVariables}),
urlVariables({compiledVariables}),
urlProcessor({replacer}),
// cssvariables({
// preserve: (declaration) => {

View file

@ -33,9 +33,7 @@ export default defineConfig(({mode}) => {
plugins: [
themeBuilder({
themeConfig: {
themes: {
element: "./src/platform/web/ui/css/themes/element",
},
themes: ["./src/platform/web/ui/css/themes/element"],
default: "element",
},
compiledVariables,

View file

@ -3,8 +3,9 @@ const mergeOptions = require('merge-options');
const themeBuilder = require("./scripts/build-plugins/rollup-plugin-build-themes");
const {commonOptions, compiledVariables} = require("./vite.common-config.js");
// These paths will be saved without their hash so they havea consisent path to
// reference
// These paths will be saved without their hash so they have a consisent path
// that we can reference in our `package.json` `exports`. And so people can import
// them with a consistent path.
const pathsToExport = [
"main.js",
"download-sandbox.html",
@ -21,7 +22,8 @@ export default mergeOptions(commonOptions, {
output: {
assetFileNames: (chunkInfo) => {
// Get rid of the hash so we can consistently reference these
// files in our `package.json` `exports`
// files in our `package.json` `exports`. And so people can
// import them with a consistent path.
if(pathsToExport.includes(path.basename(chunkInfo.name))) {
return "assets/[name].[ext]";
}
@ -34,7 +36,7 @@ export default mergeOptions(commonOptions, {
plugins: [
themeBuilder({
themeConfig: {
themes: { element: "./src/platform/web/ui/css/themes/element" },
themes: ["./src/platform/web/ui/css/themes/element"],
default: "element",
},
compiledVariables,

View file

@ -52,9 +52,9 @@
resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz#87de7af9c231826fdd68ac7258f77c429e0e5fcf"
integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==
"@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz":
version "3.2.3"
resolved "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz#cc332fdd25c08ef0e40f4d33fc3f822a0f98b6f4"
"@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz":
version "3.2.8"
resolved "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz#8d53636d045e1776e2a2ec6613e57330dd9ce856"
"@nodelib/fs.scandir@2.1.5":
version "2.1.5"
@ -77,6 +77,11 @@
"@nodelib/fs.scandir" "2.1.5"
fastq "^1.6.0"
"@trysound/sax@0.2.0":
version "0.2.0"
resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
"@types/json-schema@^7.0.7":
version "7.0.9"
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
@ -347,6 +352,11 @@ commander@^6.1.0:
resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
commander@^7.2.0:
version "7.2.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
concat-map@0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@ -382,11 +392,26 @@ css-select@^4.1.3:
domutils "^2.6.0"
nth-check "^2.0.0"
css-tree@^1.1.2, css-tree@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
dependencies:
mdn-data "2.0.14"
source-map "^0.6.1"
css-what@^5.0.0:
version "5.0.1"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.0.1.tgz#3efa820131f4669a8ac2408f9c32e7c7de9f4cad"
integrity sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==
csso@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
dependencies:
css-tree "^1.1.2"
cuint@^0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/cuint/-/cuint-0.2.2.tgz#408086d409550c2631155619e9fa7bcadc3b991b"
@ -1197,6 +1222,11 @@ lru-cache@^6.0.0:
dependencies:
yallist "^4.0.0"
mdn-data@2.0.14:
version "2.0.14"
resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
mdn-polyfills@^5.20.0:
version "5.20.0"
resolved "https://registry.yarnpkg.com/mdn-polyfills/-/mdn-polyfills-5.20.0.tgz#ca8247edf20a4f60dec6804372229812b348260b"
@ -1500,7 +1530,7 @@ source-map-js@^1.0.2:
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
source-map@~0.6.1:
source-map@^0.6.1, source-map@~0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@ -1510,6 +1540,11 @@ sprintf-js@~1.0.2:
resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
stable@^0.1.8:
version "0.1.8"
resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
string-width@^4.2.0:
version "4.2.2"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5"
@ -1550,6 +1585,19 @@ supports-preserve-symlinks-flag@^1.0.0:
resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
svgo@^2.8.0:
version "2.8.0"
resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"
integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==
dependencies:
"@trysound/sax" "0.2.0"
commander "^7.2.0"
css-select "^4.1.3"
css-tree "^1.1.3"
csso "^4.2.0"
picocolors "^1.0.0"
stable "^0.1.8"
table@^6.0.9:
version "6.7.1"
resolved "https://registry.yarnpkg.com/table/-/table-6.7.1.tgz#ee05592b7143831a8c94f3cee6aae4c1ccef33e2"
@ -1617,10 +1665,10 @@ type-fest@^0.20.2:
resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
typescript@^4.3.5:
version "4.3.5"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
typescript@^4.7.0:
version "4.7.4"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235"
integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==
typeson-registry@^1.0.0-alpha.20:
version "1.0.0-alpha.39"