☰

NicoNico Tsuu

ニコニコライフを快適に。

目前为 2019-06-16 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name        NicoNico Tsuu
  3. // @namespace   knoa.jp
  4. // @description ニコニコライフを快適に。
  5. // @include     https://www.nicovideo.jp/watch/*
  6. // @include     https://live2.nicovideo.jp/watch/*
  7. // @version     0.8.0
  8. // @grant       none
  9. // ==/UserScript==
  10.  
  11. (function(){
  12.   const SCRIPTNAME = 'NicoNicoTsuu';
  13.   const DEBUG = false;/*
  14. [update] 0.8.0
  15. タイムシフトや追っかけ視聴中に、その時点の時計の時刻を表示。リアルタイム視聴中に[←]で10秒巻き戻しが機能しなくなっていたので修正。
  16.  
  17. [bug]
  18. モニタサイズフルスクリーンからの復帰で崩れる
  19.   シアターとの競合が原因。無理やりfullscreen属性を削除して回る手もあるが。
  20.  
  21. [to do]
  22. URLスイッチ方式だわな
  23. 上下で音量もボタンハイライトを維持してあげつつ
  24. 全画面シアターStylishの廃止と統一
  25.   ウィンドウリサイズの不要処理を撤去
  26.   cssで5秒くらいで消える案内を出す？
  27.   いっそ拡張化のタイミングで。
  28.   動画も投稿？動画と生の2種類？しんどい！
  29. # 共通
  30.   設定/Help
  31.     流れるコメント
  32.       縁取り太さ？
  33.       マウスオーバー時の透過率比率
  34.       フォント指定
  35.     コメント一覧
  36.       幅
  37.       文字サイズ
  38.       NGスコア表示
  39.   当該ユーザーの発言一覧
  40.   連投規制されそうなとき、投稿ボタンにびっくりマーク
  41.   ログインボタン目立たないとか勝手にログアウトするとか
  42. # 生放送
  43.   経過時間に当時の時刻を付与(タイムシフト時)
  44.     番組内容にタイムスケジュールがあればリンク化
  45.   タイムシフト視聴するだのなんだのUI
  46.   リアルタイム視聴でだんだんリアルタイムから遅れていく現象
  47.     video.currentTime を監視してplaybackRateの調整で追いつきたい。
  48.     低遅延なら自動で追いつく？一瞬で追いつくので途中切れるが。
  49.     TSの30秒移動でいちいちつっかえるのは改善できないかな？
  50. # 動画
  51.   100%レイアウト([自動]時のみでよい)
  52.     右に[動画説明文/コメント一覧]しかないのか？
  53.   倍速再生にアクセスしやすく
  54.   先頭と次の動画のボタンいらない気が
  55.   NiconicoMyTheater継承のコメント・ショートカットキーUX
  56.   ヒートマップ
  57.   映像中央の再生マークに白い影
  58.  
  59. [to research]
  60. コメント非表示ボタンからマウス操作でも透明度変えたいな
  61. TSでシークバーにフォーカス時、一度だけ[↑][↓]のpreventDefaultが間に合わない
  62.   シークバーのマウスアップでデフォーカスすれば回避できるかも
  63. 一覧コメントマウスオーバー時のたまにスクロール止まらない件
  64. 一覧コメント右クリックでテキスト選択中は配慮してあげたい
  65. TSで1.5倍速とかDLが追いつかない
  66. NGスコアの可視化
  67. 生放送TSヒートマップ
  68. 横型番組表
  69.  
  70. (コメントJSONの例)
  71. chat: {
  72.   thread : 1649308673,
  73.   vpos : 4256100,
  74.   date : 1556109561,
  75.   date_usec : 880193,
  76.   mail : "184",
  77.   content : "/hb ifseetno 686",
  78.   premium : 3,
  79.   user_id : "SaMpLe",
  80.   anonymity : 1,
  81.   yourpost : 1,
  82.   locale : "ja-jp",
  83. }
  84.   */
  85.   if(window === top && console.time) console.time(SCRIPTNAME);
  86.   const API = {
  87.     LIVEMSG: 'wss://msg.live2.nicovideo.jp/',
  88.   };
  89.   const PREMIUM = {
  90.     USER:       1,/*プレミアム会員*/
  91.     USERAD:     2,/*広告*/
  92.     OPERATOR:   3,/*運営・システム*/
  93.     GUEST:      7,/*公式ゲストコメント(?)*/
  94.     CHANNEL8:   8,/*チャンネル会員(?)*/
  95.     CHANNEL9:   9,/*チャンネル会員(?)*/
  96.     CHANNEL24: 24,/*未入会(?)*/
  97.     CHANNEL25: 25,/*未入会(?)*/
  98.   };
  99.   const STROKEALPHA = '1.0';/*流れるコメントの縁取りのアルファ値(公式: 0.4)*/
  100.   const EASING = 'cubic-bezier(0,.75,.5,1)';/*主にナビゲーションのアニメーション用*/
  101.   const RETRY = 10;
  102.   let site = {
  103.     video: {
  104.       targets: {
  105. //        videoTitle: () => $('.HeaderContainer-videoTitle'),
  106. //        searchBox: () => $('.HeaderContainer-searchBox'),
  107.         videoDescription: () => $('.VideoDescription'),
  108.         videoDescriptionExpanderSwitch: () => $('.VideoDescriptionExpander-switch'),
  109.         commentRenderer: () => $('#CommentRenderer'),
  110.       },
  111.       get: {
  112.         videoDescriptionHtml: (videoDescription) => $('.VideoDescription-html'),
  113.       },
  114.     },
  115.     live: {
  116.       targets: {
  117.         leoPlayer: () => $('[class*="_leo-player_"]'),/*出没するplayer-statusの親*/
  118.         playerDisplayHeader: () => $('[class*="_player-display-header_"]'),/*運営コメント*/
  119.         playerDisplayScreen: () => $('[class*="_player-display-screen_"]'),
  120.         interactionLayerContent: () => $('[class*="_interaction-layer_"] > [data-content-visibility]'),/*アンケート*/
  121.         commentLayer: () => $('[class*="_comment-layer_"]'),
  122.         telopLayer: () => $('[class*="_telop-layer_"]'),
  123.         seekInformation: () => $('[class*="_seek-information_"]'),
  124.         playButton: () => $('[class*="_play-button_"]'),
  125.         muteButton: () => $('[class*="_mute-button_"]'),
  126.         timeStatusArea: () => $('[class*="_time-status-area_"]'),
  127.         commentVisibilityButton: () => $('[class*="_comment-button_"]'),
  128.         fullscreenButton: () => $('[class*="_fullscreen-button_"]'),
  129.         reloadButton: () => $('[class*="_reload-button_"]'),
  130.         commentTextBox: () => $('[class*="_comment-text-box_"]'),
  131.         commentsTable: () => $('[class*="_comment-panel_"] [class*="_table_"]'),
  132.         embeddedData: () => $('#embedded-data'),
  133.       },
  134.       get: {
  135.         video: () => $('[class*="_video-layer_"] video[src]'),
  136.         liveButton: () => $('[class*="_live-button_"]'),
  137.         announcement: (playerDisplayHeader) => playerDisplayHeader.querySelector('[class*="_announcement-renderer_"]'),
  138.         seekInformationTime: (seekInformation) => seekInformation.querySelector('span'),
  139.         elapsedTime: (timeStatusArea) => timeStatusArea.querySelector('span[class*="_elapsed-time_"] > span:first-child'),
  140.         content: (comment) => comment.querySelector('[class*="_comment-text_"]'),
  141.         time: (comment) => comment.querySelector('[class*="_comment-time_"]'),
  142.         props: (embeddedData) => JSON.parse(embeddedData.dataset.props),
  143.       },
  144.       addedNodes: {
  145.         comment: (node) => (node.dataset.commentType) ? node : null,
  146.       },
  147.       is: {
  148.         realtime: () => site.live.get.liveButton() ? true : false,
  149.         timeshift: () => site.live.get.liveButton() ? false : true,
  150.       },
  151.     },
  152.   };
  153.   let html, elements = {}, storages = {}, timers = {}, configs = {}
  154.   let props, chats = [], users = {}/*id検索用テーブル*/;
  155.   let core = {
  156.     initialize: function(){
  157.       html = document.documentElement;
  158.       html.classList.add(SCRIPTNAME);
  159.       core.listenWebSockets();
  160.       core.ready();
  161.       //core.panel.createPanels();
  162.     },
  163.     ready: function(){
  164.       core.getTargets(site.video.targets, RETRY).then(() => {
  165.         log("I'm ready for video.");
  166.         core.addStyle('styleVideo');
  167.       });
  168.       core.getTargets(site.live.targets, RETRY).then(() => {
  169.         log("I'm ready for live.");
  170.         core.addStyle('styleLive');
  171.         core.getProps();
  172.         core.listenUserActions();
  173.         core.listenCanvas();
  174.         core.listenEnquete();
  175.         core.observePlayerDisplayHeader();
  176.         core.appendLocalTime();
  177.         core.observeCommentTable();
  178.         core.appendIndicator();
  179.         core.indicateCommentOpacity(elements.commentLayer.dataset.opacity = Storage.read('opacity') || '1');
  180.       });
  181.     },
  182.     getProps: function(){
  183.       props = site.live.get.props(elements.embeddedData);
  184.       log(props);
  185.     },
  186.     appendIndicator: function(e){
  187.       elements.indicator = createElement(core.html.indicator());
  188.       elements.playerDisplayScreen.appendChild(elements.indicator);
  189.     },
  190.     indicate: function(indication, duration = 1000){
  191.       let indicator = elements.indicator;
  192.       if(typeof indication !== 'object') indication = document.createTextNode(indication);
  193.       while(indicator.firstChild) indicator.removeChild(indicator.firstChild);
  194.       indicator.appendChild(indication);
  195.       indicator.classList.add('active');
  196.       clearTimeout(timers.indicator);
  197.       timers.indicator = setTimeout(function(){
  198.         indicator.classList.remove('active');
  199.       }, duration);
  200.     },
  201.     indicateCommentOpacity: function(key){
  202.       let button = elements.commentVisibilityButton, indicator = elements.commentOpacityIndicator || createElement(core.html.opacity(key));
  203.       if(indicator.isConnected) button.replaceChild(elements.commentOpacityIndicator = createElement(core.html.opacity(key)), indicator);
  204.       else button.appendChild(elements.commentOpacityIndicator = indicator);
  205.     },
  206.     listenUserActions: function(){
  207.       /* プレイヤーをアクティブに */
  208.       const activatePlayer = function(){
  209.         document.activeElement.blur();
  210.         elements.playerDisplayScreen.click();
  211.       };
  212.       /* キーボード */
  213.       window.addEventListener('keydown', function(e){
  214.         let activeElement = document.activeElement;
  215.         /* テキスト入力中は反応しない */
  216.         if(['input', 'textarea'].includes(activeElement.localName) && activeElement.type !== 'range'){
  217.           if(e.key === 'Escape'){/*Escapeは必ずアンフォーカス*/
  218.             activeElement.blur();
  219.             e.stopPropagation();
  220.             return;
  221.           }
  222.           if(document.activeElement.value !== '') return;/*テキスト入力中*/
  223.           else if([/*テキスト空欄なら以下のキーは有効*/
  224.             'ArrowLeft',
  225.           ].includes(e.key) === false) return;
  226.         }
  227.         switch(true){
  228.           case(e.key === 'ArrowLeft'  && !e.altKey && e.shiftKey === true && !e.ctrlKey && !e.metaKey):
  229.           case(e.key === 'ArrowRight' && !e.altKey && e.shiftKey === true && !e.ctrlKey && !e.metaKey):
  230.             if(site.live.is.realtime()) return;
  231.             else{
  232.               let video = site.live.get.video();
  233.               video.currentTime += (e.key === 'ArrowLeft') ? -10 : +10;
  234.               e.stopPropagation();
  235.               e.preventDefault();/*ブラウザによるテキスト選択を回避*/
  236.             }
  237.             return;
  238.           /* 以下Alt/Shift/Ctrl/Metaキーが押されていたら反応しない */
  239.           case(e.altKey || e.shiftKey || e.ctrlKey || e.metaKey):
  240.             return;
  241.           case(e.key === ' '):
  242.             if(site.live.is.realtime()){
  243.               elements.commentTextBox.focus();
  244.               e.preventDefault();/*コメント欄にフォーカスさせるだけ*/
  245.             }else activatePlayer();
  246.             return;
  247.           case(e.key === 'ArrowLeft'):
  248.             if(site.live.is.timeshift()){
  249.               /* バッファ範囲内なら公式の重たい処理を回避する */
  250.               let video = site.live.get.video();
  251.               if(video.currentTime - video.buffered.start(0) >= 30){
  252.                 video.currentTime -= 30;
  253.                 e.stopPropagation();
  254.               }else activatePlayer();/*プレイヤーにフォーカスさせて公式の30秒巻き戻しを実行させる*/
  255.             }else{
  256.               const REWIND = 10, CATCHUP = 1.5;
  257.               let video = site.live.get.video(), rewinded = false, duration = 1000;
  258.               if(!video.paused && !video.rewinded && video.currentTime > REWIND/*少しだけ戻すこともできるが通信が安定しなくなるので*/){
  259.                 duration = (REWIND / (CATCHUP - 1))*1000;
  260.                 video.rewinded = rewinded = true;
  261.                 video.currentTime = video.currentTime - REWIND;
  262.                 video.playbackRate = CATCHUP;
  263.                 elements.playerDisplayScreen.dataset.rewinded = 'true';
  264.                 setTimeout(function(){
  265.                   video.rewinded = false;
  266.                   video.playbackRate = 1;
  267.                   delete elements.playerDisplayScreen.dataset.rewinded;
  268.                 }, duration);
  269.               }
  270.               core.indicate(createElement(core.html.rewind(rewinded)), duration);
  271.               e.stopPropagation();
  272.             }
  273.             return;
  274.           case(e.key === 'ArrowRight'):
  275.             if(site.live.is.timeshift()){
  276.               /* バッファ範囲内なら公式の重たい処理を回避する */
  277.               let video = site.live.get.video();
  278.               if(video.buffered.end(0) - video.currentTime >= 30){
  279.                 video.currentTime += 30;
  280.                 e.stopPropagation();
  281.               }else activatePlayer();/*プレイヤーにフォーカスさせて公式の30秒巻き戻しを実行させる*/
  282.             }
  283.             return;
  284.           case(e.key === 'ArrowUp'):
  285.           case(e.key === 'ArrowDown'):
  286.             activatePlayer();/*プレイヤーにフォーカスさせて公式の音量調整を実行させる*/
  287.             site.live.get.video().addEventListener('volumechange', function(e){
  288.               core.indicate(parseInt(e.target.volume * 100));
  289.             }, {once: true});
  290.             e.preventDefault();
  291.             return;
  292.           case(e.key === '1'):
  293.           case(e.key === '2'):
  294.           case(e.key === '3'):
  295.           case(e.key === '4'):
  296.           case(e.key === '5'):
  297.           case(e.key === '6'):
  298.           case(e.key === '7'):
  299.           case(e.key === '8'):
  300.           case(e.key === '9'):
  301.           case(e.key === '0'):
  302.             elements.commentLayer.dataset.opacity = e.key;
  303.             Storage.save('opacity', e.key);
  304.             core.indicate(e.key);
  305.             core.indicateCommentOpacity(e.key);
  306.             return;
  307.           case(e.key === 'm'):
  308.             elements.muteButton.click();
  309.             site.live.get.video().addEventListener('volumechange', function(e){
  310.               if(e.target.muted) core.indicate('mute');
  311.               else core.indicate(parseInt(e.target.volume * 100));
  312.             }, {once: true});
  313.             return;
  314.           case(e.key === 'f'):
  315.             elements.fullscreenButton.click();
  316.             return;
  317.           case(e.key === 'r'):
  318.             elements.reloadButton.click();
  319.             return;
  320.         }
  321.       }, {capture: true});
  322.       /* 再生・一時停止 */
  323.       /* 勝手に再生を再開してしまうので保留 */
  324.       //elements.playButton.addEventListener('click', function(e){
  325.       //  /* 公式プレイヤによる再読み込みを回避して軽快に動作させる */
  326.       //  let video = site.live.get.video();
  327.       //  if(video.paused) video.play();
  328.       //  else video.pause();
  329.       //  e.stopPropagation();
  330.       //}, true);
  331.       /* 出没するplayer-statusを監視 */
  332.       observe(elements.leoPlayer, function(records){
  333.         let commentsTable = elements.commentsTable = site.live.targets.commentsTable();
  334.         if(commentsTable === null) return;
  335.         commentsTable.dataset.selector = 'commentsTable';
  336.         core.observeCommentTable();/*commentsTableが復活するのでもう一度監視する*/
  337.       }, {childList: true});
  338.       /* フルスクリーン状態の変化 */
  339.       observe(html, function(records){
  340.         if(html.dataset.browserFullscreen) return;/*フルスクリーン化したときは何もしない*/
  341.         animate(window.scrollTo.bind(window, 0, 0));/*スクロール位置がずれるのを即補正*/
  342.       }, {attributes: true});
  343.       /* ウィンドウリサイズ */
  344.       window.addEventListener('resize', function(e){
  345.         /* ニコ生コメント一覧付き全画面シアターとの連携(なめらかスクロールをこちらで引き受ければ本来不要な処理のはず) */
  346.         clearTimeout(window.resizing), window.resizing = setTimeout(function(){
  347.           if(document.fullscreenElement) return;/*モニタフルスクリーン時は何もしない*/
  348.           elements.fullscreenButton.click();
  349.           elements.fullscreenButton.click();
  350.           window.resizing = null;
  351.         }, 250);/*リサイズ中の連続起動を避ける*/
  352.       });
  353.     },
  354.     listenWebSockets: function(){
  355.       /* 公式の通信内容を取得 */
  356.       window.WebSocket = new Proxy(WebSocket, {
  357.         construct(target, arguments){
  358.           const ws = new target(...arguments);
  359.           log(ws, arguments);
  360.           if(ws.url.startsWith(API.LIVEMSG)) ws.addEventListener('message', function(e){
  361.             let json = JSON.parse(e.data);
  362.             if(json.chat === undefined) return;
  363.             //if(json.chat.premium === 3) log(json.chat);
  364.             if(![1,2,3,undefined].includes(json.chat.premium)) log(json.chat);/*ユーザーと広告と運営以外のコメントログ*/
  365.             chats.push(json.chat);
  366.             /* ユーザー別コメント一覧 */
  367.             //if(users[json.chat.user_id] === undefined) users[json.chat.user_id] = [];
  368.             //users[json.chat.user_id].push(json.chat);
  369.           });
  370.           return ws;
  371.         }
  372.       });
  373.     },
  374.     listenCanvas: function(){
  375.       /* 公式のキャンバスコンテキストメソッドを書き換えて縁取りを見やすく */
  376.       let strokeText = CanvasRenderingContext2D.prototype.strokeText;
  377.       CanvasRenderingContext2D.prototype.strokeText = function(text, x, y, maxWidth){
  378.         //log(text, this.strokeStyle);
  379.         this.strokeStyle = this.strokeStyle.replace(/rgba\(([0-9]+),\s?([0-9]+),\s?([0-9]+),\s?([0-9.]+)\)/, `rgba($1,$2,$3,${STROKEALPHA})`);
  380.         return strokeText.call(this, text, x, y, maxWidth);
  381.       };
  382.     },
  383.     listenEnquete: function(){
  384.       /* アンケートの表示を捉える */
  385.       Notification.requestPermission();
  386.       let notification, title = props.program.title;
  387.       observe(elements.interactionLayerContent, function(records){
  388.         if(notification) notification.close();/*古い通知が出たままなら閉じる*/
  389.         if(elements.interactionLayerContent.dataset.contentVisibility === 'false') return;/*閉じたときは何もしない*/
  390.         notification = new Notification(title, {body: site.live.get.announcement(elements.playerDisplayHeader).textContent});
  391.         notification.addEventListener('click', function(e){
  392.           notification.close();
  393.         });
  394.       }, {attributes: true});
  395.     },
  396.     observePlayerDisplayHeader: function(){
  397.       let playerDisplayHeader = elements.playerDisplayHeader, commentLayer = elements.commentLayer;
  398.       observe(playerDisplayHeader, function(records){
  399.         //log(records);
  400.         if(playerDisplayHeader.children.length === 0){
  401.           delete playerDisplayHeader.dataset.extraLayout;
  402.           delete commentLayer.dataset.extraLayout;
  403.         }else{
  404.           let announcement = site.live.get.announcement(playerDisplayHeader);
  405.           if(announcement) setTimeout(function(){
  406.             playerDisplayHeader.dataset.fresh = 'true';
  407.             observe(announcement, function(rs){
  408.               playerDisplayHeader.dataset.fresh = announcement.dataset.fresh;/*同期させる*/
  409.             }, {attributes: true});
  410.           }, 250);/*フルスクリーン切り替えなどでラグが発生するので*/
  411.           playerDisplayHeader.dataset.extraLayout = 'showOperatorComment';
  412.           commentLayer.dataset.extraLayout = 'showOperatorComment';
  413.         }
  414.       });
  415.     },
  416.     appendLocalTime: function(){
  417.       /* seek */
  418.       let seekInformation = elements.seekInformation, seekInformationTime = site.live.get.seekInformationTime(seekInformation);
  419.       let localTime = createElement(core.html.localTime()), beginTime = props.program.beginTime;
  420.       localTime.textContent = seekInformationTime.textContent;
  421.       seekInformationTime.parentNode.insertBefore(localTime, seekInformationTime);
  422.       observe(seekInformationTime, function(records){
  423.         //log(records);
  424.         localTime.textContent = (new Date((beginTime + timeToSeconds(seekInformationTime.textContent))*1000)).toLocaleTimeString();
  425.       }, {characterData: true, subtree: true});
  426.       /* elapsed */
  427.       let timeStatusArea = elements.timeStatusArea, elapsedTime = site.live.get.elapsedTime(timeStatusArea);
  428.       let currentLocalTime = createElement(core.html.localTime());
  429.       currentLocalTime.textContent = elapsedTime.textContent;
  430.       elapsedTime.parentNode.insertBefore(currentLocalTime, elapsedTime);
  431.       observe(elapsedTime, function(records){
  432.         //log(records);
  433.         currentLocalTime.textContent = (new Date((beginTime + timeToSeconds(elapsedTime.textContent))*1000)).toLocaleTimeString();
  434.       }, {characterData: true, subtree: true});
  435.     },
  436.     observeCommentTable: function(){
  437.       let commentsTable = elements.commentsTable, isTimeshift =  site.live.is.timeshift();
  438.       if(commentsTable.observing) return;/*起こりえないけど重複を避ける*/
  439.       commentsTable.observing = true;
  440.       core.listenMouseOnCommentsTable();
  441.       /* 初期コメントに適用しつつ、追加コメントを監視する */
  442.       Array.from(commentsTable.children).forEach(c => core.modifyComment(c));
  443.       observe(commentsTable, function(records){
  444.         //log(records);
  445.         let removedComments = [], newComments = [];
  446.         for(let i = 0, record; record = records[i]; i++){/*あらかじめ削除要素を収集しておく*/
  447.           if(record.removedNodes.length) removedComments.push(record.removedNodes[0]);
  448.         }
  449.         for(let i = records.length - 1, record; record = records[i]; i--){/*chatとのマッチングを逆順に行うのでこちらも逆順で*/
  450.           if(record.addedNodes.length === 0) continue;
  451.           if(site.live.addedNodes.comment(record.addedNodes[0]) === null) continue;
  452.           let comment = record.addedNodes[0];
  453.           core.modifyComment(comment);
  454.           /* タイムシフトではユーザーコメント以外は毎回置換されるので(バグ？)、置換要素は新着コメント扱いしない */
  455.           if(isTimeshift){
  456.             if(['normal', 'trialWatch'].includes(comment.dataset.commentType) === false) continue;
  457.             if(removedComments.find(c => comment.textContent === c.textContent)) continue;
  458.             /*偶然一致するとnewCommentsから抜けてしまう!!*/
  459.           }
  460.           newComments.push(comment);
  461.         }
  462.         if(newComments.length) core.slideUpNewComments(newComments);
  463.       });
  464.     },
  465.     listenMouseOnCommentsTable: function(){
  466.       /* マウス操作中はスクロールでフォーカスが不意に外れてしまうのを抑制する */
  467.       /* (マウスオーバーで新着スクロールを止めて、マウスアウトで一気に復帰させる) */
  468.       let commentsTable = elements.commentsTable, parent = commentsTable.parentNode, scroll = 0;
  469.       commentsTable.addEventListener('mouseenter', function(e){
  470.         scroll = atMost(Math.round(parseFloat(getComputedStyle(commentsTable.lastElementChild).height)), parent.scrollTop);/*最初に少しスクロールさせると公式も空気を読んで新着コメントが来てもスクロールしなくなる*/
  471.         commentsTable.dataset.mouseenter = 'true';
  472.         parent.scrollTop -= scroll;
  473.         commentsTable.style.transform = `translateY(-${scroll}px)`;
  474.       });
  475.       commentsTable.addEventListener('mouseleave', function(e){
  476.         delete commentsTable.dataset.mouseenter;
  477.         let scrollTopMax = parent.scrollHeight - parent.clientHeight, distance = scrollTopMax - parent.scrollTop - scroll;
  478.         parent.scrollTop = scrollTopMax;
  479.         animate(function(){parent.scrollTop = scrollTopMax + scroll});/*スクロールによって移動した分をさらに調整*/
  480.         commentsTable.style.transform = ``;
  481.         parent.animate([ 
  482.           {transform: `translateY(${distance}px)`},
  483.           {transform: `translateY(0)`},
  484.         ], {duration: 125, easing: EASING});
  485.         commentsTable.lastElementChild.dataset.new = 'true';/*すでに追加されている1件分*/
  486.       });
  487.     },
  488.     modifyComment: function(commentNode){
  489.       const additionalVpos = (props.program.beginTime - props.program.openTime) * 100;
  490.       const toVpos = function(time){
  491.         let sign = (time[0] === '-') ? -1 : +1;
  492.         let p = time.split(':').map(d => parseFloat(d)), s = 100, m = 60*s, h = 60*m;
  493.         if(p[2] !== undefined) return additionalVpos + sign * (sign*p[0]*h + p[1]*m + p[2]*s);
  494.         if(p[1] !== undefined) return additionalVpos + sign * (sign*p[0]*m + p[1]*s);
  495.         if(p[0] !== undefined) return additionalVpos + sign * (sign*p[0]*s);
  496.       };
  497.       let contentNode = site.live.get.content(commentNode), timeNode = site.live.get.time(commentNode);
  498.       let commentType = commentNode.dataset.commentType, content = contentNode.textContent, vpos = toVpos(timeNode.textContent);
  499.       /* コメントに追加情報を与える */
  500.       for(let i = chats.length - 1, chat; chat = chats[i]; i--){
  501.         /* 時刻の一致を検証 */
  502.         if(chat.vpos < vpos - 60*100) break;/*60秒以上古いログは追わずにあきらめる(TSではchatsの時系列がかなりばらけている)*/
  503.         //if(!(vpos <= chat.vpos && chat.vpos <= vpos + 100)) continue;/*timeNodeの表示時刻とvposは必ずしも一致しない*/
  504.         /* 既存の一致を検証 */
  505.         if(chat.commentNode && chat.commentNode.isConnected) continue;
  506.         /* 内容の一致を検証 */
  507.         switch(commentType){
  508.           case('normal'):/*通常コメント*/
  509.           case('trialWatch'):/*有料番組のお試し視聴*/
  510.             if(chat.content !== content) continue;
  511.             break;
  512.           case('operator'):/*運営コメント*/
  513.             let operator = content.split(/\s/);
  514.             if(!operator.every(o => chat.content.includes(o))) continue;
  515.             break;
  516.           case('nicoad'):/*ニコニ広告*/
  517.             let nicoad = content.match(/(?:【.+?】)?(.+)さんが([0-9]+)pt/) || content.match(/(?:提供：)?(.+)さん（([0-9]+)pt）/);
  518.             if(nicoad === null) log('Unknown nicoad format:', content);
  519.             else if(!chat.content.includes(nicoad[1]) || !chat.content.includes(nicoad[2])) continue;/*厳密ではないけど十分*/
  520.             break;
  521.           case('programExtend'):/*放送枠の延長*/
  522.           case('ranking'):/*ランキング入り通知*/
  523.           case('cruise'):/*クルーズのお知らせ*/
  524.           case('quote'):/*クルーズさんのコメント*/
  525.           case('spi'):/*ニコニコ新市場*/
  526.             if(content.includes(chat.content)) continue;
  527.             if(chat.content.includes(content)) continue;
  528.             break;
  529.           default:
  530.             log('Unknown commentType found:', commentType, chats[i]);
  531.             continue;/*複数吐かれる時間内のログから当該chatを見つける*/
  532.         }
  533.         /* 晴れてペアとなるchatを見つけられたので */
  534.         chats[i].commentNode = commentNode;
  535.         switch(commentType){
  536.           case('normal'):
  537.           case('trialWatch'):
  538.             linkify(contentNode);/*URLをリンク化*/
  539.             commentNode.dataset.score = chat.score || 0;
  540.             commentNode.dataset.premium = chat.premium || 0;
  541.             commentNode.dataset.user_id = chat.user_id || '';
  542.             timeNode.parentNode.insertBefore(createElement(core.html.score(commentNode.dataset.score)), timeNode);/*NGスコア付与*/
  543.             //commentNode.addEventListener('click', core.showUserHistory.bind(commentNode), {capture: true});
  544.             break;
  545.           case('operator'):
  546.             let link = chat.content.match(/<a href="([^"]+)"/);
  547.             if(link === null) linkify(contentNode);/*URLをリンク化*/
  548.             else contentNode.innerHTML = `<a href="${link[1]}">${content}</a>`;
  549.             break;
  550.           case('nicoad'):
  551.             linkify(contentNode);/*URLをリンク化*/
  552.             break;
  553.           case('programExtend'):
  554.           case('ranking'):
  555.           case('cruise'):
  556.           case('quote'):
  557.           case('spi'):
  558.             break;
  559.           default:
  560.             break;
  561.         }
  562.         break;
  563.       }
  564.     },
  565.     slideUpNewComments: function(newComments){
  566.       if(elements.commentsTable.dataset.mouseenter) return;/*マウスオーバー中は処理しない*/
  567.       //連続起動しうるけど125ms以内には起こらないだろう
  568.       const DURATION = '125ms', EASING = 'ease';
  569.       let commentsTable = elements.commentsTable, parent = commentsTable.parentNode;
  570.       let scrollTopMax = parent.scrollHeight - parent.clientHeight;
  571.       let height = parseFloat(getComputedStyle(newComments[0]).height) * newComments.length;/*高さは共通のはずなので*/
  572.       for(let i = 0, comment; comment = newComments[i]; i++){
  573.         comment.dataset.new = 'true';
  574.       }
  575.       if(scrollTopMax === 0) return;/*放送開始時などコメントが少なくてスクロール不要*/
  576.       parent.scrollTop = scrollTopMax - 2;/* 本来は1でよいが、ブラウザのズーム倍率に対する保険 */
  577.       commentsTable.style.transform = `translateY(${height - 2}px)`;
  578.       animate(function(){
  579.         commentsTable.style.transition = `transform ${DURATION} ${EASING}`;
  580.         commentsTable.style.transform = `translateY(0)`;
  581.         commentsTable.addEventListener('transitionend', function(e){
  582.           commentsTable.style.transition = 'none';
  583.           animate(function(){parent.scrollTop = scrollTopMax + 1});
  584.         }, {once: true});
  585.       });
  586.     },
  587.     showUserHistory: function(e){
  588.       let commentNode = this, user_id = commentNode.dataset.user_id;
  589.       log(this, user_id, users[user_id]);
  590.     },
  591.     getTargets: function(targets, retry = 0){
  592.       const get = function(resolve, reject, retry){
  593.         for(let i = 0, keys = Object.keys(targets), key; key = keys[i]; i++){
  594.           let selected = targets[key]();
  595.           if(selected){
  596.             if(selected.length) selected.forEach((s) => s.dataset.selector = key);
  597.             else selected.dataset.selector = key;
  598.             elements[key] = selected;
  599.           }else{
  600.             if(--retry < 0) return reject(log(`Not found: ${key}, I give up.`));
  601.             log(`Not found: ${key}, retrying... (left ${retry})`);
  602.             return setTimeout(get, 1000, resolve, reject, retry);
  603.           }
  604.         }
  605.         resolve();
  606.       };
  607.       return new Promise(function(resolve, reject){
  608.         get(resolve, reject, retry);
  609.       });
  610.     },
  611.     addStyle: function(name = 'style'){
  612.       let style = createElement(core.html[name]());
  613.       document.head.appendChild(style);
  614.       if(elements[name] && elements[name].isConnected) document.head.removeChild(elements[name]);
  615.       elements[name] = style;
  616.     },
  617.     html: {
  618.       indicator: () => `<div id="${SCRIPTNAME}-indicator"></div>`,
  619.       rewind: (rewinded) => `
  620.         <svg id="rewind" ${rewinded ? 'class ="rewinded"' : ''} viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.4" class="PlayerSeekBackwardButton-icon">
  621.           <path d="M18.3 29A38 38 0 1 1 23 76.7a4 4 0 0 0-5.7 0l-2.8 2.8a4 4 0 0 0 0 5.7A50 50 0 1 0 8 22.8l-2-1.2a4 4 0 0 0-6 3.5v18.2a4 4 0 0 0 6 3.5L21.7 38a4 4 0 0 0 .2-7L18.3 29zM42 66a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V40h-2a2 2 0 0 1-2-2v-4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v32zm32 0a2 2 0 0 1-2 2H52a2 2 0 0 1-2-2V34c0-1.1.9-2 2-2h20a2 2 0 0 1 2 2v32zm-8-26h-8v20h8V40z"></path>
  622.         </svg>
  623.       `,
  624.       localTime: () => `<span class="${SCRIPTNAME}-localTime"></span>`,
  625.       opacity: (key) => `<span id="comment-opacity-indicator" data-opacity="${key}">${key}</span>`,
  626.       score: (score) => `<span class="___comment-score___${SCRIPTNAME}">${score}</span>`,
  627.       styleVideo: () => `
  628.         <style type="text/css">
  629.  
  630.         </style>
  631.       `,
  632.       styleLive: () => `
  633.         <style type="text/css">
  634.           /* nicoHighlightColor: ${configs.nicoHighlightColor     = 'rgba(0,128,255,1)'} */
  635.           /* panel_zIndex:       ${configs.panel_zIndex           = 101} */
  636.           /* 流れるコメント透明度 */
  637.           [data-selector="commentLayer"],
  638.           [data-selector="telopLayer"]{
  639.             transition: opacity 125ms;
  640.           }
  641.           [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="1"]{opacity: ${9/36 + ((9*(9+1))/2)/60}}/*比例25:75三角数(max:45)の重みがベスト*/
  642.           [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="2"]{opacity: ${8/36 + ((8*(8+1))/2)/60}}
  643.           [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="3"]{opacity: ${7/36 + ((7*(7+1))/2)/60}}
  644.           [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="4"]{opacity: ${6/36 + ((6*(6+1))/2)/60}}
  645.           [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="5"]{opacity: ${5/36 + ((5*(5+1))/2)/60}}
  646.           [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="6"]{opacity: ${4/36 + ((4*(4+1))/2)/60}}
  647.           [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="7"]{opacity: ${3/36 + ((3*(3+1))/2)/60}}
  648.           [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="8"]{opacity: ${2/36 + ((2*(2+1))/2)/60}}
  649.           [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="9"]{opacity: ${1/36 + ((1*(1+1))/2)/60}}
  650.           [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="0"]{opacity: ${0/36 + ((0*(0+1))/2)/60}}
  651.           [data-selector="playerDisplayScreen"]:hover [data-selector="commentLayer"][data-opacity="1"]{opacity: ${(9/36 + ((9*(9+1))/2)/60)/4}}
  652.           [data-selector="playerDisplayScreen"]:hover [data-selector="commentLayer"][data-opacity="2"]{opacity: ${(8/36 + ((8*(8+1))/2)/60)/4}}
  653.           [data-selector="playerDisplayScreen"]:hover [data-selector="commentLayer"][data-opacity="3"]{opacity: ${(7/36 + ((7*(7+1))/2)/60)/4}}
  654.           [data-selector="playerDisplayScreen"]:hover [data-selector="commentLayer"][data-opacity="4"]{opacity: ${(6/36 + ((6*(6+1))/2)/60)/4}}
  655.           [data-selector="playerDisplayScreen"]:hover [data-selector="commentLayer"][data-opacity="5"]{opacity: ${(5/36 + ((5*(5+1))/2)/60)/4}}
  656.           [data-selector="playerDisplayScreen"]:hover [data-selector="commentLayer"][data-opacity="6"]{opacity: ${(4/36 + ((4*(4+1))/2)/60)/4}}
  657.           [data-selector="playerDisplayScreen"]:hover [data-selector="commentLayer"][data-opacity="7"]{opacity: ${(3/36 + ((3*(3+1))/2)/60)/4}}
  658.           [data-selector="playerDisplayScreen"]:hover [data-selector="commentLayer"][data-opacity="8"]{opacity: ${(2/36 + ((2*(2+1))/2)/60)/4}}
  659.           [data-selector="playerDisplayScreen"]:hover [data-selector="commentLayer"][data-opacity="9"]{opacity: ${(1/36 + ((1*(1+1))/2)/60)/4}}
  660.           [data-selector="playerDisplayScreen"]:hover [data-selector="commentLayer"][data-opacity="0"]{opacity: ${(0/36 + ((0*(0+1))/2)/60)/4}}
  661.           [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="1"] ~ [data-selector="telopLayer"]{opacity: ${9/36 + ((9*(9+1))/2)/60}}
  662.           [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="2"] ~ [data-selector="telopLayer"]{opacity: ${8/36 + ((8*(8+1))/2)/60}}
  663.           [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="3"] ~ [data-selector="telopLayer"]{opacity: ${7/36 + ((7*(7+1))/2)/60}}
  664.           [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="4"] ~ [data-selector="telopLayer"]{opacity: ${6/36 + ((6*(6+1))/2)/60}}
  665.           [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="5"] ~ [data-selector="telopLayer"]{opacity: ${5/36 + ((5*(5+1))/2)/60}}
  666.           [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="6"] ~ [data-selector="telopLayer"]{opacity: ${4/36 + ((4*(4+1))/2)/60}}
  667.           [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="7"] ~ [data-selector="telopLayer"]{opacity: ${3/36 + ((3*(3+1))/2)/60}}
  668.           [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="8"] ~ [data-selector="telopLayer"]{opacity: ${2/36 + ((2*(2+1))/2)/60}}
  669.           [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="9"] ~ [data-selector="telopLayer"]{opacity: ${1/36 + ((1*(1+1))/2)/60}}
  670.           [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="0"] ~ [data-selector="telopLayer"]{opacity: ${0/36 + ((0*(0+1))/2)/60}}
  671.           [data-selector="playerDisplayScreen"]:hover [data-selector="commentLayer"][data-opacity="1"] ~ [data-selector="telopLayer"]{opacity: ${(9/36 + ((9*(9+1))/2)/60)/4}}
  672.           [data-selector="playerDisplayScreen"]:hover [data-selector="commentLayer"][data-opacity="2"] ~ [data-selector="telopLayer"]{opacity: ${(8/36 + ((8*(8+1))/2)/60)/4}}
  673.           [data-selector="playerDisplayScreen"]:hover [data-selector="commentLayer"][data-opacity="3"] ~ [data-selector="telopLayer"]{opacity: ${(7/36 + ((7*(7+1))/2)/60)/4}}
  674.           [data-selector="playerDisplayScreen"]:hover [data-selector="commentLayer"][data-opacity="4"] ~ [data-selector="telopLayer"]{opacity: ${(6/36 + ((6*(6+1))/2)/60)/4}}
  675.           [data-selector="playerDisplayScreen"]:hover [data-selector="commentLayer"][data-opacity="5"] ~ [data-selector="telopLayer"]{opacity: ${(5/36 + ((5*(5+1))/2)/60)/4}}
  676.           [data-selector="playerDisplayScreen"]:hover [data-selector="commentLayer"][data-opacity="6"] ~ [data-selector="telopLayer"]{opacity: ${(4/36 + ((4*(4+1))/2)/60)/4}}
  677.           [data-selector="playerDisplayScreen"]:hover [data-selector="commentLayer"][data-opacity="7"] ~ [data-selector="telopLayer"]{opacity: ${(3/36 + ((3*(3+1))/2)/60)/4}}
  678.           [data-selector="playerDisplayScreen"]:hover [data-selector="commentLayer"][data-opacity="8"] ~ [data-selector="telopLayer"]{opacity: ${(2/36 + ((2*(2+1))/2)/60)/4}}
  679.           [data-selector="playerDisplayScreen"]:hover [data-selector="commentLayer"][data-opacity="9"] ~ [data-selector="telopLayer"]{opacity: ${(1/36 + ((1*(1+1))/2)/60)/4}}
  680.           [data-selector="playerDisplayScreen"]:hover [data-selector="commentLayer"][data-opacity="0"] ~ [data-selector="telopLayer"]{opacity: ${(0/36 + ((0*(0+1))/2)/60)/4}}
  681.           /* 10秒戻り中の流れるコメント非表示 */
  682.           [data-selector="playerDisplayScreen"] #comment-layer-container{
  683.             transition: opacity 1000ms;
  684.             opacity: 1;
  685.           }
  686.           [data-selector="playerDisplayScreen"][data-rewinded="true"] #comment-layer-container{
  687.             opacity: 0;
  688.           }
  689.           /* インジケータ */
  690.           #${SCRIPTNAME}-indicator{
  691.             position: absolute;
  692.             bottom: 0;
  693.             right: 0;
  694.             padding: 1vh 1vw;
  695.             font-size: 25vh;
  696.             color: ${configs.nicoHighlightColor};
  697.             filter: drop-shadow(0 0 2.5px rgba(0,0,0,.75));
  698.             opacity: 0;
  699.             z-index: ${configs.panel_zIndex};
  700.             pointer-events: none;
  701.             transition: opacity 250ms;
  702.           }
  703.           #${SCRIPTNAME}-indicator.active{
  704.             opacity: .75;
  705.           }
  706.           #${SCRIPTNAME}-indicator #rewind{
  707.             fill: rgba(195,195,195,.5);
  708.             width: 25vh;
  709.             height: 25vh;
  710.           }
  711.           #${SCRIPTNAME}-indicator #rewind.rewinded{
  712.             fill: ${configs.nicoHighlightColor};
  713.           }
  714.           #${SCRIPTNAME}-indicator.active #rewind{
  715.             animation: ${SCRIPTNAME}-blink 2s step-end infinite;
  716.           }
  717.           @keyframes ${SCRIPTNAME}-blink{
  718.             50%{opacity: 0}
  719.           }
  720.           /* コメント透明度インジケータ */
  721.           [data-selector="commentVisibilityButton"] #comment-opacity-indicator{
  722.             position: absolute;
  723.             top: 0;
  724.             left: 0;
  725.             width: 100%;
  726.             height: 100%;
  727.             line-height: 32px;/*職人的調整*/
  728.             font-weight: bold;
  729.             color: black;
  730.             z-index: 1;
  731.           }
  732.           [data-selector="commentVisibilityButton"] #comment-opacity-indicator[data-opacity="1"]{opacity: ${9/9}}/*視認性を重視*/
  733.           [data-selector="commentVisibilityButton"] #comment-opacity-indicator[data-opacity="2"]{opacity: ${8/9}}
  734.           [data-selector="commentVisibilityButton"] #comment-opacity-indicator[data-opacity="3"]{opacity: ${7/9}}
  735.           [data-selector="commentVisibilityButton"] #comment-opacity-indicator[data-opacity="4"]{opacity: ${6/9}}
  736.           [data-selector="commentVisibilityButton"] #comment-opacity-indicator[data-opacity="5"]{opacity: ${5/9}}
  737.           [data-selector="commentVisibilityButton"] #comment-opacity-indicator[data-opacity="6"]{opacity: ${4/9}}
  738.           [data-selector="commentVisibilityButton"] #comment-opacity-indicator[data-opacity="7"]{opacity: ${3/9}}
  739.           [data-selector="commentVisibilityButton"] #comment-opacity-indicator[data-opacity="8"]{opacity: ${2/9}}
  740.           [data-selector="commentVisibilityButton"] #comment-opacity-indicator[data-opacity="9"]{opacity: ${1/9}}
  741.           [data-selector="commentVisibilityButton"] #comment-opacity-indicator[data-opacity="0"]{opacity: ${0/9}}
  742.           [data-selector="commentVisibilityButton"][data-toggle-state="false"] #comment-opacity-indicator{visibility: hidden}
  743.           /* 当日時刻の追加 */
  744.           [data-selector="seekInformation"]{
  745.             display: flex;
  746.             flex-direction: column;
  747.           }
  748.           [data-selector="seekInformation"] .${SCRIPTNAME}-localTime{
  749.             color: #808080;
  750.             font-size: 12px;
  751.             margin-bottom: .25em;
  752.           }
  753.           [data-selector="timeStatusArea"] button[data-live-status="live"] ~ div .${SCRIPTNAME}-localTime{
  754.             display: none;
  755.           }
  756.           [data-selector="timeStatusArea"] .${SCRIPTNAME}-localTime{
  757.             color: #808080;
  758.             font-size: 12px !important;
  759.             margin: 0 .5em;
  760.           }
  761.           [data-selector="timeStatusArea"] .${SCRIPTNAME}-localTime + span{
  762.             font-size: 16px;/*少し大きく(公式12px)*/
  763.             line-height: 24px;
  764.           }
  765.           [data-browser-fullscreen] [data-selector="timeStatusArea"] .${SCRIPTNAME}-localTime + span{
  766.             font-size: 18px;/*少し大きく(公式12px)*/
  767.           }
  768.           [data-selector="timeStatusArea"] .${SCRIPTNAME}-localTime + span + span/*時刻の区切り*/{
  769.             margin: 0 .5em;/*少し間隔を広げて見やすく*/
  770.           }
  771.           /* 新着コメント停止状態 */
  772.           [class*="_comment-panel_"]:hover::after{
  773.             content: " ";
  774.             position: absolute;
  775.             bottom: 0;
  776.             width: 100%;
  777.             height: 4px;
  778.             animation: ${SCRIPTNAME}-stop 1s linear infinite alternate;
  779.           }
  780.           @keyframes ${SCRIPTNAME}-stop{
  781.             0%{
  782.               background: ${configs.nicoHighlightColor};
  783.             }
  784.             100%{
  785.               background: transparent;
  786.             }
  787.           }
  788.           /* ユーザー発言一覧 */
  789.           dummy [class*="_comment-panel_"] [class*="_table-row_"][data-comment-type="normal"]{
  790.             cursor: pointer;
  791.           }
  792.           /* CSSによる簡易なめらかスクロールの打ち消し */
  793.           [class*="_comment-panel_"] [class*="_table-row_"]:first-child{
  794.             margin-bottom: 0 !important;
  795.             opacity: 1 !important;
  796.             pointer-events: auto !important;
  797.           }
  798.           /* 新着コメントのハイライト */
  799.           [class*="_comment-panel_"] [class*="_table-row_"][data-new="true"]{
  800.             animation: ${SCRIPTNAME}-new 6s linear 1;
  801.           }
  802.           @keyframes ${SCRIPTNAME}-new{
  803.             0%{
  804.               background: rgba(255,255,255,.250);
  805.             }
  806.             100%{
  807.               background: rgba(255,255,255,.000);
  808.             }
  809.           }
  810.           /* NGスコア */
  811.           [class*="_comment-panel_"] [class*="_table-row_"] [class="___comment-score___${SCRIPTNAME}"]{
  812.             visibility: hidden;
  813.             margin: 0 .25em;
  814.           }
  815.           [class*="_comment-panel_"] [class*="_table-row_"]:hover [class="___comment-score___${SCRIPTNAME}"]{
  816.             visibility: visible;
  817.             color: #808080;
  818.           }
  819.         </style>
  820.       `,
  821.     },
  822.   };
  823.   const setTimeout = window.setTimeout, clearTimeout = window.clearTimeout, setInterval = window.setInterval, clearInterval = window.clearInterval, requestAnimationFrame = window.requestAnimationFrame;
  824.   const getComputedStyle = window.getComputedStyle, fetch = window.fetch;
  825.   if(!('isConnected' in Node.prototype)) Object.defineProperty(Node.prototype, 'isConnected', {get: function(){return document.contains(this)}});
  826.   if(!('fullscreenElement' in document)) Object.defineProperty(document, 'fullscreenElement', {get: function(){return document.mozFullScreenElement}});
  827.   class Storage{
  828.     static key(key){
  829.       return (SCRIPTNAME) ? (SCRIPTNAME + '-' + key) : key;
  830.     }
  831.     static save(key, value, expire = null){
  832.       key = Storage.key(key);
  833.       localStorage[key] = JSON.stringify({
  834.         value: value,
  835.         saved: Date.now(),
  836.         expire: expire,
  837.       });
  838.     }
  839.     static read(key){
  840.       key = Storage.key(key);
  841.       if(localStorage[key] === undefined) return undefined;
  842.       let data = JSON.parse(localStorage[key]);
  843.       if(data.value === undefined) return data;
  844.       if(data.expire === undefined) return data;
  845.       if(data.expire === null) return data.value;
  846.       if(data.expire < Date.now()) return localStorage.removeItem(key);
  847.       return data.value;
  848.     }
  849.     static delete(key){
  850.       key = Storage.key(key);
  851.       delete localStorage.removeItem(key);
  852.     }
  853.     static saved(key){
  854.       key = Storage.key(key);
  855.       if(localStorage[key] === undefined) return undefined;
  856.       let data = JSON.parse(localStorage[key]);
  857.       if(data.saved) return data.saved;
  858.       else return undefined;
  859.     }
  860.   }
  861.   const $ = function(s){return document.querySelector(s)};
  862.   const $$ = function(s){return document.querySelectorAll(s)};
  863.   const animate = function(callback, ...params){requestAnimationFrame(() => requestAnimationFrame(() => callback(...params)))};
  864.   const wait = function(ms){return new Promise((resolve) => setTimeout(resolve, ms))};
  865.   const createElement = function(html = '<span></span>'){
  866.     let outer = document.createElement('div');
  867.     outer.innerHTML = html;
  868.     return outer.firstElementChild;
  869.   };
  870.   const observe = function(element, callback, options = {childList: true, attributes: false, characterData: false, subtree: false}){
  871.     let observer = new MutationObserver(callback.bind(element));
  872.     observer.observe(element, options);
  873.     return observer;
  874.   };
  875.   const linkify = function(node){
  876.     split(node);
  877.     function split(n){
  878.       if(['style', 'script', 'a'].includes(n.localName)) return;
  879.       if(n.nodeType === Node.TEXT_NODE){
  880.         let pos = n.data.search(linkify.RE);
  881.         if(0 <= pos){
  882.           let target = n.splitText(pos);/*pos直前までのnとpos以降のtargetに分割*/
  883.           let rest = target.splitText(RegExp.lastMatch.length);/*targetと続くrestに分割*/
  884.           /* この時点でn(処理済み),target(リンクテキスト),rest(次に処理)の3つに分割されている */
  885.           let a = document.createElement('a');
  886.           let match = target.data.match(linkify.RE);
  887.           switch(true){
  888.             case(match[1] !== undefined): a.href = (match[1][0] == 'h') ? match[1] : 'h' + match[1]; break;
  889.             case(match[2] !== undefined): a.href = 'http://' + match[2]; break;
  890.             case(match[3] !== undefined): a.href = 'mailto:' + match[4] + '@' + match[5]; break;
  891.           }
  892.           a.appendChild(target);/*textContent*/
  893.           rest.parentNode.insertBefore(a, rest);
  894.         }
  895.       }else{
  896.         for(let i = 0; n.childNodes[i]; i++) split(n.childNodes[i]);/*回しながらchildNodesは増えていく*/
  897.       }
  898.     }
  899.   };
  900.   linkify.RE = new RegExp([
  901.     '(h?ttps?://[-\\w_./~*%$@:;,!?&=+#]+[-\\w_/~*%$@:;&=+#])',/*通常のURL*/
  902.     '((?:\\w+\\.)+\\w+/[-\\w_./~*%$@:;,!?&=+#]*)',/*http://の省略形*/
  903.     '((\\w[-\\w_.]+)(?:@|＠)(\\w[-\\w_.]+\\w))',/*メールアドレス*/
  904.   ].join('|'));
  905.   const secondsToTime = function(seconds){
  906.     let floor = Math.floor, zero = (s) => s.toString().padStart(2, '0');
  907.     let h = floor(seconds/3600), m = floor(seconds/60)%60, s = floor(seconds%60);
  908.     if(h) return h + '時間' + zero(m) + '分' + zero(s) + '秒';
  909.     if(m) return m + '分' + zero(s) + '秒';
  910.     if(s) return s + '秒';
  911.   };
  912.   const timeToSeconds = function(time){
  913.     let parts = time.split(':').map(p => parseFloat(p));
  914.     switch(parts.length){
  915.       case(1): return parts[0];
  916.       case(2): return parts[0]*60 + parts[1];
  917.       case(3): return parts[0]*60*60 + parts[1]*60 + parts[2];
  918.       default: return 0;
  919.     }
  920.   };
  921.   const atLeast = function(min, b){
  922.     return Math.max(min, b);
  923.   };
  924.   const atMost = function(a, max){
  925.     return Math.min(a, max);
  926.   };
  927.   const between = function(min, b, max){
  928.     return Math.min(Math.max(min, b), max);
  929.   };
  930.   const log = function(){
  931.     if(!DEBUG) return;
  932.     let l = log.last = log.now || new Date(), n = log.now = new Date();
  933.     let error = new Error(), line = log.format.getLine(error), callers = log.format.getCallers(error);
  934.     //console.log(error.stack);
  935.     console.log(
  936.       SCRIPTNAME + ':',
  937.       /* 00:00:00.000  */ n.toLocaleTimeString() + '.' + n.getTime().toString().slice(-3),
  938.       /* +0.000s       */ '+' + ((n-l)/1000).toFixed(3) + 's',
  939.       /* :00           */ ':' + line,
  940.       /* caller.caller */ (callers[2] ? callers[2] + '() => ' : '') +
  941.       /* caller        */ (callers[1] || '') + '()',
  942.       ...arguments
  943.     );
  944.   };
  945.   log.formats = [{
  946.       name: 'Firefox Scratchpad',
  947.       detector: /MARKER@Scratchpad/,
  948.       getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1],
  949.       getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
  950.     }, {
  951.       name: 'Firefox Console',
  952.       detector: /MARKER@debugger/,
  953.       getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1],
  954.       getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
  955.     }, {
  956.       name: 'Firefox Greasemonkey 3',
  957.       detector: /\/gm_scripts\//,
  958.       getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1],
  959.       getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
  960.     }, {
  961.       name: 'Firefox Greasemonkey 4+',
  962.       detector: /MARKER@user-script:/,
  963.       getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1] - 500,
  964.       getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
  965.     }, {
  966.       name: 'Firefox Tampermonkey',
  967.       detector: /MARKER@moz-extension:/,
  968.       getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1] - 6,
  969.       getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
  970.     }, {
  971.       name: 'Chrome Console',
  972.       detector: /at MARKER \(<anonymous>/,
  973.       getLine: (e) => e.stack.split('\n')[2].match(/([0-9]+):[0-9]+\)$/)[1],
  974.       getCallers: (e) => e.stack.match(/[^ ]+(?= \(<anonymous>)/gm),
  975.     }, {
  976.       name: 'Chrome Tampermonkey',
  977.       detector: /at MARKER \((userscript\.html|chrome-extension:)/,
  978.       getLine: (e) => e.stack.split('\n')[2].match(/([0-9]+):[0-9]+\)$/)[1] - 6,
  979.       getCallers: (e) => e.stack.match(/[^ ]+(?= \((userscript\.html|chrome-extension:))/gm),
  980.     }, {
  981.       name: 'Edge Console',
  982.       detector: /at MARKER \(eval/,
  983.       getLine: (e) => e.stack.split('\n')[2].match(/([0-9]+):[0-9]+\)$/)[1],
  984.       getCallers: (e) => e.stack.match(/[^ ]+(?= \(eval)/gm),
  985.     }, {
  986.       name: 'Edge Tampermonkey',
  987.       detector: /at MARKER \(Function/,
  988.       getLine: (e) => e.stack.split('\n')[2].match(/([0-9]+):[0-9]+\)$/)[1] - 4,
  989.       getCallers: (e) => e.stack.match(/[^ ]+(?= \(Function)/gm),
  990.     }, {
  991.       name: 'Safari',
  992.       detector: /^MARKER$/m,
  993.       getLine: (e) => 0,/*e.lineが用意されているが最終呼び出し位置のみ*/
  994.       getCallers: (e) => e.stack.split('\n'),
  995.     }, {
  996.       name: 'Default',
  997.       detector: /./,
  998.       getLine: (e) => 0,
  999.       getCallers: (e) => [],
  1000.     }];
  1001.   log.format = log.formats.find(function MARKER(f){
  1002.     if(!f.detector.test(new Error().stack)) return false;
  1003.     //console.log('////', f.name, 'wants', 85, '\n' + new Error().stack);
  1004.     return true;
  1005.   });
  1006.   const time = function(label){
  1007.     if(!DEBUG) return;
  1008.     const BAR = '|', TOTAL = 100;
  1009.     switch(true){
  1010.       case(label === undefined):/* time() to output total */
  1011.         let total = 0;
  1012.         log('Total:');
  1013.         Object.keys(time.records).forEach((label) => total += time.records[label].total);
  1014.         Object.keys(time.records).forEach((label) => {
  1015.           console.log(
  1016.             BAR.repeat((time.records[label].total / total) * TOTAL),
  1017.             label + ':',
  1018.             (time.records[label].total).toFixed(3) + 'ms',
  1019.             '(' + time.records[label].count + ')',
  1020.           );
  1021.         });
  1022.         time.records = {};
  1023.         break;
  1024.       case(!time.records[label]):/* time('label') to create and start the record */
  1025.         time.records[label] = {count: 0, from: performance.now(), total: 0};
  1026.         break;
  1027.       case(time.records[label].from === null):/* time('label') to re-start the lap */
  1028.         time.records[label].from = performance.now();
  1029.         break;
  1030.       case(0 < time.records[label].from):/* time('label') to add lap time to the record */
  1031.         time.records[label].total += performance.now() - time.records[label].from;
  1032.         time.records[label].from = null;
  1033.         time.records[label].count += 1;
  1034.         break;
  1035.     }
  1036.   };
  1037.   time.records = {};
  1038.   core.initialize();
  1039.   if(window === top && console.timeEnd) console.timeEnd(SCRIPTNAME);
  1040. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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