☰

AddYouTubeShortcuts

Add YouTube keyboard shortcuts to any video

// ==UserScript==
// @name         AddYouTubeShortcuts
// @version      1.0.3
// @description  Add YouTube keyboard shortcuts to any video
// @author       evrest
// @namespace    https://github.com/evrestrgb
// @homepageURL  https://github.com/evrestrgb/Tape
// @supportURL   https://github.com/evrestrgb/Tape/issues
// @include      *
// @exclude      https://www.youtube.com/*
// remove the line above if you want to run the script on YouTube
// @grant        none
// @run-at       document-end
// @icon         https://www.google.com/s2/favicons?sz=128&domain=youtube.com
// @license
// ==/UserScript==

;(function () {
  'use strict'

  const notificationStack = document.createElement('div')
  notificationStack.style = `
        position: fixed;
        bottom: 0;
        right: 0;
        padding: 0.5rem;
    `
  document.body.appendChild(notificationStack)

  const notify = (message, timeout) => {
    const transitionDelay = 500
    const div = document.createElement('div')
    div.style = `
            background-color: #222;
            border: 2px solid #ddd;
            padding: 0.5rem;
            font-size: smaller;
            font-family: sans-serif;
            color: #ddd;
            margin: 0.5rem 0 0 auto;
            min-width: 7ch;
            width: fit-content;
            border-radius: 0.5rem;
            opacity: 1;
            transition: opacity ${transitionDelay}ms ease-in;
            text-align: center;
        `
    div.innerText = message
    notificationStack.appendChild(div)
    setTimeout(() => {
      div.style.opacity = '0'
      setTimeout(() => div.remove(), transitionDelay)
    }, timeout)
  }

  const closestSibling = (element, query) => {
    const parent = element.parentElement
    if (parent === null) return null
    const sibling = parent.querySelector(query)
    if (sibling !== null) return sibling
    return closestSibling(parent, query)
  }

  document.addEventListener('keydown', (e) => {
    const video = closestSibling(document.activeElement, 'video')
    if (video === null) return
    const notifySpeed = (speed) => notify(`${speed}x`, 1500)

    switch (e.key) {
      case '>': {
        const newRate = (video.playbackRate += 0.25)
        notifySpeed(newRate)
        break
      }
      case '<': {
        const newRate = (video.playbackRate -= 0.25)
        notifySpeed(newRate)
        break
      }
      default:
        break
    }
  })
})()