☰

Youtube floating player

Youtube floating player.

当前为 2016-08-04 提交的版本，查看 最新版本。

// ==UserScript==
// @name        Youtube floating player
// @description Youtube floating player.
// @version     2.0
// @author      REVerdi
// @namespace   https://openuserjs.org/users/REVerdi
// @copyright   2014+, REVerdi (https://openuserjs.org/users/REVerdi)
// @license     (CC) Attribution Non-Commercial Share Alike; http://creativecommons.org/licenses/by-nc-sa/3.0/
// Por causa do SPF (Structured Page Fragments), não posso usar  // @include   http*://www.youtube.com/watch?*
// porque se o 1° link no YouTube não for do tipo acima, esse script nunca será executado.
// @include     http*://www.youtube.com/*
// @grant       none
// ==/UserScript==


/*
TESTADO APENAS NO FIREFOX

ONLY TESTED ON FIREFOX
*/


/*
O YouTube "quase" exatamente como eu queria!
Eu não sou programador, então não joguem tomates podres em mim :)

YouTube "almost" exactly as I wanted!
I'm not a programmer, so don't throw rotten tomatoes at me :)
*/


// Based on the ideia of drhouse (http://userscripts.org/scripts/show/186872)
// and contains source code written by tforbus:
// https://chrome.google.com/webstore/detail/video-pinner/egfhbaheiflmihggjcfmnmchkijkcdpl
// https://github.com/tforbus/youtube-fixed-video-bookmarklet
// http://www.whattheforbus.com/youtube-bookmarklet
// http://www.tristinforbus.com/


(function(){


"use strict";


var _window;
if (typeof unsafeWindow !== undefined){
    _window = unsafeWindow;
}
else {
    _window = window;
}


var bodyDivName = 'body';
//var pageDivName = 'page';

//var headerDivName = 'yt-masthead';
//var header;
//var headerRect;

var placeholderPlayerDivName = 'placeholder-player';
var placeHolderPlayer;

var playerDivName = 'player';
var player;
var playerRect;

var contentDivName = 'watch7-content';
var content;
var contentRect;

var sidebarDivName = 'watch7-sidebar';
var sidebar;
var sidebarRect;

var footerDivName = 'footer-container';
var footer;
//var footerRect;


var isBodyMutationObserverAdded = 0;
var isPageScrollOrResizeListenerAdded = 0;


//if (document.getElementById('movie_player')) document.getElementById('movie_player').style.border = "thick solid blue";
//if (document.getElementById('player')) document.getElementById('player').style.border = "thick solid red";


function pageScrollOrResize(evt) {
    
    player = document.getElementById(playerDivName);
    
    placeHolderPlayer = document.getElementById(placeholderPlayerDivName);
    
    if ( placeHolderPlayer ) {                                                      //user IS on a video page
        
        placeHolderPlayer.firstElementChild.style.backgroundColor = 'transparent';
        
      //player = document.getElementById(playerDivName);
        content = document.getElementById(contentDivName);
        sidebar = document.getElementById(sidebarDivName);
        footer = document.getElementById(footerDivName);
        
      //footer.style.position = 'fixed';                                            //fixa o rodapé na base da página
      //footer.style.bottom = '0px';                                                //fix the footer at the base of page
        
        if ( _window.pageYOffset > 0 ) {                                            //scroll > 0
            
            player.style.position = 'fixed';
            player.style.top = '60px';
            contentRect = content.getBoundingClientRect();
            player.style.left = contentRect.left+'px';
          //player.style.zIndex = 998;
            
            sidebar.style.position = 'absolute';
          //sidebar.style.top = player.clientHeight+'px';
          //sidebar.style.zIndex = 999;
            
            if ( /list/.test(document.location) === false ) {                       //user is NOT playing a playlist
                player.style.zIndex = 998;
                sidebar.style.zIndex = 999;
            }
            else {                                                                  //user IS playing a playlist
                player.style.zIndex = 999;
                sidebar.style.zIndex = 998;
                sidebarRect = sidebar.getBoundingClientRect();
                playerRect = player.getBoundingClientRect();
                player.style.width = sidebarRect.right - playerRect.left + 'px';    //playlist width
            }
            
          //content.style.position = 'relative';
          //content.style.top = player.clientHeight + 'px';
          //content.style.zIndex = 997;
            
        }
        else {                                                                      //scroll == 0
            player.style.position = '';
            player.style.top = '';
            player.style.left = '';
          //player.style.zIndex = '';
            
            sidebar.style.position = '';
          //sidebar.style.top = '';
          //sidebar.style.zIndex = '';
            
            player.style.zIndex = '';
            sidebar.style.zIndex = '';
            
            player.style.width = '';
            
          //content.style.position = '';
          //content.style.top = '';
          //content.style.zIndex = '';
        }
    }
    else {                                                                          //user is NOT on a video page
        player.style.position = '';
        player.style.top = '';
        player.style.left = '';
        player.style.zIndex = '';
        player.style.width = '';
    }
}




var bodyMutationOberver = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if ( isPageScrollOrResizeListenerAdded === 0 ) {
            document.addEventListener('scroll', pageScrollOrResize, false);
             _window.addEventListener('resize', pageScrollOrResize, false);
            isPageScrollOrResizeListenerAdded = 1;
        }
    });
});

function addBodyMutationObserver() {
    var config = { attributes: true, characterData: true, childList: true };
    var target = document.getElementById(bodyDivName);                          //tem que ser 'body', porque 'page' só funciona quando a 1ª página NÃO for uma de vídeo
    if ( target !== null ) {                                                    //( target !== null ) ou apenas ( target )
        bodyMutationOberver.observe(target, config);
        isBodyMutationObserverAdded = 1;
    }
}




function entryPoint() {
    if( isBodyMutationObserverAdded === 0 ) {
        addBodyMutationObserver();
    }
}

entryPoint();


})();