Minor fix for previews

client/components/LinkPreview.vue

@@ -1,6 +1,8 @@
 <template>
-	<div class="preview">
-		<div :class="['toggle-content', 'toggle-type-' + link.type, {show: link.shown}]">
+	<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"
@@ -12,7 +14,8 @@
 						:src="link.thumb"
 						decoding="async"
 						alt=""
-						class="thumb">
+						class="thumb"
+						@load="onPreviewReady">
 				</a>
 				<div class="toggle-text">
 					<div class="head">
@@ -53,13 +56,15 @@
 					<img
 						:src="link.thumb"
 						decoding="async"
-						alt="">
+						alt=""
+						@load="onPreviewReady">
 				</a>
 			</template>
 			<template v-else-if="link.type === 'video'">
 				<video
 					preload="metadata"
-					controls>
+					controls
+					@canplay="onPreviewReady">
 					<source
 						:src="link.media"
 						:type="link.mediaType">
@@ -68,7 +73,8 @@
 			<template v-else-if="link.type === 'audio'">
 				<audio
 					controls
-					preload="metadata">
+					preload="metadata"
+					@canplay="onPreviewReady">
 					<source
 						:src="link.media"
 						:type="link.mediaType">
@@ -117,5 +123,16 @@ export default {
 	props: {
 		link: Object,
 	},
+	mounted() {
+		if (this.link.shown) {
+			const options = require("../js/options");
+			this.$set(this.link, "canDisplay", options.shouldOpenMessagePreview(this.link.type));
+		}
+	},
+	methods: {
+		onPreviewReady() {
+
+		},
+	},
 };
 </script>

client/css/style.css

@@ -1382,12 +1382,13 @@ background on hover (unless active) */
 #chat .toggle-content {
 	background: #f6f6f6;
 	border-radius: 5px;
-	display: none;
 	max-width: 100%;
 	margin: 0;
 	margin-top: 6px;
 	overflow: hidden;
 	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+	display: inline-flex !important;
+	align-items: flex-start;
 }
 
 /* This applies to images of preview-type-image and thumbnails of preview-type-link */
@@ -1478,11 +1479,6 @@ background on hover (unless active) */
 	content: "\f0da"; /* https://fontawesome.com/icons/caret-right?style=solid */
 }
 
-#chat .toggle-content.show {
-	display: inline-flex !important;
-	align-items: flex-start;
-}
-
 #chat audio {
 	width: 600px;
 	max-width: 100%;