supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Don't render preview until image is loaded

Browse Source
This commit is contained in:
Pavel Djundik 2018-07-12 17:38:35 +03:00 committed by Pavel Djundik
parent b982623aaa
commit dbe95fcc13
1 changed files with 35 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
client/components/LinkPreview.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div <div
v-if="link.shown && link.canDisplay" v-if="link.shown"
v-show="link.canDisplay"
ref="container" ref="container"
class="preview"> class="preview">
<div <div
@ -18,6 +19,8 @@
decoding="async" decoding="async"
alt="" alt=""
class="thumb" class="thumb"
@error="onThumbnailError"
@abort="onThumbnailError"
@load="onPreviewReady"> @load="onPreviewReady">
</a> </a>
<div class="toggle-text"> <div class="toggle-text">
@ -135,28 +138,45 @@ export default {
}, },
}, },
mounted() { mounted() {
const options = require("../js/options"); // Don't display previews while they are loading on the server
this.$set(this.link, "canDisplay", this.link.type !== "loading" && options.shouldOpenMessagePreview(this.link.type)); if (this.link.type === "loading") {
// parent 1 - message - parent 2 - messagelist
this.$parent.$parent.$emit("keepScrollPosition");
if (this.link.type !== "link") {
return; return;
} }
this.$nextTick(() => { // Error don't have any media to render
if (!this.$refs.content) { if (this.link.type === "error") {
return; this.onPreviewReady();
} }
this.showMoreButton = this.$refs.content.offsetWidth >= this.$refs.container.offsetWidth; // If link doesn't have a thumbnail, render it
}); if (this.link.type === "link" && !this.link.thumb) {
this.onPreviewReady();
}
}, },
methods: { methods: {
onPreviewReady() { onPreviewReady() {
// TODO: Instead of forcing scroll position, wait for image to load before showing it const options = require("../js/options");
this.$set(this.link, "canDisplay", this.link.type !== "loading" && options.shouldOpenMessagePreview(this.link.type));
// parent 1 - message - parent 2 - messagelist
this.$parent.$parent.$emit("keepScrollPosition"); this.$parent.$parent.$emit("keepScrollPosition");
if (this.link.type !== "link") {
return;
}
this.$nextTick(() => {
if (!this.$refs.content) {
return;
}
this.showMoreButton = this.$refs.content.offsetWidth >= this.$refs.container.offsetWidth;
});
},
onThumbnailError() {
// If thumbnail fails to load, hide it and show the preview without it
this.link.thumb = "";
this.onPreviewReady();
}, },
onMoreClick() { onMoreClick() {
this.isContentShown = !this.isContentShown; this.isContentShown = !this.isContentShown;