Add keyboard shortcuts to mute, set playback rate to slowest speed, and set playback rate to fastest speed

thrimbletrimmer/edit.html

@@ -92,6 +92,7 @@
 				<ul>
 					<li>Number keys (0-9): Jump to that 10% interval of the video (0% - 90%)</li>
 					<li>K or Space: Toggle pause</li>
+					<li>M: Toggle mute</li>
 					<li>J: Back 10 seconds</li>
 					<li>L: Forward 10 seconds</li>
 					<li>Left arrow: Back 5 seconds</li>
@@ -102,6 +103,8 @@
 					<li>Period (.): Forward 1 frame</li>
 					<li>Equals (=): Increase playback speed one step</li>
 					<li>Hyphen (-): Decrease playback speed one step</li>
+					<li>Shift+=: Maximum playback speed</li>
+					<li>Shift+-: Minimum playback speed</li>
 					<li>Backspace: Reset playback speed to 1x</li>
 					<li>
 						Left bracket ([): Set start point for active range (indicated by arrow) to active video

thrimbletrimmer/index.html

@@ -104,6 +104,7 @@
 				<ul>
 					<li>Number keys (0-9): Jump to that 10% interval of the video (0% - 90%)</li>
 					<li>K or Space: Toggle pause</li>
+					<li>M: Toggle mute</li>
 					<li>J: Back 10 seconds</li>
 					<li>L: Forward 10 seconds</li>
 					<li>Left arrow: Back 5 seconds</li>
@@ -114,6 +115,8 @@
 					<li>Period (.): Forward 1 frame</li>
 					<li>Equals (=): Increase playback speed one step</li>
 					<li>Hyphen (-): Decrease playback speed one step</li>
+					<li>Shift+=: Maximum playback speed</li>
+					<li>Shift+-: Minimum playback speed</li>
 					<li>Backspace: Reset playback speed to 1x</li>
 				</ul>
 			</div>

thrimbletrimmer/scripts/keyboard-shortcuts.js

@@ -9,9 +9,7 @@ function moveSpeed(amount) {
 	if (currentIndex < 0 || currentIndex >= PLAYBACK_RATES.length) {
 		return; // We've reached/exceeded the edge
 	}
-	videoElement.playbackRate = PLAYBACK_RATES[currentIndex];
+	setSpeed(videoElement, PLAYBACK_RATES[currentIndex]);
-	const playbackSelector = document.getElementById("video-controls-playback-speed");
-	playbackSelector.value = videoElement.playbackRate;
 }
 
 function increaseSpeed() {
@@ -22,6 +20,12 @@ function decreaseSpeed() {
 	moveSpeed(-1);
 }
 
+function setSpeed(videoElement, speed) {
+	videoElement.playbackRate = speed;
+	const playbackSelector = document.getElementById("video-controls-playback-speed");
+	playbackSelector.value = speed;
+}
+
 document.addEventListener("keypress", (event) => {
 	if (event.target.nodeName === "INPUT" || event.target.nodeName === "TEXTAREA") {
 		return;
@@ -79,6 +83,9 @@ document.addEventListener("keypress", (event) => {
 		case "L":
 			videoElement.currentTime += 1;
 			break;
+		case "m":
+			videoElement.muted = !videoElement.muted;
+			break;
 		case ",":
 			videoElement.currentTime -= 1 / VIDEO_FRAMES_PER_SECOND;
 			break;
@@ -88,9 +95,15 @@ document.addEventListener("keypress", (event) => {
 		case "=":
 			increaseSpeed();
 			break;
+		case "+":
+			setSpeed(videoElement, PLAYBACK_RATES[PLAYBACK_RATES.length - 1]);
+			break;
 		case "-":
 			decreaseSpeed();
 			break;
+		case "_":
+			setSpeed(videoElement, PLAYBACK_RATES[0]);
+			break;
 		case "[":
 			if (typeof setCurrentRangeStartToVideoTime === "function") {
 				setCurrentRangeStartToVideoTime();