137 lines
3.0 KiB
Vue
137 lines
3.0 KiB
Vue
<template>
|
|
<div
|
|
v-if="link.shown && link.canDisplay"
|
|
class="preview">
|
|
<div :class="['toggle-content', 'toggle-type-' + link.type]">
|
|
<template v-if="link.type === 'link'">
|
|
<a
|
|
v-if="link.thumb"
|
|
:href="link.link"
|
|
class="toggle-thumbnail"
|
|
target="_blank"
|
|
rel="noopener">
|
|
<img
|
|
:src="link.thumb"
|
|
decoding="async"
|
|
alt=""
|
|
class="thumb"
|
|
@load="onPreviewReady">
|
|
</a>
|
|
<div class="toggle-text">
|
|
<div class="head">
|
|
<div class="overflowable">
|
|
<a
|
|
:href="link.link"
|
|
:title="link.head"
|
|
target="_blank"
|
|
rel="noopener">{{ link.head }}</a>
|
|
</div>
|
|
|
|
<button
|
|
class="more"
|
|
aria-expanded="false"
|
|
aria-label="More"
|
|
data-closed-text="More"
|
|
data-opened-text="Less"
|
|
>
|
|
<span class="more-caret"/>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="body overflowable">
|
|
<a
|
|
:href="link.link"
|
|
:title="link.body"
|
|
target="_blank"
|
|
rel="noopener">{{ link.body }}</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-else-if="link.type === 'image'">
|
|
<a
|
|
:href="link.link"
|
|
class="toggle-thumbnail"
|
|
target="_blank"
|
|
rel="noopener">
|
|
<img
|
|
:src="link.thumb"
|
|
decoding="async"
|
|
alt=""
|
|
@load="onPreviewReady">
|
|
</a>
|
|
</template>
|
|
<template v-else-if="link.type === 'video'">
|
|
<video
|
|
preload="metadata"
|
|
controls
|
|
@canplay="onPreviewReady">
|
|
<source
|
|
:src="link.media"
|
|
:type="link.mediaType">
|
|
</video>
|
|
</template>
|
|
<template v-else-if="link.type === 'audio'">
|
|
<audio
|
|
controls
|
|
preload="metadata"
|
|
@canplay="onPreviewReady">
|
|
<source
|
|
:src="link.media"
|
|
:type="link.mediaType">
|
|
</audio>
|
|
</template>
|
|
<template v-else-if="link.type === 'error'">
|
|
<em v-if="link.error === 'image-too-big'">
|
|
This image is larger than {{ link.maxSize | friendlysize }} and cannot be
|
|
previewed.
|
|
<a
|
|
:href="link.link"
|
|
target="_blank"
|
|
rel="noopener">Click here</a>
|
|
to open it in a new window.
|
|
</em>
|
|
<template v-else-if="link.error === 'message'">
|
|
<div>
|
|
<em>
|
|
A preview could not be loaded.
|
|
<a
|
|
:href="link.link"
|
|
target="_blank"
|
|
rel="noopener">Click here</a>
|
|
to open it in a new window.
|
|
</em>
|
|
<br>
|
|
<pre class="prefetch-error">{{ link.message }}</pre>
|
|
</div>
|
|
|
|
<button
|
|
class="more"
|
|
aria-expanded="false"
|
|
aria-label="More"
|
|
data-closed-text="More"
|
|
data-opened-text="Less"
|
|
><span class="more-caret"/></button>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "LinkPreview",
|
|
props: {
|
|
link: Object,
|
|
},
|
|
mounted() {
|
|
const options = require("../js/options");
|
|
this.$set(this.link, "canDisplay", this.link.type !== "loading" && options.shouldOpenMessagePreview(this.link.type));
|
|
},
|
|
methods: {
|
|
onPreviewReady() {
|
|
|
|
},
|
|
},
|
|
};
|
|
</script>
|