All4 Keyboard Shortcuts

all4_keyboard_shortcuts.user.js

// ==UserScript==
// @name        All4 Keyboard Shortcuts
// @description Player keyboard shortcuts for QoL improvements
// @namespace   https://matt.tf
// @author      Matt Hensman <[email protected]>
// @match       https://www.channel4.com/programmes/*
// @version     1.0
// @updateURL   https://gist.github.com/hensm/5e80dfd3176ff4d7b7a0b5ecdc7c6181/raw/all4_keyboard_shortcuts.user.js
// @downloadURL https://gist.github.com/hensm/5e80dfd3176ff4d7b7a0b5ecdc7c6181/raw/all4_keyboard_shortcuts.user.js
// @grant       none
// ==/UserScript==

const SEEK_CHANGE = 5;
const FRAME_SEEK_CHANGE = 0.04
const VOLUME_CHANGE = 0.1;

function canSeek(videoElement, change) {
  const newTime = videoElement.currentTime + change;
  if (videoElement.duration < Infinity
      && (newTime > 0 && newTime < videoElement.duration)) {
    return true;
  }
}


window.addEventListener("keydown", ev => {
  let playerElement;
  if (!(playerElement = document.activeElement.closest("#html5-player"))) {
    return;
  }
  
  const videoElement = playerElement.querySelector("video");
  if (!videoElement) {
    return;
  }
  
  switch (ev.key) {
    // Play/pause
    case " ":
      if (videoElement.paused) {
        videoElement.play();
      } else {
        videoElement.pause();
      }
     
      ev.preventDefault();

      break;

    // Arrow key seek
    case "ArrowLeft":
      if (canSeek(videoElement, -SEEK_CHANGE)) {
        videoElement.fastSeek(videoElement.currentTime - SEEK_CHANGE)
      }
      break;
    case "ArrowRight":
      if (canSeek(videoElement, SEEK_CHANGE)) {
        videoElement.fastSeek(videoElement.currentTime + SEEK_CHANGE)
      }
      break;

    // Frame-by-frame seek
    case ",":
      if (canSeek(videoElement, -FRAME_SEEK_CHANGE)) {
        videoElement.currentTime -= FRAME_SEEK_CHANGE;
      }
      break;
    case ".":
      if (canSeek(videoElement, FRAME_SEEK_CHANGE)) {
        videoElement.currentTime += FRAME_SEEK_CHANGE;
      }
      break;

    // Volume control
    case "ArrowUp":
      videoElement.volume += VOLUME_CHANGE;
      break;
    case "ArrowDown":
      videoElement.volume -= VOLUME_CHANGE;
      break;
    case "m":
      videoElement.muted = !videoElement.muted;
      break;

    // Fullscreen
    case "f":
      const wrapper = document.getElementById("html5-player-parent");
      if (!wrapper) break;

      if (!document.fullscreenElement) {
        wrapper.requestFullscreen();
      } else if (document.fullscreenElement === wrapper) {
        document.exitFullscreen();
      }
      
      break;
  }
})