Skip to content

Improve previews for guests + GIF support #4472

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
PVince81 merged 5 commits into from
Oct 29, 2020
Merged

Improve previews for guests + GIF support #4472

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7083bbc
Chat previews now expanded with aspect ratio
PVince81 Oct 26, 2020
805b1cf
Add size to system message from shared file
PVince81 Oct 26, 2020
549d890
Direct preview for GIFs + guest mode previews
PVince81 Oct 26, 2020
591cacd
Make max GIF size configurable
PVince81 Oct 26, 2020
7c26560
Use max-height for images
PVince81 Oct 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
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.

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 <[email protected]>
  • Loading branch information
@PVince81
PVince81 committed Oct 28, 2020
commit 7083bbc04fde33bdfad11e80cb7d43d86a562c39
30 changes: 20 additions & 10 deletions src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
:class="{ 'file-preview--viewer-available': isViewerAvailable, 'file-preview--upload-editor': isUploadEditor }"
@click="handleClick"
@keydown.enter="handleClick">
<img v-if="(!isLoading && !failed) || hasTemporaryImageUrl"
<img v-if="(!isLoading && !failed)"
:class="previewSizeClass"
class="file-preview__image"
alt=""
Expand Down Expand Up @@ -94,7 +94,7 @@ export default {
},
previewSize: {
type: Number,
default: 128,
default: 384,
},
// In case this component is used to display a file that is being uploaded
// this parameter is used to access the file upload status in the store
Expand All @@ -109,6 +109,7 @@ export default {
default: '',
},
// True if this component is used in the upload editor
// FIXME: file-preview should be encapsulated and not be aware of its surroundings
isUploadEditor: {
type: Boolean,
default: false,
Expand Down Expand Up @@ -162,9 +163,9 @@ export default {
}

const previewSize = Math.ceil(this.previewSize * window.devicePixelRatio)
return generateUrl('/core/preview?fileId={fileId}&x={width}&y={height}', {
// expand width but keep a max height
return generateUrl('/core/preview?fileId={fileId}&x=-1&y={height}&a=1', {
fileId: this.id,
width: previewSize,
height: previewSize,
})
},
Expand Down Expand Up @@ -290,14 +291,19 @@ export default {
object-fit: cover;
}

.loading {
display: inline-block;
width: 100%;
}

.preview {
display: block;
width: 128px;
height: 128px;
display: inline-block;
max-width: 100%;
height: 384px;
}
.preview-64 {
display: block;
width: 64px;
display: inline-block;
max-width: 100%;
height: 64px;
}

Expand All @@ -308,7 +314,6 @@ export default {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-top: 4px;
}

&:not(.file-preview--viewer-available) {
Expand All @@ -323,6 +328,11 @@ export default {
padding: 12px;
.preview {
margin: auto;
width: 128px;
height: 128px;
}
.loading {
width: 100%;
}
}
}
Expand Down