This commit replaces all unnecessarily repeated code for decoding and
embedding blurhash canvases with separate component - <Blurhash>.

Under the hood Blurhash component will use effect dependent on its
props. This gives a few benefits: it will only be re-rendered whenever
the hash or width/height/dummy props update, and will not render if
canvas won't get to the final DOM, because then effect won't fire,
which prevents weird bugs like #14257.

- Fix audio attachments not being represented in OpenGraph tags
- Fix audio being represented as "1 image" in OpenGraph descriptions
- Fix video metadata being overwritten by paperclip-av-transcoder
- Fix embedded player not using Mastodon's UI
- Fix audio/video progress bars not moving smoothly
- Fix audio/video buffered bars not displaying correctly

* Fix audio/video/images/cards not reacting to window resizes in web UI

* Update app/javascript/mastodon/features/audio/index.js

Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>

Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>

* 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

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.

Change video player to not loop, since the audio player doesn't

Change playback and mute buttons to feel snappier

* [WiP] Add hotkey to open media

* Give focus to play/pause button when opening video modal

* Add download button for audio player

* Add download button for video player

* fix padding for download button in Audio component

Fixes #12156

Move media description input to a modal and unite that modal with
the focal point modal. Add a hint about choosing focal points, as
well as a preview of a 16:9 thumbnail. Enable the user to watch
the video next to the media description input.

Fix #8320
Fix #6713

* Add option to disable blurhash previews

* Update option text

* Change options order

* Move control of media visibility to parent component

* Add keyboard shortcut to toggle media visibility

* Add "view context" button to media modal when opened from gallery

* Add "view context" button to video modal

Allow closing the video modal by navigating back in the browser,
just like the media modal

* Make the "mark media as sensitive" button more obvious in web UI

* Use eye-slash icon instead of eye icon to mean "hide"

* 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

* 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

* 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

* Fix initial value of volume slider in video player and handle volume changes

* Clean up dead/incorrect code

* Volume sliders for videos #7429

* Code formatting updates

* Code formatting updates

* Revert "Fix some icon names changed by the Font Awesome 5. (#8796)"

This reverts commit 3f9ec3de82.

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

This reverts commit 8bae14591b.

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

This reverts commit b9c727a945.

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

This reverts commit 17af4d27da.

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

This reverts commit 4b794e134d.

* Pass through video description as necessary.

* Add title to video, matching aria-label.

* Prevent default event handling when clicking on the video position slider

This prevents accidental text selection when clicking on the position slider.

* Fix bug when clicking on video position slider before starting the video

* Slightly more aggressive video preloading

- Preload video metadata if the video is loaded in detailed view, as it is
  likely to get played, and metadata is useful for seeking in the video.
- Preload video data if it's fullscreen as it is extremely likely to get
  played right after being put in fullscreen (although those are two steps).
- Preload video data if the user has clicked the position slider, as the video
  will play as soon as the mouse button is released, and video metadata is
  needed to properly seek into the video.

* Responsively enforce 16:9 ratio on all media thumbnails in web UI

Also change video player behaviour to "contain" rather than
"cover" videos that don't fit the ratio, unlike images and GIFs,
it's expected that a video is shown fully.

* Fix spacing issues and remove floor

* Remove floor

* Add focus param to media API, center thumbnails on focus point

* Add UI for setting a focal point

* Improve focal point icon on upload item

* Use focal point in upload preview

* Add focalPoint property to ActivityPub

* Don't show focal point button for non-image attachments

* Toggle contain:strict on fullscreen

* Fix scss lint issue

* fix scss whitespace lint issue

* Fix #117 - Add ability to specify alternative text for media attachments

- POST /api/v1/media accepts `description` straight away
- PUT /api/v1/media/:id to update `description` (only for unattached ones)
- Serialized as `name` of Document object in ActivityPub
- Uploads form adjusted for better performance and description input

* Add tests

* Change undo button blend mode to difference

* Redesign video player

* Use new video player on static public pages too

* Use media gallery component on static public pages too

* Pause video when hiding it

* Full-screen sizing on WebKit

* Add aria labels to video player buttons

* Display link card on public status page

* Fix fullscreen from modal sizing issue

* Remove contain: strict property to fix fullscreen from columns