Improve previews for guests + GIF support #4472

PVince81 · 2020-10-26T20:35:41Z

As this touched the same code, I've gathered them into a single PR.

Enhancements

Improve preview cropping

Chat previews now expanded with aspect ratio

Instead of cropping the previews in the conversation to a square, they are now using a limited height but their width is computed based on aspect ratio. This is done by passing different arguments to the previews endpoint so it delivers a preview with the matching size.

Also expanded image preview height to 384 as it looks better.

Fixes #3746

Render GIFs directly

Use direct URL to render GIFs (animated!) when they have a small size.

The maximum size is configurable with occ config:app:set spreed max-gif-size --value=X and exposed as the capability spreed.config.previews.max-gif-size

Fixes #1805

Add support for guest previews

Guest users can now directly see images in the chat, and small GIFs are animated as well!

Fixes #4471

PVince81 · 2020-10-26T21:40:21Z

BUG: previews in upload dialog are too big now

PVince81 · 2020-10-26T22:16:59Z

BUG: need a max-width for when the preview is too wide, otherwise it pushes the increases chat width => I've added a max-width: 100% to the preview (squashed)

src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue

PVince81 · 2020-10-27T08:17:44Z

squash after review

skjnldsv

Works fine!
Maybe we should have width/height constrains, it can lead to really big images

PVince81 · 2020-10-27T09:00:53Z

@skjnldsv the height will always be the same. For the width I added max-width: 100% so it doesn't become wider than the chat window. Not sure if we need more.

Thanks for the approval, I'll squash.

lib/Chat/Parser/SystemMessage.php

jancborchardt · 2020-10-27T13:13:11Z

Very nice @PVince81! :) Tiny enhancements which would make it look even better (but you decide whether to do it here or in a separate pull request):

Give images a border-radius: var(--border-radius) so it looks more integrated
Cut the image name from below since it looks technical, rarely has value and other chat solutions don’t show it either. Can still be shown as "title" attribute if we think it’s necessary.

PVince81 · 2020-10-27T15:28:41Z

Cut the image name from below since it looks technical

@jancborchardt also see related discussion about renaming files before upload. If we remove the display name then renaming the files is maybe not needed any more: #3543

PVince81 · 2020-10-28T15:04:40Z

test image layout when conversation happens in sidebar

Instead of cropping the previews in the conversation to a square, they are now using a limited height but their width is computed based on aspect ratio. This is done by passing different arguments to the previews endpoint so it delivers a preview with the matching size. Adjusted styles around the preview to make it look better. Expanded image preview height to 384 as it looks better. Signed-off-by: Vincent Petry <vincent@nextcloud.com>

Signed-off-by: Vincent Petry <vincent@nextcloud.com>

Use direct URL for small GIFS. Added preview support for guest mode. Signed-off-by: Vincent Petry <vincent@nextcloud.com>

Added app setting and capability "max-gif-size". Added new import for @nextcloud/capabilities. Signed-off-by: Vincent Petry <vincent@nextcloud.com> Co-authored-by: John Molakvoæ <skjnldsv@users.noreply.github.com>

PVince81 · 2020-10-28T16:09:46Z

Note: to test sidebar mode need to merge with #4291 and upload the files through the regular talk view.

BUG?: small pictures get stretched (ex: 50x50 pixels)
- it seems this was already the case before but was less noticable
BUG?: image is cropped in sidebar mode instead of having its size reduced:
- reduce size in sidebar mode
- maybe we can use a smaller vertical height there instead

Makes it possible to resize both previews and GIFs in a responsive manner, keeping the ratio and everything visible. Added border radius to make it look even nicer. Signed-off-by: Vincent Petry <vincent@nextcloud.com>

PVince81 · 2020-10-28T16:32:38Z

The issue was that sometimes the height is anyway the one we got from the preview, but sometimes when we render the real image like a GIF, we need max-height.

With the latest commit the image resizing and keeping the ratio is solved, both in the sidebar and also regular chat view.
Smaller pictures (like 50x50) are rendered small, which also means people could in theory upload small pictures of custom emojis if they wanted to without them being stretched...

@skjnldsv mind having another glance with your GIF collection and play with the resize ?

nickvergessen · 2020-10-28T19:29:42Z

package-lock.json

@@ -4919,6 +4919,7 @@
 					"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
 					"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
 					"dev": true,
+					"optional": true,


what was it with the optional again to not get it in and out again all the time?

no idea, this got set automatically when installing the new package

skjnldsv · 2020-10-29T07:54:39Z

A weird display bug for the second (75Mo gif)

Otherwise works fine. Maybe we should add an indicator to why it wont auto play if it's over 3Mo

nickvergessen · 2020-10-29T09:12:58Z

A weird display bug for the second (75Mo gif)

I see this too sometimes on our instance, I guess this happens when generating the preview takes too long or errors on first attempt or something. But it's a server issue

skjnldsv · 2020-10-29T09:44:08Z

A weird display bug for the second (75Mo gif)

I see this too sometimes on our instance, I guess this happens when generating the preview takes too long or errors on first attempt or something. But it's a server issue

But the mime icon is really small now, no?

nickvergessen · 2020-11-02T13:16:57Z

Well the icon you see there is the placeholder icon in case of an error I think. because the mimetype icon of svg is the image icon.

PVince81 · 2020-11-05T10:38:05Z

here's a fix for the icon height: #4537

PVince81 · 2020-11-05T10:51:11Z

and here the play button to make it clearer that it can be played: #4538

PVince81 added 3. to review enhancement labels Oct 26, 2020

PVince81 added this to the 💚 Next Major (21) milestone Oct 26, 2020

PVince81 requested review from nickvergessen, jancborchardt and skjnldsv October 26, 2020 20:35

PVince81 self-assigned this Oct 26, 2020

This was referenced Oct 26, 2020

Chat previews now expanded with aspect ratio #4469

Closed

Previews do not render for guests #4471

Closed

Better preview of the shared files #3746

Closed

PVince81 force-pushed the enh/noid/improve-previews-guests-and-gifs branch from 9a6f158 to 98ea8bf Compare October 26, 2020 21:09

PVince81 force-pushed the enh/noid/improve-previews-guests-and-gifs branch from 98ea8bf to 6cadf89 Compare October 26, 2020 22:04

PVince81 force-pushed the enh/noid/improve-previews-guests-and-gifs branch from 6cadf89 to fc78669 Compare October 26, 2020 22:17

skjnldsv reviewed Oct 27, 2020

View reviewed changes

src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue Outdated Show resolved Hide resolved

skjnldsv approved these changes Oct 27, 2020

View reviewed changes

PVince81 force-pushed the enh/noid/improve-previews-guests-and-gifs branch from 6156257 to 2d77bfd Compare October 27, 2020 09:02

nickvergessen reviewed Oct 27, 2020

View reviewed changes

lib/Chat/Parser/SystemMessage.php Show resolved Hide resolved

PVince81 mentioned this pull request Oct 27, 2020

Add optional size field for the file obj nextcloud/server#23712

Merged

PVince81 and others added 4 commits October 28, 2020 16:59

Add size to system message from shared file

805b1cf

Signed-off-by: Vincent Petry <vincent@nextcloud.com>

Direct preview for GIFs + guest mode previews

549d890

Use direct URL for small GIFS. Added preview support for guest mode. Signed-off-by: Vincent Petry <vincent@nextcloud.com>

Make max GIF size configurable

591cacd

Added app setting and capability "max-gif-size". Added new import for @nextcloud/capabilities. Signed-off-by: Vincent Petry <vincent@nextcloud.com> Co-authored-by: John Molakvoæ <skjnldsv@users.noreply.github.com>

Use max-height for images

7c26560

Makes it possible to resize both previews and GIFs in a responsive manner, keeping the ratio and everything visible. Added border radius to make it look even nicer. Signed-off-by: Vincent Petry <vincent@nextcloud.com>

PVince81 force-pushed the enh/noid/improve-previews-guests-and-gifs branch from 2d77bfd to 7c26560 Compare October 28, 2020 16:30

nickvergessen reviewed Oct 28, 2020

View reviewed changes

nickvergessen approved these changes Oct 28, 2020

View reviewed changes

PVince81 merged commit 63ab1d6 into master Oct 29, 2020

PVince81 deleted the enh/noid/improve-previews-guests-and-gifs branch October 29, 2020 08:07

PVince81 mentioned this pull request Oct 29, 2020

Image label in chat view causing layout disturbances #4494

Closed

danxuliu mentioned this pull request Nov 6, 2020

Fix mime icon and failed icon height #4537

Merged

nickvergessen mentioned this pull request Dec 18, 2020

Add changelog for 11.0.0-alpha.1 #4802

Merged

This was referenced Feb 19, 2021

Changelog for 11.0 and 11.1 #5210

Merged

[stable21] Changelog for 11.0 and 11.1 #5230

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve previews for guests + GIF support #4472

Improve previews for guests + GIF support #4472

PVince81 commented Oct 26, 2020 •

edited

Loading

PVince81 commented Oct 26, 2020 •

edited

Loading

PVince81 commented Oct 26, 2020

PVince81 commented Oct 27, 2020

skjnldsv left a comment

PVince81 commented Oct 27, 2020

jancborchardt commented Oct 27, 2020

PVince81 commented Oct 27, 2020 •

edited

Loading

PVince81 commented Oct 28, 2020 •

edited

Loading

PVince81 commented Oct 28, 2020 •

edited

Loading

PVince81 commented Oct 28, 2020

nickvergessen Oct 28, 2020

PVince81 Oct 29, 2020

skjnldsv commented Oct 29, 2020 •

edited

Loading

nickvergessen commented Oct 29, 2020

skjnldsv commented Oct 29, 2020

nickvergessen commented Nov 2, 2020

PVince81 commented Nov 5, 2020

PVince81 commented Nov 5, 2020

Improve previews for guests + GIF support #4472

Improve previews for guests + GIF support #4472

Conversation

PVince81 commented Oct 26, 2020 • edited Loading

Enhancements

Improve preview cropping

Render GIFs directly

Add support for guest previews

PVince81 commented Oct 26, 2020 • edited Loading

PVince81 commented Oct 26, 2020

PVince81 commented Oct 27, 2020

skjnldsv left a comment

Choose a reason for hiding this comment

PVince81 commented Oct 27, 2020

jancborchardt commented Oct 27, 2020

PVince81 commented Oct 27, 2020 • edited Loading

PVince81 commented Oct 28, 2020 • edited Loading

PVince81 commented Oct 28, 2020 • edited Loading

PVince81 commented Oct 28, 2020

nickvergessen Oct 28, 2020

Choose a reason for hiding this comment

PVince81 Oct 29, 2020

Choose a reason for hiding this comment

skjnldsv commented Oct 29, 2020 • edited Loading

nickvergessen commented Oct 29, 2020

skjnldsv commented Oct 29, 2020

nickvergessen commented Nov 2, 2020

PVince81 commented Nov 5, 2020

PVince81 commented Nov 5, 2020

PVince81 commented Oct 26, 2020 •

edited

Loading

PVince81 commented Oct 26, 2020 •

edited

Loading

PVince81 commented Oct 27, 2020 •

edited

Loading

PVince81 commented Oct 28, 2020 •

edited

Loading

PVince81 commented Oct 28, 2020 •

edited

Loading

skjnldsv commented Oct 29, 2020 •

edited

Loading