Expand video-infomation. @nicovideo(GINZA)
// ==UserScript==
// @id niconico_layout_changer_for_GINZA
// @name niconico layout changer for GINZA
// @version 1.7
// @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に保存するようになったため、低解像度の対応を外しました。
・動画情報と動画プレイヤーを左右に並べて表示
***********************************************************
更新履歴
05/19/2016 - v1.7 fix:cssの不具合修正
05/19/2016 - v1.6 fix:kusa5.mod対応＆修正
05/16/2016 - v1.5 add:要望のあったkusa5と併用できるように動画位置指定追加
11/13/2014 - v1.4 fix:ニコニコチャンネルの表示バグ＆プレイヤー大画面モードのバグなど
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() {
const mid1920 = 500 + 70 + 30; //最小値定数(中画面プレイヤー500+情報70 + 隙間30)
const nor1920 = 600 + 70 + 30; //最小値定数(大画面プレイヤー500+情報70 + 隙間30)
var mode = ""; //現在のプレイヤーサイズ
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") != "" && !document.getElementById('kusa5')){
objFrame.setAttribute("style","");
return;
}else if(objFrame.getAttribute("style") == ""){
check();
return;
}
if(!mutation.target.id.match(/^(videoThumbnailImage|playerAlignmentArea)$/i)) return;
var strClass = mutation.target.className;
//動画サイズ(size_normal(フルスクリーンもこれ)、size_medium、size_small)
if(mutation.target.id.match(/^playerAlignmentArea$/i)){
if(strClass.match(/^size_/)){
var tmp = strClass.replace(/^size_/,"");
if(mode == tmp) return;
mode = tmp
check(mode);
}
return;
}
var thumbTitle = mutation.target.getAttribute("alt");
if(mutation.oldValue != thumbTitle){
check();
}
return;
}
});
});
var target = document.body;
var config = { childList: true ,subtree: true ,attributes:true};
observer.observe(target, config);
}
//main========================================================================================
function main(){
try{
if(!objBody){
objBody = document.getElementsByTagName("body")[0];
objInfo = document.getElementById("videoInfo"); //動画情報
objFrame = document.getElementById("playerContainerWrapper"); //動画プレイヤー枠
}
hInfo = objInfo.clientHeight; //詳細情報の高さ
var hDif = hInfo - mid1920; //詳細情報と最小値定数の差分(詳細情報 - 最小値定数)
height1920 = mid1920 + hDif + 30; //CSS1920に使う高さ(最小値定数 + 差分 + 隙間30)
if(height1920 < mid1920) height1920 = mid1920;
if(hDif < 0) hDif = 0;
move1920 = - 830 - hDif; //固定移動量-830 - 差分
setData(move1920,height1920);
}catch(e){
GM_log("nicoLC:"+e);
}
}//mainここまで=================================================================
//CSS-----------------------------------
function setCSS(){
/*CSS*/
var css1920 = '@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,.videoInformation,#videoComment{ 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;}'
/*kusa5の動画プレイヤー*/
+ 'body.size_medium #kusa5,body.size_normal #kusa5{position:absolute!important;top:100px!important;left:calc(100% - 1060px)!important; max-width:calc(100% - (100% - 1020px)); max-height: calc(100% - 150px);}'
+ '#playerContainerWrapper{padding:10px 0 10px 0!important;}'
/*共有のポップアップ*/
+ '.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; }'
/*チャンネルプロファイル*/
+ '.ch_prof{width:350px;position:absolute!important;top:-10px;left:calc(100% + 700px);background:rgba(255,255,255,0.5);}'
+ '.channelFavoriteLink{float:right!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(css1920);
}
//===========================================================================
//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 check(flg){
if(flg == "small" || document.getElementById('kusa5'))return;
var resize = 0;
var hInfoNow = objInfo.clientHeight;
if(hInfo != hInfoNow){
resize = hInfoNow - hInfo;
hInfo = hInfoNow;
}
if(resize != 0 || flg){
var sizePlayer = objFrame.getAttribute("nicoLC_height");
var sizeMove = objInfo.getAttribute("nicoLC_move");
sizePlayer = parseInt(sizePlayer) + resize;
sizeMove = parseInt(sizeMove) - resize;
if(flg == "normal" && sizePlayer < nor1920){
sizeMove = sizeMove - (nor1920 - sizePlayer);
sizePlayer = nor1920;
}else if(flg == "medium"){
if(sizePlayer > hInfo && sizePlayer > mid1920 - 100) main();
return;
}
setData(sizeMove,sizePlayer);
}
}
//リサイズに対応したデータをセット
function setData(move,height){
objInfo.setAttribute("nicoLC_move",move);
objInfo.setAttribute("style","top:" + move + "px;");
objFrame.setAttribute("nicoLC_height",height);
objFrame.setAttribute("style","min-height:" + height + "px;");
}
})();