Greasy Fork is available in English.

YouTube Supreme

Does cool things with YouTube

Устаревшая версия на 27.07.2016. Перейти к последней версии.

// ==UserScript==
// @name         YouTube Supreme
// @namespace    http://skoshy.com
// @version      0.3
// @description  Does cool things with YouTube
// @author       You
// @match        http*://*.youtube.com/*
// @exclude      http*://*.youtube.com/embed/*
// @grant        none
// ==/UserScript==

var scriptid = 'yt-supreme';

var topBarHeight = 10;
var newElements = {}; // this object-array will contain all the new elements created for the page

var css = `
/* Top bar */

#masthead-positioner {
  height: `+topBarHeight+`px !important;
  overflow: hidden;
  background-color: black;
  transition: height 0.3s, background-color 0.3s;
}

#masthead-positioner:hover {
  background-color: white;
  height: 50px !important;
}

#yt-masthead-container {
  background-color: transparent !important;
}

#masthead-positioner-height-offset {
  height: 0px !important;
}

/* Player Bottom Controls */

.ytp-chrome-bottom {
  position: relative !important;
  margin-top: -39px !important;
  margin-left: auto;
  margin-right: auto;
  left: 0 !important;
  overflow: hidden;
  padding-top: 10px;
}

.ytp-progress-bar-container {
  height: 10px !important;
  opacity: .5;
} /* makes the progress bar taller */

.ytp-progress-bar-container:hover {
  opacity: .8;
} /* makes the progress bar taller */

.ytp-scrubber-button {
  height: 16px !important;
  width: 16px !important;
  top: -2px !important;
}

/* Comments */

#watch-discussion {
  display: block !important;
  overflow-x: hidden;
}

/* PLAYLIST */

#player-playlist .watch-playlist {
  border-top: 1px solid #3a3a3a;
  height: 240px;
  left: 0;
  margin-bottom: 0;
  position: relative;
  top: 0;
  height: 300px;
  width: 100%;
  -moz-transform: none;
  -ms-transform: none;
  -webkit-transform: none;
  transform: none;
}

#placeholder-playlist {
  display: none !important;
}

#player-playlist {
  min-width: 0 !important;
}

/* Player */

#placeholder-player {
  display: none;
}

#player {
  max-width: none !important;
  min-width: 0 !important;
}

#player-api, #player-unavailable {
  width: 100% !important;
  margin-left: 0 !important;
  left: 0 !important;
  height: auto !important;
  position: relative;
}

.html5-video-container video {
  width: 100% !important;
  height: auto !important;
  position: relative !important;
}

/* PLAYER - ALWAYS HIDE "SUGGESTED" TEASER IN VIDEO PLAYER AT TOP RIGHT */

.ytp-cards-teaser {
  display: none !important;
}

/* WATCH MORE SECTION */

.watch-sidebar {
  margin-top: 0px !important;
}

/* FOOTER */
#body-container {
  padding-bottom: 0;
}

#footer-container {
  display: none;
}
`;

document.addEventListener("keydown", function(e) {
    if (e.altKey === true && e.code == 'KeyO') {
        // toggle style
        var cssEl = document.getElementById(scriptid);

        if (cssEl.disabled === false)
            turnOff();
        else
            turnOn();

        resizeCheck();
    }
});

function turnOn() {
    var cssEl = document.getElementById(scriptid);
    cssEl.disabled = false;
    for (var key in newElements) {
        newElements[key].style.display = 'block';
    }
}

function turnOff() {
    var cssEl = document.getElementById(scriptid);
    cssEl.disabled = true;
    for (var key in newElements) {
        console.log(newElements[key].style.display);
        newElements[key].style.display = 'none';
    }
}

function resizeCheck(e) {
    var video = document.querySelector('#player-api video');
    var videoContainer = document.querySelector('#player-api .html5-video-player');
    var playerContainer = document.querySelector('#player-api');
    var playerPlaceholder = document.querySelector('#'+scriptid+'-playerPlaceholder');

    video.style.maxWidth = window.innerWidth+'px';
    video.style.maxHeight = (window.innerHeight-topBarHeight)+'px'; // must be minus 10 because the top bar is 10 pixels

    // now let's check the height of the video container. if there's space on the bottom, fix the video to the top so you can scroll with it in view
    if (window.innerHeight > videoContainer.offsetHeight+150) {
        playerContainer.style.position = 'fixed';
        playerPlaceholder.style.height = (playerContainer.offsetHeight-topBarHeight)+'px';
        playerPlaceholder.style.width = (playerContainer.offsetWidth-topBarHeight)+'px';
    } else {
        playerContainer.style.position = 'relative';
    }
}

/************
Initialize
************/

function initialize() {
    // Checks things on window resize
    window.addEventListener("resize", resizeCheck);

    addGlobalStyle(css, scriptid);

    var playerContainer = document.querySelector('#player-api');

    // create the player placeholder. this will be 'displayed' when the player fixes to the top. this will push the rest of the content down.
    newElements.playerPlaceholder = document.createElement('div');
    newElements.playerPlaceholder.style.display = 'none';
    newElements.playerPlaceholder.id = scriptid+'-playerPlaceholder';

    insertAfter(newElements.playerPlaceholder, playerContainer);

    turnOn();
    resizeCheck();
    setTimeout(resizeCheck, 400);
}

initialize();

/************
Utility Functions
************/

function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function addGlobalStyle(css, id) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    style.id = id;
    head.appendChild(style);
}