Enhanced Invidious Player

Adds hotkeys and more to invidious player.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name Enhanced Invidious Player
// @version 1.4.0
// @author NotYou
// @description Adds hotkeys and more to invidious player.
// @icon data:image/png;base64,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
// @namespace -
// @match *://inv.nadeko.net/watch*
// @match *://yewtu.be/watch*
// @match *://invidious.nerdvpn.de/watch*
// @match *://invidious.f5.si/watch*
// @match *://inv.nadekonw7plitnjuawu6ytjsl7jlglk2t6pyq6eftptmiv3dvqndwvyd.onion/watch*
// @match *://nadekoohummkxncchcsylr3eku36ze4waq4kdrhcqupckc3pe5qq.b32.i2p/watch*
// @license GPL-3.0-or-later
// @run-at document-end
// @grant none
// ==/UserScript==

!function() {
    class Keybinds {
        constructor(element) {
            this.element = element
            this.keybinds = []

            this.element.addEventListener('keydown', ev => {
                this.keybinds.forEach(keybind => {
                    const confimationCallback = keybind[0]
                    const keybindCallback = keybind[1]

                    if (confimationCallback(ev)) {
                        keybindCallback(element, ev)
                    }
                })
            })
        }

        bind(confimationCallback, keybindCallback) {
            this.keybinds.push([confimationCallback, keybindCallback])

            return this
        }
    }

    class Constants {
        static VOLUME_STEP = 0.021
        static SKIP_STEP = 15
    }

    class Main {
        static setupKeybinds($video, $contents) {
            const keybinds = new Keybinds($video)
            .bind(ev => ev.code === 'KeyR', video => {
                video.loop = video.loop ? false : true
            })
            .bind(ev => ev.code === 'KeyT', video => {
                $contents.style.width = $contents.style.width === '' ? '100%' : ''
            })
            .bind(ev => ev.code === 'KeyC', (video, ev) => {
                let data = ''

                if (ev.ctrlKey) {
                    data = video.currentSrc
                } else {
                    data = JSON.parse(document.querySelector('#player_data').textContent).title
                }

                navigator.clipboard.writeText(data)
            })
            .bind(ev => ev.code === 'ArrowRight', (video, ev) => {
                if (ev.ctrlKey) {
                    if (video.currentTime + Constants.SKIP_STEP < video.duration) {
                        video.currentTime += Constants.SKIP_STEP
                    } else {
                        video.currentTime = video.duration
                    }
                }
            })
            .bind(ev => ev.code === 'ArrowLeft', (video, ev) => {
                if (ev.ctrlKey) {
                    if (video.currentTime - Constants.SKIP_STEP > 0) {
                        video.currentTime -= Constants.SKIP_STEP
                    } else {
                        video.currentTime = 0
                    }
                }
            })
            .bind(ev => ev.code === 'Numpad0' || ev.code === 'Numpad1', video => {
                video.playbackRate = 1
            })
            .bind(ev => ev.code === 'Numpad2', video => {
                video.playbackRate = 2
            })
            .bind(ev => ev.code === 'Numpad3', video => {
                video.playbackRate = 2.5
            })
            .bind(ev => ev.code === 'Numpad4', video => {
                video.playbackRate = 3
            })

            const scriptsDisabled = Boolean(document.querySelector('#player'))

            if (scriptsDisabled) {
                const $player = document.querySelector('#player')

                keybinds.bind(ev => ev.code === 'KeyM', video => {
                    video.muted = video.muted ? true : false
                }).bind(ev => ev.code === 'KeyF', () => {
                    if ($player.requestFullscreen) {
                        $player.requestFullscreen()
                    } else if ($player.webkitRequestFullscreen) {
                        $player.webkitRequestFullscreen()
                    } else if ($player.msRequestFullscreen) {
                        $player.msRequestFullscreen()
                    }
                })
            }
        }

        static setupMouseControls($video) {
            const isFullscreenEnabled = () => document.fullscreenElement !== null

            $video.addEventListener('mouseenter', () => {
                if (isFullscreenEnabled()) {
                    return
                }

                $video.focus()
                document.documentElement.style.overflow = 'hidden'
            })

            $video.addEventListener('mouseleave', () => {
                if (isFullscreenEnabled()) {
                    return
                }

                document.documentElement.style.overflow = ''
            })

            $video.addEventListener('blur', () => {
                document.documentElement.style.overflow = ''
            })

            $video.addEventListener('wheel', ev => {
                const wentDown = ev.deltaY >= 0

                if (wentDown) {
                    if ($video.volume - Constants.VOLUME_STEP <= 0) {
                        $video.volume = 0
                    } else {
                        $video.volume -= Constants.VOLUME_STEP
                    }
                } else {
                    if ($video.muted) {
                        $video.muted = false
                    }

                    if ($video.volume + Constants.VOLUME_STEP >= 1) {
                        $video.volume = 1
                    } else {
                        $video.volume += Constants.VOLUME_STEP
                    }
                }
            })
        }

        static init() {
            const $video = document.querySelector('video')
            const $contents = $video.parentNode.parentNode.parentNode

            this.setupKeybinds($video, $contents)
            this.setupMouseControls($video)
        }
    }

    Main.init()
}()