From 8dff4a94780b49a6fd6149265f1c6492fd558b25 Mon Sep 17 00:00:00 2001
From: Richard Lewis <richrd.lewis@gmail.com>
Date: Fri, 31 Aug 2018 21:15:46 +0300
Subject: [PATCH] Only show more button on link previews when needed.

---
 client/components/App.vue         | 13 +++++++++++++
 client/components/LinkPreview.vue | 21 ++++++++++++++-------
 client/components/MessageList.vue |  7 ++++---
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/client/components/App.vue b/client/components/App.vue
index 2f4eed48..f0ed4d61 100644
--- a/client/components/App.vue
+++ b/client/components/App.vue
@@ -93,6 +93,8 @@
 </template>
 
 <script>
+import {throttle} from "lodash";
+
 import NetworkList from "./NetworkList.vue";
 import Chat from "./Chat.vue";
 
@@ -110,5 +112,16 @@ export default {
 	methods: {
 		isPublic: () => document.body.classList.contains("public"),
 	},
+	mounted() {
+		// Make a single throttled resize listener available to all components
+		this.debouncedResize = throttle(() => {
+			this.$root.$emit('resize');
+		}, 100);
+
+		window.addEventListener("resize", this.debouncedResize, {passive: true});
+	},
+	beforeDestroy() {
+		window.removeEventListener("resize", this.debouncedResize);
+	},
 };
 </script>
diff --git a/client/components/LinkPreview.vue b/client/components/LinkPreview.vue
index e4376588..7fbbb1d0 100644
--- a/client/components/LinkPreview.vue
+++ b/client/components/LinkPreview.vue
@@ -147,12 +147,16 @@ export default {
 			return;
 		}
 
+		this.resizeListener = () => {this.handleResize()};
+		this.$root.$on('resize', this.resizeListener);
+
 		this.onPreviewUpdate();
 	},
 	destroyed() {
 		// Let this preview go through load/canplay events again,
 		// Otherwise the browser can cause a resize on video elements
 		this.link.canDisplay = false;
+		this.$root.$off('resize', this.resizeListener);
 	},
 	methods: {
 		onPreviewUpdate() {
@@ -176,13 +180,7 @@ export default {
 				return;
 			}
 
-			this.$nextTick(() => {
-				if (!this.$refs.content) {
-					return;
-				}
-
-				this.showMoreButton = this.$refs.content.offsetWidth >= this.$refs.container.offsetWidth;
-			});
+			this.handleResize();
 		},
 		onThumbnailError() {
 			// If thumbnail fails to load, hide it and show the preview without it
@@ -193,6 +191,15 @@ export default {
 			this.isContentShown = !this.isContentShown;
 			this.keepScrollPosition();
 		},
+		handleResize() {
+			this.$nextTick(() => {
+				if (!this.$refs.content) {
+					return;
+				}
+
+				this.showMoreButton = this.$refs.content.offsetWidth >= this.$refs.container.offsetWidth;
+			});
+		},
 	},
 };
 </script>
diff --git a/client/components/MessageList.vue b/client/components/MessageList.vue
index d8577a77..d15c1b72 100644
--- a/client/components/MessageList.vue
+++ b/client/components/MessageList.vue
@@ -183,12 +183,13 @@ export default {
 		});
 	},
 	mounted() {
-		this.debouncedResize = throttle(this.handleResize, 100);
 		this.debouncedScroll = throttle(this.handleScroll, 100);
 
-		window.addEventListener("resize", this.debouncedResize, {passive: true});
 		this.$refs.chat.addEventListener("scroll", this.debouncedScroll, {passive: true});
 
+		this.resizeListener = () => {this.handleResize()}
+		this.$root.$on('resize', this.resizeListener);
+
 		this.$nextTick(() => {
 			if (this.historyObserver) {
 				this.historyObserver.observe(this.$refs.loadMoreButton);
@@ -196,7 +197,7 @@ export default {
 		});
 	},
 	beforeDestroy() {
-		window.removeEventListener("resize", this.debouncedResize);
+		this.$root.$off('resize', this.resizeListener);
 		this.$refs.chat.removeEventListener("scroll", this.debouncedScroll);
 	},
 	destroyed() {