Merge pull request #3798 from thelounge/richrd/image-viewer-navigation

Implement navigation in image viewer

client/components/ImageViewer.vue

@@ -9,6 +9,20 @@
 	>
 		<template v-if="link !== null">
 			<button class="close-btn" aria-label="Close"></button>
+
+			<button
+				v-if="previousImage"
+				class="previous-image-btn"
+				aria-label="Previous image"
+				@click.stop="previous"
+			></button>
+			<button
+				v-if="nextImage"
+				class="next-image-btn"
+				aria-label="Next image"
+				@click.stop="next"
+			></button>
+
 			<a class="open-btn" :href="link.link" target="_blank" rel="noopener"></a>
 
 			<img
@@ -25,11 +39,17 @@
 </template>
 
 <script>
+import Mousetrap from "mousetrap";
+
 export default {
 	name: "ImageViewer",
 	data() {
 		return {
 			link: null,
+			previousImage: null,
+			nextImage: null,
+			channel: null,
+
 			position: {
 				x: 0,
 				y: 0,
@@ -56,30 +76,62 @@ export default {
 		},
 	},
 	watch: {
-		link() {
+		link(newLink, oldLink) {
 			// TODO: history.pushState
-			if (this.link === null) {
+			if (newLink === null) {
+				this.$root.$off("escapekey", this.closeViewer);
+				this.$root.$off("resize", this.correctPosition);
+				Mousetrap.unbind("left", this.previous);
+				Mousetrap.unbind("right", this.next);
 				return;
 			}
 
-			this.$root.$on("resize", this.correctPosition);
+			this.setPrevNextImages();
+
+			if (!oldLink) {
+				this.$root.$on("escapekey", this.closeViewer);
+				this.$root.$on("resize", this.correctPosition);
+				Mousetrap.bind("left", this.previous);
+				Mousetrap.bind("right", this.next);
+			}
 		},
 	},
-	mounted() {
-		this.$root.$on("escapekey", this.closeViewer);
-	},
-	destroyed() {
-		this.$root.$off("escapekey", this.closeViewer);
-	},
 	methods: {
 		closeViewer() {
 			if (this.link === null) {
 				return;
 			}
 
-			this.$root.$off("resize", this.correctPosition);
+			this.channel = null;
+			this.previousImage = null;
+			this.nextImage = null;
 			this.link = null;
 		},
+		setPrevNextImages() {
+			if (!this.channel) {
+				return null;
+			}
+
+			const links = this.channel.messages
+				.map((msg) => msg.previews)
+				.flat()
+				.filter((preview) => preview.thumb);
+
+			const currentIndex = links.indexOf(this.link);
+
+			this.previousImage = links[currentIndex - 1] || null;
+			this.nextImage = links[currentIndex + 1] || null;
+		},
+		previous() {
+			if (this.previousImage) {
+				this.link = this.previousImage;
+			}
+		},
+		next() {
+			if (this.nextImage) {
+				this.link = this.nextImage;
+			}
+		},
 		onImageLoad() {
 			this.prepareImage();
 		},

client/components/LinkPreview.vue

@@ -137,6 +137,7 @@ export default {
 	props: {
 		link: Object,
 		keepScrollPosition: Function,
+		channel: Object,
 	},
 	data() {
 		return {
@@ -214,6 +215,7 @@ export default {
 			e.preventDefault();
 
 			const imageViewer = this.$root.$refs.app.$refs.imageViewer;
+			imageViewer.channel = this.channel;
 			imageViewer.link = this.link;
 		},
 		onMoreClick() {

client/components/Message.vue

@@ -32,6 +32,7 @@
 					:key="preview.link"
 					:keep-scroll-position="keepScrollPosition"
 					:link="preview"
+					:channel="channel"
 				/>
 			</span>
 		</template>
@@ -70,6 +71,7 @@
 					:key="preview.link"
 					:keep-scroll-position="keepScrollPosition"
 					:link="preview"
+					:channel="channel"
 				/>
 			</span>
 		</template>