From 246d9aeed732fb876e6b008533557f381aed910d Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Mon, 30 Dec 2024 17:13:41 +0100
Subject: [PATCH] Improve autoscrolling

---
 sass/style.scss            |  3 ++-
 static/js/song-controls.js | 33 ++++++++++++++++++++++++++++-----
 templates/song.html        |  3 +++
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/sass/style.scss b/sass/style.scss
index 941c2be..e7bf6a0 100644
--- a/sass/style.scss
+++ b/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;
diff --git a/static/js/song-controls.js b/static/js/song-controls.js
index 3d89728..a06343f 100644
--- a/static/js/song-controls.js
+++ b/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() {
-	if (this.classList.contains("active")) {
+function updateScrollSpeed() {
+	if (controls.querySelector("#autoscroll").classList.contains("active")) {
 		clearTimeout(scroll);
-	} else {
-		pageScroll();
+		scroll = setTimeout(pageScroll, scrollTimeout);
 	}
+}
+
+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");
diff --git a/templates/song.html b/templates/song.html
index e286794..20ff8f1 100644
--- a/templates/song.html
+++ b/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 %}