hardlounge/client/components/LinkPreview.vue

167 lines
3.7 KiB
Vue
Raw Normal View History

2018-07-10 11:57:11 +00:00
<template>
2018-07-10 14:44:50 +00:00
<div
v-if="link.shown && link.canDisplay"
2018-07-12 08:26:12 +00:00
ref="container"
2018-07-10 14:44:50 +00:00
class="preview">
2018-07-12 08:26:12 +00:00
<div
ref="content"
:class="['toggle-content', 'toggle-type-' + link.type, { opened: isContentShown }]">
2018-07-10 11:57:11 +00:00
<template v-if="link.type === 'link'">
2018-07-10 12:04:25 +00:00
<a
v-if="link.thumb"
:href="link.link"
class="toggle-thumbnail"
target="_blank"
rel="noopener">
<img
:src="link.thumb"
decoding="async"
alt=""
2018-07-10 14:44:50 +00:00
class="thumb"
@load="onPreviewReady">
2018-07-10 11:57:11 +00:00
</a>
<div class="toggle-text">
<div class="head">
<div class="overflowable">
2018-07-10 12:04:25 +00:00
<a
:href="link.link"
:title="link.head"
target="_blank"
rel="noopener">{{ link.head }}</a>
2018-07-10 11:57:11 +00:00
</div>
2018-07-10 12:04:25 +00:00
<button
2018-07-12 08:26:12 +00:00
v-if="showMoreButton"
:aria-expanded="isContentShown"
:aria-label="moreButtonLabel"
2018-07-10 12:04:25 +00:00
class="more"
2018-07-12 08:26:12 +00:00
@click="onMoreClick"
><span class="more-caret"/></button>
2018-07-10 11:57:11 +00:00
</div>
<div class="body overflowable">
2018-07-10 12:04:25 +00:00
<a
:href="link.link"
:title="link.body"
target="_blank"
rel="noopener">{{ link.body }}</a>
2018-07-10 11:57:11 +00:00
</div>
</div>
</template>
<template v-else-if="link.type === 'image'">
2018-07-10 12:04:25 +00:00
<a
:href="link.link"
class="toggle-thumbnail"
target="_blank"
rel="noopener">
<img
:src="link.thumb"
decoding="async"
2018-07-10 14:44:50 +00:00
alt=""
@load="onPreviewReady">
2018-07-10 11:57:11 +00:00
</a>
</template>
<template v-else-if="link.type === 'video'">
2018-07-10 12:04:25 +00:00
<video
preload="metadata"
2018-07-10 14:44:50 +00:00
controls
@canplay="onPreviewReady">
2018-07-10 12:04:25 +00:00
<source
:src="link.media"
:type="link.mediaType">
2018-07-10 11:57:11 +00:00
</video>
</template>
<template v-else-if="link.type === 'audio'">
2018-07-10 12:04:25 +00:00
<audio
controls
2018-07-10 14:44:50 +00:00
preload="metadata"
@canplay="onPreviewReady">
2018-07-10 12:04:25 +00:00
<source
:src="link.media"
:type="link.mediaType">
2018-07-10 11:57:11 +00:00
</audio>
</template>
<template v-else-if="link.type === 'error'">
<em v-if="link.error === 'image-too-big'">
2018-07-10 12:04:25 +00:00
This image is larger than {{ link.maxSize | friendlysize }} and cannot be
2018-07-10 11:57:11 +00:00
previewed.
2018-07-10 12:04:25 +00:00
<a
:href="link.link"
target="_blank"
rel="noopener">Click here</a>
2018-07-10 11:57:11 +00:00
to open it in a new window.
</em>
<template v-else-if="link.error === 'message'">
<div>
<em>
A preview could not be loaded.
2018-07-10 12:04:25 +00:00
<a
:href="link.link"
target="_blank"
rel="noopener">Click here</a>
2018-07-10 11:57:11 +00:00
to open it in a new window.
</em>
<br>
2018-07-10 12:04:25 +00:00
<pre class="prefetch-error">{{ link.message }}</pre>
2018-07-10 11:57:11 +00:00
</div>
2018-07-10 12:04:25 +00:00
<button
2018-07-12 08:26:12 +00:00
:aria-expanded="isContentShown"
:aria-label="moreButtonLabel"
2018-07-10 12:04:25 +00:00
class="more"
2018-07-12 08:26:12 +00:00
@click="onMoreClick"
2018-07-10 11:57:11 +00:00
><span class="more-caret"/></button>
</template>
</template>
</div>
</div>
</template>
<script>
export default {
name: "LinkPreview",
props: {
link: Object,
},
2018-07-12 08:26:12 +00:00
data() {
return {
showMoreButton: false,
isContentShown: false,
};
},
computed: {
moreButtonLabel() {
return this.isContentShown ? "Less" : "More";
},
},
2018-07-10 14:44:50 +00:00
mounted() {
const options = require("../js/options");
this.$set(this.link, "canDisplay", this.link.type !== "loading" && options.shouldOpenMessagePreview(this.link.type));
2018-07-12 08:26:12 +00:00
// parent 1 - message - parent 2 - messagelist
this.$parent.$parent.$emit("keepScrollPosition");
2018-07-12 08:26:12 +00:00
if (this.link.type !== "link") {
return;
}
this.$nextTick(() => {
if (!this.$refs.content) {
return;
}
this.showMoreButton = this.$refs.content.offsetWidth >= this.$refs.container.offsetWidth;
});
2018-07-10 14:44:50 +00:00
},
methods: {
onPreviewReady() {
// TODO: Instead of forcing scroll position, wait for image to load before showing it
this.$parent.$parent.$emit("keepScrollPosition");
2018-07-10 14:44:50 +00:00
},
2018-07-12 08:26:12 +00:00
onMoreClick() {
this.isContentShown = !this.isContentShown;
},
2018-07-10 14:44:50 +00:00
},
2018-07-10 11:57:11 +00:00
};
</script>