ニコニコ追加コントローラー

nicoAddController.user.js

// ==UserScript==
// @name ニコニコ追加コントローラー
// @include      http://www.nicovideo.jp/watch/*
// @description ニコニコ動画Zeroのプレイヤーの下にコントローラーを追加します
// ==/UserScript==
add=function(){
var $,$$,e,f,t="",f0,f1,f2,upR=true,contentsHtml="",contentsCSS="",g1,g2,g3;
contentsHtml='\
	<span class="left">\
		<div class="playPause">||</div>\
		<div class="playPre">|&lt;&lt;</div>\
		<div class="playNext">&gt;&gt;|</div>\
		<div class="timeCurrent">000:00</div>\
		<div class="timeTotal">000:00</div>\
	</span>\
	<div class="center">\
		<input type="range" class="movie">\
	</div>\
	<span class="right">\
		<div class="display1">小</div>\
		<div class="display2">中</div>\
		<div class="display3">大</div>\
		<div class="display4">全</div>\
		<div class="comment">コ</div>\
		<div class="loop">→</div>\
		<input type="range" class="volume">\
		<div class="mute">音</div>\
	</span>\
';

contentsCSS='\
#zeroController2{\
	width:100%;\
	position:relative;\
	height:16px;\
}\
#zeroController2 input[type=\'range\']::-webkit-slider-thumb{\
	-webkit-appearance:none;\
	width:10px;height:20px;\
	background-color:#FFF;\
	border:solid 1px;\
}\
#zeroController2 input[type=\'range\']{\
	-webkit-appearance:none;\
	margin:0;\
	background-color:red;\
	background-image:-webkit-gradient(linear, right top, left top, color-stop(0, #CCC), color-stop(0.5, #CCC), color-stop(0.5, #0AA), color-stop(1, #0AA));\
	height:15px;\
	float:left;\
}\
#zeroController2 .right{\
	width:206px;\
	top:0;\
	right:0;\
	position:absolute;\
}\
#zeroController2 .center{\
	top:0;\
	position:relative;\
	margin-left:174px;\
	margin-right:206px;\
}\
#zeroController2 .left{\
	background-color:#DDD;\
	padding:0;\
	top:0;\
	float:left;\
	position:relative;\
}\
#zeroController2 .playPause{\
	background-color:#A55;\
	color:#FFF;\
	font-family:monospace;\
	font-weight:bold;\
	cursor:pointer;\
	height:100%;\
	float:left;\
	border-right:solid 2px #555;\
	padding-top:1px;\
}\
#zeroController2 .playPause:hover{background-color:#D88;}\
#zeroController2 .playNext,#zeroController2 .playPre{\
	background-color:#BBB;\
	color:#DDD;\
	font-family:monospace;\
	font-weight:bold;\
	cursor:pointer;\
	float:left;\
	height:100%;\
	border-right:solid 2px #555;\
	padding-top:1px;\
}\
#zeroController2 .playNext:hover,,zeroController2 .playPre:hover{color:#FFF;}\
#zeroController2 .timeCurrent{\
	padding-top:2px;\
	font-family:monospace;\
	font-weight:bold;\
	float:left;\
	padding-left:2px;\
	padding-right:3px;\
	width:48px;\
	text-align:right;\
}\
#zeroController2 .timeTotal{\
	padding-top:2px;\
	font-family:monospace;\
	font-weight:bold;\
	float:left;\
	padding-left:3px;\
	width:48px;\
	text-align:right;\
}\
#zeroController2 .mute,#zeroController2 .loop,#zeroController2 .comment{\
	border-left:solid 2px #555;\
	background-color:#BBB;\
	width:14px;\
	font-family:monospace;\
	font-weight:bold;\
	height:16px;\
	float:right;\
	cursor:pointer;\
}\
#zeroController2 .comment{border-right:solid 2px #555;}\
#zeroController2 .mute:hover,#zeroController2 .loop:hover,#zeroController2 .comment:hover{background-color:#DDD;}\
#zeroController2 .mute[on],#zeroController2 .loop[on],#zeroController2 .comment[on]{color:#999;font-weight:normal;}\
#zeroController2 .movie{width:100%;}\
#zeroController2 .volume{\
	font-family:monospace;\
	font-weight:bold;\
	float:right!important;\
	width:100px;\
}\
#zeroController2 .display1,#zeroController2 .display2,#zeroController2 .display3,#zeroController2 .display4{\
	background-color:#BBB;\
	width:14px;\
	font-family:monospace;\
	font-weight:normal;\
	height:16px;\
	float:right;\
	cursor:pointer;\
	color:#999;\
}\
#zeroController2 .display1:hover,#zeroController2 .display2:hover,#zeroController2 .display3:hover,#zeroController2 .display4:hover{\
	background-color:#DDD;\
}\
#zeroController2 .display1[on],#zeroController2 .display2[on],#zeroController2 .display3[on],#zeroController2 .display4[on]{\
	color:#000;font-weight:bold;\
}\
';

$=function(e){return document. querySelector(e);};
$$=function(n,i){var e;e=document.createElement(n);if(i!=null){e.innerHTML=i;}return e;}
g1=function(p){
	//input rangeのオブジェクトの背景をいじくってグラデーションを作る。pが値。1が最大値
	var writeCSS="";
	writeCSS='-webkit-gradient(linear,left top,right top,color-stop(0,#0AA),color-stop('+p+',#0AA),color-stop('+p+',#CCC),color-stop(1,#CCC))';
	return writeCSS;
};
g2=function(i){
	//ミリ秒→秒→00:00
	var s,m;
	i=Math.round(i/1000);
	s=Math.round(i%60);
	m=Math.round((i-s)/60);
	//桁数合わせ。10000分の動画も多分無いだろう長文
	if(s<10){s="0"+s;}
//	if(m<10){m="0"+m;}
//	if(m<100){m="0"+m;}
	return m+":"+s;
};
g3=function(no){
	//
	// WatchApp.namespace.model.player.NicoPlayerConnector.playerScreenMode._mode
	// WatchApp.namespace.model.player.NicoPlayerConnector.playerScreenMode._size
	// WatchApp.namespace.model.player.NicoPlayerConnector.playerScreenMode.lastPlayerSize
	// WatchApp.namespace.model.player.NicoPlayerConnector.playerScreenMode.mode
	//cssを全部殺す
	//notFullにしてから分岐させればいいのかなあ？
	$("#zeroController2 .display1").removeAttribute("on");
	$("#zeroController2 .display2").removeAttribute("on");
	$("#zeroController2 .display3").removeAttribute("on");
	$("#zeroController2 .display4").removeAttribute("on");
	WatchApp.namespace.model.player.NicoPlayerConnector.playerScreenMode.changeMode("notFull");
	switch(no){
		case 1://小
			WatchApp.namespace.model.player.NicoPlayerConnector.playerScreenMode.changeMode("small");
			$("#zeroController2 .display1").setAttribute("on","on");
			break;
		case 2://中
			WatchApp.namespace.model.player.NicoPlayerConnector.playerScreenMode.changeMode("medium");
			$("#zeroController2 .display2").setAttribute("on","on");
			break;
		case 3://大
			WatchApp.namespace.model.player.NicoPlayerConnector.playerScreenMode.changeMode("normal");
			$("#zeroController2 .display3").setAttribute("on","on");
			break;
		case 4://全
			WatchApp.namespace.model.player.NicoPlayerConnector.playerScreenMode.changeMode("browserFull");
			$("#zeroController2 .display4").setAttribute("on","on");
			break;
	}
};
f1=function(){
	//最初に一度だけやればいい
	e=$$("div",contentsHtml);
	e.id="zeroController2";
	$("#playerContainer").insertBefore(e,$("#playerCommentPanelOuter"));
	e=$$("style",contentsCSS);
	$("body").appendChild(e);
	//htmlとcssを無理やりな方法で追加したから、イベントリスナを追加
	//再生ボタン
	$("#zeroController2 .playPause").addEventListener("click",function(e){
		var now=$("#external_nicoplayer").ext_getStatus();
		if(now=="playing"){
			WatchApp.namespace.model.player.NicoPlayerConnector.stopVideo();//停止
			e.target.innerText="|>";
		}else{
			WatchApp.namespace.model.player.NicoPlayerConnector.playVideo();//再生
			e.target.innerText="||";
		}
	});
	$("#zeroController2 .playPause").setAttribute("title","|>をクリックすると動画を再生\n||をクリックすると一時停止します\nフラッシュ側で操作すると表示がズレます。");
	//次のビデオへ
	$("#zeroController2 .playNext").addEventListener("click",function(e){
		WatchApp.namespace.model.player.NicoPlayerConnector.playNextVideo();//次のビデオ→
	});
	$("#zeroController2 .playNext").setAttribute("title","プレイリストの次の動画へ移動します");
	//前のビデオへ＆動画の先頭へ
	$("#zeroController2 .playPre").addEventListener("click",function(e){
		if((WatchApp.namespace.model.player.NicoPlayerConnector.getVpos()/1000)>=1){
			WatchApp.namespace.model.player.NicoPlayerConnector.seekVideo(0);//シーク ミリ秒
		}else{
			WatchApp.namespace.model.player.NicoPlayerConnector.playPreviousVideo();//前のビデオ←
		}
	});
	$("#zeroController2 .playPre").setAttribute("title","動画の最初にシークします\n動画の最初でクリックするとプレイリストの前の動画へ移動します");
	//シークバー
	$("#zeroController2 .movie").addEventListener("change",function(e){
			WatchApp.namespace.model.player.NicoPlayerConnector.seekVideo(e.target.value);//シーク ミリ秒
	});
	$("#zeroController2 .movie").setAttribute("title","動画の再生位置を変更します");
	//ミュート
	$("#zeroController2 .mute").addEventListener("click",function(e){
		var nowConfig;
		nowConfig=WatchApp.namespace.model.player.NicoPlayerConnector.getPlayerConfig();
		if(nowConfig.isMute==true){
			nowConfig.isMute=false;
			WatchApp.namespace.model.player.NicoPlayerConnector.updatePlayerConfig(nowConfig);//ミュート
			e.target.removeAttribute("on");
		}else{
			nowConfig.isMute=true;
			WatchApp.namespace.model.player.NicoPlayerConnector.updatePlayerConfig(nowConfig);//ミュート
			e.target.setAttribute("on","on");
		}
	});
	$("#zeroController2 .mute").setAttribute("title","音量を一時的にゼロにします\nとても重いです");
	//音量
	f=$("#zeroController2 .volume");
	f.max=1;
	f.step=0.0001;
	$("#zeroController2 .volume").setAttribute("title","音量変更します\nとても重いです");
	$("#zeroController2 .volume").addEventListener("mouseup",function(e){//くっそ重いからmouseup
		upR=true;
		var t=$("#zeroController2 .volume");
		nowConfig=WatchApp.namespace.model.player.NicoPlayerConnector.getPlayerConfig();
		nowConfig.volume=t.value;
		WatchApp.namespace.model.player.NicoPlayerConnector.updatePlayerConfig(nowConfig);//音量
		t.style.backgroundImage=g1(t.value);
	});
	$("#zeroController2 .volume").addEventListener("mousedown",function(e){//くっそ重いからonMouseover
		upR=false;
	});
	//ループ
	$("#zeroController2 .loop").addEventListener("click",function(e){
		var nowConfig;
		nowConfig=WatchApp.namespace.model.player.NicoPlayerConnector.getPlayerConfig();
		if(nowConfig.isLoop==true){
			nowConfig.isLoop=false;
			e.target.innerText="→";
			WatchApp.namespace.model.player.NicoPlayerConnector.updatePlayerConfig(nowConfig);//ループオフにした
		}else{
			nowConfig.isLoop=true;
			e.target.innerText="◎";
			WatchApp.namespace.model.player.NicoPlayerConnector.updatePlayerConfig(nowConfig);//ループオンにした
		}
	});
	$("#zeroController2 .loop").setAttribute("title","ループ再生のオンオフを切り替えます\nとても重いです");
	//コメントの有無
	$("#zeroController2 .comment").addEventListener("click",function(e){
		var nowConfig;
		nowConfig=WatchApp.namespace.model.player.NicoPlayerConnector.getPlayerConfig();
		if(nowConfig.commentVisible==true){
			nowConfig.commentVisible=false;
			e.target.setAttribute("on","on");
			WatchApp.namespace.model.player.NicoPlayerConnector.updatePlayerConfig(nowConfig);//コメントオフにした
		}else{
			nowConfig.commentVisible=true;
			e.target.removeAttribute("on");
			WatchApp.namespace.model.player.NicoPlayerConnector.updatePlayerConfig(nowConfig);//コメントオンにした
		}
	});
	$("#zeroController2 .comment").setAttribute("title","コメント表示のオンオフを切り替えます\nとても重いです。");
	//表示モード切替
	$("#zeroController2 .display1").addEventListener("click",function(e){g3(1);});
	$("#zeroController2 .display2").addEventListener("click",function(e){g3(2);});
	$("#zeroController2 .display3").addEventListener("click",function(e){g3(3);});
	$("#zeroController2 .display4").addEventListener("click",function(e){g3(4);});
};
f2=function(){
	//常にやってればいい
	//読み込み率
	var p1,p2,p3;
	var nowConfig;
	p1=WatchApp.namespace.model.player.NicoPlayerConnector.getVideoBufferedRatio();//読み込み率0～1
	p2=WatchApp.namespace.model.player.NicoPlayerConnector.getVideoLength();//動画の長さ ミリ秒単位
	p3=WatchApp.namespace.model.player.NicoPlayerConnector.getVpos();//動画の現在位置 ミリ秒単位
	//読み込みメーター
	f=$("#zeroController2 .movie");
	f.style.backgroundImage=g1(p1);
	//シークバー
	f=$("#zeroController2 .movie");
	f.max=p2;
	f.value=p3;
	//時間。今の位置
	f=$("#zeroController2 .timeCurrent");
	f.innerText=g2(p3);
	//時間。動画の名が差
	f=$("#zeroController2 .timeTotal");
	f.innerText=g2(p2);
	if(upR==true){
		//音量も合わせておく
		nowConfig=WatchApp.namespace.model.player.NicoPlayerConnector.getPlayerConfig();
		f=$("#zeroController2 .volume");
		f.value=nowConfig.volume;
		f.style.backgroundImage=g1(nowConfig.volume);
	}
};
f1();
setInterval(f2,100);
};

elem=document.createElement('script');
elem.setAttribute("type","text/javascript");
elem.innerHTML="("+add.toString()+")();";;
document.body.appendChild(elem);