Twitch: Twitch Volume Control

Changes the volume of the Twitch player with the mouse wheel and shows the percentage of volume on the screen when the cursor hovers over the video.
安装此脚本？
提问、发表评价或者举报此脚本。
换行
// ==UserScript==
// @name         Twitch: Twitch Volume Control
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Changes the volume of the Twitch player with the mouse wheel and shows the percentage of volume on the screen when the cursor hovers over the video.
// @author       FerNikoMF
// @match        https://www.twitch.tv/*
// @grant        none
// @license      MIT
// @icon         https://i.postimg.cc/4xH3j145/Mediamodifier-Design-Template.png
// ==/UserScript==

(function() {
    'use strict';

    // Function for creating and displaying an overlay with a volume percentage
    function showVolumeOverlay(video, volume) {
        let overlay = document.getElementById('volume-overlay');
        if (!overlay) {
            overlay = document.createElement('div');
            overlay.id = 'volume-overlay';
            // Styles for the overlay
            overlay.style.position = 'fixed';
            overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
            overlay.style.color = 'white';
            overlay.style.padding = '5px 10px';
            overlay.style.borderRadius = '5px';
            overlay.style.fontSize = '16px';
            overlay.style.zIndex = 9999;
            overlay.style.pointerEvents = 'none';
            document.body.appendChild(overlay);
        }
        // Updating the text with the current volume percentage
        overlay.textContent = Math.round(volume * 100) + '%';

        // Calculating the player's position to place the overlay in the center of the video
        const rect = video.getBoundingClientRect();
        overlay.style.left = (rect.left + rect.width / 2) + 'px';
        overlay.style.top = (rect.top + rect.height / 2) + 'px';
        overlay.style.transform = 'translate(-50%, -50%)';
        overlay.style.display = 'block';

        // If the hiding timer is already running, clear it
        if (overlay.hideTimeout) {
            clearTimeout(overlay.hideTimeout);
        }
        // Hiding the overlay after 1 second
        overlay.hideTimeout = setTimeout(() => {
            overlay.style.display = 'none';
        }, 1000);
    }

    // Function for setting a handler for the wheel event
    function addVolumeWheelControl(video) {
        if (!video) return;

        video.addEventListener('wheel', function(event) {
            // Getting the coordinates of the player
            const rect = video.getBoundingClientRect();

            // Check that the cursor is above the video
            if (
                event.clientX < rect.left ||
                event.clientX > rect.right ||
                event.clientY < rect.top ||
                event.clientY > rect.bottom
            ) {
                return;
            }

            // Canceling the standard behavior (for example, scrolling the page)
            event.preventDefault();

            const step = 0.05; // volume change step
            // If the wheel is scrolled down, turn down the volume, otherwise increase
            if (event.deltaY > 0) {
                video.volume = Math.max(video.volume - step, 0);
            } else {
                video.volume = Math.min(video.volume + step, 1);
            }
            // Display the current volume as a percentage
            showVolumeOverlay(video, video.volume);
        }, { passive: false });
    }

    // A function for searching for the <video> tag and installing a handler
    function init() {
        const video = document.querySelector('video');
        if (video) {
            addVolumeWheelControl(video);
        }
    }

    // Initialize immediately, and also monitor changes in the DOM (for example, when loading the player dynamically)
    init();

    // An observer for tracking the addition of new elements (for example, when changing the channel)
    const observer = new MutationObserver(() => {
        const video = document.querySelector('video');
        if (video) {
            addVolumeWheelControl(video);
        }
    });

    observer.observe(document.body, { childList: true, subtree: true });
})();
欢迎访问Greasy Fork镜像
