add clickable progress bar

analyzer/index.html

@@ -63,6 +63,14 @@
 
 html {
 	background-color: #f6f6c6;
+	height: 100%;
+}
+
+body {
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 
 #progress-bar {

analyzer/index.js

@@ -154,6 +154,18 @@ document.addEventListener('DOMContentLoaded', () => {
 		moveProgress(-1);
 	});
 
+	document.addEventListener('keydown', function(event) {
+		if (event.isComposing || event.keyCode === 229) {
+			return;
+		}
+
+		if (event.key === 'ArrowLeft') {
+			moveProgress(-1);
+		} else if (event.key === 'ArrowRight') {
+			moveProgress(1);
+		}
+	});
+
 	document.getElementById('progressctl-auto').addEventListener('click', function() {
 		if (autoplay_timer == null) {
 			autoplay_timer = setInterval(() => {
@@ -169,6 +181,16 @@ document.addEventListener('DOMContentLoaded', () => {
 		}
 	});
 
+	document.getElementById('progress-bar').addEventListener('click', function(e) {
+		stopAutplay();
+		const bar = document.getElementById('progress-bar');
+		let p = (e.clientX - bar.getBoundingClientRect().x) / bar.clientWidth;
+		if (analyze_res != null && analyze_res.step != -1) {
+			current_progress = Math.round(analyze_res.step * p);
+			moveProgress(0);
+		}
+	});
+
 	document.getElementById('progressctl-reset').addEventListener('click', function() {
 		stopAutplay();
 		moveProgress(-current_progress);