☰

Make YouTube arrow up/dn set volume in 1% incrementals

Does what @name says

// ==UserScript==
// @name        Make YouTube arrow up/dn set volume in 1% incrementals
// @namespace   Violentmonkey Scripts
// @match       https://www.youtube.com/*
// @grant       none
// @version     1.1
// @author      LuK1337
// @description Does what @name says
// @license     GPL-3.0-only
// ==/UserScript==

window.addEventListener('keydown', function(e) {
    if (e.target.id === 'movie_player') {
        // Set player volume
        const player = document.getElementById('movie_player')
        let player_volume = player.getVolume()

        if (e.keyCode === 38) {
            player_volume += 1
            e.preventDefault()
            e.stopPropagation()
        } else if (e.keyCode === 40) {
            player_volume -= 1
            e.preventDefault()
            e.stopPropagation()
        } else {
            return
        }

        player_volume = Math.min(Math.max(player_volume, 0), 100)
        player.setVolume(player_volume)

        // Save player volume
        let storedVolume = JSON.parse(localStorage['yt-player-volume'])
        let storedVolumeData = JSON.parse(storedVolume['data'])

        storedVolumeData.volume = player_volume
        storedVolume['data'] = JSON.stringify(storedVolumeData)
        localStorage['yt-player-volume'] = JSON.stringify(storedVolume)
        sessionStorage['yt-player-volume'] = JSON.stringify(storedVolume)

        // Display volume change on screen
        // Stolen from: https://greasyfork.org/en/scripts/479475-youtube-display-current-volume
        let volumeDisplay = document.querySelector('#ytp-video-volume')

        if (!volumeDisplay) {
            volumeDisplay = document.createElement('div')
            volumeDisplay.id = 'ytp-video-volume'
            volumeDisplay.style.position = 'absolute'
            volumeDisplay.style.top = '10%'
            volumeDisplay.style.left = '50%'
            volumeDisplay.style.translate = '-50%'
            volumeDisplay.style.textAlign = 'center'
            volumeDisplay.style.background = 'rgba(0,0,0,.5)'
            volumeDisplay.style.color = '#eee'
            volumeDisplay.style.fontSize = '175%'
            volumeDisplay.style.zIndex = '19'
            volumeDisplay.style.padding = '10px 20px'
            volumeDisplay.style.borderRadius = '3%'

            const playerContainer = document.querySelector('.html5-video-player')
            playerContainer.appendChild(volumeDisplay)
        }

        volumeDisplay.textContent = `${player_volume}%`
        volumeDisplay.style.display = 'block'

        clearTimeout(volumeDisplay.timeout)
        volumeDisplay.timeout = setTimeout(() => {
            volumeDisplay.style.display = 'none'
        }, 1000)
    }
}, true)