Greasy Fork

Greasy Fork is available in English.

Youtube Volume Scroll with Volume Percentage Only

Control volume on YouTube, synchronize the volume slider, and display only the volume percentage inside the video player.

// ==UserScript==
// @name         Youtube Volume Scroll with Volume Percentage Only
// @namespace    https://example.com/
// @version      1.9
// @description  Control volume on YouTube, synchronize the volume slider, and display only the volume percentage inside the video player.
// @author       Shadynasty
// @match        https://www.youtube.com/*
// @match        https://music.youtube.com/*
// @match        https://www.youtube-nocookie.com/embed/*
// @grant        none
 // @license MIT
// ==/UserScript==

(function () {
    'use strict';

    // Block "Are you still there?" popup
    setInterval(() => (window._lact = Date.now()), 9e5);

    let observer, volumeDisplay;

    // Function to initialize everything
    function initialize() {
        console.log('Initializing script...');

        if (observer) observer.disconnect();

        observer = new MutationObserver(() => {
            const video = document.querySelector('video');
            if (video && !video.dataset.volumeScroll) {
                video.dataset.volumeScroll = "true"; // Mark video as handled
                attachVolumeControl(video);
                createVolumeDisplay(video);
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true,
        });

        const video = document.querySelector('video');
        if (video && !video.dataset.volumeScroll) {
            video.dataset.volumeScroll = "true";
            attachVolumeControl(video);
            createVolumeDisplay(video);
        }
    }

    // Create the volume display element inside the video
    function createVolumeDisplay(video) {
        if (volumeDisplay) return; // Avoid duplicating the display

        volumeDisplay = document.createElement('div');
        volumeDisplay.style.position = 'absolute';
        volumeDisplay.style.top = '10px';
        volumeDisplay.style.left = '50%';
        volumeDisplay.style.transform = 'translateX(-50%)';
        volumeDisplay.style.background = 'rgba(0, 0, 0, 0.7)';
        volumeDisplay.style.color = 'white';
        volumeDisplay.style.padding = '10px 20px';
        volumeDisplay.style.borderRadius = '5px';
        volumeDisplay.style.fontSize = '20px';
        volumeDisplay.style.fontFamily = 'Arial, sans-serif';
        volumeDisplay.style.zIndex = '9999';
        volumeDisplay.style.display = 'none';

        video.parentElement.style.position = 'relative'; // Ensure parent has position for absolute positioning
        video.parentElement.appendChild(volumeDisplay);
    }

    function showVolumeDisplay(volume) {
        if (!volumeDisplay) return;

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

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

    function attachVolumeControl(video) {
        video.addEventListener(
            'wheel',
            (event) => {
                if (event.ctrlKey || event.altKey) return;

                event.preventDefault();

                const player = document.querySelector('#movie_player') || document.querySelector('.html5-video-player');
                if (!player) return;

                let currentVolume = player.getVolume ? player.getVolume() : 100;

                const newVolume = Math.min(
                    100,
                    Math.max(0, currentVolume + (event.deltaY < 0 ? 5 : -5))
                );

                if (player.setVolume) {
                    player.setVolume(newVolume);
                }

                showVolumeDisplay(newVolume);

                console.log(`Volume set to: ${newVolume}%`);
            },
            { passive: false }
        );
        console.log('Volume scroll enabled for video element.');
    }

    // Reinitialize script on visibility change
    window.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'visible') {
            console.log('Tab reactivated, reinitializing script...');
            initialize();
        }
    });

    // Initialize on script load
    initialize();

    console.log('Youtube Volume Scroll with Volume Percentage Only script loaded!');
})();