add hotkeys.js

2 files changed, 35 insertions, 1 deletions

diff --git a/youtube/static/js/hotkeys.js b/youtube/static/js/hotkeys.js
new file mode 100644
index 0000000..45e4333
--- /dev/null
+++ b/youtube/static/js/hotkeys.js
@@ -0,0 +1,32 @@
+Q = document.querySelector.bind(document);
+
+function onKeyDown(e) {
+    if (['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) return false;
+
+    console.log(e);
+    let v = Q("video");
+    let c = e.key.toLowerCase();
+    if (c == "k") {
+        v.paused ? v.play() : v.pause();
+    }
+    else if (c == "arrowleft") {
+        e.preventDefault();
+        v.currentTime = v.currentTime - 5;
+    }
+    else if (c == "arrowright") {
+        e.preventDefault();
+        v.currentTime = v.currentTime + 5;
+    }
+    else if (c == "j") {
+        e.preventDefault();
+        v.currentTime = v.currentTime - 10;
+    }
+    else if (c == "l") {
+        e.preventDefault();
+        v.currentTime = v.currentTime + 10;
+    }
+}
+
+window.addEventListener('load', function() {
+    document.addEventListener('keydown', onKeyDown);
+});
\ No newline at end of file
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 01ae8cb..f0dcb8d 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -553,7 +553,7 @@ Reload without invidious (for usage of new identity button).</a>
                           // where in relation to the edge of the viewport, we are observing
                           rootMargin: "100px",
 
-                          // how much of the element needs to have intersected 
+                          // how much of the element needs to have intersected
                           // in order to fire our loading function
                           threshold: 1.0
 
@@ -608,4 +608,6 @@ Reload without invidious (for usage of new identity button).</a>
             </details>
         {% endif %}
     {% endif %}
+
+    <script src="/youtube.com/static/js/hotkeys.js"></script>
 {% endblock main %}