☰

niconico layout changer for GINZA

Expand video-infomation. @nicovideo(GINZA)

  1. // ==UserScript==
  2. // @id                   niconico_layout_changer_for_GINZA
  3. // @name                 niconico layout changer for GINZA
  4. // @version              1.7
  5. // @namespace            https://gf.qytechs.cn/ja/scripts/2981
  6. // @homepageURL          https://gf.qytechs.cn/ja/scripts/2981
  7. // @license              https://creativecommons.org/licenses/by-nc-sa/3.0/
  8. // @author               noi
  9. // @description          Expand video-infomation. @nicovideo(GINZA)
  10. // @include              http://www.nicovideo.jp/watch/*
  11. // @run-at               document-start
  12. // @grant                GM_log
  13. // ==/UserScript==
  14.  
  15. /**********************************************************
  16. 概要
  17. ニコニコ動画(GINZA)の「動画情報」を見やすくするためのレイアウトに変更します。
  18.  
  19. ※液晶解像度の幅が1800以上のみ動作します。
  20. ※ニコニコが「動画情報を開く」状態をcookieに保存するようになったため、低解像度の対応を外しました。
  21.  
  22.  
  23. ・動画情報と動画プレイヤーを左右に並べて表示
  24.  
  25.  
  26. ***********************************************************
  27. 更新履歴
  28.  
  29. 05/19/2016 - v1.7 fix:cssの不具合修正
  30. 05/19/2016 - v1.6 fix:kusa5.mod対応＆修正
  31. 05/16/2016 - v1.5 add:要望のあったkusa5と併用できるように動画位置指定追加
  32. 11/13/2014 - v1.4 fix:ニコニコチャンネルの表示バグ＆プレイヤー大画面モードのバグなど
  33. 11/13/2014 - v1.3 fix:ニコニコの仕様変更対応＆大規模な作り替え
  34. 08/08/2014 - v1.2 fix:css
  35. 07/15/2014 - v1.1 fix:表示調整
  36. 07/03/2014 - v1.0 release
  37. **********************************************************/
  38.  
  39.  
  40. (function() {
  41.  
  42. 	const mid1920 = 500 + 70 + 30;	//最小値定数(中画面プレイヤー500+情報70 + 隙間30)
  43. 	const nor1920 = 600 + 70 + 30;	//最小値定数(大画面プレイヤー500+情報70 + 隙間30)
  44.  
  45. 	var mode = "";		//現在のプレイヤーサイズ
  46. 	var hInfo = 0;		//詳細情報の高さ
  47. 	var height1920 = 0;	//動画プレイヤー枠の高さ
  48. 	var move1920=0;		//動画情報の移動量
  49.  
  50. 	var objBody = "";
  51. 	var objInfo = "";	//動画情報
  52. 	var objFrame = "";	//動画プレイヤー枠
  53.  
  54.  
  55. 	document.addEventListener("DOMContentLoaded", function(evt){
  56. 		var node = evt.target;
  57. 		setCSS();
  58. 		main(node);
  59. 		startObserver();
  60. 	}, false);
  61.  
  62.  
  63.  
  64. 	//要素の変更監視
  65. 	function startObserver(){
  66. 		var observer = new MutationObserver(function(mutations){
  67. 		    mutations.forEach(function(mutation) {
  68. 			
  69. 			switch (mutation.type) {
  70.  
  71. 			case 'attributes' : // 属性が変更された
  72. 			//mutation.target; // 属性を持つ要素
  73. 			//mutation.attributeName; // 属性の名前
  74. 			//mutation.attributeNamespace; // 属性の名前空間
  75. 			//mutation.oldValue; // 変更前の属性値
  76.  
  77. 				//最大化・縮小化
  78. 				if(objBody.clientWidth < 1800 && objFrame.getAttribute("style") != "" && !document.getElementById('kusa5')){
  79. 					objFrame.setAttribute("style","");
  80. 					return;
  81. 				}else if(objFrame.getAttribute("style") == ""){
  82. 					check();
  83. 					return;
  84. 				}
  85.  
  86.  
  87. 				if(!mutation.target.id.match(/^(videoThumbnailImage|playerAlignmentArea)$/i)) return;
  88.  
  89. 				var strClass = mutation.target.className;
  90. 				//動画サイズ(size_normal(フルスクリーンもこれ)、size_medium、size_small)
  91. 				if(mutation.target.id.match(/^playerAlignmentArea$/i)){
  92. 					if(strClass.match(/^size_/)){
  93. 						var tmp = strClass.replace(/^size_/,"");
  94. 						if(mode == tmp) return;
  95.  
  96. 						mode = tmp
  97. 						check(mode);
  98. 					}
  99. 					return;
  100. 				}
  101.  
  102.  
  103. 				var thumbTitle = mutation.target.getAttribute("alt");
  104.  
  105. 				if(mutation.oldValue != thumbTitle){
  106. 					check();
  107. 				}
  108.  
  109. 				return;
  110.  
  111. 			}
  112. 		    });
  113. 		});
  114.  
  115. 		var target = document.body;
  116. 		var config = { childList: true ,subtree: true ,attributes:true};
  117. 		observer.observe(target, config);
  118. 	}
  119.  
  120.  
  121. 	//main========================================================================================
  122. 	function main(){
  123. try{
  124.  
  125. 		if(!objBody){
  126. 			objBody = document.getElementsByTagName("body")[0];
  127. 			objInfo = document.getElementById("videoInfo");		//動画情報
  128. 			objFrame = document.getElementById("playerContainerWrapper");	//動画プレイヤー枠
  129. 		}
  130.  
  131. 		hInfo = objInfo.clientHeight;					//詳細情報の高さ
  132. 		var hDif = hInfo  - mid1920;					//詳細情報と最小値定数の差分(詳細情報 - 最小値定数)
  133. 		height1920 = mid1920 + hDif + 30;				//CSS1920に使う高さ(最小値定数 + 差分 + 隙間30)
  134. 		if(height1920 < mid1920) height1920 = mid1920;
  135.  
  136. 		if(hDif < 0) hDif = 0;
  137. 		move1920 = - 830 - hDif;					//固定移動量-830 - 差分
  138.  
  139. 		setData(move1920,height1920);
  140.  
  141. }catch(e){
  142. 	GM_log("nicoLC:"+e);
  143. }
  144.  
  145. 	}//mainここまで=================================================================
  146.  
  147.  
  148. 	//CSS-----------------------------------
  149. 	function setCSS(){
  150.  
  151. 		/*CSS*/
  152. 		var css1920 = '@media screen and (min-width: 1800px) {'
  153. 		+	'#videoDetailInformation,'	/*スクリプトで上に追加される動画情報*/
  154. 		+	'#videoComment > H4,'			/*「動画説明」というタイトル*/
  155. 		+	'.toggleDetailExpand,'			/*動画詳細情報を開く*/
  156. 		+	'.shortVideoInfo{'			/*動画情報の短縮版*/
  157. 		+		'display:none!important;'
  158. 		+	'}'
  159. 			/*下に最初から読み込まれる動画情報(動画情報を上に表示している状態では非表示にされるため)*/
  160. 		+	'.videoMainInfoContainer{display:block!important;}'
  161. 			/*動画情報の背景*/
  162. 		+	'#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); }'
  163. 		+	'body.size_normal #videoInfo{ width:calc(100% - 1350px);}'
  164. 			/*動画情報のタイトル部分などの調整*/
  165. 		+	'#videoInfoHead,.videoInformation,#videoComment{ width:100%!important;}'
  166. 			/*動画プレイヤーの全体枠(検索などの最小化の時)*/
  167. 		+	'body.size_small #playerContainerWrapper{ min-height:150px!important;}'
  168. 			/*動画プレイヤー(普通サイズ)*/
  169. 		+	'body.size_medium #playerContainerSlideArea{position:absolute;top:100px;right:50px;}'
  170. 			/*動画プレイヤー(拡大表示)*/
  171. 		+	'body.size_normal #playerContainerSlideArea{position:absolute;top:100px;right:50px;}'
  172. 			/*kusa5の動画プレイヤー*/
  173. 		+	'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);}'
  174. 		+	'#playerContainerWrapper{padding:10px 0 10px 0!important;}'
  175. 			/*共有のポップアップ*/
  176. 		+	'.expandContainer{position:absolute;z-index:999999;}'
  177. 			/*ユーザープロファイル*/
  178. 		+	'.userProfile{position:absolute!important;top:-10px;left:calc(100% + 700px);max-width:300px!important;background:rgba(255,255,255,0.5);}'
  179. 			/*ユーザープロファイルの子情報*/
  180. 		+	'.userProfile *{ max-width:200px!important; }'
  181. 			/*チャンネルプロファイル*/
  182. 		+	'.ch_prof{width:350px;position:absolute!important;top:-10px;left:calc(100% + 700px);background:rgba(255,255,255,0.5);}'
  183. 		+	'.channelFavoriteLink{float:right!important;}'
  184. 			/*親動画情報*/
  185. 		+	'.parentVideoInfo{position:absolute!important;top:-10px;left:calc(100% + 20px);display:block!important;background:rgba(255,255,255,0.5);}'
  186. 			/*動画詳細情報を開く*/
  187. 		+	'#bottomVideoDetailInformation{position:absolute;top:20px;right:20px;}'
  188. 			/*「動画詳細情報を開く」のポップアップメニュー*/
  189. 		+	'.supplementary{position:absolute;top:20px;right:0px;z-index:99;width:300px;background:rgba(255,255,255,0.8);}'
  190.  
  191. 			/*ニコニコ市場*/
  192. 			/*市場の枠*/
  193. 		+	'.outer{margin-left:5%!important; width:85%!important;}'
  194. 		+	'.main{width:75%!important;}'
  195. 		+	'#nicoIchiba,#ichibaMain{width:100%!important;}'
  196. 			/*改行*/
  197. 		+	'#ichibaMain .rowJustify{display:none!important;}'
  198. 			/*市場アイテム*/
  199. 		+	'.ichiba_mainitem{height:350px;}'
  200.  
  201. 		+'}';//ここまで
  202.  
  203.  
  204.  
  205. 		addStyle(css1920);
  206.  
  207. 	}
  208.  
  209. 	//===========================================================================
  210.  
  211.  
  212. 	//CSSを追加------------------------------------------------
  213. 	function addStyle(css) {
  214. 		var head = document.getElementsByTagName('head')[0];
  215. 		if (!head) { return };
  216.  
  217. 		var style = document.createElement('style');
  218. 		style.type = 'text/css';
  219. 		style.innerHTML = css;
  220. 		head.appendChild(style);
  221. 	}
  222.  
  223.  
  224. 	//動画情報のリサイズに、枠の高さと詳細情報の移動量を変更する
  225. 	function check(flg){
  226. 		if(flg == "small" || document.getElementById('kusa5'))return;
  227. 		var resize = 0;
  228. 		var hInfoNow = objInfo.clientHeight;
  229.  
  230. 		if(hInfo != hInfoNow){
  231. 			resize = hInfoNow - hInfo;
  232. 			hInfo = hInfoNow;
  233. 		}
  234.  
  235.  
  236. 		if(resize != 0 || flg){
  237. 			var sizePlayer = objFrame.getAttribute("nicoLC_height");
  238. 			var sizeMove = objInfo.getAttribute("nicoLC_move");
  239.  
  240. 			sizePlayer = parseInt(sizePlayer) + resize;
  241. 			sizeMove = parseInt(sizeMove) - resize;
  242.  
  243. 			if(flg == "normal" && sizePlayer < nor1920){
  244. 				sizeMove = sizeMove - (nor1920 - sizePlayer);
  245. 				sizePlayer = nor1920;
  246. 			}else if(flg == "medium"){
  247.  
  248. 				if(sizePlayer > hInfo && sizePlayer > mid1920 - 100) main();
  249. 				return;
  250. 			}
  251.  
  252. 			setData(sizeMove,sizePlayer);
  253. 		}
  254.  
  255. 	}
  256.  
  257. 	//リサイズに対応したデータをセット
  258. 	function setData(move,height){
  259. 		objInfo.setAttribute("nicoLC_move",move);
  260. 		objInfo.setAttribute("style","top:" + move + "px;");
  261. 		objFrame.setAttribute("nicoLC_height",height);
  262. 		objFrame.setAttribute("style","min-height:" + height + "px;");
  263. 	}
  264.  
  265. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址