Add 4x and 8x playback speeds (#362)

* Add 4x and 8x playback speeds

* Make the "max speed" keyboard shortcut go to 2x first and then to the actual max speed

thrimbletrimmer/edit.html

@@ -38,7 +38,7 @@
 					<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+=: 2x or maximum playback speed</li>
 					<li>Shift+-: Minimum playback speed</li>
 					<li>Backspace: Reset playback speed to 1x</li>
 					<li>

thrimbletrimmer/index.html

@@ -32,7 +32,7 @@
 					<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+=: 2x or maximum playback speed</li>
 					<li>Shift+-: Minimum playback speed</li>
 					<li>Backspace: Reset playback speed to 1x</li>
 				</ul>

thrimbletrimmer/scripts/common.js

@@ -18,7 +18,7 @@ Hls.DefaultConfig.maxBufferHole = 600;
 
 const VIDEO_FRAMES_PER_SECOND = 30;
 
-const PLAYBACK_RATES = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+const PLAYBACK_RATES = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 4, 8];
 
 function commonPageSetup() {
 	if (!Hls.isSupported()) {

thrimbletrimmer/scripts/keyboard-shortcuts.js

@@ -100,7 +100,12 @@ document.addEventListener("keypress", (event) => {
 			increaseSpeed();
 			break;
 		case "+":
+			const playbackRate = videoElement.playbackRate;
+			if (playbackRate < 2) {
+				setSpeed(videoElement, 2);
+			} else {
 				setSpeed(videoElement, PLAYBACK_RATES[PLAYBACK_RATES.length - 1]);
+			}
 			break;
 		case "-":
 			decreaseSpeed();