☰

Youtube Video Controls Manager

Manages the video controls overlay on a youtube video, to prevent it blocking 30-40 pixels on the bottom of the video

От 03.04.2015. Виж последната версия.

// ==UserScript==
// @name         Youtube Video Controls Manager
// @version      0.06
// @description  Manages the video controls overlay on a youtube video, to prevent it blocking 30-40 pixels on the bottom of the video
// @include      http*://www.youtube.com/watch?v=*
// @author       D.Slee

// @namespace http://your.homepage/
// ==/UserScript==
//Known bugs
//- Having inspect element open sometimes breaks cursor functions

//Fading Parameters
var cinMode = 0;
var inPar = ["default", "8px", "block"];                                                                //Fading parameters (cursor, height, display)
var outPar = ["default", "3px", "none"];
var timeoutPar = ["none", "3px", "none"];

//Objects
var movie_player = document.getElementById("movie_player");                                             //Entire player
var playerAPI = document.getElementById("player-api");                                                  //Entire player Wrapper
var vidContWrap = document.getElementsByClassName("html5-video-controls")[0];                           //All the video controls
var vidCont = document.getElementsByClassName("html5-player-chrome")[0];                                //All the video controls (not including progress bar)
var progBar = document.getElementsByClassName("ytp-progress-bar-container")[0];                         //Progress Bar
var scrubBn = document.getElementsByClassName("html5-scrubber-button")[0];                              //Circle Button (on progress bar)
var vidHeader = document.getElementsByClassName("html5-info-bar ytp-can-share ytp-can-sentiment")[0];   //Video header, synchronises fullscreen
var cinBn = document.getElementsByClassName('ytp-button')[5];                                           //Cinema view button (in default)
var elements = [scrubBn, vidCont, vidHeader];

//Feel free to edit these parameters (experimental)
var progBarHide = false;
var timeout = 1000;

//Check if it started in cinema mode
if (cinBn){                                                                                             //If it starts in cinema mode
    cinMode = 1;
}
SetCinMode();

//Make it always visible to override script
vidContWrap.style.setProperty("opacity", 1, "important");                                              //Disables youtube's opacity fade script on the progress bar
movie_player.style.setProperty("cursor", "default", "important");                                      //Fixes youtube script that makes the cursor property none when idle

if (progBarHide === true){
    elements.push(vidContWrap);                                                                        //Adds vidContWrap to the elements with their display value being toggled
}

var fadeOutInterval = setTimeout(Fade, timeout, timeoutPar);                                           //Interval used to fade out when inactive

//Handles mouse events and fades
MainProgram();
function MainProgram(){
    ResizeWindow(window.innerWidth);
    playerAPI.addEventListener("mousemove", HandleMouseMove);                                          //The event listener needs to be on playerAPI otherwise it would not trigger when the cursor is hidden (on it's child, movie_player)
    playerAPI.addEventListener("mouseout", HandleMouseOut);
}

function HandleMouseMove(){
    Fade(inPar);
    fadeOutInterval = setTimeout(Fade, timeout, timeoutPar);
}

function HandleMouseOut(){
    Fade(outPar);
}

function HandleMouseDown(){
    cinMode = (cinMode + 1) % 2;
    ResizeWindow(window.innerWidth);
    SetCinMode();
}

function SetCinMode(){
    cinBn.removeEventListener("mousedown");
    cinBn = document.getElementsByClassName('ytp-button')[5];  
    cinBn.addEventListener("mousedown", HandleMouseDown);
}

function Fade(parameters){
    clearTimeout(fadeOutInterval);
    movie_player.style.setProperty("cursor", parameters[0], "important");
    progBar.style.setProperty("height", parameters[1], "important");
    for (var i = 0; i<elements.length; i++){
        elements[i].style.display = parameters[2];
    }
}

//Window Resize handle
window.onresize = function(){
    var windowX = window.innerWidth;
    ResizeWindow(windowX);
};

function ResizeWindow(windowX){ 
    var windowSizes = [['427px', '240px'], ['640px', '360px'], ['854px', '480px']];
    var limits = [639, 1294];
    if (cinMode == 1){
        windowSizes = [['427px', '240px'], ['854px', '480px'], ['1280px', '720px']];
        limits = [639, 1320];
    }

    if (progBarHide === false){                                                                             //Offset by 3px if the progress bar is shown
        for (var i = 0; i<windowSizes.length; i++){  
            windowSizes[i][1] = (Number(windowSizes[i][1].replace(/\D/g,'')) + 3) + 'px';
        }
    }

    var index = 0;
    if (windowX < limits[1] && windowX > limits[0]){
        index = 1;
    }
    if (windowX >= limits[1]){
        index = 2;
    }

    playerAPI.style.width = windowSizes[index][0].replace(/\D/g,'');
    playerAPI.style.height = windowSizes[index][1].replace(/\D/g,'');
}