Expand video-infomation. @nicovideo(GINZA)
当前为
// ==UserScript==
// @id niconico_layout_changer_for_GINZA
// @name niconico layout changer for GINZA
// @version 1.3
// @namespace https://greasyfork.org/ja/scripts/2981
// @homepageURL https://greasyfork.org/ja/scripts/2981
// @license https://creativecommons.org/licenses/by-nc-sa/3.0/
// @author noi
// @description Expand video-infomation. @nicovideo(GINZA)
// @include http://www.nicovideo.jp/watch/*
// @run-at document-start
// @grant GM_log
// ==/UserScript==
/**********************************************************
概要
ニコニコ動画(GINZA)の「動画情報」を見やすくするためのレイアウトに変更します。
※液晶解像度の幅が1800以上のみ動作します。
※ニコニコが「動画情報を開く」状態をcookieに保存するようになったため、低解像度の対応を外しました。
・動画情報と動画プレイヤーを左右に並べて表示
***********************************************************
更新履歴
11/13/2014 - v1.3 fix:ニコニコの仕様変更対応＆大規模な作り替え
08/08/2014 - v1.2 fix:css
07/15/2014 - v1.1 fix:表示調整
07/03/2014 - v1.0 release
**********************************************************/
(function() {
var hInfo = 0; //詳細情報の高さ
var height1920 = 0; //動画プレイヤー枠の高さ
var move1920=0; //動画情報の移動量
var objBody = "";
var objInfo = ""; //動画情報
var objFrame = ""; //動画プレイヤー枠
document.addEventListener("DOMContentLoaded", function(evt){
var node = evt.target;
setCSS();
main(node);
startObserver();
}, false);
//要素の変更監視
function startObserver(){
var observer = new MutationObserver(function(mutations){
mutations.forEach(function(mutation) {
switch (mutation.type) {
case 'attributes' : // 属性が変更された
//mutation.target; // 属性を持つ要素
//mutation.attributeName; // 属性の名前
//mutation.attributeNamespace; // 属性の名前空間
//mutation.oldValue; // 変更前の属性値
if(objBody.clientWidth < 1800 && objFrame.getAttribute("style") != ""){
objFrame = document.getElementById("playerContainerWrapper"); //動画プレイヤー枠
objFrame.setAttribute("style","");
return;
}else if(objFrame.getAttribute("style") == ""){
resize();
return;
}
if(!mutation.target.id.match(/^(videoThumbnailImage|playerAlignmentArea)$/i)) return;
//動画サイズ(size_normal(フルスクリーンもこれ)、size_medium、size_small)
if(mutation.target.id.match(/^playerAlignmentArea$/i) && mutation.target.className.match(/^(size_medium|size_normal)$/i)){
resize();
return;
}
var thumbTitle = mutation.target.getAttribute("alt");
if(mutation.oldValue != thumbTitle){
resize();
}
return;
}
});
});
var target = document.body;
var config = { childList: true ,subtree: true ,attributes:true};
observer.observe(target, config);
}
//main========================================================================================
function main(){
try{
objBody = document.getElementsByTagName("body")[0];
objInfo = document.getElementById("videoInfo"); //動画情報
objFrame = document.getElementById("playerContainerWrapper"); //動画プレイヤー枠
hInfo = objInfo.clientHeight; //詳細情報の高さ
const min1920 = 500 + 70 + 30; //最小値定数(プレイヤー500+情報70 + 隙間30)
var hDif = hInfo - min1920; //詳細情報と最小値定数の差分(詳細情報 - 最小値定数)
height1920 = min1920 + hDif + 30; //CSS1920に使う高さ(最小値定数 + 差分 + 隙間30)
if(height1920 < min1920) height1920 = min1920;
if(hDif < 0) hDif = 0;
move1920 = - 830 - hDif; //固定移動量-830 - 差分
objInfo.setAttribute("nicoLC_move",move1920);
objInfo.setAttribute("style","top:" + move1920 + "px;");
objFrame.setAttribute("nicoLC_height",height1920);
objFrame.setAttribute("style","min-height:" + height1920 + "px;");
}catch(e){
GM_log("nicoLC:"+e);
}
}//mainここまで=================================================================
//CSS-----------------------------------
function setCSS(){
/*CSS*/
var css = '@media screen and (min-width: 1800px) {'
+ '#videoDetailInformation,' /*スクリプトで上に追加される動画情報*/
+ '#videoComment > H4,' /*「動画説明」というタイトル*/
+ '.toggleDetailExpand,' /*動画詳細情報を開く*/
+ '.shortVideoInfo{' /*動画情報の短縮版*/
+ 'display:none!important;'
+ '}'
/*下に最初から読み込まれる動画情報(動画情報を上に表示している状態では非表示にされるため)*/
+ '.videoMainInfoContainer{display:block!important;}'
/*動画情報の背景*/
+ '#videoInfo{position:absolute;left:20px;z-index:999;width:calc(100% - 1120px);min-height:580px;padding:5px 0 0 20px;background:rgba(255,255,255,0.5); }'
+ 'body.size_normal #videoInfo{ width:calc(100% - 1350px);}'
/*動画情報のタイトル部分などの調整*/
+ '#videoInfoHead{ width:100%;}'
+ '.videoInformation{width:86%!important;max-width:100%!important;}'
/*動画プレイヤーの全体枠(検索などの最小化の時)*/
+ 'body.size_small #playerContainerWrapper{ min-height:150px!important;}'
/*動画プレイヤー(普通サイズ)*/
+ 'body.size_medium #playerContainerSlideArea{position:absolute;top:100px;right:50px;}'
/*動画プレイヤー(拡大表示)*/
+ 'body.size_normal #playerContainerSlideArea{position:absolute;top:100px;right:50px;}'
/*共有のポップアップ*/
+ '.expandContainer{position:absolute;z-index:999999;}'
/*ユーザープロファイル*/
+ '.userProfile{position:absolute!important;top:-10px;left:calc(100% + 700px);max-width:300px!important;background:rgba(255,255,255,0.5);}'
/*ユーザープロファイルの子情報*/
+ '.userProfile *{ max-width:200px!important; }'
/*親動画情報*/
+ '.parentVideoInfo{position:absolute!important;top:-10px;left:calc(100% + 20px);display:block!important;background:rgba(255,255,255,0.5);}'
/*動画詳細情報を開く*/
+ '#bottomVideoDetailInformation{position:absolute;top:20px;right:20px;}'
/*「動画詳細情報を開く」のポップアップメニュー*/
+ '.supplementary{position:absolute;top:20px;right:0px;z-index:99;width:300px;background:rgba(255,255,255,0.8);}'
/*ニコニコ市場*/
/*市場の枠*/
+ '.outer{margin-left:5%!important; width:85%!important;}'
+ '.main{width:75%!important;}'
+ '#nicoIchiba,#ichibaMain{width:100%!important;}'
/*改行*/
+ '#ichibaMain .rowJustify{display:none!important;}'
/*市場アイテム*/
+ '.ichiba_mainitem{height:350px;}'
+'}';//ここまで
addStyle(css);
}
//===========================================================================
//CSSを追加------------------------------------------------
function addStyle(css) {
var head = document.getElementsByTagName('head')[0];
if (!head) { return };
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}
//動画情報のリサイズに、枠の高さと詳細情報の移動量を変更する
function resize(){
var resize = 0;
var hInfoNow = objInfo.clientHeight;
if(hInfo != hInfoNow){
resize = hInfoNow - hInfo;
hInfo = hInfoNow;
}
if(resize != 0){
var sizePlayer = objFrame.getAttribute("nicoLC_height");
var sizeMove = objInfo.getAttribute("nicoLC_move");
sizePlayer = parseInt(sizePlayer) + resize;
sizeMove = parseInt(sizeMove) - resize;
objFrame.setAttribute("style","min-height:" + sizePlayer + "px;");
objFrame.setAttribute("nicoLC_height",sizePlayer);
objInfo.setAttribute("style","top:" + sizeMove + "px;");
objInfo.setAttribute("nicoLC_move",sizeMove);
}
}
})();