From 2886ad966b3cad42b304a870e27c600968fac77e Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Wed, 12 Jan 2022 05:15:32 +0000
Subject: [PATCH] Add hotkeys to slow and speed up video.

Closes #705
---
 src/components/Player.vue | 184 ++++++++++++++++++++------------------
 1 file changed, 97 insertions(+), 87 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index 5c9b4ce0..25de7160 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -81,93 +81,103 @@ export default {
             .then(hotkeys => {
                 this.hotkeys = hotkeys;
                 var self = this;
-                hotkeys("f,m,j,k,l,c,space,up,down,left,right,0,1,2,3,4,5,6,7,8,9", function(e, handler) {
-                    const videoEl = self.$refs.videoEl;
-                    switch (handler.key) {
-                        case "f":
-                            self.$ui.getControls().toggleFullScreen();
-                            e.preventDefault();
-                            break;
-                        case "m":
-                            videoEl.muted = !videoEl.muted;
-                            e.preventDefault();
-                            break;
-                        case "j":
-                            videoEl.currentTime = Math.max(videoEl.currentTime - 15, 0);
-                            e.preventDefault();
-                            break;
-                        case "l":
-                            videoEl.currentTime = videoEl.currentTime + 15;
-                            e.preventDefault();
-                            break;
-                        case "c":
-                            self.$player.setTextTrackVisibility(!self.$player.isTextTrackVisible());
-                            e.preventDefault();
-                            break;
-                        case "k":
-                        case "space":
-                            if (videoEl.paused) videoEl.play();
-                            else videoEl.pause();
-                            e.preventDefault();
-                            break;
-                        case "up":
-                            videoEl.volume = Math.min(videoEl.volume + 0.05, 1);
-                            e.preventDefault();
-                            break;
-                        case "down":
-                            videoEl.volume = Math.max(videoEl.volume - 0.05, 0);
-                            e.preventDefault();
-                            break;
-                        case "left":
-                            videoEl.currentTime = Math.max(videoEl.currentTime - 5, 0);
-                            e.preventDefault();
-                            break;
-                        case "right":
-                            videoEl.currentTime = videoEl.currentTime + 5;
-                            e.preventDefault();
-                            break;
-                        case "0":
-                            videoEl.currentTime = 0;
-                            e.preventDefault();
-                            break;
-                        case "1":
-                            videoEl.currentTime = videoEl.duration * 0.1;
-                            e.preventDefault();
-                            break;
-                        case "2":
-                            videoEl.currentTime = videoEl.duration * 0.2;
-                            e.preventDefault();
-                            break;
-                        case "3":
-                            videoEl.currentTime = videoEl.duration * 0.3;
-                            e.preventDefault();
-                            break;
-                        case "4":
-                            videoEl.currentTime = videoEl.duration * 0.4;
-                            e.preventDefault();
-                            break;
-                        case "5":
-                            videoEl.currentTime = videoEl.duration * 0.5;
-                            e.preventDefault();
-                            break;
-                        case "6":
-                            videoEl.currentTime = videoEl.duration * 0.6;
-                            e.preventDefault();
-                            break;
-                        case "7":
-                            videoEl.currentTime = videoEl.duration * 0.7;
-                            e.preventDefault();
-                            break;
-                        case "8":
-                            videoEl.currentTime = videoEl.duration * 0.8;
-                            e.preventDefault();
-                            break;
-                        case "9":
-                            videoEl.currentTime = videoEl.duration * 0.9;
-                            e.preventDefault();
-                            break;
-                    }
-                });
+                hotkeys(
+                    "f,m,j,k,l,c,space,up,down,left,right,0,1,2,3,4,5,6,7,8,9,shift+,,shift+.",
+                    function (e, handler) {
+                        const videoEl = self.$refs.videoEl;
+                        console.log(handler.key);
+                        switch (handler.key) {
+                            case "f":
+                                self.$ui.getControls().toggleFullScreen();
+                                e.preventDefault();
+                                break;
+                            case "m":
+                                videoEl.muted = !videoEl.muted;
+                                e.preventDefault();
+                                break;
+                            case "j":
+                                videoEl.currentTime = Math.max(videoEl.currentTime - 15, 0);
+                                e.preventDefault();
+                                break;
+                            case "l":
+                                videoEl.currentTime = videoEl.currentTime + 15;
+                                e.preventDefault();
+                                break;
+                            case "c":
+                                self.$player.setTextTrackVisibility(!self.$player.isTextTrackVisible());
+                                e.preventDefault();
+                                break;
+                            case "k":
+                            case "space":
+                                if (videoEl.paused) videoEl.play();
+                                else videoEl.pause();
+                                e.preventDefault();
+                                break;
+                            case "up":
+                                videoEl.volume = Math.min(videoEl.volume + 0.05, 1);
+                                e.preventDefault();
+                                break;
+                            case "down":
+                                videoEl.volume = Math.max(videoEl.volume - 0.05, 0);
+                                e.preventDefault();
+                                break;
+                            case "left":
+                                videoEl.currentTime = Math.max(videoEl.currentTime - 5, 0);
+                                e.preventDefault();
+                                break;
+                            case "right":
+                                videoEl.currentTime = videoEl.currentTime + 5;
+                                e.preventDefault();
+                                break;
+                            case "0":
+                                videoEl.currentTime = 0;
+                                e.preventDefault();
+                                break;
+                            case "1":
+                                videoEl.currentTime = videoEl.duration * 0.1;
+                                e.preventDefault();
+                                break;
+                            case "2":
+                                videoEl.currentTime = videoEl.duration * 0.2;
+                                e.preventDefault();
+                                break;
+                            case "3":
+                                videoEl.currentTime = videoEl.duration * 0.3;
+                                e.preventDefault();
+                                break;
+                            case "4":
+                                videoEl.currentTime = videoEl.duration * 0.4;
+                                e.preventDefault();
+                                break;
+                            case "5":
+                                videoEl.currentTime = videoEl.duration * 0.5;
+                                e.preventDefault();
+                                break;
+                            case "6":
+                                videoEl.currentTime = videoEl.duration * 0.6;
+                                e.preventDefault();
+                                break;
+                            case "7":
+                                videoEl.currentTime = videoEl.duration * 0.7;
+                                e.preventDefault();
+                                break;
+                            case "8":
+                                videoEl.currentTime = videoEl.duration * 0.8;
+                                e.preventDefault();
+                                break;
+                            case "9":
+                                videoEl.currentTime = videoEl.duration * 0.9;
+                                e.preventDefault();
+                                break;
+                            case "shift+,":
+                                self.$player.trickPlay(Math.max(videoEl.playbackRate - 0.25, 0.25));
+                                break;
+                            case "shift+.":
+                                self.$player.trickPlay(Math.min(videoEl.playbackRate + 0.25, 2));
+                                break;
+                        }
+                    },
+                );
             });
     },
     deactivated() {