Commit graph

115 commits

Author SHA1 Message Date
Eugen Rochko
7e7f69dfed Fix unnecessary re-rendering of various components when typing in web UI (#15286) 2020-12-07 19:36:36 +01:00
Eugen Rochko
de8c539b7b Fix not being able to open audio modal in web UI (#15283)
Fix #15280

Also adds the new action bar and blurhash-based background
color to audio and video modals
2020-12-07 04:29:37 +01:00
Eugen Rochko
af1fa584e9 Change media modals look in web UI (#15217)
- Change overlay background to match color of viewed image
- Add interactive reply/boost/favourite buttons to footer of modal
- Change ugly "View context" link to button among the action bar
2020-11-27 03:24:11 +01:00
Eugen Rochko
bcb3a91c0c Fix hardcoded frame rate for frame by frame video navigation in web UI (#15198) 2020-11-21 23:19:04 +01:00
Eugen Rochko
d416f3f662 Fix pop-out player appearing on mobile screens in web UI (#15157)
Fix #15092
2020-11-16 05:16:39 +01:00
Mélanie Chauvel
f7eae6d264 Make visibility icon clickable as part of the time of a toot (#15053)
- Makes permalink to a toot more easily clickable
- Fix clicking between icon and time in fact clicking the display name
- Fix clicking slightly under time in fact clicking the display name
2020-10-27 03:00:47 +01:00
Eugen Rochko
fc497420e9 Add pop-out player for audio/video in web UI (#14870)
Fix #11160
2020-09-28 13:29:43 +02:00
ThibG
187c756e16 Add unread notification markers (#14818)
* Add unread notification markers

Fixes #14804

* Allow IntersectionObserverArticle's children to be updated
2020-09-26 20:57:07 +02:00
ThibG
bf40d331e6 Freeze scroll position when a dropdown menu is open in the TL (#14271)
* Freeze scroll position when a dropdown menu is open in the TL

* Apply this to direct TL as well

* Fix case when mouse leaves the menu
2020-07-09 15:09:19 +02:00
Eugen Rochko
8517a5fdb4 Add color extraction for audio thumbnails (#14209) 2020-07-05 18:28:25 +02:00
Eugen Rochko
a3ce01a102 Add customizable thumbnails for audio and video attachments (#14145)
- Change audio files to not be stripped of metadata
- Automatically extract cover art from audio if it exists
- Add `thumbnail` parameter to `POST /api/v1/media`, `POST /api/v2/media` and `PUT /api/v1/media/:id`
- Add `icon` to represent it in attachments in ActivityPub
- Fix `preview_url` containing URL of missing missing image when there is no thumbnail instead of null
- Fix duration of audio not being displayed on public pages until the file is loaded
2020-06-29 13:56:55 +02:00
Takeshi Umeda
1aed75c2d0 Add a visibility icon to status (#14123)
* Add a visibility icon to status

* Change to using the icon element

* Fix RTL

* Add a public globe
2020-06-25 22:43:59 +02:00
Eugen Rochko
ce34c13aff Change volume control and download buttons in web UI (#14122)
* Fix audio download button not starting download in web UI

* Fix volume controls on audio and video players in web UI

* Remove download button from video player in web UI
2020-06-23 12:20:14 +02:00
Eugen Rochko
563a77d0b4 Change design of audio players in web UI (#14095) 2020-06-21 02:27:19 +02:00
ThibG
eda9bb35f1 Hide sensitive preview cards with blurhash (#13985)
* Use preview card blurhash in WebUI

* Handle sensitive preview cards
2020-06-06 17:41:56 +02:00
ThibG
3526163340 Fix expanded video player issues (#13541)
Fixes #13536

- Expanding a paused video doesn't autoplay anymore
- Default volume level for the expanded video inherited from the original video

Position/playing state/volume are carried over from the original video player
to the modal, but they're not reported back to the modal as it would require
deeper changes.
2020-04-25 12:16:05 +02:00
Mélanie Chauvel (ariasuni)
899ff914da Improve toot clicking areas (#13327)
* Make the area to the left “Show Thread” also expand the toot in Web UI

* Clicking the left part of a conversation with the avatars now opens it in Web UI
2020-03-31 19:40:23 +02:00
Eugen Rochko
b5ebc8e7dd Fix undefined error regression in status component in web UI (#12712)
Regression from #12661
2019-12-30 03:55:11 +01:00
Matt Panaro
47b330df2a Summary: fix slowness due to layout thrashing when reloading a large … (#12661)
* Summary: fix slowness due to layout thrashing when reloading a large set of status updates

in order to limit the maximum size of a status in a list view (e.g. the home timeline), so as to avoid having to scroll all the way through an abnormally large status update (see https://github.com/tootsuite/mastodon/pull/8205), the following steps are taken:
•the element containing the status is rendered in the browser
•its height is calculated, to determine if it exceeds the maximum height threshold.
Unfortunately for performance, these steps are carried out in the componentDidMount(/Update) method, which also performs style modifications on the element.  The combination of  height request and style modification during javascript evaluation in the browser leads to layout-thrashing, where the elements are repeatedly re-laid-out (see https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing & https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Performance_best_practices_for_Firefox_fe_engineers).
The solution implemented here is to memoize the collapsed state in Redux the first time the status is seen (e.g. when fetched as part of a small batch, to populate the home timeline) , so that on subsequent re-renders, the value can be queried, rather than recalculated.  This strategy is derived from https://github.com/tootsuite/mastodon/pull/4439 & https://github.com/tootsuite/mastodon/pull/4909, and should resolve https://github.com/tootsuite/mastodon/issues/12455.

Andrew Lin (https://github.com/onethreeseven) is thanked for his assistance in root cause analysis and solution brainstorming

* remove getSnapshotBeforeUpdate from status

* remove componentWillUnmount from status

* persist last-intersected status update and restore when ScrollableList is restored

e.g. when navigating from home-timeline to a status conversational  thread and <Back again

* cache currently-viewing status id to avoid calling redux with identical value

* refactor collapse toggle to pass explicit boolean
2019-12-29 05:39:48 +01:00
Jeong Arm
d37ed5bc2a Fix media open hotkey (#12546) 2019-12-05 00:50:51 +01:00
ThibG
af891f82be Add hotkey for opening media files (#12498)
* [WiP] Add hotkey to open media

* Give focus to play/pause button when opening video modal
2019-11-29 17:02:35 +01:00
BSKY
483cf4d52a Add noopener and/or noreferrer (#12202) 2019-10-24 22:44:42 +02:00
Eugen Rochko
eaa759ffd4 Fix more visual issues with the audio player (#11654)
* Fix more visual issues with the audio player

- Add horizontal baseline in the middle of waveform
- Fix audio player colors in light theme
- Use audio element instead of web audio API
- Do not render any bars until the file is loaded
- Do not allow interactions with waveform until the file is loaded

* Fix code style issue
2019-08-25 15:09:19 +02:00
Eugen Rochko
f13761d84b Add audio player (#11644) 2019-08-23 22:38:02 +02:00
ThibG
d8153b99b3 Fix hidden statuses losing focus (#11208)
Fixes #10991
2019-08-19 19:00:33 +02:00
Eugen Rochko
d7e2f554fb Add audio uploads (#11123)
* Add audio uploads

Fix #4827

Accept uploads of OGG, WAV, FLAC, OPUS and MP3 files, and converts
them to OGG. Media attachments get a new `audio` type. In the UI,
audio uploads are displayed identically to video uploads.

* Improve code style
2019-06-19 23:42:38 +02:00
ThibG
17ee16cbfe Fix clicking on the left side of a conversation not marking it as read (#11041) 2019-06-10 19:27:10 +02:00
ThibG
21acf681d2 Put poll options behind content warnings (#10983)
* Put poll options behind CWs in WebUI

* Put polls behind CWs on public pages

* Add poll icon to public pages CWs

* Revert to not showing an icon in the CW button
2019-06-08 17:40:59 +02:00
ThibG
0162dc0c9c Fix React warning about legacy lifecycle calls and sensitive status resetting (#10872) 2019-05-29 17:33:15 +03:00
Takeshi Umeda
03054b27e1 Fix poll visibility on public pages (#10817)
* Fix poll visibility on public pages

* Revert "Fix poll visibility on public pages"

This reverts commit 54a9608add6f855bc6337fe3c65eaee7ba13db49.

* Revert "Change poll options to alphabetic letters when status text is hidden"

This reverts commit c53d67326201b2061990b1874a3547c3647f50d2.
2019-05-26 23:13:29 +02:00
Neil Moore
139730e3db Create new click handler for status__expand area in status (#10837)
This click handler only activates on left-click, resolving #10798.
This matches behavior in status_content.js, as added in #536
2019-05-26 13:48:45 +02:00
Eugen Rochko
9e238804ea Fix null error in status component when determining showMedia state (#10838)
* Fix null error in status component when determining showMedia state

Also update the showMedia value if the status passed to the
component changes

* Refactor media visibility computation into a defaultMediaVisibility function

* Fix default media visibility with reblogs
2019-05-26 13:48:16 +02:00
ThibG
7ee189fa60 Add a keyboard shortcut to hide/show media (#10647)
* Move control of media visibility to parent component

* Add keyboard shortcut to toggle media visibility
2019-05-25 23:20:51 +02:00
Eugen Rochko
3a4761c665 Change poll options to alphabetic letters when status text is hidden (#10685)
Fix #10569
2019-05-18 14:41:16 +02:00
Neil Moore
59f6637559 Adds click-able div that expands status (#10733) (#10766)
The clickable div is positioned under the account avatar and covers
all empty space below it to the end of the status.
2019-05-15 06:53:23 +02:00
Eugen Rochko
a6d2fe7165 Add blurhash (#10630)
* Add blurhash

* Use fallback color for spoiler when blurhash missing

* Federate the blurhash and accept it as long as it's at most 5x5

* Display unknown media attachments as blurhash placeholders

* Improve style of embed actions and spoiler button

* Change blurhash resolution from 3x3 to 4x4

* Improve dependency definitions

* Fix code style issues
2019-04-27 03:24:09 +02:00
ashleyhull-versent
b0348d0f92 tinyfix 2: unrequired arguments (#10471)
* unrequired argument

* unrequired argument
2019-04-06 12:02:03 +09:00
Eugen Rochko
4a3acdc916 Add polls (#10111)
* Add polls

Fix #1629

* Add tests

* Fixes

* Change API for creating polls

* Use name instead of content for votes

* Remove poll validation for remote polls

* Add polls to public pages

* When updating the poll, update options just in case they were changed

* Fix public pages showing both poll and other media
2019-03-03 22:18:23 +01:00
ThibG
8a8e476a32 Fix crash when conversations have no valid participants (#10078)
* Never return empty participants for conversations

Fixes #10068

* Fix client-side crash when conversations have no participants
2019-02-19 20:00:41 +01:00
rinsuki
1a12ef6099 Fix breaks when opening a reply tree in WebUI (#10046)
fix #10045
2019-02-14 17:03:01 +01:00
ThibG
98642fef2a Fix timeline jumps (#10001)
* Avoid two-step rendering of statuses as much as possible

Cache width shared by Video player, MediaGallery and Cards at the
ScrollableList level, pass it down through StatusList and Notifications.

* Adjust scroll when new preview cards appear

* Adjust scroll when statuses above the current scroll position are deleted
2019-02-11 13:19:59 +01:00
Eugen Rochko
77dc5cc132 Refactor icons in web UI to use Icon component (#9951)
* Refactor uses of icons to an Icon component in web UI

* Refactor options passed to the Icon component

* Make tests work with absolute component paths
2019-02-01 00:14:05 +01:00
Eugen Rochko
380b246728 Redesign public hashtag page to use a masonry layout (#9822) 2019-01-16 19:47:46 +01:00
Eugen Rochko
142940f4c6 Add "Show thread" link to self-replies (#9228)
Fix #4716
2018-11-08 21:08:57 +01:00
Eugen Rochko
cf2ab9c394 Include preview cards in status entity in REST API (#9120)
* Include preview cards in status entity in REST API

* Display preview card in-stream

* Improve in-stream display of preview cards
2018-10-28 06:35:03 +01:00
Eugen Rochko
9309e5981d Redesign direct messages column (#9022) 2018-10-20 02:23:58 +02:00
Eugen Rochko
ad0670fe87 Revert Font Awesome 5 upgrade (#8810)
* Revert "Fix some icon names changed by the Font Awesome 5. (#8796)"

This reverts commit c8a1e945d9.

* Revert "Migrate to font-awesome 5.0. (#8799)"

This reverts commit ae20afbc80.

* Revert "Fix some icons names, unavailable in fontawesome5 (free license). (#8792)"

This reverts commit 30b1bb0704.

* Revert "Update the icon name changed by the Font Awesome 5. (#8776)"

This reverts commit 84bcf89764.

* Revert "Add bot icon to bot avatars and migrate to newer version of Font Awesome (#8484)"

This reverts commit cc784f3c16.
2018-09-28 02:11:14 +02:00
Naoki Kosaka
ae20afbc80 Migrate to font-awesome 5.0. (#8799) 2018-09-27 17:08:56 +02:00
Haelwenn Monnier
ec1119d2c9 Show "read more" link on overly long in-stream statuses (#8205)
Show "read more" link on overly long in-stream statuses
2018-09-27 17:04:33 +02:00
Yamagishi Kazutoshi
23ab704b2b Upgrade Babel to version 7.0.0 (#5925) 2018-09-14 17:59:48 +02:00