Move download button for media to the action bar #6386

turt2live · 2021-07-15T20:32:25Z

Code reviewer: This is broken out into chunked commits, though somewhat poorly (sorry).

Dev note: The differences in style are known and out of scope for this PR. See element-hq/element-web#18025 for details.

Highlight: Moved the download button next to the react and reply buttons on a message.

Headlines: Moved the download button next to the react and reply buttons on a message.

Showing the download button and lack of links below media events:

Download/decrypt in progress:

Image example:

Video files weren't forgotten, but not shown here. It's an image with a browser-default player.

To show that it still works fine in the right panel, here's a Files Panel

turt2live · 2021-07-18T23:07:58Z

There were problems with replies during development, so just highlighting that it seems fine now:

gaelledel

New download button looks good

Can we remove the Hover state (white background on Light theme and Black bg on Dark theme) it makes the UI look broken.

On the Desktop version, the Component style hasn't been updated to the new styling.

turt2live · 2021-07-19T14:27:07Z

Can we remove the Hover state (white background on Light theme and Black bg on Dark theme) it makes the UI look broken.

Will do so in another PR.

On the Desktop version, the Component style hasn't been updated to the new styling.

It hasn't quite been released yet, but soon! Will be looking at exposing it properly over the next few days.

dbkr

looks plausible I think

src/components/views/messages/DownloadActionButton.tsx

src/utils/MediaEventHelper.ts

…ges/download

dbkr

thanks!

* Sanitize untrusted variables from message previews before translation Fixes element-hq/element-web#18314 * Fix editing of `` & `<sup`> & `` [\matrix-org#6469](matrix-org#6469) Fixes element-hq/element-web#18211 * Zoom images in lightbox to where the cursor points [\matrix-org#6418](matrix-org#6418) Fixes element-hq/element-web#17870 * Avoid hitting the settings store from TextForEvent [\matrix-org#6205](matrix-org#6205) Fixes element-hq/element-web#17650 * Initial MSC3083 + MSC3244 support [\matrix-org#6212](matrix-org#6212) Fixes element-hq/element-web#17686 and element-hq/element-web#17661 * Navigate to the first room with notifications when clicked on space notification dot [\matrix-org#5974](matrix-org#5974) * Add matrix: to the list of permitted URL schemes [\matrix-org#6388](matrix-org#6388) * Add "Copy Link" to room context menu [\matrix-org#6374](matrix-org#6374) * 💭 Message bubble layout [\matrix-org#6291](matrix-org#6291) Fixes element-hq/element-web#4635, element-hq/element-web#17773 element-hq/element-web#16220 and element-hq/element-web#7687 * Play only one audio file at a time [\matrix-org#6417](matrix-org#6417) Fixes element-hq/element-web#17439 * Move download button for media to the action bar [\matrix-org#6386](matrix-org#6386) Fixes element-hq/element-web#17943 * Improved display of one-to-one call history with summary boxes for each call [\matrix-org#6121](matrix-org#6121) Fixes element-hq/element-web#16409 * Notification settings UI refresh [\matrix-org#6352](matrix-org#6352) Fixes element-hq/element-web#17782 * Fix EventIndex double handling events and erroring [\matrix-org#6385](matrix-org#6385) Fixes element-hq/element-web#18008 * Improve reply rendering [\matrix-org#3553](matrix-org#3553) Fixes element-hq/element-web#9217, element-hq/element-web#7633, element-hq/element-web#7530, element-hq/element-web#7169, element-hq/element-web#7151, element-hq/element-web#6692 element-hq/element-web#6579 and element-hq/element-web#17440 * Fix CreateRoomDialog exploding when making public room outside of a space [\matrix-org#6493](matrix-org#6493) * Fix regression where registration would soft-crash on captcha [\matrix-org#6505](matrix-org#6505) Fixes element-hq/element-web#18284 * only send join rule event if we have a join rule to put in it [\matrix-org#6517](matrix-org#6517) * Improve the new download button's discoverability and interactions. [\matrix-org#6510](matrix-org#6510) * Fix voice recording UI looking broken while microphone permissions are being requested. [\matrix-org#6479](matrix-org#6479) Fixes element-hq/element-web#18223 * Match colors of room and user avatars in DMs [\matrix-org#6393](matrix-org#6393) Fixes element-hq/element-web#2449 * Fix onPaste handler to work with copying files from Finder [\matrix-org#5389](matrix-org#5389) Fixes element-hq/element-web#15536 and element-hq/element-web#16255 * Fix infinite pagination loop when offline [\matrix-org#6478](matrix-org#6478) Fixes element-hq/element-web#18242 * Fix blurhash rounded corners missing regression [\matrix-org#6467](matrix-org#6467) Fixes element-hq/element-web#18110 * Fix position of the space hierarchy spinner [\matrix-org#6462](matrix-org#6462) Fixes element-hq/element-web#18182 * Fix display of image messages that lack thumbnails [\matrix-org#6456](matrix-org#6456) Fixes element-hq/element-web#18175 * Fix crash with large audio files. [\matrix-org#6436](matrix-org#6436) Fixes element-hq/element-web#18149 * Make diff colors in codeblocks more pleasant [\matrix-org#6355](matrix-org#6355) Fixes element-hq/element-web#17939 * Show the correct audio file duration while loading the file. [\matrix-org#6435](matrix-org#6435) Fixes element-hq/element-web#18160 * Fix various timeline settings not applying immediately. [\matrix-org#6261](matrix-org#6261) Fixes element-hq/element-web#17748 * Fix issues with room list duplication [\matrix-org#6391](matrix-org#6391) Fixes element-hq/element-web#14508 * Fix grecaptcha throwing useless error sometimes [\matrix-org#6401](matrix-org#6401) Fixes element-hq/element-web#15142 * Update Emojibase and Twemoji and switch to IamCal (Slack-style) shortcodes [\matrix-org#6347](matrix-org#6347) Fixes element-hq/element-web#13857 and element-hq/element-web#13334 * Respect compound emojis in default avatar initial generation [\matrix-org#6397](matrix-org#6397) Fixes element-hq/element-web#18040 * Fix bug where the 'other homeserver' field in the server selection dialog would become briefly focus and then unfocus when clicked. [\matrix-org#6394](matrix-org#6394) Fixes element-hq/element-web#18031 * Standardise spelling and casing of homeserver, identity server, and integration manager [\matrix-org#6365](matrix-org#6365) * Fix widgets not receiving decrypted events when they have permission. [\matrix-org#6371](matrix-org#6371) Fixes element-hq/element-web#17615 * Prevent client hangs when calculating blurhashes [\matrix-org#6366](matrix-org#6366) Fixes element-hq/element-web#17945 * Exclude state events from widgets reading room events [\matrix-org#6378](matrix-org#6378) * Cache feature_spaces\* flags to improve performance [\matrix-org#6381](matrix-org#6381)

* Sanitize untrusted variables from message previews before translation Fixes element-hq#18314 * Fix editing of `` & `<sup`> & `` [\element-hq#6469](matrix-org/matrix-react-sdk#6469) Fixes element-hq#18211 * Zoom images in lightbox to where the cursor points [\element-hq#6418](matrix-org/matrix-react-sdk#6418) Fixes element-hq#17870 * Avoid hitting the settings store from TextForEvent [\element-hq#6205](matrix-org/matrix-react-sdk#6205) Fixes element-hq#17650 * Initial MSC3083 + MSC3244 support [\element-hq#6212](matrix-org/matrix-react-sdk#6212) Fixes element-hq#17686 and element-hq#17661 * Navigate to the first room with notifications when clicked on space notification dot [\element-hq#5974](matrix-org/matrix-react-sdk#5974) * Add matrix: to the list of permitted URL schemes [\element-hq#6388](matrix-org/matrix-react-sdk#6388) * Add "Copy Link" to room context menu [\element-hq#6374](matrix-org/matrix-react-sdk#6374) * 💭 Message bubble layout [\element-hq#6291](matrix-org/matrix-react-sdk#6291) Fixes element-hq#4635, element-hq#17773 element-hq#16220 and element-hq#7687 * Play only one audio file at a time [\#6417](matrix-org/matrix-react-sdk#6417) Fixes element-hq#17439 * Move download button for media to the action bar [\element-hq#6386](matrix-org/matrix-react-sdk#6386) Fixes element-hq#17943 * Improved display of one-to-one call history with summary boxes for each call [\element-hq#6121](matrix-org/matrix-react-sdk#6121) Fixes element-hq#16409 * Notification settings UI refresh [\element-hq#6352](matrix-org/matrix-react-sdk#6352) Fixes element-hq#17782 * Fix EventIndex double handling events and erroring [\element-hq#6385](matrix-org/matrix-react-sdk#6385) Fixes element-hq#18008 * Improve reply rendering [\element-hq#3553](matrix-org/matrix-react-sdk#3553) Fixes element-hq#9217, element-hq#7633, element-hq#7530, element-hq#7169, element-hq#7151, element-hq#6692 element-hq#6579 and element-hq#17440 * Improve performance of room name calculation [\element-hq#1801](matrix-org/matrix-js-sdk#1801) * Fix browser history getting stuck looping back to the same room [\element-hq#18053](element-hq#18053) * Fix space shortcuts on layouts with non-English keys in the places of numbers [\element-hq#17780](element-hq#17780) Fixes element-hq#17776 * Fix CreateRoomDialog exploding when making public room outside of a space [\element-hq#6493](matrix-org/matrix-react-sdk#6493) * Fix regression where registration would soft-crash on captcha [\element-hq#6505](matrix-org/matrix-react-sdk#6505) Fixes element-hq#18284 * only send join rule event if we have a join rule to put in it [\element-hq#6517](matrix-org/matrix-react-sdk#6517) * Improve the new download button's discoverability and interactions. [\element-hq#6510](matrix-org/matrix-react-sdk#6510) * Fix voice recording UI looking broken while microphone permissions are being requested. [\element-hq#6479](matrix-org/matrix-react-sdk#6479) Fixes element-hq#18223 * Match colors of room and user avatars in DMs [\element-hq#6393](matrix-org/matrix-react-sdk#6393) Fixes element-hq#2449 * Fix onPaste handler to work with copying files from Finder [\element-hq#5389](matrix-org/matrix-react-sdk#5389) Fixes element-hq#15536 and element-hq#16255 * Fix infinite pagination loop when offline [\element-hq#6478](matrix-org/matrix-react-sdk#6478) Fixes element-hq#18242 * Fix blurhash rounded corners missing regression [\element-hq#6467](matrix-org/matrix-react-sdk#6467) Fixes element-hq#18110 * Fix position of the space hierarchy spinner [\element-hq#6462](matrix-org/matrix-react-sdk#6462) Fixes element-hq#18182 * Fix display of image messages that lack thumbnails [\element-hq#6456](matrix-org/matrix-react-sdk#6456) Fixes element-hq#18175 * Fix crash with large audio files. [\element-hq#6436](matrix-org/matrix-react-sdk#6436) Fixes element-hq#18149 * Make diff colors in codeblocks more pleasant [\element-hq#6355](matrix-org/matrix-react-sdk#6355) Fixes element-hq#17939 * Show the correct audio file duration while loading the file. [\element-hq#6435](matrix-org/matrix-react-sdk#6435) Fixes element-hq#18160 * Fix various timeline settings not applying immediately. [\element-hq#6261](matrix-org/matrix-react-sdk#6261) Fixes element-hq#17748 * Fix issues with room list duplication [\element-hq#6391](matrix-org/matrix-react-sdk#6391) Fixes element-hq#14508 * Fix grecaptcha throwing useless error sometimes [\element-hq#6401](matrix-org/matrix-react-sdk#6401) Fixes element-hq#15142 * Update Emojibase and Twemoji and switch to IamCal (Slack-style) shortcodes [\element-hq#6347](matrix-org/matrix-react-sdk#6347) Fixes element-hq#13857 and element-hq#13334 * Respect compound emojis in default avatar initial generation [\element-hq#6397](matrix-org/matrix-react-sdk#6397) Fixes element-hq#18040 * Fix bug where the 'other homeserver' field in the server selection dialog would become briefly focus and then unfocus when clicked. [\element-hq#6394](matrix-org/matrix-react-sdk#6394) Fixes element-hq#18031 * Standardise spelling and casing of homeserver, identity server, and integration manager [\element-hq#6365](matrix-org/matrix-react-sdk#6365) * Fix widgets not receiving decrypted events when they have permission. [\element-hq#6371](matrix-org/matrix-react-sdk#6371) Fixes element-hq#17615 * Prevent client hangs when calculating blurhashes [\element-hq#6366](matrix-org/matrix-react-sdk#6366) Fixes element-hq#17945 * Exclude state events from widgets reading room events [\element-hq#6378](matrix-org/matrix-react-sdk#6378) * Cache feature_spaces\* flags to improve performance [\element-hq#6381](matrix-org/matrix-react-sdk#6381)

Changes in [1.7.34](https://github.com/vector-im/element-desktop/releases/tag/v1.7.34) (2021-07-02) =================================================================================================== ## 🔒 SECURITY FIXES * Sanitize untrusted variables from message previews before translation Fixes element-hq/element-web#18314 ## ✨ Features * Fix editing of `` & `<sup`> & `` [\#6469](matrix-org/matrix-react-sdk#6469) Fixes #18211 * Zoom images in lightbox to where the cursor points [\#6418](matrix-org/matrix-react-sdk#6418) Fixes #17870 * Avoid hitting the settings store from TextForEvent [\#6205](matrix-org/matrix-react-sdk#6205) Fixes #17650 * Initial MSC3083 + MSC3244 support [\#6212](matrix-org/matrix-react-sdk#6212) Fixes #17686 and #17661 * Navigate to the first room with notifications when clicked on space notification dot [\#5974](matrix-org/matrix-react-sdk#5974) * Add matrix: to the list of permitted URL schemes [\#6388](matrix-org/matrix-react-sdk#6388) * Add "Copy Link" to room context menu [\#6374](matrix-org/matrix-react-sdk#6374) * 💭 Message bubble layout [\#6291](matrix-org/matrix-react-sdk#6291) Fixes #4635, #17773 #16220 and #7687 * Play only one audio file at a time [\#6417](matrix-org/matrix-react-sdk#6417) Fixes #17439 * Move download button for media to the action bar [\#6386](matrix-org/matrix-react-sdk#6386) Fixes #17943 * Improved display of one-to-one call history with summary boxes for each call [\#6121](matrix-org/matrix-react-sdk#6121) Fixes #16409 * Notification settings UI refresh [\#6352](matrix-org/matrix-react-sdk#6352) Fixes #17782 * Fix EventIndex double handling events and erroring [\#6385](matrix-org/matrix-react-sdk#6385) Fixes #18008 * Improve reply rendering [\#3553](matrix-org/matrix-react-sdk#3553) Fixes element-hq/element-web#9217, element-hq/element-web#7633, element-hq/element-web#7530, element-hq/element-web#7169, element-hq/element-web#7151, element-hq/element-web#6692 element-hq/element-web#6579 and #17440 * Improve performance of room name calculation [\#1801](matrix-org/matrix-js-sdk#1801) ## 🐛 Bug Fixes * Fix browser history getting stuck looping back to the same room [\#18053](element-hq/element-web#18053) * Fix space shortcuts on layouts with non-English keys in the places of numbers [\#17780](element-hq/element-web#17780) Fixes #17776 * Fix CreateRoomDialog exploding when making public room outside of a space [\#6493](matrix-org/matrix-react-sdk#6493) * Fix regression where registration would soft-crash on captcha [\#6505](matrix-org/matrix-react-sdk#6505) Fixes #18284 * only send join rule event if we have a join rule to put in it [\#6517](matrix-org/matrix-react-sdk#6517) * Improve the new download button's discoverability and interactions. [\#6510](matrix-org/matrix-react-sdk#6510) * Fix voice recording UI looking broken while microphone permissions are being requested. [\#6479](matrix-org/matrix-react-sdk#6479) Fixes #18223 * Match colors of room and user avatars in DMs [\#6393](matrix-org/matrix-react-sdk#6393) Fixes #2449 * Fix onPaste handler to work with copying files from Finder [\#5389](matrix-org/matrix-react-sdk#5389) Fixes #15536 and #16255 * Fix infinite pagination loop when offline [\#6478](matrix-org/matrix-react-sdk#6478) Fixes #18242 * Fix blurhash rounded corners missing regression [\#6467](matrix-org/matrix-react-sdk#6467) Fixes #18110 * Fix position of the space hierarchy spinner [\#6462](matrix-org/matrix-react-sdk#6462) Fixes #18182 * Fix display of image messages that lack thumbnails [\#6456](matrix-org/matrix-react-sdk#6456) Fixes #18175 * Fix crash with large audio files. [\#6436](matrix-org/matrix-react-sdk#6436) Fixes #18149 * Make diff colors in codeblocks more pleasant [\#6355](matrix-org/matrix-react-sdk#6355) Fixes #17939 * Show the correct audio file duration while loading the file. [\#6435](matrix-org/matrix-react-sdk#6435) Fixes #18160 * Fix various timeline settings not applying immediately. [\#6261](matrix-org/matrix-react-sdk#6261) Fixes #17748 * Fix issues with room list duplication [\#6391](matrix-org/matrix-react-sdk#6391) Fixes #14508 * Fix grecaptcha throwing useless error sometimes [\#6401](matrix-org/matrix-react-sdk#6401) Fixes #15142 * Update Emojibase and Twemoji and switch to IamCal (Slack-style) shortcodes [\#6347](matrix-org/matrix-react-sdk#6347) Fixes #13857 and #13334 * Respect compound emojis in default avatar initial generation [\#6397](matrix-org/matrix-react-sdk#6397) Fixes #18040 * Fix bug where the 'other homeserver' field in the server selection dialog would become briefly focus and then unfocus when clicked. [\#6394](matrix-org/matrix-react-sdk#6394) Fixes #18031 * Standardise spelling and casing of homeserver, identity server, and integration manager [\#6365](matrix-org/matrix-react-sdk#6365) * Fix widgets not receiving decrypted events when they have permission. [\#6371](matrix-org/matrix-react-sdk#6371) Fixes #17615 * Prevent client hangs when calculating blurhashes [\#6366](matrix-org/matrix-react-sdk#6366) Fixes #17945 * Exclude state events from widgets reading room events [\#6378](matrix-org/matrix-react-sdk#6378) * Cache feature_spaces\* flags to improve performance [\#6381](matrix-org/matrix-react-sdk#6381) Changes in [1.7.33](https://github.com/vector-im/element-web/releases/tag/v1.7.33) (2021-07-19) =============================================================================================== [Full Changelog](element-hq/element-web@v1.7.33-rc.1...v1.7.33) * No changes from rc.1 Changes in [1.7.33-rc.1](https://github.com/vector-im/element-web/releases/tag/v1.7.33-rc.1) (2021-07-14) ========================================================================================================= [Full Changelog](element-hq/element-web@v1.7.32...v1.7.33-rc.1) * Translations update from Weblate [\#17991](element-hq/element-web#17991) * Revert "Don't run nginx as root in docker" [\#17990](element-hq/element-web#17990) * Don't run nginx as root in docker [\#17927](element-hq/element-web#17927) * Add VS Code to gitignore [\#17982](element-hq/element-web#17982) * Remove canvas native dependencies from Dockerfile [\#17973](element-hq/element-web#17973) * Remove node-canvas devDependency [\#17967](element-hq/element-web#17967) * Add `reskindex` to development steps [\#17926](element-hq/element-web#17926) * Update Modernizr and stop it from polluting classes on the html tag [\#17921](element-hq/element-web#17921) * Convert a few files to TS [\#17895](element-hq/element-web#17895) * Do not generate a lockfile when running in CI [\#17902](element-hq/element-web#17902) * Fix lockfile to match listed dependencies [\#17888](element-hq/element-web#17888) * Remove PostCSS calc() processing [\#17856](element-hq/element-web#17856) * Make issue template styling more consistent and improve PR template [\#17691](element-hq/element-web#17691) * Update jsrsasign to ^10.2.0 (Includes fix for CVE-2021-30246) [\#17170](element-hq/element-web#17170) * Migrate to `eslint-plugin-matrix-org` [\#17847](element-hq/element-web#17847) * Remove spurious overflow: auto on #matrixchat element [\#17647](element-hq/element-web#17647) * Enhance security by disallowing CSP object-src rule [\#17818](element-hq/element-web#17818)

turt2live added T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements Sponsored labels Jul 15, 2021

turt2live added 9 commits July 16, 2021 15:12

Simple POC for moving download button to action bar

0a99f76

Convert MessageEvent to TS and hoist MediaEventHelper

703cf73

Fix refreshing the page not showing a download

584ffbd

Clean up after POC

040802e

Convert images, audio, and voice messages over to the new helper

5fce0cc

Convert MFileBody to TS and use media helper

ea7513f

Share body prop types with an interface

d156a56

Appease type system

7ba0adb

Only show download link below media if it's not in the timeline

623f2e7

turt2live force-pushed the travis/voice-messages/download branch from 4bff90e to 623f2e7 Compare July 16, 2021 21:12

turt2live added 3 commits July 16, 2021 15:55

Update visual style and sandbox properly

b57fff5

Small tweaks

31d7de6

Appease the linter

4d38218

turt2live marked this pull request as ready for review July 16, 2021 22:14

turt2live requested review from a team July 16, 2021 22:14

SimonBrandner mentioned this pull request Jul 18, 2021

[WIP] Rewrite MFileBody #6223

Closed

2 tasks

Fix component export

70e525d

gaelledel reviewed Jul 19, 2021

View reviewed changes

gaelledel approved these changes Jul 19, 2021

View reviewed changes

turt2live mentioned this pull request Jul 19, 2021

Remove hover effect from files in the files panel #6405

Merged

dbkr self-assigned this Jul 20, 2021

dbkr approved these changes Jul 20, 2021

View reviewed changes

src/components/views/messages/DownloadActionButton.tsx Outdated Show resolved Hide resolved

src/utils/MediaEventHelper.ts Outdated Show resolved Hide resolved

turt2live added 3 commits July 20, 2021 08:52

Remove useless image reference

32d8da2

Doc some values

44e240e

Merge remote-tracking branch 'origin/develop' into travis/voice-messa…

5994111

…ges/download

dbkr approved these changes Jul 20, 2021

View reviewed changes

delint

7892539

turt2live enabled auto-merge July 20, 2021 15:06

turt2live merged commit 7ea17ae into develop Jul 20, 2021

turt2live deleted the travis/voice-messages/download branch July 20, 2021 15:08

ShadowJonathan mentioned this pull request Jul 20, 2021

Image-specific right-click context menus element-hq/element-web#18109

Open

robintown mentioned this pull request Jul 21, 2021

Larger images in timeline are being cut off on the right element-hq/element-web#18163

Closed

HarHarLinks mentioned this pull request Jul 23, 2021

Show image metadata in timeline (& lightbox) element-hq/element-web#18197

Closed

HarHarLinks mentioned this pull request Aug 19, 2022

There is no way to tell what size download a video is element-hq/element-web#23116

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Move download button for media to the action bar #6386

Move download button for media to the action bar #6386

turt2live commented Jul 15, 2021 •

edited

Loading

turt2live commented Jul 18, 2021

gaelledel left a comment •

edited

Loading

turt2live commented Jul 19, 2021

dbkr left a comment

dbkr left a comment

Move download button for media to the action bar #6386

Move download button for media to the action bar #6386

Conversation

turt2live commented Jul 15, 2021 • edited Loading

turt2live commented Jul 18, 2021

gaelledel left a comment • edited Loading

Choose a reason for hiding this comment

turt2live commented Jul 19, 2021

dbkr left a comment

Choose a reason for hiding this comment

dbkr left a comment

Choose a reason for hiding this comment

turt2live commented Jul 15, 2021 •

edited

Loading

gaelledel left a comment •

edited

Loading