☰

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

Από την 02/04/2015. Δείτε την τελευταία έκδοση.

// ==UserScript==
// @name         Youtube Video Controls Manager
// @namespace    http://your.homepage/
// @version      0.04
// @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
// @match        https://www.youtube.com/watch?v=rXj3hUB7BH8
// @grant        none

// ==/UserScript==

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

//Objects
var playerAPI = document.getElementById("player-api");                                         //Entire player
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 elements = [scrubBn, vidCont];

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

//Make it always visible to override script
vidContWrap.style.setProperty("opacity", 1, "important");                                     //Disables youtube's opacity fade script on the progress bar
document.getElementById("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);
    playerAPI.addEventListener("mouseout", handleMouseOut);
}

function handleMouseMove(){
    fade(inPar);
    fadeOutInterval = setTimeout(fade, timeout, timeoutPar);
}

function handleMouseOut(){
    fade(outPar);
}

function fade(parameters){
    clearTimeout(fadeOutInterval);
    playerAPI.style.cursor = parameters[0];
    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 = ['240px', '360px', '480px'];
    if (progBarHide === false){
        windowSizes = ['243px', '363px', '483px'];
    }
    
    if (windowX <= 639){
        playerAPI.style.height = windowSizes[0];
    }
    if (windowX < 1294 && windowX > 639){
        playerAPI.style.height = windowSizes[1];
    }
    if (windowX >= 1294){
        playerAPI.style.height = windowSizes[2];
    }
}