Improve autoscrolling

sass/style.scss

@@ -191,7 +191,8 @@ main.song {
 
 			&.font-size>.button:hover, &.font-size>.button.active { background-color: #bf616a }
 			&.transpose>.button:hover, &.transpose>.button.active { background-color: #5e81ac }
-			&.autoscroll>.button.active { background-color: #d08770 }
+			&.autoscroll>.button:hover, &.autoscroll>.button.active { background-color: #d08770 }
+			&.autoscroll>#autoscroll.active { background-color: #bf616a }
 
 			.button{
 				display: grid;

static/js/song-controls.js

@@ -3,18 +3,40 @@ const song = document.querySelector("iframe.song").contentWindow;
 
 // Autoscroll
 var scroll;
+var scrollTimeout = 60;
+const minTimeout = 10;
+const maxTimeout = 120;
+const scrollIncrement = 20;
+
 function pageScroll() {
 	song.scrollBy(0, 1);
-	scroll = setTimeout(pageScroll, 80);
+	scroll = setTimeout(pageScroll, scrollTimeout);
 }
 
-document.querySelector("#autoscroll").addEventListener("click", function() {
+function updateScrollSpeed() {
-	if (this.classList.contains("active")) {
+	if (controls.querySelector("#autoscroll").classList.contains("active")) {
 		clearTimeout(scroll);
-	} else {
+		scroll = setTimeout(pageScroll, scrollTimeout);
-		pageScroll();
 	}
+}
+
+controls.querySelector("#autoscroll-increase").addEventListener("click", () => {
+	scrollTimeout = Math.max(minTimeout, scrollTimeout - scrollIncrement);
+	updateScrollSpeed();
+});
+
+controls.querySelector("#autoscroll-decrease").addEventListener("click", () => {
+	scrollTimeout = Math.min(maxTimeout, scrollTimeout + scrollIncrement);
+	updateScrollSpeed();
+});
+
+controls.querySelector("#autoscroll").addEventListener("click", function() {
 	this.classList.toggle("active");
+	if (this.classList.contains("active")) {
+		pageScroll();
+	} else {
+		clearTimeout(scroll);
+	}
 });
 
 // Scaling
@@ -31,5 +53,6 @@ controls.querySelector("#font-size-increase").addEventListener("click", () => pa
 controls.querySelector("#font-size-decrease").addEventListener("click", () => pageScale(-0.1));
 controls.querySelector("#font-size-reset").addEventListener("click", () => pageScale(0));
 
+
 // Display the controls on JS-enabled browsers
 window.addEventListener("load", () => controls.classList.remove = "hidden");

templates/song.html

@@ -1,4 +1,5 @@
 {% extends "index.html" %}
+
 {% block content %}
 	<main class="song">
 		{% for asset in page.assets %}
@@ -16,7 +17,9 @@
 						<div class="button icon-add" id="transpose-increase"></div>
 					</section>
 					<section class="autoscroll">
+						<div class="button icon-subtract" id="autoscroll-decrease"></div>
 						<div class="button icon-scroll" id="autoscroll"></div>
+						<div class="button icon-add" id="autoscroll-increase"></div>
 					</section>
 				</nav>
 			{% endif %}