☰

YouTube - Display current volume

Displays the volume when it's changing.

目前為 2023-11-10 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name               YouTube - Display current volume
  3. // @namespace          https://gist.github.com/4lrick/7a069ce704be9ac95f00d8fb9c2c9bb2
  4. // @version            1.1
  5. // @description        Displays the volume when it's changing.
  6. // @description:fr     Affiche le volume lorsqu'il change.
  7. // @description:es     Muestra el volumen cuando está cambiando.
  8. // @description:de     Geeft het volume weer als het verandert.
  9. // @description:it     Visualizza il volume quando sta cambiando.
  10. // @description:zh-CN  显示变化时的音量。
  11. // @author             4lrick
  12. // @match              https://www.youtube.com/*
  13. // @icon               https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  14. // @grant              none
  15. // @license            GPL-3.0-only
  16. // ==/UserScript==
  17.  
  18. (function() {
  19.     'use strict';
  20.  
  21.     let previousVolume = -1;
  22.  
  23.     function displaySquareVolume() {
  24.         const player = document.getElementById('movie_player');
  25.         const currentVolume = player.getVolume();
  26.  
  27.         if (currentVolume !== previousVolume) {
  28.             previousVolume = currentVolume;
  29.             const squareVolume = document.querySelectorAll('div[data-layer="4"]');
  30.             squareVolume.forEach((div) => {
  31.                 if(div.className === 'ytp-bezel-text-hide') {
  32.                     div.classList.remove('ytp-bezel-text-hide');
  33.                 }
  34.                 if (div.classList.length === 0) {
  35.                     const ytpBezelTextWrapper = div.querySelector('.ytp-bezel-text-wrapper');
  36.                     const ytpBezelText = ytpBezelTextWrapper.querySelector('.ytp-bezel-text');
  37.                     const ytpBezel = div.querySelector('.ytp-bezel');
  38.                     div.style.display = 'block';
  39.  
  40.                     if (ytpBezelText && ytpBezel) {
  41.                         ytpBezelText.innerText = currentVolume + "%";
  42.                         ytpBezel.style.display = 'none';
  43.                     }
  44.  
  45.                     setTimeout(()=> {
  46.                         div.style.display = 'none';
  47.                     }, 500);
  48.                 }
  49.             });
  50.         }
  51.     }
  52.  
  53.     function checkVideoExists() {
  54.         const videoElement = document.querySelector('video');
  55.         if (videoElement) {
  56.             videoElement.addEventListener('volumechange', displaySquareVolume);
  57.             previousVolume = videoElement.volume * 100;
  58.         }
  59.     }
  60.  
  61.     const observer = new MutationObserver(checkVideoExists);
  62.     const body = document.body;
  63.     const config = { childList: true, subtree: true };
  64.     observer.observe(body, config);
  65. })();