Skip to content

Fix mime icon and failed icon height #4537

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 3 commits into from
Nov 6, 2020
Merged

Fix mime icon and failed icon height #4537

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fd461aa
Expose file preview type as single value
PVince81 Nov 5, 2020
98e9d48
Fix mime type icon height
PVince81 Nov 5, 2020
2d5cd3c
Polish preview type + mime icon logic in file preview
PVince81 Nov 6, 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
55 changes: 44 additions & 11 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 @@ -29,12 +29,12 @@
@click="handleClick"
@keydown.enter="handleClick">
<img v-if="(!isLoading && !failed)"
:class="previewSizeClass"
:class="previewImageClass"
class="file-preview__image"
alt=""
:src="previewUrl">
<img v-if="!isLoading && failed"
:class="previewSizeClass"
:class="previewImageClass"
alt=""
:src="defaultIconUrl">
<span v-if="isLoading"
Expand All @@ -56,6 +56,13 @@ import ProgressBar from '@nextcloud/vue/dist/Components/ProgressBar'
import Close from 'vue-material-design-icons/Close'
import { getCapabilities } from '@nextcloud/capabilities'

const PREVIEW_TYPE = {
TEMPORARY: 0,
MIME_ICON: 1,
DIRECT: 2,
PREVIEW: 3,
}

export default {
name: 'FilePreview',

Expand Down Expand Up @@ -152,26 +159,47 @@ export default {
defaultIconUrl() {
return imagePath('core', 'filetypes/file')
},
previewSizeClass() {
previewImageClass() {
let classes = ''
if (this.previewSize === 64) {
return 'preview-64'
classes += 'preview-64 '
} else {
classes += 'preview '
}
return 'preview'

if (this.failed || this.previewType === PREVIEW_TYPE.MIME_ICON) {
classes += 'mimeicon'
}
return classes
},
previewUrl() {
const userId = this.$store.getters.getUserId()
previewType() {
if (this.hasTemporaryImageUrl) {
return this.localUrl
return PREVIEW_TYPE.TEMPORARY
}

if (this.previewAvailable !== 'yes') {
return OC.MimeType.getIconUrl(this.mimetype)
return PREVIEW_TYPE.MIME_ICON
}

// max size of a gif for which we allow direct embedding
const maxGifSize = getCapabilities()?.caps?.spreed?.config?.previews?.['max-gif-size'] || 3145728
if (this.mimetype === 'image/gif' && this.size <= maxGifSize) {
// return direct image so it can be animated
return PREVIEW_TYPE.DIRECT
}

return PREVIEW_TYPE.PREVIEW
},
previewUrl() {
const userId = this.$store.getters.getUserId()

if (this.previewType === PREVIEW_TYPE.TEMPORARY) {
return this.localUrl
}
if (this.previewType === PREVIEW_TYPE.MIME_ICON) {
return OC.MimeType.getIconUrl(this.mimetype)
}
// whether to embed/render the file directly
if (this.previewType === PREVIEW_TYPE.DIRECT) {
// return direct image
if (userId === null) {
// guest mode, use public link download URL
return this.link + '/download/' + this.name
Expand All @@ -181,6 +209,7 @@ export default {
}
}

// use preview provider URL to render a smaller preview
const previewSize = Math.ceil(this.previewSize * window.devicePixelRatio)
if (userId === null) {
// guest mode: grab token from the link URL
Expand Down Expand Up @@ -337,6 +366,10 @@ export default {
max-height: 64px;
}

.mimeicon {
min-height: 128px;
}

strong {
/* As the file preview is an inline block the name is set as a block to
force it to be on its own line below the preview. */
Expand Down