Animate Iwara video thumbnail when mouse over. to make iwara easier to see.
Tính đến
// ==UserScript==
// @name Iwara Animation Script
// @name:ja Iwara Animation Script
// @namespace http://tampermonkey.net/
// @version 0.11
// @description Animate Iwara video thumbnail when mouse over. to make iwara easier to see.
// @description:ja Iwaraの動画サムネをマウスオーバーしたときにサムネをアニメーションさせる。ちょっと見やすくする。
// @author iwayen
// @match *://*.iwara.tv/*
// @grant none
// @require http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
// ==/UserScript==
/*
Description: //説明:
1.Makes the text on the thumbnail easier to see when loading the page. //ページ読み込み時にサムネイル上の文字を見やすく縁取りをする。
2.Zoom thumbnails on mouse over. //マウスオーバーしたときにサムネイルをズームする。
3.Then animate the thumbnail. //そのときサムネイルをアニメーションする。
About having problems: //不具合について：
1.Some videos cannot be switched because their thumbnails are 403. //一部の動画ではサムネイルが403のため切り替えできない。
2.It may take about 700ms to read an image and it may fail. //画像読み取りに700ms近くかかるため失敗することがある。
3.Size issue fixed. //サイズの問題が修正されました。
4.If the switching time is too early, the image cannot be downloaded. Once cached, they can be displayed faster, but are not yet supported. //切り替えの時間が早すぎると画像をダウンロードできない。一度キャッシュしていれば早くしても見えるがまだ対応していない。
*/
(function() {
//Set here if you want to change the settings 設定を変更したい場合はここで
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. //5枚のサムネイルを何回繰り返すか。増やしてもキャッシュ済みなら負荷が増えるわけではない。
var imagezoomscale = 1.2; //Magnification of how much to enlarge the hop-up image //ホップアップした画像をどれくれい拡大するかの倍率
var youtubezoomscale = 2.0; //Magnification of how much you want to enlarge the hop-up image for YouTube //ホップアップしたYouTube用画像をどれくらい拡大するかの倍率
//If you want to change the following settings, look carefully 設定を変更したい場合はここまで
var index = 0;
var img = '';
var srcimg = '';
var idx = 0;
var viewimg = '';
var nownum = 0;
var divid = '';
//Easy to see at border line //文字に縁取りで見やすく
window.onload = function() {
$(".icon-bg").css('text-shadow', '1px 1px 2px black,-1px 1px 2px black,1px -1px 2px black,-1px -1px 2px black');
};
$('.field-item').hover(function() {
divid = $(this).find('.node-video,.node-image').attr('id');
if (divid === undefined) {
divid = $(this).attr('id');
if (divid === undefined) {
divid = $(this).parents('.node-video,.node-image').attr('id');
if (divid === undefined) {
//console.log("id not found - idが見つからない");
img = undefined //■処理したくないのでこうした
}
}
}
img = $(this).find("img").attr("src");
srcimg = img;
if (img !== undefined) {
//Appearance change during mouse over //マウスオーバー中の見た目変更
$(this).css('transform', 'scale('+imagezoomscale+')');
$(this).css('font-size', '0.3em');
$(this).css('z-index', '100');
$(this).css('position', 'relative'); //go to front 前面にする
$(this).css('background-color', 'rgba(255,255,255,0.9)');
$(this).css('transition', '0.3s');
if ( img.match('_000')) { //If img contains this string //imgにこの文字列を含む場合
//Effective if not sidebar. Through without executing sidebar. 除外処理 サイドバーの場合でなければ実効 サイドバーなら実行せずにスルー
if ( img.match('/sidebar_preview/') === null) {
img = img.replace('/thumbnail/' , '/medium/');
//img = img.replace('/styles/thumbnail/public/videos/' , '/videos/'); //■高画質用は時間がかかりそうなので却下
nownum = img.indexOf('_000');
nownum = nownum + 4 ;
nownum = (img[nownum]) ;
nownum = nownum - 0 ;
index = img.indexOf('.jpg');
var defaultimage = img ;
index = index - 1 ;
img = img.substring(0, index);
act();
}
}
else {
if($('#'+divid).find('.field-type-image,.field-type-file').length){
}else{
if(($('#'+divid).find('.add_ani').length)==0){
$(this).append('<div class="add_ani"><p class="add_comment_youtube">YouTube</p><div>');
$(this).find('p').css ('text-shadow', '1px 1px 2px black,-1px 1px 2px black,1px -1px 2px black,-1px -1px 2px black');
$(this).find('p').css ('position', 'relative');
$(this).find('p').css ('position', 'absolute');
$(this).find('p').css ('bottom', '-10px');
$(this).find('p').css ('left', '20px');
$(this).find('p').css ('color', 'white');
$(this).find('p').css ('font-size', '0.5em');
}
$(this).css ('transform', 'scale('+youtubezoomscale+')');
if(img.indexOf( '/youtube/' ) >= 0){ //■念のために検索 youtube以外ではないはず 存在しない場合は-1
img = $(this).find("img").attr("src");
img = img.replace('//i.iwara.tv/sites/default/files/styles/thumbnail/public/video_embed_field_thumbnails/youtube/' , 'https://img.youtube.com/vi/');
img = img.replace('//i.iwara.tv/sites/default/files/styles/sidebar_preview/public/video_embed_field_thumbnails/youtube/' , 'https://img.youtube.com/vi/'); //■サイドバーの場合はこっちになる
index = img.indexOf('.jpg');
img = img.substring(0, index);
img = img + '/hqdefault'; //youtube image size maxresdefault(1280x720) sddefault(640x480) hqdefault(480x360)
viewimg = img + ".jpg";
$('#'+divid).find("img").attr("src", viewimg);
}else{
}
}
}
}
else {
}
}, function() {
//Restore appearance by releasing mouse over //マウスオーバー解除で見た目を戻す
if (img !== undefined) {
$(this).find("img").attr("src", srcimg);
srcimg = '';
$(this).css('transform', 'scale(1.0)');
$(this).css('transition', '0.2s');
$(this).css('transform', 'scale(1.0)');
$(this).css('z-index', '0');
$(this).css('img src', 'rgba(255,255,255,0.9)');
$(this).css('font-size', '1.1em');
}
});
function act() {
var count = 0;
var countup = function(){
if (srcimg == '') { return; }
count++
if (nownum >= 5) { nownum = 0; }
idx = nownum + 1;
if(img.indexOf( 'youtube' ) == -1){
viewimg = img + idx + ".jpg";
$('#'+divid).find("img").attr("src", viewimg);
}else{
}
nownum++;
var id = setTimeout(countup, 800);
if(count > ( 5 * animerepeat) - 1 ){
clearTimeout(id);
}
}
countup();
}
})();