Change embedded posts to use web UI

[Gargron]

I set out to fix icon alignment on embedded posts after the icon update, but ended up doing this. This updates post embeds to use the same code and design as the web UI.

Instead of giving people the iframe HTML code directly, the embed code will now use a blockquote with inline styles that links to the post in question. This is a much better fallback when the origin server is unresponsive or disappears in the future. The included script will still load the iframe and replace the fallback once the height has been determined. I've added some code to determine the height given that React rendering happens asynchronously and involves fetching the post data from the API.

The embed is overlaid with an anchor link leading to the post in a new tab. This is done primarily because some of the dynamic elements in the UI would change the content height, and the iframe height cannot be practically updated every time this happens. So for example, a post with a content warning will render with the content warning collapsed, and clicking "Show anyway" will open the post in a new tab, instead of expanding inside the iframe.

One exception are video and audio players, which have a higher z-index and pierce through the overlay, allowing video and audio to be played and controlled from the embed.

Before JS loads	After JS loads

[ClearlyClaire]

There is some minor breakage with modals not working but still being offered from media player / media gallery.

Otherwise, the look is more consistent, which is an improvement.

The failure case from loading the script switches from displaying a badly-sized frame to displaying a placeholder that does not contain the content from the post. I am not completely sure how useful that is, but at least it doesn't look too bad.

An issue I have (which is not new, and not really made worse, but made different) is that we are still relying on including an arbitrary script from the server, which is not especially good practice, especially when there is not one Mastodon server, but countless ones that are operated by different people whom news sites and so on would be wise not to blindly trust.

I wonder if we could find a better way. Maybe having the text of the post in the fallback? Although that would not play nice with retraction or edition of the post.

[trwnh]

I wonder if we could find a better way. Maybe having the text of the post in the fallback? Although that would not play nice with retraction or edition of the post.

Generally the convention in citations is to provide the text at the time it was cited, as well as a "date of access" or "date retrieved". So I'm of the opinion that you could put an HTML representation of the post in the "placeholder", generated at the time that the user clicks "embed this post". The JS could then, at minimum, load an indication of whether the post was edited or deleted since then. This could also be accomplished by the JS loading in the whole post as currently, but with the caveat of not necessarily overriding the citation in the HTML.

[ClearlyClaire]

Sorry I have not been able to focus enough to fully review this PR yet. The DetailedStatus rewrite makes the PR a bit noisy (but the resulting code is cleaner).

I have a security concern about the way the iframes are loaded.

Additionally, I think it might be worthwhile to include the text as fallback in the “placeholder”.

[github-actions]

This pull request has merge conflicts that must be resolved before it can be merged.

[github-actions]

This pull request has resolved merge conflicts and is ready for review.

[ClearlyClaire]

I have still not managed to fully review all the Typescript changes, but the overall approach seems good and a small but real improvement on the current embeds.

Testing the change, I could not see any regression.

[stefanbohacek]

Is it necessary to include the Mastodon logo? The SVG needs a lot of code, and if/when the logo changes, all the old embeds will look outdated.

[stefanbohacek]

Also, someone reported an issue when viewing a post made by someone on mastodon.social using an account on a server running 4.2.10 (in my case botsin.space).

[stefanbohacek]

@Gargron One more thing I noticed while looking at the documentation for the blockquote element, perhaps the cite attribute could be used instead of the custom data-embed-url one?

<blockquote cite="https://mastodon.social/@user/123456789" class="mastodon-embed">
  ....
</blockquote>

The embed URL can then be constructed by appending /embed to the value of cite.