Expand video-infomation. @nicovideo(GINZA)
当前为
// ==UserScript==
// @id niconico_layout_changer_for_GINZA
// @name niconico_layout_changer_for_GINZA
// @version 1.0
// @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/sm*
// @run-at document-start
// ==/UserScript==
/**********************************************************
概要
ニコニコ動画(GINZA)の動画情報を見やすくするためのレイアウトに変更します。
※液晶解像度1920x1200に最適化しています。
ブラウザウィンドウの幅によってレイアウトは可変。
横幅が1800以上→動画情報と動画プレイヤーを並べて表示
横幅が1200以上1800未満→動画情報を最初から表示する原宿のような表示
横幅が1200未満→上記より少し横幅がコンパクトな原宿のような表示
***********************************************************
更新履歴
07/03/2014 - v1.0 release
**********************************************************/
(function() {
var intInfo = 0; //動画情報の高さ
//初期のCSS追加
setInitCSS();
document.addEventListener("DOMContentLoaded", function(evt){
var node = evt.target;
window.setTimeout( function() {main(node)}, 1500 ); //main
window.setTimeout( function() {setAfterCSS()}, 1500 ); //mainで編集後に適応するCSS
}, false);
//main========================================================================================
function main(){
//変数---------------------------------------------------------------------------------
var objHeader = document.getElementById("videoHeader"); //ヘッダ
var objTag = document.getElementById("videoTagContainer"); //タグ(この前に追加)
var objInfo = document.getElementById("videoInfo"); //動画情報
var objComment = document.getElementById("videoComment"); //動画情報-コメント
var objDesc = objComment.getElementsByClassName("videoDescription")[0]; //動画情報-説明
var objVideoHead = document.getElementById("videoInfoHead"); //動画情報-ヘッダ
var objPlayerArea = document.getElementById("playerContainerSlideArea"); //動画プレイヤーエリア(ここに追加)
//変数ここまで--------------------------------------------------------------------------
//動画情報を移動(動画情報ごと入れないと標準CSSが反映されないので注意)
objPlayerArea.parentNode.insertBefore(objInfo,objPlayerArea);
//ビデオステータス画面編集
var objStats = document.getElementById("videoStats"); //ビデオステータス
var objVideoInfo = objVideoHead.getElementsByClassName("videoInformation")[0]; //ビデオステータスの大本→ビデオステータスを残して他削除
objStats.parentNode.parentNode.appendChild(objStats);
objVideoInfo.innerHTML =""; //位置固定
//不要なもの削除
var objToggle = objHeader.getElementsByClassName("toggleDetailExpand")[0]; //詳細を開くボタン
var objShortInfo = objHeader.getElementsByClassName("shortVideoInfo")[0]; //詳細を開くボタン
// var objMem = objInfo.getElementsByClassName("mymemory"); //マイメモリー→2つ削除
objHeader.removeChild(objToggle);
objHeader.removeChild(objShortInfo);
/*ビデオステータス画面編集で一括で消してるので不要
//↓後ろの要素から消してかないと失敗するので注意
for(i = objMem.length - 1; i >= 0; i--){
objMem[i].parentNode.removeChild(objMem[i]);
}
*/
}//mainここまで=================================================================
//最初から追加するCSS---------------------------------------
function setInitCSS(){
//共通CSS
var cssCommon = ' #videoInfo{ width:650px;margin-left:30px;padding:5px 0 0 20px;background:rgba(255,255,255,0.5); }' //動画情報
+ ' body.size_small #videoInfo{ display:none;} ' //動画情報(「動画情報動画をもっと見る」の画面など)
+ ' .supplementary{ position:absolute;top:20px;left:450px;z-index:99;width:300px;background:rgba(255,255,255,0.5); } ' //「動画詳細情報を開く」のポップアップメニュー
+ ' #videoComment > H4{ display:none; } ' //「動画説明」というタイトル
+ ' .parentVideoInfo{ display:block!important; } ' //親動画情報
;//ここまで
//解像度横幅1800以上
var css1920Init = '@media screen and (min-width: 1800px) {'
+ ' #videoInfo{ margin-left:30px;padding:5px 0 0 20px;min-height:580px;width:650px;background:rgba(255,255,255,0.5); }' //動画情報
+ ' body.size_medium #playerContainerSlideArea{ position:absolute;top:100px;right:50px; } ' //動画プレイヤー(普通サイズ)
+ ' body.size_normal #playerContainerSlideArea{ position:absolute;top:100px;right:50px; } ' //動画プレイヤー(拡大表示)
+ '}';//ここまで
addStyle(cssCommon);
addStyle(css1920Init);
}
//main処理後に追加するCSS-----------------------------------
function setAfterCSS(){
//解像度横幅1800以上
var css1920After = '@media screen and (min-width: 1800px) {'
+ ' #userProfile{ position:absolute;top:10px;right:50px;max-width:300px!important;background:rgba(255,255,255,0.5); } ' //ユーザープロファイル
+ ' #userProfile *{ max-width:200px!important; } ' //その子要素
+ ' .parentVideoInfo{ position:absolute!important;top:10px;right:400px;background:rgba(255,255,255,0.5); } ' //親動画情報
+ '}';//ここまで
//解像度横幅1200以上1800未満
var css1280 = '@media screen and (min-width: 1200px) and (max-width: 1799px){'
+ ' #videoInfo{margin-bottom:100px;margin-left:10%;}' //動画情報
+ ' #userProfile{ position:absolute;top:10px;right:50px;max-width:300px!important;background:rgba(255,255,255,0.5); }' //ユーザープロファイル
+ ' #userProfile *{ max-width:200px!important; }' //その子要素
+ ' .parentVideoInfo{ position:absolute!important;bottom:510px;right:30px;background:rgba(255,255,255,0.5);}' //親動画情報
+ ' #videoInfoHead{position:absolute;bottom:510px;left:30px;background:rgba(255,255,255,0.5);}'
+ '}';//ここまで
addStyle(css1920After);
addStyle(css1280);
}
//===========================================================================
//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);
}
})();