Youtube floating player.
目前為
// ==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();
})();