// ==UserScript==
// @name Video Full Screen In Tab
// @namespace http://www.icycat.com
// @description 让所有视频网页全屏 Maximize all video players
// @author 冻猫
// @include *
// @version 3.6
// @grant none
// @run-at document-end
// ==/UserScript==
(function() {
var fullStatus = false,
isIframe = false,
parentArray = new Array(),
parentStyle = new Array(),
backStyle = new Object(),
mouse = {
leave: 'listener',
over: 'listener'
},
browser, btnText, player, parent, observer;
if (window.top !== window.self) {
isIframe = true;
}
if (navigator.language == 'zh-CN') {
btnText = {
out: '网页全屏',
inner: '内层全屏',
restore: '还原大小'
};
} else {
btnText = {
out: 'Maximize',
inner: 'Maximize',
restore: 'Restore'
};
}
if (navigator.userAgent.match(/Firefox/i)) {
browser = 'firefox';
} else if (navigator.userAgent.match(/Chrome/i)) {
browser = 'chrome';
} else {
browser = 'other';
}
observer = new MutationObserver(function(mutation) {
if (fullStatus) {
observer.disconnect();
handle.resize();
observer.observe(parent, {
attributes: true,
subtree: true
});
} else {
if (tool.isFullClient(player)) {
observer.disconnect();
controlBtn.style.display = '';
}
}
});
var createButton = function(id) {
btn = document.createElement('tbdiv');
btn.id = id;
btn.onclick = function() {
maximize.playerControl();
};
document.body.appendChild(btn);
return btn;
}
var setButton = {
init: function() {
if (tool.isFullClient(player)) {
return;
}
observer.observe(parent, {
attributes: true,
subtree: true
});
this.show();
},
show: function() {
try {
player.addEventListener('mouseleave', handle.hideButton, false);
} catch (e) {
mouse.leave = player.onmouseleave;
player.onmouseleave = function() {
handle.hideButton();
player.onmouseleave = mouse.leave;
};
}
controlBtn.style.display = 'block';
controlBtn.style.visibility = 'visible';
var playerRect = tool.getRect(player);
if (playerRect.pageY < 20 || fullStatus) {
if (fullStatus) {
playerRect.pageY = playerRect.pageY + 50;
playerRect.pageX = playerRect.pageX - 30;
controlBtn.innerHTML = btnText.restore;
} else {
playerRect.pageY = playerRect.pageY + 20;
playerRect.pageX = playerRect.pageX + 64;
if (isIframe) {
controlBtn.innerHTML = btnText.inner;
} else {
controlBtn.innerHTML = btnText.out;
}
}
if (browser == 'firefox' && fullStatus) {
controlBtn.style.transition = 'all 0s';
controlBtn.style.opacity = '1';
} else {
controlBtn.style.transition = '';
controlBtn.style.opacity = '0.5';
}
} else {
controlBtn.style.transition = '';
controlBtn.style.opacity = '0.5';
controlBtn.innerHTML = btnText.out;
}
controlBtn.style.top = playerRect.pageY - 20 + 'px';
controlBtn.style.left = playerRect.pageX - 64 + player.offsetWidth + 'px';
}
};
var tool = {
getRect: function(element) {
var rect = element.getBoundingClientRect();
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
return {
pageX: rect.left + scrollLeft,
pageY: rect.top + scrollTop,
screenX: rect.left,
screenY: rect.top
};
},
isFullClient: function(element) {
var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
var top = tool.getRect(element).screenY;
var left = tool.getRect(element).screenX;
if (Math.abs(clientWidth - element.offsetWidth) < 21 && Math.abs(clientHeight - element.offsetHeight) < 21 & top < 10 & left < 20) {
return true;
} else {
return false;
}
},
addStyle: function(css) {
var style = document.createElement('style');
style.type = 'text/css';
var node = document.createTextNode(css);
style.appendChild(node);
document.head.appendChild(style);
return style;
}
};
var handle = {
getPlayer: function(e) {
if (fullStatus) {
return;
}
var target = e.target;
var nodeName = target.nodeName;
switch (nodeName) {
case 'OBJECT':
case 'EMBED':
if (target.offsetWidth > 99 && target.offsetHeight > 99) {
player = target;
parent = player.parentNode;
if (parent.nodeName == 'OBJECT') {
parent = parent.parentNode;
}
setButton.init();
}
break;
case 'IFRAME':
case 'VIDEO':
if (target.offsetWidth > 99 && target.offsetHeight > 99) {
player = target;
parent = player.parentNode;
setButton.init();
}
break;
default:
handle.hideButton();
}
},
hideButton: function() {
if (controlBtn.style.visibility == 'visible') {
controlBtn.style.opacity = '';
controlBtn.style.visibility = '';
if (!fullStatus) {
observer.disconnect();
}
player.removeEventListener('mouseleave', handle.hideButton, false);
}
},
resize: function() {
if (parent.style.width != '100%') {
backStyle.parentWidth = parent.style.width;
}
if (parent.style.height != '100%') {
backStyle.parentHeight = parent.style.height;
}
if (player.style.width != 'calc(100% - 2px)') {
backStyle.playerWidth = player.style.width;
}
if (player.style.height != '100%') {
backStyle.playerHeight = player.style.height;
}
if (parent.style.width != '100%' || parent.style.height != '100%' || player.style.width != 'calc(100% - 2px)' || player.style.height != '100%') {
maximize.fullWin();
}
}
};
var maximize = {
playerControl: function() {
this.checkPlayer();
if (!fullStatus) {
this.fullWin();
observer.observe(parent, {
attributes: true,
subtree: true
});
} else {
observer.disconnect();
this.smallWin();
}
},
checkPlayer: function() {
parentArray = [];
var full = parent;
while (full = full.parentNode) {
if (full.nodeName == 'BODY') {
break;
}
if (full.getAttribute) {
parentArray.push(full);
}
}
},
fullWin: function() {
if (!fullStatus) {
document.removeEventListener('mouseover', handle.getPlayer, false);
/*if (browser == 'chrome') {
try {
player.addEventListener('mouseover', setButton.show, false);
} catch (e) {
mouse.over = player.onmouseover;
player.onmouseover = setButton.show;
}
}*/
window.addEventListener('resize', handle.resize, false);
backStyle = {
bodyId: document.body.id,
parent: parent.style.cssText,
parentWidth: parent.style.width,
parentHeight: parent.style.height,
player: player.style.cssText,
playerWidth: player.style.width,
playerHeight: player.style.height
};
document.body.id = 'Toothbrush';
parent.classList.add('parentToothbrush')
player.classList.add('playerToothbrush');
backStyle.overflow = tool.addStyle('html,body{overflow:hidden !important;min-width:100% !important;}');
leftBtn.style.display = 'block';
rightBtn.style.display = 'block';
controlBtn.style.display = '';
if (player.nodeName == 'VIDEO') {
backStyle.controls = player.controls;
player.controls = true;
}
}
for (var i = 0; i < parentArray.length; i++) {
if (!fullStatus) {
parentStyle[i] = {
zIndex: parentArray[i].style.zIndex
};
}
parentArray[i].style.setProperty('z-index', 'auto', 'important');
}
parent.style.cssText = 'width:100%;height:100%;max-width:none !important;max-height:none !important;min-width:0 !important;min-height:0 !important;margin:0px !important;padding:0px !important;top:0px !important;left:0px !important;z-index:2147483645 !important;overflow:hidden !important;position:fixed !important;background-color:#000 !important;border:none !important;display:block !important;';
player.style.cssText = 'display:' + getComputedStyle(player).display + ' !important;visibility:' + getComputedStyle(player).visibility + ' !important;width:calc(100% - 2px);height:100%;max-width:none !important;max-height:none !important;min-width:0 !important;min-height:0 !important;z-index:2147483645 !important;position:relative !important;border:none !important;background-color:#000 !important;';
var rect = player.getBoundingClientRect();
player.style.left = (1 - rect.left) + 'px';
player.style.top = (0 - rect.top) + 'px';
fullStatus = true;
},
smallWin: function() {
window.removeEventListener('resize', handle.resize, false);
/*if (browser == 'chrome') {
player.removeEventListener('mouseover', setButton.show, false);
if (mouse.over != 'listener') {
player.onmouseover = mouse.over;
}
}*/
parent.classList.remove('parentToothbrush')
player.classList.remove('playerToothbrush');
backStyle.overflow.parentNode.removeChild(backStyle.overflow);
document.body.id = backStyle.bodyId;
for (var i = 0; i < parentArray.length; i++) {
parentArray[i].style.zIndex = parentStyle[i].zIndex;
}
parent.style.cssText = backStyle.parent;
parent.style.width = backStyle.parentWidth;
parent.style.height = backStyle.parentHeight;
player.style.cssText = backStyle.player;
player.style.width = backStyle.playerWidth;
player.style.height = backStyle.playerHeight;
if (player.nodeName == 'VIDEO') {
player.controls = backStyle.controls;
}
leftBtn.style.display = '';
rightBtn.style.display = '';
controlBtn.style.display = '';
document.addEventListener('mouseover', handle.getPlayer, false);
fullStatus = false;
}
};
tool.addStyle([
'#Toothbrush .parentToothbrush, #Toothbrush .parentToothbrush object {width:100% !important;height:100% !important;}',
'#Toothbrush .parentToothbrush .playerToothbrush {width:calc(100% - 2px) !important;height:100% !important;}',
'#playerControlBtn {visibility:hidden;opacity:0;transition: all 0.5s ease;display:none;cursor: pointer;font: 12px "微软雅黑";margin:0;width:64px;height:20px;line-height:20px;border:none;text-align: center;position: absolute;z-index:2147483646;background-color: #27A9D8;color: #FFF;} #playerControlBtn:hover {visibility:visible;opacity:1;background-color:#2774D8;}',
'#leftFullStackButton{display:none;position:fixed;width:1px;height:100%;top:0;left:0;z-index:2147483646;background:#000;}',
'#rightFullStackButton{display:none;position:fixed;width:1px;height:100%;top:0;right:0;z-index:2147483646;background:#000;}'
].join('\n'));
var controlBtn = createButton('playerControlBtn');
var leftBtn = createButton('leftFullStackButton');
var rightBtn = createButton('rightFullStackButton');
document.addEventListener('mouseover', handle.getPlayer, false);
})();