From 78eb8ffc261b948be714634bfecca04d35a19359 Mon Sep 17 00:00:00 2001
From: RiotRobot
Date: Tue, 27 Jul 2021 15:51:16 +0100
Subject: [PATCH 01/19] Upgrade matrix-js-sdk to 12.2.0-rc.1
---
package.json | 2 +-
yarn.lock | 8 ++++----
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/package.json b/package.json
index b73462d188..97367ae6d2 100644
--- a/package.json
+++ b/package.json
@@ -80,7 +80,7 @@
"katex": "^0.12.0",
"linkifyjs": "^2.1.9",
"lodash": "^4.17.20",
- "matrix-js-sdk": "12.1.0",
+ "matrix-js-sdk": "12.2.0-rc.1",
"matrix-widget-api": "^0.1.0-beta.15",
"minimist": "^1.2.5",
"opus-recorder": "^8.0.3",
diff --git a/yarn.lock b/yarn.lock
index ee531265b7..b339f69c1f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5445,10 +5445,10 @@ mathml-tag-names@^2.1.3:
resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==
-matrix-js-sdk@12.1.0:
- version "12.1.0"
- resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-12.1.0.tgz#7d159dd9bc03701e45a6b2777f1fa582a7e8b970"
- integrity sha512-/fSqOjD+mTlMD+/B3s3Ja6BfI46FnTDl43ojzGDUOsHRRmSYUmoONb83qkH5Fjm8cI2q5ZBJMsBfjuZwLVeiZw==
+matrix-js-sdk@12.2.0-rc.1:
+ version "12.2.0-rc.1"
+ resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-12.2.0-rc.1.tgz#fbbb462dd98c64edb6f4bcd5403d802c98625f01"
+ integrity sha512-aHxL6wsLRrnJMLJ17V1IVOm2dCGOA8jHWZi43xNzkdsmQeU9UiUmUcT9RxsYcc7YhNv8ZaZ1plIwvBmoz3H4mA==
dependencies:
"@babel/runtime" "^7.12.5"
another-json "^0.2.0"
From 3003d489145d301db81d15cdce40e044ed336a43 Mon Sep 17 00:00:00 2001
From: RiotRobot
Date: Tue, 27 Jul 2021 16:01:51 +0100
Subject: [PATCH 02/19] Prepare changelog for v3.27.0-rc.1
---
CHANGELOG.md | 211 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 211 insertions(+)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 73b383d76d..cfecd838bc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,214 @@
+Changes in [3.27.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.27.0-rc.1) (2021-07-27)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.26.0...v3.27.0-rc.1)
+
+ * Fix timing of voice message recording UI appearing
+ [\#6479](https://github.com/matrix-org/matrix-react-sdk/pull/6479)
+ * Fix PiP resize issues
+ [\#6483](https://github.com/matrix-org/matrix-react-sdk/pull/6483)
+ * Translations update from Weblate
+ [\#6482](https://github.com/matrix-org/matrix-react-sdk/pull/6482)
+ * Make new reply UI clickable
+ [\#6474](https://github.com/matrix-org/matrix-react-sdk/pull/6474)
+ * Fix infinite pagination loop when offline
+ [\#6478](https://github.com/matrix-org/matrix-react-sdk/pull/6478)
+ * Fix deleted message left offset in the timeline
+ [\#6473](https://github.com/matrix-org/matrix-react-sdk/pull/6473)
+ * Fix broken layout of the space hierarchy view
+ [\#6481](https://github.com/matrix-org/matrix-react-sdk/pull/6481)
+ * Add data-layout to MELS for better CSS structure
+ [\#6480](https://github.com/matrix-org/matrix-react-sdk/pull/6480)
+ * Style markdown quotes
+ [\#6468](https://github.com/matrix-org/matrix-react-sdk/pull/6468)
+ * Update ESLint Config
+ [\#6476](https://github.com/matrix-org/matrix-react-sdk/pull/6476)
+ * Fix VoIP event tile issues
+ [\#6471](https://github.com/matrix-org/matrix-react-sdk/pull/6471)
+ * Fix editing of & &
+ [\#6469](https://github.com/matrix-org/matrix-react-sdk/pull/6469)
+ * Fix avatar overlapping with timestamp
+ [\#6461](https://github.com/matrix-org/matrix-react-sdk/pull/6461)
+ * Fix reactions row pushing content on IRC layout
+ [\#6464](https://github.com/matrix-org/matrix-react-sdk/pull/6464)
+ * Fix blurhash rounded corners missing regression
+ [\#6467](https://github.com/matrix-org/matrix-react-sdk/pull/6467)
+ * Adhere to better eslint rules
+ [\#6459](https://github.com/matrix-org/matrix-react-sdk/pull/6459)
+ * Clean up voice messages code
+ [\#6453](https://github.com/matrix-org/matrix-react-sdk/pull/6453)
+ * Fix position of the space hierarchy spinner
+ [\#6462](https://github.com/matrix-org/matrix-react-sdk/pull/6462)
+ * Fix clipped avatar in room list
+ [\#6463](https://github.com/matrix-org/matrix-react-sdk/pull/6463)
+ * Make inline events feel less claustrophobic in bubble layout
+ [\#6460](https://github.com/matrix-org/matrix-react-sdk/pull/6460)
+ * Initial MSC3083 + MSC3244 support
+ [\#6212](https://github.com/matrix-org/matrix-react-sdk/pull/6212)
+ * Add event selected state for message bubbles
+ [\#6449](https://github.com/matrix-org/matrix-react-sdk/pull/6449)
+ * Make images fit inside message bubble
+ [\#6448](https://github.com/matrix-org/matrix-react-sdk/pull/6448)
+ * Don't show scrollbar for URL previews
+ [\#6450](https://github.com/matrix-org/matrix-react-sdk/pull/6450)
+ * Fix display of image messages that lack thumbnails
+ [\#6456](https://github.com/matrix-org/matrix-react-sdk/pull/6456)
+ * Fix avatar obstructing membership and state changes
+ [\#6439](https://github.com/matrix-org/matrix-react-sdk/pull/6439)
+ * Zoom images in lightbox to where the cursor points
+ [\#6418](https://github.com/matrix-org/matrix-react-sdk/pull/6418)
+ * Always display the Sender in the reply tile
+ [\#6446](https://github.com/matrix-org/matrix-react-sdk/pull/6446)
+ * Use modern layout in file and notification panel
+ [\#6447](https://github.com/matrix-org/matrix-react-sdk/pull/6447)
+ * Add right padding for event replies
+ [\#6444](https://github.com/matrix-org/matrix-react-sdk/pull/6444)
+ * Fix event tile cut off in share preview
+ [\#6445](https://github.com/matrix-org/matrix-react-sdk/pull/6445)
+ * Remove excessive padding after url previews
+ [\#6443](https://github.com/matrix-org/matrix-react-sdk/pull/6443)
+ * Make quotes thinner
+ [\#6441](https://github.com/matrix-org/matrix-react-sdk/pull/6441)
+ * Prevent action bar to overlap the event content
+ [\#6438](https://github.com/matrix-org/matrix-react-sdk/pull/6438)
+ * Use a MediaElementSourceAudioNode to process large audio files
+ [\#6436](https://github.com/matrix-org/matrix-react-sdk/pull/6436)
+ * Revert 100% on codeblocks
+ [\#6440](https://github.com/matrix-org/matrix-react-sdk/pull/6440)
+ * Fix duration placeholder parsing for audio files
+ [\#6435](https://github.com/matrix-org/matrix-react-sdk/pull/6435)
+ * Handle upload errors in voice messages
+ [\#6434](https://github.com/matrix-org/matrix-react-sdk/pull/6434)
+ * Render error state for audio components
+ [\#6433](https://github.com/matrix-org/matrix-react-sdk/pull/6433)
+ * Clean up visual style of files and voice messages
+ [\#6432](https://github.com/matrix-org/matrix-react-sdk/pull/6432)
+ * Convert a few things to TS
+ [\#6413](https://github.com/matrix-org/matrix-react-sdk/pull/6413)
+ * Fix onPaste handler to work with copying files from Finder
+ [\#5389](https://github.com/matrix-org/matrix-react-sdk/pull/5389)
+ * Increase hit area for timestamp in message bubbles
+ [\#6428](https://github.com/matrix-org/matrix-react-sdk/pull/6428)
+ * Navigate to the first room with notifications when clicked on space
+ notification dot
+ [\#5974](https://github.com/matrix-org/matrix-react-sdk/pull/5974)
+ * Add matrix: to the list of permitted URL schemes
+ [\#6388](https://github.com/matrix-org/matrix-react-sdk/pull/6388)
+ * Make diff colors in codeblocks more pleasant
+ [\#6355](https://github.com/matrix-org/matrix-react-sdk/pull/6355)
+ * Add alwaysShowTimestamps and others to RoomView setting watchers
+ [\#6261](https://github.com/matrix-org/matrix-react-sdk/pull/6261)
+ * Restore 'use default' naming on room notifications
+ [\#6431](https://github.com/matrix-org/matrix-react-sdk/pull/6431)
+ * Use cached value to read member count
+ [\#6429](https://github.com/matrix-org/matrix-react-sdk/pull/6429)
+ * yarn upgrade
+ [\#6430](https://github.com/matrix-org/matrix-react-sdk/pull/6430)
+ * Improve new layout switcher UI
+ [\#6427](https://github.com/matrix-org/matrix-react-sdk/pull/6427)
+ * Play only one audio file at a time
+ [\#6417](https://github.com/matrix-org/matrix-react-sdk/pull/6417)
+ * Improve file labeling in replies
+ [\#6404](https://github.com/matrix-org/matrix-react-sdk/pull/6404)
+ * Fix replies line clamping
+ [\#6425](https://github.com/matrix-org/matrix-react-sdk/pull/6425)
+ * Add null guard for room prop in EventTile
+ [\#6426](https://github.com/matrix-org/matrix-react-sdk/pull/6426)
+ * Fix font slider preview for message bubbles
+ [\#6421](https://github.com/matrix-org/matrix-react-sdk/pull/6421)
+ * Add spoiler support for message bubbles
+ [\#6419](https://github.com/matrix-org/matrix-react-sdk/pull/6419)
+ * Fix error when hovering over non-emoji reactions
+ [\#6416](https://github.com/matrix-org/matrix-react-sdk/pull/6416)
+ * Fix sticker display for message bubbles
+ [\#6423](https://github.com/matrix-org/matrix-react-sdk/pull/6423)
+ * Reintroduce grouped events padding on modern layout
+ [\#6420](https://github.com/matrix-org/matrix-react-sdk/pull/6420)
+ * TypeScript migration for auth components
+ [\#6412](https://github.com/matrix-org/matrix-react-sdk/pull/6412)
+ * Fix grecaptcha throwing useless error sometimes
+ [\#6401](https://github.com/matrix-org/matrix-react-sdk/pull/6401)
+ * Move download button for media to the action bar
+ [\#6386](https://github.com/matrix-org/matrix-react-sdk/pull/6386)
+ * Remove hover effect from files in the files panel
+ [\#6405](https://github.com/matrix-org/matrix-react-sdk/pull/6405)
+ * Revert accidental renaming of dispatcherRef
+ [\#6415](https://github.com/matrix-org/matrix-react-sdk/pull/6415)
+ * Add VoIP event tiles
+ [\#6121](https://github.com/matrix-org/matrix-react-sdk/pull/6121)
+ * Update Emojibase and Twemoji and switch to IamCal (Slack-style) shortcodes
+ [\#6347](https://github.com/matrix-org/matrix-react-sdk/pull/6347)
+ * Conform to new react and typescript eslint rules
+ [\#6408](https://github.com/matrix-org/matrix-react-sdk/pull/6408)
+ * Remove unwanted comma in EventTile
+ [\#6414](https://github.com/matrix-org/matrix-react-sdk/pull/6414)
+ * 💭 Message bubble layout
+ [\#6291](https://github.com/matrix-org/matrix-react-sdk/pull/6291)
+ * Fix sticker placeholder centering
+ [\#6411](https://github.com/matrix-org/matrix-react-sdk/pull/6411)
+ * Fix avatar placeholders not getting capitalized
+ [\#6407](https://github.com/matrix-org/matrix-react-sdk/pull/6407)
+ * Revert order of notification setting radios
+ [\#6406](https://github.com/matrix-org/matrix-react-sdk/pull/6406)
+ * Respect compound emojis in default avatar initial generation
+ [\#6397](https://github.com/matrix-org/matrix-react-sdk/pull/6397)
+ * Update eslint-plugin-matrix-org
+ [\#6403](https://github.com/matrix-org/matrix-react-sdk/pull/6403)
+ * Rename Copy Link to Copy Room Link
+ [\#6402](https://github.com/matrix-org/matrix-react-sdk/pull/6402)
+ * Don't throw exception from setStickyRoom as it split-brains the
+ RoomListStore
+ [\#6399](https://github.com/matrix-org/matrix-react-sdk/pull/6399)
+ * Fix bug where 'other homeserver' would unfocus
+ [\#6394](https://github.com/matrix-org/matrix-react-sdk/pull/6394)
+ * Cleanup reply code
+ [\#6392](https://github.com/matrix-org/matrix-react-sdk/pull/6392)
+ * Match colors of room and user avatars in DMs
+ [\#6393](https://github.com/matrix-org/matrix-react-sdk/pull/6393)
+ * Remove title from Image View
+ [\#6395](https://github.com/matrix-org/matrix-react-sdk/pull/6395)
+ * Notification settings UI refresh
+ [\#6352](https://github.com/matrix-org/matrix-react-sdk/pull/6352)
+ * Avoid hitting the settings store from TextForEvent
+ [\#6205](https://github.com/matrix-org/matrix-react-sdk/pull/6205)
+ * Fix issues with room list duplication
+ [\#6391](https://github.com/matrix-org/matrix-react-sdk/pull/6391)
+ * Use URLSearchParams instead of transitive dependency `querystring`
+ [\#4399](https://github.com/matrix-org/matrix-react-sdk/pull/4399)
+ * Add "Copy Link" to room context menu
+ [\#6374](https://github.com/matrix-org/matrix-react-sdk/pull/6374)
+ * Fix EventIndex double handling events and erroring
+ [\#6385](https://github.com/matrix-org/matrix-react-sdk/pull/6385)
+ * Fix IRC layout replies
+ [\#6387](https://github.com/matrix-org/matrix-react-sdk/pull/6387)
+ * Improve reply rendering
+ [\#3553](https://github.com/matrix-org/matrix-react-sdk/pull/3553)
+ * Update PR template for new changelog generation
+ [\#6380](https://github.com/matrix-org/matrix-react-sdk/pull/6380)
+ * Silence / Fix some console warnings/errors
+ [\#6382](https://github.com/matrix-org/matrix-react-sdk/pull/6382)
+ * Cache value of feature_spaces* flags as they cause page refresh so are
+ immutable
+ [\#6381](https://github.com/matrix-org/matrix-react-sdk/pull/6381)
+ * Standardise spelling and casing of homeserver, identity server, and
+ integration manager
+ [\#6365](https://github.com/matrix-org/matrix-react-sdk/pull/6365)
+ * Convert CONTRIBUTING to markdown
+ [\#6379](https://github.com/matrix-org/matrix-react-sdk/pull/6379)
+ * Move blurhashing into a Worker and use OffscreenCanvas for thumbnailing
+ [\#6366](https://github.com/matrix-org/matrix-react-sdk/pull/6366)
+ * Exclude state events from widgets reading room events
+ [\#6378](https://github.com/matrix-org/matrix-react-sdk/pull/6378)
+ * Use webpack worker-loader instead of homegrown hack
+ [\#6356](https://github.com/matrix-org/matrix-react-sdk/pull/6356)
+ * Send clear events to widgets when permitted
+ [\#6371](https://github.com/matrix-org/matrix-react-sdk/pull/6371)
+ * Comment why end to end tests are only on the develop branch
+ [\#6377](https://github.com/matrix-org/matrix-react-sdk/pull/6377)
+ * Improve and consolidate typing
+ [\#6345](https://github.com/matrix-org/matrix-react-sdk/pull/6345)
+ * Fix 'User' type import
+ [\#6375](https://github.com/matrix-org/matrix-react-sdk/pull/6375)
+
Changes in [3.26.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.26.0) (2021-07-19)
=====================================================================================================
[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.26.0-rc.1...v3.26.0)
From cc0ff41360e7378ae920a17939d6410999948e6d Mon Sep 17 00:00:00 2001
From: RiotRobot
Date: Tue, 27 Jul 2021 16:01:52 +0100
Subject: [PATCH 03/19] v3.27.0-rc.1
---
package.json | 7 ++++---
1 file changed, 4 insertions(+), 3 deletions(-)
diff --git a/package.json b/package.json
index 97367ae6d2..83f260eae3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "matrix-react-sdk",
- "version": "3.26.0",
+ "version": "3.27.0-rc.1",
"description": "SDK for matrix.org using React",
"author": "matrix.org",
"repository": {
@@ -25,7 +25,7 @@
"bin": {
"reskindex": "scripts/reskindex.js"
},
- "main": "./src/index.js",
+ "main": "./lib/index.js",
"matrix_src_main": "./src/index.js",
"matrix_lib_main": "./lib/index.js",
"matrix_lib_typings": "./lib/index.d.ts",
@@ -200,5 +200,6 @@
"coverageReporters": [
"text"
]
- }
+ },
+ "typings": "./lib/index.d.ts"
}
From f8106ef39b45212c56f20cbe19fc9ba5daa724a7 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 28 Jul 2021 08:39:04 +0100
Subject: [PATCH 04/19] Fix CreateRoomDialog exploding when making public room
outside of a space
---
src/components/views/dialogs/CreateRoomDialog.tsx | 8 +++++++-
src/i18n/strings/en_EN.json | 1 +
2 files changed, 8 insertions(+), 1 deletion(-)
diff --git a/src/components/views/dialogs/CreateRoomDialog.tsx b/src/components/views/dialogs/CreateRoomDialog.tsx
index a06f508908..572212a96c 100644
--- a/src/components/views/dialogs/CreateRoomDialog.tsx
+++ b/src/components/views/dialogs/CreateRoomDialog.tsx
@@ -250,7 +250,7 @@ export default class CreateRoomDialog extends React.Component {
{ _t("You can change this at any time from room settings.") }
;
- } else if (this.state.joinRule === JoinRule.Public) {
+ } else if (this.state.joinRule === JoinRule.Public && this.props.parentSpace) {
publicPrivateLabel =
{ _t(
"Anyone will be able to find and join this room, not just members of .", {}, {
@@ -260,6 +260,12 @@ export default class CreateRoomDialog extends React.Component {
{ _t("You can change this at any time from room settings.") }
;
+ } else if (this.state.joinRule === JoinRule.Public) {
+ publicPrivateLabel =
+ { _t("Anyone will be able to find and join this room.") }
+
+ { _t("You can change this at any time from room settings.") }
+
;
} else if (this.state.joinRule === JoinRule.Invite) {
publicPrivateLabel =
{ _t(
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 102a481f52..1093f478bb 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2195,6 +2195,7 @@
"Everyone in will be able to find and join this room.": "Everyone in will be able to find and join this room.",
"You can change this at any time from room settings.": "You can change this at any time from room settings.",
"Anyone will be able to find and join this room, not just members of .": "Anyone will be able to find and join this room, not just members of .",
+ "Anyone will be able to find and join this room.": "Anyone will be able to find and join this room.",
"Only people invited will be able to find and join this room.": "Only people invited will be able to find and join this room.",
"You can’t disable this later. Bridges & most bots won’t work yet.": "You can’t disable this later. Bridges & most bots won’t work yet.",
"Your server requires encryption to be enabled in private rooms.": "Your server requires encryption to be enabled in private rooms.",
From ab7d38717c1fc5046a4d581c4ccb964ec0af2507 Mon Sep 17 00:00:00 2001
From: Germain Souquet
Date: Tue, 27 Jul 2021 16:24:05 +0200
Subject: [PATCH 05/19] Restore padding for single person state events
---
res/css/views/rooms/_EventTile.scss | 18 +++++++++---------
1 file changed, 9 insertions(+), 9 deletions(-)
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 4a419244ff..808af30329 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -132,15 +132,6 @@ $hover-select-border: 4px;
}
}
- &.mx_EventTile_info .mx_EventTile_line,
- & ~ .mx_EventListSummary > :not(.mx_EventTile) .mx_EventTile_avatar ~ .mx_EventTile_line {
- padding-left: calc($left-gutter + 18px);
- }
-
- & ~ .mx_EventListSummary .mx_EventTile_line {
- padding-left: calc($left-gutter);
- }
-
&.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 18px - $hover-select-border);
}
@@ -280,6 +271,15 @@ $hover-select-border: 4px;
}
}
+.mx_EventTile:not([data-layout=bubble]).mx_EventTile_info .mx_EventTile_line,
+.mx_EventListSummary:not([data-layout=bubble]) > :not(.mx_EventTile) .mx_EventTile_avatar ~ .mx_EventTile_line {
+ padding-left: calc($left-gutter + 18px);
+}
+
+.mx_EventListSummary:not([data-layout=bubble]) .mx_EventTile_line {
+ padding-left: calc($left-gutter);
+}
+
/* all the overflow-y: hidden; are to trap Zalgos -
but they introduce an implicit overflow-x: auto.
so make that explicitly hidden too to avoid random
From 7f6cf29766bc81d0dda92e65de9ecdc7a16c3c4e Mon Sep 17 00:00:00 2001
From: Dariusz Niemczyk
Date: Thu, 29 Jul 2021 12:39:32 +0200
Subject: [PATCH 06/19] Fix grecaptcha regression
---
src/components/views/auth/CaptchaForm.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/components/views/auth/CaptchaForm.tsx b/src/components/views/auth/CaptchaForm.tsx
index b1c09f2b22..97f45167a8 100644
--- a/src/components/views/auth/CaptchaForm.tsx
+++ b/src/components/views/auth/CaptchaForm.tsx
@@ -103,8 +103,8 @@ export default class CaptchaForm extends React.Component
Date: Thu, 29 Jul 2021 15:36:50 -0600
Subject: [PATCH 07/19] Unify and improve download interactions
With help from Palid.
This does two major things:
1. Makes the tile part of a file body clickable to trigger a download.
2. Refactors a lot of the recyclable code out of the DownloadActionButton in favour of a utility. It's not a perfect refactoring, but it sets the stage for future work in the area (if needed).
The refactoring still has a heavy reliance on being supplied an iframe, but simplifies the DownloadActionButton and a hair of the MFileBody download code. In future, we'd probably want to make the iframe completely managed by the FileDownloader rather than have it only sometimes manage a hidden iframe.
---
res/css/views/messages/_MFileBody.scss | 4 +-
.../views/messages/DownloadActionButton.tsx | 34 ++---
src/components/views/messages/MFileBody.tsx | 121 +++++++++++-------
src/utils/FileDownloader.ts | 104 +++++++++++++++
4 files changed, 196 insertions(+), 67 deletions(-)
create mode 100644 src/utils/FileDownloader.ts
diff --git a/res/css/views/messages/_MFileBody.scss b/res/css/views/messages/_MFileBody.scss
index 403f671673..d941a8132f 100644
--- a/res/css/views/messages/_MFileBody.scss
+++ b/res/css/views/messages/_MFileBody.scss
@@ -1,5 +1,5 @@
/*
-Copyright 2015, 2016, 2021 The Matrix.org Foundation C.I.C.
+Copyright 2015 - 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.
@@ -60,6 +60,8 @@ limitations under the License.
}
.mx_MFileBody_info {
+ cursor: pointer;
+
.mx_MFileBody_info_icon {
background-color: $message-body-panel-icon-bg-color;
border-radius: 20px;
diff --git a/src/components/views/messages/DownloadActionButton.tsx b/src/components/views/messages/DownloadActionButton.tsx
index 2bdae04eda..262783a867 100644
--- a/src/components/views/messages/DownloadActionButton.tsx
+++ b/src/components/views/messages/DownloadActionButton.tsx
@@ -16,12 +16,13 @@ limitations under the License.
import { MatrixEvent } from "matrix-js-sdk/src";
import { MediaEventHelper } from "../../../utils/MediaEventHelper";
-import React, { createRef } from "react";
+import React from "react";
import { RovingAccessibleTooltipButton } from "../../../accessibility/RovingTabIndex";
import Spinner from "../elements/Spinner";
import classNames from "classnames";
import { _t } from "../../../languageHandler";
import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { FileDownloader } from "../../../utils/FileDownloader";
interface IProps {
mxEvent: MatrixEvent;
@@ -39,7 +40,7 @@ interface IState {
@replaceableComponent("views.messages.DownloadActionButton")
export default class DownloadActionButton extends React.PureComponent {
- private iframe: React.RefObject = createRef();
+ private downloader = new FileDownloader();
public constructor(props: IProps) {
super(props);
@@ -56,27 +57,21 @@ export default class DownloadActionButton extends React.PureComponent {
- this.setState({ loading: false });
-
- // we aren't showing the iframe, so we can send over the bare minimum styles and such.
- this.iframe.current.contentWindow.postMessage({
- imgSrc: "", // no image
- imgStyle: null,
- style: "",
+ private async doDownload() {
+ await this.downloader.download({
blob: this.state.blob,
- download: this.props.mediaEventHelperGet().fileName,
- textContent: "",
- auto: true, // autodownload
- }, '*');
- };
+ name: this.props.mediaEventHelperGet().fileName,
+ });
+ this.setState({ loading: false });
+ }
public render() {
let spinner: JSX.Element;
@@ -97,13 +92,6 @@ export default class DownloadActionButton extends React.PureComponent
{ spinner }
- { this.state.blob && }
;
}
}
diff --git a/src/components/views/messages/MFileBody.tsx b/src/components/views/messages/MFileBody.tsx
index 116fd8bd43..4de4c4c804 100644
--- a/src/components/views/messages/MFileBody.tsx
+++ b/src/components/views/messages/MFileBody.tsx
@@ -26,6 +26,7 @@ import { TileShape } from "../rooms/EventTile";
import { presentableTextForFile } from "../../../utils/FileUtils";
import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
import { IBodyProps } from "./IBodyProps";
+import { FileDownloader } from "../../../utils/FileDownloader";
export let DOWNLOAD_ICON_URL; // cached copy of the download.svg asset for the sandboxed iframe later on
@@ -111,6 +112,7 @@ export default class MFileBody extends React.Component {
private iframe: React.RefObject = createRef();
private dummyLink: React.RefObject = createRef();
private userDidClick = false;
+ private fileDownloader: FileDownloader = new FileDownloader(() => this.iframe.current)
public constructor(props: IProps) {
super(props);
@@ -118,6 +120,32 @@ export default class MFileBody extends React.Component {
this.state = {};
}
+ private get content(): IMediaEventContent {
+ return this.props.mxEvent.getContent();
+ }
+
+ private get fileName(): string {
+ return this.content.body && this.content.body.length > 0 ? this.content.body : _t("Attachment");
+ }
+
+ private get linkText(): string {
+ return presentableTextForFile(this.content);
+ }
+
+ private downloadFile(fileName: string, text: string) {
+ this.fileDownloader.download({
+ blob: this.state.decryptedBlob,
+ name: fileName,
+ autoDownload: this.userDidClick,
+ opts: {
+ imgSrc: DOWNLOAD_ICON_URL,
+ imgStyle: null,
+ style: computedStyle(this.dummyLink.current),
+ textContent: _t("Download %(text)s", { text })
+ },
+ });
+ }
+
private getContentUrl(): string {
const media = mediaFromContent(this.props.mxEvent.getContent());
return media.srcHttp;
@@ -129,24 +157,55 @@ export default class MFileBody extends React.Component {
}
}
+ private decryptFile = async (): Promise => {
+ if (this.state.decryptedBlob) {
+ return;
+ }
+ try {
+ this.userDidClick = true;
+ this.setState({
+ decryptedBlob: await this.props.mediaEventHelper.sourceBlob.value,
+ });
+ } catch (err) {
+ console.warn("Unable to decrypt attachment: ", err);
+ Modal.createTrackedDialog('Error decrypting attachment', '', ErrorDialog, {
+ title: _t("Error"),
+ description: _t("Error decrypting attachment"),
+ });
+ }
+ };
+
+ private onPlaceholderClick = async () => {
+ const mediaHelper = this.props.mediaEventHelper;
+ if (mediaHelper.media.isEncrypted) {
+ await this.decryptFile();
+ this.downloadFile(this.fileName, this.linkText);
+ } else {
+ // As a button we're missing the `download` attribute for styling reasons, so
+ // download with the file downloader.
+ this.fileDownloader.download({
+ blob: await mediaHelper.sourceBlob.value,
+ name: this.fileName,
+ });
+ }
+ };
+
public render() {
const content = this.props.mxEvent.getContent();
- const text = presentableTextForFile(content);
const isEncrypted = this.props.mediaEventHelper.media.isEncrypted;
- const fileName = content.body && content.body.length > 0 ? content.body : _t("Attachment");
const contentUrl = this.getContentUrl();
const fileSize = content.info ? content.info.size : null;
const fileType = content.info ? content.info.mimetype : "application/octet-stream";
- let placeholder = null;
+ let placeholder: React.ReactNode = null;
if (this.props.showGenericPlaceholder) {
placeholder = (
-
+
{ presentableTextForFile(content, _t("Attachment"), false) }
-
+
);
}
@@ -157,20 +216,6 @@ export default class MFileBody extends React.Component {
// Need to decrypt the attachment
// Wait for the user to click on the link before downloading
// and decrypting the attachment.
- const decrypt = async () => {
- try {
- this.userDidClick = true;
- this.setState({
- decryptedBlob: await this.props.mediaEventHelper.sourceBlob.value,
- });
- } catch (err) {
- console.warn("Unable to decrypt attachment: ", err);
- Modal.createTrackedDialog('Error decrypting attachment', '', ErrorDialog, {
- title: _t("Error"),
- description: _t("Error decrypting attachment"),
- });
- }
- };
// This button should actually Download because usercontent/ will try to click itself
// but it is not guaranteed between various browsers' settings.
@@ -178,31 +223,14 @@ export default class MFileBody extends React.Component {
{ placeholder }
{ showDownloadLink &&
-
- { _t("Decrypt %(text)s", { text: text }) }
+
+ { _t("Decrypt %(text)s", { text: this.linkText }) }
}
);
}
- // When the iframe loads we tell it to render a download link
- const onIframeLoad = (ev) => {
- ev.target.contentWindow.postMessage({
- imgSrc: DOWNLOAD_ICON_URL,
- imgStyle: null, // it handles this internally for us. Useful if a downstream changes the icon.
- style: computedStyle(this.dummyLink.current),
- blob: this.state.decryptedBlob,
- // Set a download attribute for encrypted files so that the file
- // will have the correct name when the user tries to download it.
- // We can't provide a Content-Disposition header like we would for HTTP.
- download: fileName,
- textContent: _t("Download %(text)s", { text: text }),
- // only auto-download if a user triggered this iframe explicitly
- auto: this.userDidClick,
- }, "*");
- };
-
const url = "usercontent/"; // XXX: this path should probably be passed from the skin
// If the attachment is encrypted then put the link inside an iframe.
@@ -218,9 +246,16 @@ export default class MFileBody extends React.Component {
*/ }
+ { /*
+ TODO: Move iframe (and dummy link) into FileDownloader.
+ We currently have it set up this way because of styles applied to the iframe
+ itself which cannot be easily handled/overridden by the FileDownloader. In
+ future, the download link may disappear entirely at which point it could also
+ be suitable to just remove this bit of code.
+ */ }