ツイキャス録画コメント流し直しスクリプト

※今後もツイキャスのバージョンアップで動かなくなることが予測されるので、気づいたらりしゃるまでよろしっく！

※2020/10/13：（略（竜宮城行ってる間にまた動かなくなってたけど繁忙で対応できてなかっｔ）
（※2020年初夏ごろに公式のガッツリ仕様変更があったようなのでここでガッツリ対応した）
※2020/10/25：手抜かりがあったので修正（データ取得元の日付表示形式が従前と異なっていた件）
概要
・ツイキャス録画放送を視聴する際、再生時間に合わせてコメントを流し直してくれるスクリプトです。

仕組みや制作意図など
・ツイキャス録画放送を視聴するときにコメント表示がいろいろな意味で終わっているのをなんとかしたかった。
・一旦コメントをすべて非表示にし、再生時間に合わせて再表示していくという仕組み。

使い方
※PC用です、利用する場合は以下の操作をおこないます。
①録画放送のページに行く
②コンソールの表示
・Chromeの場合→Ctrl+Shift+J（マウス操作のみ：右クリック→「検証(I)」をクリック→「Console」をクリック）
・Firefoxの場合→Ctrl+Shift+K（マウス操作のみ：右上のメニュー「≡」クリック→「ウェブ開発」をクリック→「ウェブコンソール」をクリック）
③コードの実行
・パターンＡ：下記からコピーしたものをコンソールの入力欄にペーストしてEnter！
・パターンＢ※：コンソールの入力欄で「↑」キーを押してEnter！(※コンソールは過去に実行したコードの履歴を呼び出す機能があり、このプログラムコードを実行した直後などは、「↑」キーを押せばコピペすること無くコードを呼び出せます、つまりもうこのページに来る必要はないということでｓ)
④以上、あとは再生に合わせて勝手に動いてくれるはずです。コード実行後はコンソールの画面は即刻閉じて大丈夫です。

//COMMENT REPLAY2 v20210109ris 公式のアップデートでクラス名が変わったため対応
//v20201025b 日付不具合修正、公式の表示形式が従前と異なっていた件
//v20201013risリニューアル
//"拡張用に改修

if('fn' in $);else{ let elm = document.createElement('script'); elm.id='load_jquery'; console.log('load_jquery2.2.1')
  elm.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js'; document.head.appendChild(elm);
}

let is_live = (~document.location.href.indexOf("/movie/"))==0;  console.log('is_live:'+is_live);

var video_date = new Date(document.querySelector(is_live?'#update_timer_sub>time':'.tw-player-meta__status>span>time').getAttribute('datetime')) //20200115ris
var end_time_p = document.getElementsByClassName('vjs-duration-display')[0].textContent //"alts
var end_time = document.getElementsByClassName('vjs-duration-display')[0].textContent.replace(/\D/g, '')
var comment_table_height = 0;
var updateloop; var loopcount = 0;

//"全コメント取得-----------comment_load
let newStyle = document.createElement('style');newStyle.type = 'text/css';// 新しいstyle要素を作成
newStyle.innerText = '.tw-comment-history-item>div{display:inline}'// + '.tw-comment-history-item__content {position:relative}'// + '.tw-comment-history-item__info, .tw-comment-history-item__details {position:absolute;top:0px;}'// + '.tw-comment-history-item__info>div, {position:absolute;top:1em;}'// + '.tw-comment-history-item__info>div, .tw-comment-history-item__details {}'
document.head.appendChild(newStyle);

let elm = document.createElement('script');elm.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js';
document.head.appendChild(elm);

let count=1, $_comment_list_container;

let COMMENT_PAGE_URL = document.getElementsByClassName('tw-comment-list-view__more')[0].getAttribute('href')

let level=0; function add_level(){level++;console.log('level:'+level)}
function init(){ console.log('init')
  let tmp = document.createElement('script');tmp.innerText = 'after_jq($)';document.head.appendChild(tmp);//ぶっちゃけファイアフォックス用。スコープ
}

function after_jq(jq='no_one'){ if(jq!='no_one')$=jq;
  if('fn' in $ == false){ setTimeout(init,1000); console.log('fn in $ false:'+count++);return;}
  //"上記まででjqチェックのループ、下記は一度のみ実行
  $('.tw-comment-list-view__scroller').height(window.innerHeight-200); //"コメント一覧枠の高さを変更
  $('.tw-comment-list-view__scroller>div>div,.tw-comment-list-view__more').addClass("oldorigin").hide();//"既置のコメントのマーキングと非表示
  $('body').append('<section style="display:none"><div id="tmp_ch"></div><div id="tmp_chp"></div></section>');//"データプール場所設置
  //"コメントとページ番号読み込み、読み込みには時間がかかる。
  $('#tmp_ch').load(COMMENT_PAGE_URL+' .tw-comment-history',add_level)
  $('#tmp_chp').load(COMMENT_PAGE_URL+' .tw-pager',get_chp_urls) //20210109ris .paging->.tw-pager
  setTimeout(load_comment_proc,1000);
}setTimeout(after_jq,1000);

let ch_page_max=0, ch_page_num=0, chp_url=[], load_dot_loop;
function get_chp_urls(){
  $('#tmp_chp a').each((i,elm)=>{ chp_url[i]=elm.getAttribute('href') }); ch_page_max = ($('#tmp_chp a').length-1); add_level();
  const SHIELD_HTML ='<div id="shield" style="position:absolute;top:0;width:100%;height:100%;padding-top:50%;'
    +'background:rgba(255,255,255,0.5);font-size:72px;">コメント<br />ロード中<br /><span>0/'+ch_page_max+'</span></div>'
  $('.tw-player-page__comment__list').eq(0).append( SHIELD_HTML );
  load_dot_loop = setInterval(()=>$('#shield>span').text($('#shield>span').text()+'.'),1000)
}

function load_end_proc(){ console.log('load_end_proc')
  $('.tw-comment-list-view__scroller a').attr('target',"_blank");
  $('#shield').remove();
  $('#tmp_ch,#tmp_chp').remove();//★データプール、必要に応じて用復活、ひとまずは削除。
  InitProc();
}
//-----------/comment_load END

//"コメント取得後の初期処理
var subtime, liveTS, Inited=false; //"lts
function InitProc(){if(Inited==false) console.log('InitProc');else return alert('InitProc二重起動です☆');
  let hour,min,sec; //"alts
  let date_zero = new Date(0);
  let COMMENT_ITEM_query = is_live?'.tw-comment-item':'.tw-comment-history-item';
  let ITEM_DATE_query = '.tw-comment-list-view__scroller time';
  ITEM_DATE_query=(is_live)?'.tw-comment-item-date':'.tw-comment-history-item__info__date';
  $(ITEM_DATE_query).each(function() {
    let R210AfterVersion=true;
    let attr_num,STR_4_console;
    attr_num = $(this).attr('datetime')//"Sun, 18 Oct 2020 13:31:31 +0900"
    STR_4_console = attr_num//.split(' ')[4]
    subtime = new Date(new Date(attr_num) - video_date)//"差分時間量を算出
    if(subtime <= date_zero) subtime=date_zero;//放送開始時刻より前のコメントのタイムスタンプは開始時刻で上書き
    STR_4_console += ' subtime:'+subtime.toGMTString().split(' ')[4]
    hour = (subtime.getHours()+91+"").slice(-1)
    min = ("0"+subtime.getMinutes()).slice(-2)
    sec = ("0"+subtime.getSeconds()).slice(-2)
    attr_num = hour+min+sec;
    STR_4_console += ' attr_num:'+attr_num
    if(hour == "0") liveTS="";else liveTS=hour+":";
    liveTS += min+":"+sec
    if((subtime.getFullYear()+subtime.getMonth()+subtime.getDate() > 1971)
    || parseInt(attr_num) >= parseInt(end_time)){ attr_num = end_time; liveTS = end_time_p}

console.log(STR_4_console+' after:'+attr_num)
    //$(this).text(liveTS+' | '+$(this).text()) //"alts
    $(this).after('<div class="comment-time">'+liveTS+' | '+$(this).text()+'</div>')
    $(this).closest(COMMENT_ITEM_query).attr('data-subnum_ris',attr_num).removeAttr('style')//"tr->.tw-comment-item//20190827ris
      .addClass('hidden_comment_ris').hide('slow');
    $(this).text("")//"公式の日付表示を削除
  });
  updateloop = setInterval(function(){ comment_show_update() },2000);

add_cdelay_html(); //"20190320ris move from loadmorecomment
  $('body').append("<style>.comment-time{font-size:.75rem;color:#8d9296;}</style>")
}

//"再生時間に合わせてコメントを表示する処理
var play_time, lastelm, whiloop, whilhit, scomeach; //out from func
function comment_show_update(){
  $('.tmp_pop_ris').remove(); let le_array=[]; //"コメント読上げ用20190920ris
  whiloop = whilhit = scomeach = 0
  play_time = parseInt(  $('.vjs-current-time-display')[0].textContent.replace( /\D/g ,'')  )　//old:'.tw-video-time' //old:$(".jw-text-elapsed").text()
  delayproc(); //"20190310ris
  while(true) {whiloop++;
    lastelm = $(".hidden_comment_ris")[ $(".hidden_comment_ris").length-1 ]
    if( (parseInt($(lastelm).attr('data-subnum_ris'))) <= play_time )
    { whilhit++;
      $(lastelm).removeClass('hidden_comment_ris').addClass('showed_comment_ris').show('slow');
      le_array.push(lastelm) //"コメント読上げ用20190920ris

}else break;
  }
  //"コメント読上げ用20190920ris
  le_array.forEach((elm,i,ary) => {
    //"多すぎる場合はスキップ
    if(i<=(ary.length-8)) return console.log("skip node :"+i);
    $(".tw-comment-list-view__scroller").append(//"20200113ris
      "<div class='tmp_pop_ris' style='display:none'>"+$(elm).html()+"</div>")    
  });
  le_array=[]
  
  $(".showed_comment_ris").each(function(){
    if( parseInt($(this).attr('data-subnum_ris')) > play_time )
      $(this).removeClass('showed_comment_ris').addClass('hidden_comment_ris').hide('slow');
    else if(this.style.display=='none') $(this).show()
    else return false;scomeach++;
  })
  if(loopcount++ >= 10000) { clearInterval(updateloop); console.log('スクリプトを自主的に停止しました') }
  console.log('update comments.'+whilhit+'/'+whiloop+'+'+scomeach) 
}

//"ディレイ機能html追加
function add_cdelay_html(){//"20190310ris
  let addhtml ='<div id="cdelay_div" '
  +'title="コメントタイミングの調整\n（コメントがズレてるときなどに有用）"  style="position:absolute;background:white;opacity:0.75;left:50%">'
  +'<button type="button" onclick="'+"$('#dsec_ris').text(parseInt($('#dsec_ris').text())+1)"+'">+</button>'
  +'<button type="button" onclick="'+"$('#dsec_ris').text(parseInt($('#dsec_ris').text())-1)"+'">-</button>'
  +'<span id="dsec_ris">0</span> sec</div>'
  $('.tw-comment-post-operations').append(addhtml);//*change Insert place
  //$('.commentpost').append(addhtml);//~20190827ris

}

//"ディレイ処理
function delayproc(){//"20190310ris
  let tmp_ans = play_time%100+parseInt($('#dsec_ris').text());
  play_time += parseInt(tmp_ans/60)*100+tmp_ans%60-play_time%100;
  if(tmp_ans%60<0) play_time-=40;//  console.log(play_time)
}

※放送後間もない動画では上手く作動しません（具体的には１時間以上経過するまで）
※宣伝用リンク：https://syaru.playing.wiki/d/c_replay