+ keyboard navigation

webroot/js/player.js

@@ -180,6 +180,33 @@ window.addEventListener('DOMContentLoaded', (event) => {
 		localStorage.removeItem("audioStream");
 	}
 
+	function seekRelative(v) {
+		video.pause();
+		video.currentTime=video.currentTime+v;
+		if(audio) {
+			audio.pause();
+			audio.currentTime=video.currentTime;
+		}
+		playbackWait();
+	}
+
+	function handleKeyboard(e) {
+		if (e.key == "ArrowLeft") {
+			seekRelative(-5);
+			e.preventDefault();
+		} else if (e.key == "ArrowRight") {
+			seekRelative(5);
+			e.preventDefault();
+		} else if (e.key == " " || e.key == "k") {
+			toggleVideo();
+			e.preventDefault();
+		} else if (e.key == "j") {
+			seekRelative(-10);
+		} else if (e.key == "l") {
+			seekRelative(10);
+		}
+	}
+
 	function handleProtected(e) {
 		console.log(e)
 		if(e.originalTarget.error.code == 4 && ! e.originalTarget.currentSrc.startsWith("https://"+window.location.hostname)) {
@@ -218,6 +245,17 @@ window.addEventListener('DOMContentLoaded', (event) => {
 		}
 	}
 
+	function playbackWait() {
+		waiting = setInterval(()=> {
+			if (document.querySelector("video").readyState == 4) {
+				toggleVideo(true);
+				clearInterval(waiting)
+			} else {
+				console.log("waiting...")
+			}
+		},100);
+	}
+
 	//              document.querySelector('.ytp-button-play').addEventListener('click', () => toggleVideo());
 	document.querySelector('.ytp-settings-button').addEventListener('click', () => toggleSettings());
 	document.querySelector('#applyStreams').addEventListener('click', () => applyStreams());
@@ -257,17 +295,11 @@ window.addEventListener('DOMContentLoaded', (event) => {
 	document.querySelector('.ytp-button-fullscreen-enter').addEventListener('click', () => toggleFullscreen());
 	document.querySelector('video').addEventListener('error', (e) => handleProtected(e));
 	document.querySelector('audio').addEventListener('error', (e) => handleProtected(e));
+	document.querySelector('body').addEventListener('keydown', (e) => handleKeyboard(e));
 
 	if(localStorage.getItem("autoplay") == "true") {
 		toggleVideo(true);
 		document.querySelector('#autoplayInput').checked = true;
-		waiting = setInterval(()=> {
-			if(document.querySelector("video").readyState == 4) {
-				toggleVideo(true);
-				clearInterval(waiting)
-			} else {
-				console.log("waiting...")
-			}
-		},100);
+		playbackWait();
 	}
 });