☰

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

Does what @name says

  1. // ==UserScript==
  2. // @name        Make YouTube arrow up/dn set volume in 1% incrementals
  3. // @namespace   Violentmonkey Scripts
  4. // @match       https://www.youtube.com/*
  5. // @grant       none
  6. // @version     1.1
  7. // @author      LuK1337
  8. // @description Does what @name says
  9. // @license     GPL-3.0-only
  10. // ==/UserScript==
  11.  
  12. window.addEventListener('keydown', function(e) {
  13.     if (e.target.id === 'movie_player') {
  14.         // Set player volume
  15.         const player = document.getElementById('movie_player')
  16.         let player_volume = player.getVolume()
  17.  
  18.         if (e.keyCode === 38) {
  19.             player_volume += 1
  20.             e.preventDefault()
  21.             e.stopPropagation()
  22.         } else if (e.keyCode === 40) {
  23.             player_volume -= 1
  24.             e.preventDefault()
  25.             e.stopPropagation()
  26.         } else {
  27.             return
  28.         }
  29.  
  30.         player_volume = Math.min(Math.max(player_volume, 0), 100)
  31.         player.setVolume(player_volume)
  32.  
  33.         // Save player volume
  34.         let storedVolume = JSON.parse(localStorage['yt-player-volume'])
  35.         let storedVolumeData = JSON.parse(storedVolume['data'])
  36.  
  37.         storedVolumeData.volume = player_volume
  38.         storedVolume['data'] = JSON.stringify(storedVolumeData)
  39.         localStorage['yt-player-volume'] = JSON.stringify(storedVolume)
  40.         sessionStorage['yt-player-volume'] = JSON.stringify(storedVolume)
  41.  
  42.         // Display volume change on screen
  43.         // Stolen from: https://greasyfork.org/en/scripts/479475-youtube-display-current-volume
  44.         let volumeDisplay = document.querySelector('#ytp-video-volume')
  45.  
  46.         if (!volumeDisplay) {
  47.             volumeDisplay = document.createElement('div')
  48.             volumeDisplay.id = 'ytp-video-volume'
  49.             volumeDisplay.style.position = 'absolute'
  50.             volumeDisplay.style.top = '10%'
  51.             volumeDisplay.style.left = '50%'
  52.             volumeDisplay.style.translate = '-50%'
  53.             volumeDisplay.style.textAlign = 'center'
  54.             volumeDisplay.style.background = 'rgba(0,0,0,.5)'
  55.             volumeDisplay.style.color = '#eee'
  56.             volumeDisplay.style.fontSize = '175%'
  57.             volumeDisplay.style.zIndex = '19'
  58.             volumeDisplay.style.padding = '10px 20px'
  59.             volumeDisplay.style.borderRadius = '3%'
  60.  
  61.             const playerContainer = document.querySelector('.html5-video-player')
  62.             playerContainer.appendChild(volumeDisplay)
  63.         }
  64.  
  65.         volumeDisplay.textContent = `${player_volume}%`
  66.         volumeDisplay.style.display = 'block'
  67.  
  68.         clearTimeout(volumeDisplay.timeout)
  69.         volumeDisplay.timeout = setTimeout(() => {
  70.             volumeDisplay.style.display = 'none'
  71.         }, 1000)
  72.     }
  73. }, true)