Chat inline link: show URL preview

bradlegge commented 8 years ago

Chat inline link: when a link is posted to a chat, show URL preview as per design

Design: all ready

bradlegge commented 8 years ago

Screen URL: https://app.zeplin.io/project.html#pid=573bea252e3e73497df13165&sid=57464248aa4f5c031fffa529

ara4n commented 8 years ago

So we have some fairly significant issues with the design/implementation now it's landed; summarising from the chatroom here so things don't get lost:

[x] We've lost the ability to hide/show previews. Suggestion is to put it into the context menu, which would be fine for me - or to make the new link icon a toggle perhaps.
[ ] The previews take up way too much vertical whitespace, especially in rooms with lots of URLs (e.g. #vector-spam:matrix.org) - we need a rethink of how to handle this
[ ] The whitespace has regressed in the issue description causing descriptions to explode in vertical space usage. It needs to be white-space: normal or something.
[ ] Image previews for HTML URLs now take you straight to the URL. This is fine, but Image previews for Image URLs are confused as they have a "Read more" link, and the image is loaded directly rather than in a prettier lightbox, which seems like a step backwards.

On the plus side, the aesthetics are looking really nice :)

stefanpearson commented 8 years ago

We can amend this. However, the preview image needs more thought. I gather we want small thumbs in some conditions (Github etc), and larger images for editorial-based articles (as per the visuals). This is tricky with the data we have. If we're lucky, we can get the open-graph type and render large images under certain conditions (e.g. article). Otherwise, we're going to have to normalise them and show a small thumb, which may change the layout (columns instead of rows).

Thoughts?

Open-graph types: https://developers.facebook.com/docs/reference/opengraph/

ara4n commented 8 years ago

For now I think we have no choice but to go for small thumbs, unless the URL is primarily image-related (e.g. an image URL). We could try to do some heuristics to decide what OG types (or other metadata) should produce big thumbnails, but this feels fairly fragile to me. If it'd be possible to have a more compact layout that we use by default it would be appreciated. Sorry for the additional work.

On 19/07/2016 11:31, Stefan Pearson wrote:

We can amend this. However, the preview image needs more thought. I gather we want small thumbs in some conditions (Github etc), and larger images for editorial-based articles (as per the visuals). This is tricky with the data we have. If we're lucky, we can get the open-graph type and render large images under certain conditions (e.g. article). Otherwise, we're going to have to normalise them and show a small thumb, which may change the layout (columns instead of rows).

Thoughts?

Open-graph types: https://developers.facebook.com/docs/reference/opengraph/

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/vector-im/vector-web/issues/1751#issuecomment-233593173,

or mute the thread https://github.com/notifications/unsubscribe-auth/ABO_vYGrN8PWuR7k7WynkBLv2Q9JbyIjks5qXKeKgaJpZM4JKU_J.

ara4n commented 7 years ago

The updated design at https://zpl.io/oPpjO is signed off and ready to go. The implementation needs to consider the 4 bulletpoints which were mentioned in the first comment.

prinzpi commented 6 years ago

Hi, I would like to know if there are any updates especially the bulletpoint 4 I'm interested in. I have attached two screenshots (Slack / Riot), it would be great if the URL preview inside the Riot rooms looks similar as those from Slack. In the screenshots the messages are forwarded with Matterbridge but it doesn't make a different, also by posting the URL without a bot there won't be any previews.

Thanks.