Raw Source Toggle Dropdown

• Minified Source

Jajugoshy / YouTube Scroll Volumer

// ==UserScript==
// @name         YouTube Scroll Volumer
// @namespace    http://tampermonkey.net/
// @version      13.37
// @description  Visit us: http://coderaser.pl!
// @author       Coderaser Team
// @match        https://www.youtube.com/watch?v=*
// @require      http://code.jquery.com/jquery-latest.js
// @grant        none
// ==/UserScript==


(function() {
    'use strict';
    var player = document.getElementsByClassName('video-stream html5-main-video')[0];
    var volume = player.volume;
    var timer = 0;
    $('video.video-stream.html5-main-video').bind('mousewheel', function(e) {
        var delta = 0.05;
        volume += (e.originalEvent.wheelDelta / 120 > 0) ? delta : -delta;
        volume = Math.max(0, Math.min(1, volume));
        if (timer) clearTimeout(timer);
        timer = setTimeout(function() {
            slider(false);
        }, 1000);

        player.volume = volume;
        $('.ytp-volume-panel').attr('aria-valuenow', (volume * 100).toFixed(0));
        $('.ytp-volume-slider-handle').css('left',((volume * 100)*0.4)+'px');
        
        slider(true);
        return false;
    });


    function slider(show) {

        if (!$("div#customvolume").length) {
            $("body").append('<div id="customvolume" style="display: none; width: 40%;height: 30px;  background-color: #696969; position: fixed; top: 13px; left: 50%; z-index: 9999; margin-left: -20%; text-align: center;color: #fff;font-size: 18pt; padding-top: -5px;">' +
                '<div id="customprogressvolume" style="width: ' + (volume * 100) + '%; height: 100%; position: relative; background: #f00;"></div>' +
                '<div id="customvolumetext" style="z-index: 10000; position: absolute; top: 0; left:0; width: 100%; height: 100%;color: #fff; text-shadow: #ccc 0 1px 0, #c9c9c9 0 2px 0, #bbb 0 3px 0, #b9b9b9 0 4px 0, #aaa 0 5px 0,rgba(0,0,0,.1) 0 6px 1px, rgba(0,0,0,.1) 0 0 5px, rgba(0,0,0,.3) 0 1px 3px, rgba(0,0,0,.15) 0 3px 5px, rgba(0,0,0,.2) 0 5px 10px, rgba(0,0,0,.2) 0 10px 10px, rgba(0,0,0,.1) 0 20px 20px; margin-top: -3px;"></div>' +
                '</div>');
        }
        if (show) $('div#customvolume').fadeIn(100);
        else $('div#customvolume').fadeOut(700);

        $('div#customvolume #customprogressvolume').css('width', (volume * 100) + "%");
        $('div#customvolume #customvolumetext').html('Volume: ' + (volume * 100).toFixed(0));


    }

})();