From c7d16103d778d34fed0bf9dc4f0ae44a14eea1c0 Mon Sep 17 00:00:00 2001
From: saber-nyan <saber-nyan@ya.ru>
Date: Sat, 18 May 2019 11:24:27 +0300
Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=BF=D1=80=D0=BE=D0=BA=D1=80=D1=83=D1=82=D0=BA=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sidebar.vue | 24 ++++++++++++++++++++++--
 src/components/Stream.vue  |  2 +-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 0efceed..341b758 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -39,6 +39,11 @@ export default {
 						name: 'home',
 						params: {servicePort: this.$props.servicePort, streamId: newId,},
 					});
+					document.getElementById(`stream-${newId}`).scrollIntoView({
+						behavior: 'smooth',
+						block: 'center',
+						inline: 'center',
+					});
 				} else if (e.key === 'ArrowDown') {
 					e.preventDefault();
 					const index = this.$data.streams.findIndex(e => e.id === this.$props.streamId);
@@ -49,6 +54,11 @@ export default {
 						name: 'home',
 						params: {servicePort: this.$props.servicePort, streamId: newId,},
 					});
+					document.getElementById(`stream-${newId}`).scrollIntoView({
+						behavior: 'smooth',
+						block: 'center',
+						inline: 'center',
+					});
 				} else if (e.key === 'Home') {
 					const newStream = this.$data.streams[0];
 					if (!newStream) return;
@@ -57,6 +67,11 @@ export default {
 						name: 'home',
 						params: {servicePort: this.$props.servicePort, streamId: newId,},
 					});
+					document.getElementById(`stream-${newId}`).scrollIntoView({
+						behavior: 'smooth',
+						block: 'center',
+						inline: 'center',
+					});
 				} else if (e.key === 'End') {
 					const newStream = this.$data.streams[this.$data.streams.length - 1];
 					if (!newStream) return;
@@ -65,6 +80,11 @@ export default {
 						name: 'home',
 						params: {servicePort: this.$props.servicePort, streamId: newId,},
 					});
+					document.getElementById(`stream-${newId}`).scrollIntoView({
+						behavior: 'smooth',
+						block: 'center',
+						inline: 'center',
+					});
 				}
 			},
 		}
@@ -127,10 +147,10 @@ export default {
 	},
 	components: {Stream, InfiniteLoading,},
 	mounted() {
-		document.addEventListener('keyup', this.$data.navigationKeysCallback);
+		document.addEventListener('keydown', this.$data.navigationKeysCallback);
 	},
 	beforeDestroy() {
-		document.removeEventListener('keyup', this.$data.navigationKeysCallback);
+		document.removeEventListener('keydown', this.$data.navigationKeysCallback);
 	},
 }
 </script>
diff --git a/src/components/Stream.vue b/src/components/Stream.vue
index d7fd014..060a888 100644
--- a/src/components/Stream.vue
+++ b/src/components/Stream.vue
@@ -1,5 +1,5 @@
 <template>
-	<li class="nav-item">
+	<li :id="`stream-${id}`" class="nav-item">
 		<router-link class="nav-link" active-class="active" :to="{ name: 'home', params: { servicePort: servicePort, streamId: id}, query: $route.query }">
 			#{{id}} {{proto}}<br/>
 			{{new Date(startTime).toLocaleDateString('ru-RU', {month: '2-digit', day: '2-digit', hour:'2-digit', minute: '2-digit', second: '2-digit'})}}