☰

Iwara Animation Script

Animate Iwara video thumbnail when mouse over. to make iwara easier to see.

질문, 리뷰하거나, 이 스크립트를 신고하세요. 
  1. // ==UserScript==
  2. // @name         Iwara Animation Script
  3. // @name:ja      Iwara Animation Script
  4. // @namespace    http://tampermonkey.net/
  5. // @version      0.15
  6. // @description  Animate Iwara video thumbnail when mouse over. to make iwara easier to see.
  7. // @description:ja  Iwaraの動画サムネをマウスオーバーしたときにサムネをアニメーションさせる。ちょっと見やすくする。
  8. // @author       iwayen
  9. // @match        *://*.iwara.tv/*
  10. // @grant        none
  11. // @require      http://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
  12. // ==/UserScript==
  13.  
  14. /*
  15. Description: //説明:
  16. 1.Makes the text on the thumbnail easier to see when loading the page. //ページ読み込み時にサムネイル上の文字を見やすく縁取りをする。
  17. 2.Zoom thumbnails on mouse over. //マウスオーバーしたときにサムネイルをズームする。
  18. 3.Then animate the thumbnail. //そのときサムネイルをアニメーションする。
  19. About having problems: //不具合について：
  20. 1.Some videos cannot be switched because their thumbnails are 403. //一部の動画ではサムネイルが403のため切り替えできない。
  21. 2.It may take about 700ms to read an image and it may fail. //画像読み取りに700ms近くかかるため失敗することがある。
  22. 3.If the switching time is too early, the image cannot be downloaded. Once cached, they can be displayed faster, but are not yet supported. //切り替えの時間が早すぎると画像をダウンロードできない。一度キャッシュしていれば早くしても見えるがまだ対応していない。
  23. */
  24.  
  25. (function() {
  26.  
  27. 	//Set here if you want to change the settings 設定を変更したい場合はここで
  28. 	// var animerepeat = 1 ; // How many times do the five thumbnails repeat? Even if you increase it, the load does not increase if it is already cached. [It has been disabled] //5枚のサムネイルを何回繰り返すか。[無効になりました]
  29. 	// Currently repeated during mouse over. //現在、マウスオーバー中リピートされる。
  30. 	var imagezoomscale = 1.2; //Magnification of how much to enlarge the hop-up image //ホップアップした画像をどれくれい拡大するかの倍率
  31. 	var youtubezoomscale = 2.0; //Magnification of how much you want to enlarge the hop-up image for YouTube //ホップアップしたYouTube用画像をどれくらい拡大するかの倍率
  32. 	//If you want to change the following settings, look carefully 設定を変更したい場合はここまで 以下は分かる場合。
  33. 	var index = 0;
  34. 	var img = undefined; //# undefinedと比較しているところがあるので統一
  35. 	var youtubeimg = undefined;
  36. 	var srcimg = undefined;
  37. 	var idx = 0;
  38. 	var viewimg = '';
  39. 	var nownum = 0;
  40. 	var divid = '';
  41. 	var id;
  42. 	//# hover時のマウスポインターの位置サムネイルのサイズが小さい場合にプルプルするのを防止
  43. 	var clientX;
  44. 	var clientY;
  45.  
  46. 	//Easy to see at border line //文字に縁取りで見やすく
  47.         console.log('■■■DOMContentLoaded');
  48. 		$(".icon-bg").css('text-shadow',
  49. 			'1px 1px 2px black,-1px 1px 2px black,1px -1px 2px black,-1px -1px 2px black'
  50. 		);
  51.  
  52.  
  53. 	$('.field-item').hover(function(evt) { //# マウスポインターの位置を取得するためにevtを受け取る
  54. 		img = undefined; //# 最初に確実に初期化
  55. 		if (evt.clientX == clientX && evt.clientY == clientY) { //# 前回のマウスポインターと同じ位置の場合は実行しない。（プルプル防止）
  56. 			return;
  57. 		}
  58. 		// Specify what you want to hover. have not confirmed anything other than ".field-item". //ホバーしたい対象を指定する。「.field-item」以外は確認していません。
  59. 		// .field-item : Image part //画像部分
  60. 		// .views-column : Video list page //動画一覧ページ用
  61. 		// .col-xs-6 : User page //ユーザーページ用
  62. 		// .video-js : Video page //動画ページ用
  63. 		// Separate with ",". If you enter more than one, write ('.views-column,.col-xs-6,.video-js') //「,」で区切る。 複数入れると('.views-column,.col-xs-6,.video-js') と書く
  64.  
  65. 		// console.log('■■■');
  66.  
  67. 		//Get the id of the iwara video, if unsure, set to undefined. //iwara動画のidを取得、分からない場合はundefinedにする。
  68. 		//divid = $(this).children('.node-video').attr('id');
  69. 		divid = $(this).find('.node-video,.node-image').attr('id');
  70.  
  71. 		if (divid === undefined) {
  72. 			divid = $(this).attr('id');
  73.  
  74. 			if (divid === undefined) {
  75. 				divid = $(this).parents('.node-video,.node-image').attr('id');
  76.  
  77. 				if (divid === undefined) {
  78. 					img = undefined //
  79. 				} else {
  80. 					img = $(this).find("img").attr("src");
  81. 				}
  82. 			}
  83. 		}
  84.  
  85. 		srcimg = img;
  86.  
  87. 		if (img !== undefined) {
  88. 			if (img.match(/\/photos\//)) { //# 動画ページでサムネイル以外も大きくなってしまうので除外。リストページでも除外される
  89. 				img = undefined; //# 初期化して未実行状態であることを主張
  90. 				return;
  91. 			}
  92.  
  93.             if (img.match(/iwara.tv/)) {
  94.                 //20210824
  95.             }else{
  96.                 img = undefined; //# 初期化
  97.                 return;
  98. 			}
  99.  
  100. 			//Appearance change during mouse over //マウスオーバー中の見た目変更
  101. 			//# 実行することが決まったのでマウスポインターの位置を保持
  102. 			clientX = evt.clientX;
  103. 			clientY = evt.clientY;
  104.  
  105. 			var transform; //# ctrlキーのありなしで大きさと
  106. 			var transition; //# 拡大速度を変える
  107. 			if (evt.ctrlKey) { //# ctrlキーを押しながらの場合画面の中央に大きく表示
  108. 				var padding = 40;
  109.  
  110. 				var offset = $(this).offset();
  111. 				var itemWidth = $(this).width();
  112. 				var itemHeight = $(this).height();
  113.  
  114. 				var zoomWidth = window.innerWidth - padding * 2;
  115. 				var zoomHeight = window.innerHeight - padding * 2;
  116.  
  117. 				var scale = zoomWidth / itemWidth;
  118. 				if (zoomHeight < itemHeight * scale) {
  119. 					scale = zoomHeight / itemHeight;
  120. 				}
  121.  
  122. 				var moveX = (window.innerWidth - itemWidth) / 2 + $(window).scrollLeft() -
  123. 					offset.left;
  124. 				var moveY = (window.innerHeight - itemHeight) / 2 + $(window).scrollTop() -
  125. 					offset.top;
  126.  
  127. 				transform = 'translate(' + moveX + 'px,' + moveY + 'px) scale(' + scale +
  128. 					')';
  129. 				transition = '1.4s';
  130. 			} else {
  131. 				transform = 'scale(' + imagezoomscale + ')';
  132. 				transition = '0.3s';
  133. 			}
  134.  
  135. 			$(this).css('transform', transform);
  136. 			$(this).css('font-size', '0.3em'); //This has no meaning in the initial state. //これは初期状態の場合意味がありません。対象が含まれないので。
  137. 			$(this).css('z-index', '100');
  138. 			$(this).css('position', 'relative'); //go to front //前面にする
  139. 			$(this).css('background-color', 'rgba(255,255,255,0.9)');
  140. 			$(this).css('transition', transition);
  141.  
  142. 			//# iwaraの動画は /thumbnail-759754_0004.jpg? のようになっているので正規表現で引っかける。
  143. 			if (img.match(/\/thumbnail-(\d+)_(\d+).jpg/)) { //If img contains this string //imgにこの文字列を含む場合
  144. 				var videono = Number(RegExp.$1); //# 一つ目の括弧 759754
  145. 				nownum = Number(RegExp.$2); //# 二つ目の括弧 0004
  146.  
  147. 				//Effective if not sidebar. Through without executing sidebar. 除外処理 サイドバーの場合でなければ実効 サイドバーなら実行せずにスルー
  148. 				// if ( img.match('/sidebar_preview/') === null) {
  149. 				img = img.replace('/sidebar_preview/', '/thumbnail/'); //# サイドバーを除外していたようだがこのでの置換だけで何とかなりそうなので受け入れる
  150.  
  151. 				if (evt.ctrlKey) {
  152. 					img = img.replace('/styles/thumbnail/public/videos/', '/videos/'); //■高画質用; //# ctrlキーの場合は大きくするし毎回ではないので高画質にする。
  153. 				} else {
  154. 					img = img.replace('/thumbnail/', '/medium/');
  155. 				}
  156.  
  157. 				// nownum = img.indexOf('_000');
  158. 				// nownum = nownum + 4 ;
  159. 				// nownum = (img[nownum]) ;
  160. 				// nownum = nownum - 0 ;
  161.  
  162. 				// index = img.indexOf('.jpg');
  163.  
  164. 				// index = index - 1 ;
  165. 				// img = img.substring(0, index);
  166.  
  167. 				// act();
  168.  
  169. 				//# タイマー方式からイベント方式へ
  170. 				//# 付いていなかったら付けるというより、イベントを全部はずしてイベントを付ける
  171. 				$(this).find("img").off('load');
  172. 				$(this).find("img").on('load', act2);
  173.  
  174. 				if (792500 <= videono) { //# 一つずつ動画を確認したところ、このあたりから15個使えるようになっているようである。
  175. 					maxNownum = 15;
  176. 				} else {
  177. 					maxNownum = 5;
  178. 				}
  179. 				count = 0; //# イベント用変数初期化
  180. 				timer = 0;
  181. 				act2(); //# 初回は手動実行
  182. 				// } //# if ( img.match('/sidebar_preview/') === null) { の閉じ括弧
  183. 			} else {
  184. 				//When "_000" is not included in imgURL. This is for YouTube and images. //imgURLに「_000」 が入っていない場合 Youtubeや画像の場合はこれ
  185. 				//console.log('_000 not match. Youtube or image?');
  186.  
  187. 				//youtube or image //youtubeかimageか判定
  188. 				if ($('#' + divid).find('.field-type-image,.field-type-file').length) { //".Field-type-file" is for confirmation and has no meaning. //「.field-type-file」は確認用で意味は無い。
  189. 					//console.log('This is probably image これはたぶん画像です');
  190. 				} else {
  191. 					//console.log('This is probably Youtube これはたぶんYoutubeです');
  192. 					//Add a comment for Youtube. Add the "add_ani" class to the video id if it does not already exist. //Youtubeの場合はコメントを追加する。 動画id部分に「add_ani」クラスがまだないなら追加する。
  193. 					if (($('#' + divid).find('.add_ani').length) === 0) {
  194. 						$(this).append('<div class="add_ani"><p class="add_comment_youtube">YouTube</p><div>');
  195. 						$(this).find('p').css('text-shadow','1px 1px 2px black,-1px 1px 2px black,1px -1px 2px black,-1px -1px 2px black');
  196. 						$(this).find('p').css('position', 'relative');
  197. 						$(this).find('p').css('position', 'absolute');
  198. 						$(this).find('p').css('bottom', '-10px');
  199. 						$(this).find('p').css('left', '20px');
  200. 						$(this).find('p').css('color', 'white');
  201. 						$(this).find('p').css('font-size', '0.5em');
  202. 					}
  203. 					$(this).css('transform', 'scale(' + youtubezoomscale + ')'); //Scale size for youtube. //youtubeの場合のスケールサイズ。
  204.  
  205. 					//It doesn't have to be a YouTube URL, but I added it later. //YoutubeのURLにする しなくてもいいけどあとから追加した
  206. 					if (img.indexOf('/youtube/') >= 0) { //If it does not exist after searching, it becomes -1. //念のために検索 youtube以外ではないはずだが 存在しない場合は-1となる。
  207. 						youtubeimg = $(this).find("img").attr("src");
  208. 						//console.log('this is youtube. youtubeでした '+img);
  209. 						youtubeimg = img.replace('//i.iwara.tv/sites/default/files/styles/thumbnail/public/video_embed_field_thumbnails/youtube/' , 'https://img.youtube.com/vi/');
  210. 						youtubeimg = img.replace('//i.iwara.tv/sites/default/files/styles/sidebar_preview/public/video_embed_field_thumbnails/youtube/' , 'https://img.youtube.com/vi/');
  211. 						index = img.indexOf('.jpg');
  212. 						youtubeimg = img.substring(0, index);
  213. 						youtubeimg = img + '/hqdefault'; //youtube image size maxresdefault(1280x720) sddefault(640x480) hqdefault(480x360)
  214.  
  215. 						//Change youtube image URL //youtube用画像URLを変更
  216. 						viewimg = youtubeimg + ".jpg";
  217. 						$('#' + divid).find("img").attr("src", viewimg);
  218.  
  219. 					} else {}
  220.  
  221. 				}
  222.  
  223. 			}
  224. 		} else {
  225. 			// If you are reacting to something that is not the target image, this may respond, but it is old and unknown. 目的の画像ではないものに反応している場合はここが反応するかもしれない。
  226. 			// console.log('undefined NG!!!!');
  227.  
  228. 		}
  229.  
  230. 	}, function() {
  231. 		$(this).find("img").off('load'); //# イベント除去
  232.  
  233. 		//Restore appearance by releasing mouse over //マウスオーバー解除で見た目を戻す
  234. 		if (img !== undefined) { //If img is undefined, it has not been changed and will not be returned //imgがundefinedだったら変更していないので戻さない
  235. 			$(this).find("img").attr("src", srcimg);
  236. 			clearTimeout(id);
  237. 			$(this).css('transform', 'scale(1.0)');
  238. 			$(this).css('transition', '0.2s');
  239. 			$(this).css('transform', 'scale(1.0)');
  240. 			$(this).css('z-index', '0');
  241. 			$(this).css('img src', 'rgba(255,255,255,0.9)');
  242. 			$(this).css('font-size', '1.1em');
  243.  
  244. 			img = undefined; //# 初期化して終了したことを主張 戻したものをタイマー発火で変えられるのを防止
  245. 			srcimg = undefined;
  246. 		}
  247. 	});
  248.  
  249.     //actは無効
  250. 	function act() {
  251. 		var count = 0;
  252.  
  253. 		var countup = function() {
  254. 			count++
  255. 			//console.log('in act:'+divid);
  256.  
  257. 			if (nownum >= 5) {
  258. 				nownum = 0;
  259. 			} //If the thumbnail number is 5 or more, return to 0 and start from 1 //サムネ番号が5以上なら0に戻して1からにする
  260.  
  261. 			//change image URL //画像URLを変更
  262. 			idx = nownum + 1;
  263. 			//console.log('youtube img: '+(img.indexOf( '/youtube/' )));
  264. 			if (img.indexOf('youtube') == -1) { //If not youtube then execute //youtubeでなければ次を実行)
  265. 				viewimg = img + idx + ".jpg";
  266. 				$('#' + divid).find("img").attr("src", viewimg);
  267. 			} else {}
  268.  
  269. 			nownum++;
  270.  
  271. 			//var id = setTimeout(countup, 800);
  272. 			//if(count > ( 5 * animerepeat) - 1 ){
  273. 			// clearTimeout(id);　//id is specified by clearTimeout. //idをclearTimeoutで指定
  274. 			//}
  275. 			id = setTimeout(countup, 800);
  276. 		}
  277. 		countup();
  278. 	}
  279.  
  280. 	var count = 0; //# ロードカウンター
  281. 	var timer = 0; //# ストップウォッチ ロードにかかった時間を計る
  282. 	var maxNownum = undefined;
  283.  
  284. 	function act2() {
  285. 		if (nownum >= maxNownum) {
  286. 			nownum = 0;
  287. 		}
  288. 		nownum++;
  289.  
  290. 		var timeout = 800;
  291. 		//# 最大数未満の場合、ロードに時間がかかっていると思われるので、次回読み込みまでの時間を調整。
  292. 		//# 最大数以降の場合は、キャッシュに入っていると思われるので調整なし
  293. 		if (0 <= timer && count < maxNownum) {
  294. 			timeout = 800 - ((new Date()).getTime() - timer); //# getTime()はmilisecなので、今からポチった時間と引けばかかった時間がわかるのでそれの分引く。
  295. 			if (timeout < 0) {
  296. 				timeout = 0;
  297. 			}
  298. 		}
  299. 		count++;
  300.  
  301. 		id = setTimeout(function() {
  302. 			if (img !== undefined) { //# タイマー発火ですでにimgが初期化されていたら実行しない
  303. 				timer = (new Date()).getTime(); //# ストップウォッチ ポチッ
  304. 				viewimg = img.replace(/\/thumbnail-(\d+)_(\d+).jpg/, '/thumbnail-$1_' +
  305. 					('0000' + nownum).slice(-4) + '.jpg'); //# 変えているのは 0004 の部分だけ
  306. 				$('#' + divid).find("img").attr("src", viewimg); //# srcを指定したので、画像が読み込まれたときにloadイベントが発生し、act2が呼ばれる。
  307. 			}
  308. 		}, timeout);
  309. 	}
  310.  
  311. })();