☰

NicoNico Tsuu

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

  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. // @run-at      document-start
  8. // @version     0.13.0
  9. // @grant       none
  10. // ==/UserScript==
  11.  
  12. (function(){
  13.   const SCRIPTID = 'NicoNicoTsuu';
  14.   const SCRIPTNAME = 'NicoNico Tsuu';
  15.   const DEBUG = false;/*
  16. [update]
  17. CPU負荷を軽減しました。ほか、微修正。
  18.  
  19. [bug]
  20. トップからリンクをたどって生放送に行くと音量調節できない又はインジケータが表示されない？
  21. アンケート通知が機能しないことがある？
  22. URLリンク効いてないことがある？
  23. プレミアムでリアルタイムの生放送が0:00から始まる問題があるらしい！
  24.   @0ne2_______
  25.  
  26. [to do]
  27. ニコニコ公式のCPU使用率なんとかしたい;特にChrome
  28. 英語と中国語をいちおう追加してみる？
  29.  
  30. 全画面シアタースタイルの不要部分を削減
  31.   なめらかスクロール => done
  32.  
  33. 上下で音量
  34.   端数スタートでも10区切りに調整
  35.   10以下の時は1単位に
  36. # 共通
  37.   設定/Help
  38.     流れるコメント
  39.       縁取り太さ？
  40.       マウスオーバー時の透過率比率
  41.       フォント指定
  42.     コメント一覧
  43.       幅
  44.       文字サイズ
  45.       NGスコア表示
  46.   当該ユーザーの発言一覧
  47.   連投規制されそうなとき、投稿ボタンにびっくりマーク
  48.   ログインボタン目立たないとか勝手にログアウトするとか
  49.   sm/lv単位で既視聴管理(設定でサムネopacityとリンク色？)
  50. # 生放送
  51.   番組内容にタイムスケジュールがあればリンク化
  52.   タイムシフト視聴するだのなんだのUI
  53.   リアルタイム視聴でだんだんリアルタイムから遅れていく現象
  54.     video.currentTime を監視してplaybackRateの調整で追いつきたい。
  55.     低遅延なら自動で追いつく？一瞬で追いつくので途中切れるが。
  56.   [←]によるバッファ移動時にコメ一覧のハイライトくらい機能させたいが
  57. # 動画
  58.   100%レイアウト([自動]時のみでよい)
  59.     右に[動画説明文/コメント一覧]しかないのか？
  60.   倍速再生にアクセスしやすく
  61.   先頭と次の動画のボタンいらない気が
  62.   NiconicoMyTheater継承のコメント・ショートカットキーUX
  63.   ヒートマップ
  64.   映像中央の再生マークに白い影
  65.   コメ投稿アンドゥ
  66.   ランキング改変
  67.     スタイル
  68.     集計期間の記憶
  69.     新着ハイライト
  70. ログインクッキー有効期限延長機能？
  71.   アクセスのたびに30日延長とかなら許されるんじゃないの？
  72.   2019/8/03現在
  73.   2029/7/12期限 nicosid
  74.   2029/8/31期限 user_session
  75.  
  76. [to research]
  77. 音声読み上げちゃんとの「動画」での連携？
  78.   https://greasyfork.org/ja/scripts/382231-niconico-tsuu/discussions/62587
  79. スクロールバーと100vw問題(全画面シアター側の課題か) => スクロールバー非表示で解決したけど
  80. コメントの色は動画背景に対する明度加算なんてことはできないのかな？
  81. 同一コメ判定に「ひとつ前のコメのtextContent」が使えないか？偶然2連続する可能性は低いだろう。
  82. TSでシークバーにフォーカス時、一度だけ[↑][↓]のpreventDefaultが間に合わない
  83.   シークバーのマウスアップでデフォーカスすれば回避できるかも
  84. 一覧コメントマウスオーバー時のたまにスクロール止まらない件
  85. 一覧コメント右クリックでテキスト選択中は配慮してあげたい
  86. TSで1.5倍速とかDLが追いつかない
  87. NGスコアの可視化
  88. 生放送TSヒートマップ
  89. 横型番組表
  90.  
  91. [memo]
  92. 再生速度の変更アップデート！1.5以上はプレミアムのみ！
  93. コメントJSONの例
  94.   chat: {
  95.     thread : 1649308673,
  96.     vpos : 4256100,
  97.     date : 1556109561,
  98.     date_usec : 880193,
  99.     mail : "184",
  100.     content : "/hb ifseetno 686",
  101.     premium : 3,
  102.     user_id : "SaMpLe",
  103.     anonymity : 1,
  104.     yourpost : 1,
  105.     locale : "ja-jp",
  106.   }
  107. 公式ショートカットキー
  108.   動画   https://qa.nicovideo.jp/faq/show/287?site_domain=default
  109.   生放送 https://qa.nicovideo.jp/faq/show/14851?site_domain=default
  110.   */
  111.   if(window === top && console.time) console.time(SCRIPTID);
  112.   const MS = 1, SECOND = 1000*MS, MINUTE = 60*SECOND, HOUR = 60*MINUTE, DAY = 24*HOUR, WEEK = 7*DAY, MONTH = 30*DAY, YEAR = 365*DAY;
  113.   const API = {
  114.     LIVEMSG: /^wss:\/\/msgd\.live2\.nicovideo\.jp\/websocket/,
  115.   };
  116.   const PREMIUM = {
  117.     USER:       1,/*プレミアム会員*/
  118.     USERAD:     2,/*広告*/
  119.     OPERATOR:   3,/*運営・システム*/
  120.     GUEST:      7,/*公式ゲストコメント(?)*/
  121.     CHANNEL8:   8,/*チャンネル会員(?)*/
  122.     CHANNEL9:   9,/*チャンネル会員(?)*/
  123.     CHANNEL24: 24,/*未入会(?)*/
  124.     CHANNEL25: 25,/*未入会(?)*/
  125.   };
  126.   const STROKEALPHA = '1.0';/*流れるコメントの縁取りのアルファ値(公式: 0.4)*/
  127.   const EASING = 'cubic-bezier(0,.75,.5,1)';/*主にナビゲーションのアニメーション用*/
  128.   let sites = {
  129.     video: {
  130.       targets: {
  131.         videoTitle: () => $('.HeaderContainer-videoTitle'),
  132.         searchBox: () => $('.HeaderContainer-searchBox'),
  133.         videoDescription: () => $('.VideoDescription'),
  134.         videoDescriptionExpanderSwitch: () => $('.VideoDescriptionExpander-switch'),
  135.         commentRenderer: () => $('#CommentRenderer'),
  136.       },
  137.       get: {
  138.         videoDescriptionHtml: (videoDescription) => $('.VideoDescription-html'),
  139.       },
  140.     },
  141.     live: {
  142.       targets: {
  143.         leoPlayer: () => $('[class*="_leo-player_"]'),/*出没するplayer-statusの親*/
  144.         playerDisplayHeader: () => $('[class*="_player-display-header_"]'),/*運営コメント*/
  145.         playerDisplayScreen: () => $('[class*="_player-display-screen_"]'),
  146.         interactionLayerContent: () => $('[class*="_interaction-layer_"] > [data-content-visibility]'),/*アンケート*/
  147.         commentLayer: () => $('[class*="_comment-layer_"]'),
  148.         telopLayer: () => $('[class*="_telop-layer_"]'),
  149.         seekInformation: () => $('[class*="_seek-information_"]'),
  150.         //playButton: () => $('[class*="_play-button_"]'),/*現在不使用;プレミアムにしか出現しない; site.get 内と要調整*/
  151.         muteButton: () => $('[class*="_mute-button_"]'),
  152.         timeStatusArea: () => $('[class*="_time-status-area_"]'),
  153.         elapsedTime: () => $('span[class*="_elapsed-time_"] > span:first-child'),
  154.         commentVisibilityButton: () => $('[class*="_comment-button_"]'),
  155.         fullscreenButton: () => $('[class*="_fullscreen-button_"]'),
  156.         reloadButton: () => $('[class*="_reload-button_"]'),
  157.         commentTextBox: () => $('[class*="_comment-text-box_"]'),
  158.         commentsTable: () => $('[class*="_comment-panel_"] [class*="_table_"]'),
  159.         embeddedData: () => $('#embedded-data'),
  160.       },
  161.       get: {
  162.         playButton: () => $('[class*="_play-button_"]'),/*ブラウザが自動再生をくい止めた場合に出現*/
  163.         video: () => $('[class*="_video-layer_"] video[src]'),
  164.         liveButton: () => $('[class*="_live-button_"]'),
  165.         announcement: (playerDisplayHeader) => playerDisplayHeader.querySelector('[class*="_announcement-renderer_"]'),
  166.         seekInformationTime: (seekInformation) => seekInformation.querySelector('span'),
  167.         content: (comment) => comment.querySelector('[class*="_comment-text_"]'),
  168.         time: (comment) => comment.querySelector('[class*="_comment-time_"]'),
  169.         props: (embeddedData) => JSON.parse(embeddedData.dataset.props),
  170.       },
  171.       addedNodes: {
  172.         comment: (node) => (node.dataset.commentType) ? node : null,
  173.       },
  174.       is: {
  175.         realtime:  () => {let b = sites.live.get.liveButton(); return (b && b.dataset.liveStatus === 'live')  ? true : false},
  176.         chasing:   () => {let b = sites.live.get.liveButton(); return (b && b.dataset.liveStatus === 'chase') ? true : false},
  177.         timeshift: () => sites.live.get.liveButton() ? false : true,
  178.       },
  179.     },
  180.   };
  181.   let elements = {}, storages = {}, timers = {}, configs = {}, site;
  182.   let props, chats = [], users = {}/*id検索用テーブル*/;
  183.   let core = {
  184.     initialize: function(){
  185.       elements.html = document.documentElement;
  186.       elements.html.classList.add(SCRIPTID);
  187.       switch(true){
  188.         case(location.href.match(/^https:\/\/www\.nicovideo\.jp\/watch\/[a-z]{2}[0-9]+/) !== null):
  189.           site = sites.video;
  190.           core.readyForVideo();
  191.           core.addStyle('styleVideo');
  192.           break;
  193.         case(location.href.match(/^https:\/\/live[0-9]?\.nicovideo\.jp\/watch\/lv[0-9]+/) !== null):
  194.           site = sites.live;
  195.           core.listenWebSockets();
  196.           core.readyForLive();
  197.           core.addStyle('styleLive');
  198.           core.addStyle('styleLiveFullscreen');
  199.           break;
  200.         default:
  201.           log('Bye.');
  202.           break;
  203.       }
  204.       //core.panel.createPanels();
  205.     },
  206.     readyForVideo: function(){
  207.       core.getTargets(site.targets).then(() => {
  208.         log("I'm ready for video.");
  209.       }).catch(e => {
  210.         console.error(`${SCRIPTID}:${e.lineNumber} ${e.name}: ${e.message}`);
  211.       });
  212.     },
  213.     readyForLive: function(){
  214.       /* ビデオの自動再生が許可されていない場合に対応(ただしユーザーアクションによるクリックじゃないので弾かれることが多い;厳密な条件は未調査) */
  215.       core.getTarget(site.get.playButton).then((playButton) => {
  216.         playButton.click();
  217.       });
  218.       /* 60秒以内にユーザーに押してほしい */
  219.       core.getTargets(site.targets, 60).then(() => {
  220.         log("I'm ready for live.");
  221.         core.getProps();
  222.         core.listenUserActions();
  223.         core.listenCanvas();
  224.         core.listenEnquete();
  225.         core.observePlayerDisplayHeader();
  226.         core.appendLocalTime();
  227.         core.observeCommentTable();
  228.         core.appendIndicator();
  229.         core.indicateCommentOpacity(elements.commentLayer.dataset.opacity = Storage.read('opacity') || '1');
  230.         core.appendCommentOpacitySelector();
  231.         /* スタイルを適用した状態でレイアウトを合わせる */
  232.         elements.fullscreenButton.click();
  233.         elements.fullscreenButton.click();
  234.       }).catch(e => {
  235.         console.error(`${SCRIPTID}:${e.lineNumber} ${e.name}: ${e.message}`);
  236.       });
  237.     },
  238.     getProps: function(){
  239.       props = site.get.props(elements.embeddedData);
  240.       log(props);
  241.     },
  242.     appendIndicator: function(e){
  243.       elements.indicator = createElement(html.indicator());
  244.       elements.playerDisplayScreen.appendChild(elements.indicator);
  245.     },
  246.     indicate: function(indication, duration = 1000){
  247.       let indicator = elements.indicator;
  248.       if(typeof indication !== 'object') indication = document.createTextNode(indication);
  249.       while(indicator.firstChild) indicator.removeChild(indicator.firstChild);
  250.       indicator.appendChild(indication);
  251.       indicator.classList.add('active');
  252.       clearTimeout(timers.indicator);
  253.       timers.indicator = setTimeout(function(){
  254.         indicator.classList.remove('active');
  255.       }, duration);
  256.     },
  257.     setCommentOpacity: function(key){
  258.       elements.commentLayer.dataset.opacity = key;
  259.       Storage.save('opacity', key);
  260.       core.indicate(key);
  261.       core.indicateCommentOpacity(key);
  262.     },
  263.     indicateCommentOpacity: function(key){
  264. log();
  265.       let button = elements.commentVisibilityButton, indicator = elements.commentOpacityIndicator || createElement(html.commentOpacityIndicator(key));
  266.       if(indicator.isConnected) button.replaceChild(elements.commentOpacityIndicator = createElement(html.commentOpacityIndicator(key)), indicator);
  267.       else button.appendChild(elements.commentOpacityIndicator = indicator);
  268. log(button.isConnected, indicator, indicator.isConnected);
  269. log(button.innerHTML);
  270.     },
  271.     appendCommentOpacitySelector: function(){
  272.       let button = elements.commentVisibilityButton, selector = createElement(html.commentOpacitySelector());
  273.       button.after(selector);
  274.       selector.addEventListener('mouseover', function(e){
  275.         if(e.target.dataset.opacity === undefined) return;
  276.         /*マウスを動かすだけでプレビューさせる*/
  277.         elements.commentLayer.dataset.opacity = e.target.dataset.opacity;
  278.         core.indicate(e.target.dataset.opacity);
  279.       });
  280.       selector.addEventListener('click', function(e){
  281.         if(e.target.dataset.opacity === undefined) return;
  282.         core.setCommentOpacity(e.target.dataset.opacity);/*クリックしたら上書き保存*/
  283.         elements.indicator.animate([ 
  284.           {opacity: 1, transform: 'scale(1)'},
  285.           {opacity: 0, transform: 'scale(2)'},
  286.         ], {duration: 1250, easing: EASING});
  287.       });
  288.       selector.addEventListener('mouseout', function(e){
  289.         core.setCommentOpacity(Storage.read('opacity'));/*クリックされていなければ初期値に戻る*/
  290.       });
  291.     },
  292.     listenUserActions: function(){
  293.       /* プレイヤーをアクティブに */
  294.       const activatePlayer = function(){
  295.         document.activeElement.blur();
  296.         elements.playerDisplayScreen.click();
  297.       };
  298.       /* キーボード */
  299.       window.addEventListener('keydown', function(e){
  300.         let activeElement = document.activeElement;
  301.         /* テキスト入力中は反応しない */
  302.         if(['input', 'textarea'].includes(activeElement.localName) && activeElement.type !== 'range'){
  303.           if(e.key === 'Escape'){/*Escapeは必ずアンフォーカス*/
  304.             activeElement.blur();
  305.             e.stopPropagation();
  306.             return;
  307.           }
  308.           if(activeElement.value !== '') return;/*テキスト入力中*/
  309.           else if([/*テキスト空欄なら以下のキーは有効*/
  310.             'ArrowLeft',
  311.             'ArrowUp',
  312.             'ArrowDown',
  313.             ' ',
  314.           ].includes(e.key) === false) return;
  315.         }
  316.         switch(true){
  317.           case(e.key === 'ArrowLeft'  && !e.altKey && e.shiftKey === true && !e.ctrlKey && !e.metaKey):
  318.           case(e.key === 'ArrowRight' && !e.altKey && e.shiftKey === true && !e.ctrlKey && !e.metaKey):
  319.             if(site.is.realtime()) return;
  320.             else{
  321.               let video = site.get.video();
  322.               video.currentTime += (e.key === 'ArrowLeft') ? -10 : +10;
  323.               e.stopPropagation();
  324.               e.preventDefault();/*ブラウザによるテキスト選択を回避*/
  325.             }
  326.             return;
  327.           /* 以下Alt/Shift/Ctrl/Metaキーが押されていたら反応しない */
  328.           case(e.altKey || e.shiftKey || e.ctrlKey || e.metaKey):
  329.             return;
  330.           case(e.key === ' '):
  331.             if(site.is.realtime()){
  332.               elements.commentTextBox.focus();
  333.               e.preventDefault();/*コメント欄にフォーカスさせるだけ*/
  334.             }else activatePlayer();
  335.             return;
  336.           case(e.key === 'ArrowLeft'):
  337.             if(site.is.chasing() || site.is.timeshift()){
  338.               /* バッファ範囲内なら公式の重たい処理を回避する */
  339.               let video = site.get.video();
  340.               if(video.currentTime - video.buffered.start(0) >= 30){
  341.                 video.currentTime -= 30;
  342.                 e.stopPropagation();
  343.               }else activatePlayer();/*プレイヤーにフォーカスさせて公式の30秒巻き戻しを実行させる*/
  344.             }else{
  345.               const REWIND = 10, CATCHUP = 1.5;
  346.               let video = site.get.video(), rewinded = false, duration = 1000;
  347.               if(!video.paused && !video.rewinded && video.currentTime > REWIND/*少しだけ戻すこともできるが通信が安定しなくなるので*/){
  348.                 duration = (REWIND / (CATCHUP - 1))*1000;
  349.                 video.rewinded = rewinded = true;
  350.                 video.currentTime = video.currentTime - REWIND;
  351.                 video.playbackRate = CATCHUP;
  352.                 elements.playerDisplayScreen.dataset.rewinded = 'true';
  353.                 setTimeout(function(){
  354.                   video.rewinded = false;
  355.                   video.playbackRate = 1;
  356.                   delete elements.playerDisplayScreen.dataset.rewinded;
  357.                 }, duration);
  358.               }
  359.               core.indicate(createElement(html.rewind(rewinded)), duration);
  360.               e.stopPropagation();
  361.             }
  362.             return;
  363.           case(e.key === 'ArrowRight'):
  364.             if(site.is.chasing() || site.is.timeshift()){
  365.               /* バッファ範囲内なら公式の重たい処理を回避する */
  366.               let video = site.get.video();
  367.               if(video.buffered.end(0) - video.currentTime >= 30){
  368.                 video.currentTime += 30;
  369.                 e.stopPropagation();
  370.               }else activatePlayer();/*プレイヤーにフォーカスさせて公式の30秒巻き戻しを実行させる*/
  371.             }
  372.             return;
  373.           case(e.key === 'ArrowUp'):
  374.           case(e.key === 'ArrowDown'):
  375.             activatePlayer();/*プレイヤーにフォーカスさせて公式の音量調整を実行させる*/
  376.             site.get.video().addEventListener('volumechange', function(e){
  377.               core.indicate(parseInt(e.target.volume * 100));
  378.             }, {once: true});
  379.             e.preventDefault();
  380.             /* 連続すると focus() がわずかに遅延を感じさせるので */
  381.             if(activeElement === elements.commentTextBox || timers.focusBack){
  382.               clearTimeout(timers.focusBack);
  383.               timers.focusBack = setTimeout(() => {
  384.                 elements.commentTextBox.focus();
  385.                 delete timers.focusBack;
  386.               }, 250);
  387.             }
  388.             return;
  389.           case(e.key === '1'):
  390.           case(e.key === '2'):
  391.           case(e.key === '3'):
  392.           case(e.key === '4'):
  393.           case(e.key === '5'):
  394.           case(e.key === '6'):
  395.           case(e.key === '7'):
  396.           case(e.key === '8'):
  397.           case(e.key === '9'):
  398.           case(e.key === '0'):
  399.             core.setCommentOpacity(e.key);
  400.             return;
  401.           case(e.key === 'm'):
  402.             elements.muteButton.click();
  403.             site.get.video().addEventListener('volumechange', function(e){
  404.               if(e.target.muted) core.indicate('mute');
  405.               else core.indicate(parseInt(e.target.volume * 100));
  406.             }, {once: true});
  407.             return;
  408.           case(e.key === 'f'):
  409.             elements.fullscreenButton.click();
  410.             return;
  411.           case(e.key === 'r'):
  412.             elements.reloadButton.click();
  413.             return;
  414.         }
  415.       }, {capture: true});
  416.       /* 再生・一時停止 */
  417.       /* 勝手に再生を再開してしまうので保留 */
  418.       //elements.playButton.addEventListener('click', function(e){
  419.       //  /* 公式プレイヤによる再読み込みを回避して軽快に動作させる */
  420.       //  let video = site.get.video();
  421.       //  if(video.paused) video.play();
  422.       //  else video.pause();
  423.       //  e.stopPropagation();
  424.       //}, true);
  425.       /* 出没するplayer-statusを監視 */
  426.       observe(elements.leoPlayer, function(records){
  427.         let commentsTable = elements.commentsTable = site.targets.commentsTable();
  428.         if(commentsTable === null) return;
  429.         commentsTable.dataset.selector = 'commentsTable';
  430.         core.observeCommentTable();/*commentsTableが復活するのでもう一度監視する*/
  431.       }, {childList: true});
  432.       /* フルスクリーン状態の変化 */
  433.       observe(elements.html, function(records){
  434.         if(elements.html.dataset.browserFullscreen) return;/*フルスクリーン化したときは何もしない*/
  435.         animate(window.scrollTo.bind(window, 0, 0));/*スクロール位置がずれるのを即補正*/
  436.       }, {attributes: true});
  437.       /* ウィンドウリサイズ */
  438.       window.addEventListener('resize', function(e){
  439.         /* 可変ウィンドウサイズとコメントスクロール位置が強く結びついているので必要な処置 */
  440.         clearTimeout(window.resizing), window.resizing = setTimeout(function(){
  441.           if(document.fullscreenElement) return;/*モニタフルスクリーン時は何もしない*/
  442.           elements.fullscreenButton.click();
  443.           elements.fullscreenButton.click();
  444.           window.resizing = null;
  445.         }, 250);/*リサイズ中の連続起動を避ける*/
  446.       });
  447.       /* ウィンドウフォーカス */
  448.       window.addEventListener('focus', function(e){
  449.         elements.commentTextBox.focus();
  450.       });
  451.     },
  452.     listenWebSockets: function(){
  453.       /* 公式の通信内容を取得 */
  454.       window.WebSocket = new Proxy(WebSocket, {
  455.         construct(target, arguments){
  456.           const ws = new target(...arguments);
  457.           //log(ws, arguments);
  458.           if(API.LIVEMSG.test(ws.url)){
  459.             ws.addEventListener('message', function(e){
  460.               let json = JSON.parse(e.data);
  461.               if(json.chat === undefined) return;
  462.               //log(json.chat);
  463.               //if(json.chat.premium === 3) log(json.chat);/*運営コメント*/
  464.               //if(![1,2,3,24,undefined].includes(json.chat.premium)) log(json.chat);/*ユーザーと広告と運営以外のコメントログ*/
  465.               chats.push(json.chat);
  466.               /* ユーザー別コメント一覧 */
  467.               //if(users[json.chat.user_id] === undefined) users[json.chat.user_id] = [];
  468.               //users[json.chat.user_id].push(json.chat);
  469.             });
  470.           }
  471.           return ws;
  472.         }
  473.       });
  474.     },
  475.     listenCanvas: function(){
  476.       /* 公式のキャンバスコンテキストメソッドを書き換えて縁取りを見やすく */
  477.       let strokeText = CanvasRenderingContext2D.prototype.strokeText;
  478.       CanvasRenderingContext2D.prototype.strokeText = function(text, x, y, maxWidth){
  479.         //log(text, this.strokeStyle);
  480.         this.strokeStyle = this.strokeStyle.replace(/rgba\(([0-9]+),\s?([0-9]+),\s?([0-9]+),\s?([0-9.]+)\)/, `rgba($1,$2,$3,${STROKEALPHA})`);
  481.         return strokeText.call(this, text, x, y, maxWidth);
  482.       };
  483.     },
  484.     listenEnquete: function(){
  485.       /* アンケートの表示を捉える */
  486.       Notification.requestPermission();
  487.       let notification, title = props.program.title;
  488.       observe(elements.interactionLayerContent, function(records){
  489.         if(notification) notification.close();/*古い通知が出たままなら閉じる*/
  490.         if(elements.interactionLayerContent.dataset.contentVisibility === 'false') return;/*閉じたときは何もしない*/
  491.         notification = new Notification(title, {body: site.get.announcement(elements.playerDisplayHeader).textContent});
  492.         notification.addEventListener('click', function(e){
  493.           notification.close();
  494.         });
  495.       }, {attributes: true});
  496.     },
  497.     observePlayerDisplayHeader: function(){
  498.       let playerDisplayHeader = elements.playerDisplayHeader, commentLayer = elements.commentLayer;
  499.       observe(playerDisplayHeader, function(records){
  500.         //log(records);
  501.         if(playerDisplayHeader.children.length === 0){
  502.           delete playerDisplayHeader.dataset.extraLayout;
  503.           delete commentLayer.dataset.extraLayout;
  504.         }else{
  505.           let announcement = site.get.announcement(playerDisplayHeader);
  506.           if(announcement) setTimeout(function(){
  507.             playerDisplayHeader.dataset.fresh = 'true';
  508.             observe(announcement, function(rs){
  509.               playerDisplayHeader.dataset.fresh = announcement.dataset.fresh;/*同期させる*/
  510.             }, {attributes: true});
  511.           }, 250);/*フルスクリーン切り替えなどでラグが発生するので*/
  512.           playerDisplayHeader.dataset.extraLayout = 'showOperatorComment';
  513.           commentLayer.dataset.extraLayout = 'showOperatorComment';
  514.         }
  515.       });
  516.     },
  517.     appendLocalTime: function(){
  518.       /* seek */
  519.       let seekInformation = elements.seekInformation, seekInformationTime = site.get.seekInformationTime(seekInformation);
  520.       let localTime = createElement(html.localTime()), beginTime = props.program.beginTime;
  521.       localTime.textContent = seekInformationTime.textContent;
  522.       seekInformationTime.before(localTime);
  523.       observe(seekInformationTime, function(records){
  524.         //log(records);
  525.         localTime.textContent = (new Date((beginTime + timeToSeconds(seekInformationTime.textContent))*1000)).toLocaleTimeString();
  526.       }, {characterData: true, subtree: true});
  527.       /* elapsed */
  528.       let elapsedTime = elements.elapsedTime;
  529.       let currentLocalTime = createElement(html.localTime());
  530.       currentLocalTime.textContent = elapsedTime.textContent;
  531.       elapsedTime.before(currentLocalTime);
  532.       observe(elapsedTime, function(records){
  533.         //log(records);
  534.         currentLocalTime.textContent = (new Date((beginTime + timeToSeconds(elapsedTime.textContent))*1000)).toLocaleTimeString();
  535.       }, {characterData: true, subtree: true});
  536.     },
  537.     observeCommentTable: function(){
  538.       let commentsTable = elements.commentsTable;
  539.       if(commentsTable.observing) return;/*起こりえないけど重複を避ける*/
  540.       commentsTable.observing = true;
  541.       core.listenMouseOnCommentsTable();
  542.       /* 初期コメントに適用しつつ、追加コメントを監視する */
  543.       const ADVANCE = 30;
  544.       let elapsedTime = elements.elapsedTime, lastTime = timeToSeconds(elapsedTime.textContent), cutoffTime = -Infinity;
  545.       Array.from(commentsTable.children).forEach(c => core.modifyComment(c));
  546.       observe(commentsTable, function(records){
  547.         //log(records);
  548.         let isRealtime = site.is.realtime(), isChasing = site.is.chasing(), isTimeshift = site.is.timeshift();
  549.         let removedComments = [], newComments = [], currentTime = timeToSeconds(elapsedTime.textContent);
  550.         /* 30秒早送りなどで一覧がクリアされたら古いニセ新着を除外する */
  551.         if(lastTime + ADVANCE <= currentTime) cutoffTime = lastTime;
  552.         else if(currentTime < lastTime) cutoffTime = -Infinity;
  553.         lastTime = currentTime;
  554.         for(let i = 0, record; record = records[i]; i++){/*あらかじめ画面外へ消えて削除される要素を収集しておく*/
  555.           if(record.removedNodes.length) removedComments.push(record.removedNodes[0]);
  556.         }
  557.         for(let i = records.length - 1, record; record = records[i]; i--){/*chatとのマッチングを逆順に行うのでこちらも逆順で*/
  558.           if(record.addedNodes.length === 0) continue;
  559.           if(site.addedNodes.comment(record.addedNodes[0]) === null) continue;
  560.           let comment = record.addedNodes[0];
  561.           core.modifyComment(comment);
  562.           if(isChasing || isTimeshift){
  563.             /* 30秒早送りなどで一覧がクリアされたら古いニセ新着を除外する */
  564.             if(timeToSeconds(site.get.time(comment).textContent) < cutoffTime) break;
  565.             /* タイムシフトではユーザーコメント以外は毎回置換されるので(バグ？)、置換要素は新着コメント扱いしない */
  566.             if(['normal', 'trialWatch'].includes(comment.dataset.commentType) === false) continue;
  567.             if(removedComments.find(c => comment.textContent === c.textContent)) continue;
  568.             /*偶然一致するとnewCommentsから抜けてしまう!!*/
  569.           }
  570.           newComments.push(comment);
  571.         }
  572.         if(newComments.length) core.slideUpNewComments(newComments);
  573.       });
  574.     },
  575.     listenMouseOnCommentsTable: function(){
  576.       /* マウス操作中はスクロールでフォーカスが不意に外れてしまうのを抑制する */
  577.       /* (マウスオーバーで新着スクロールを止めて、マウスアウトで一気に復帰させる) */
  578.       let commentsTable = elements.commentsTable, parent = commentsTable.parentNode, scroll = 0;
  579.       commentsTable.addEventListener('mouseenter', function(e){
  580.         scroll = atMost(Math.round(parseFloat(getComputedStyle(commentsTable.lastElementChild).height)), parent.scrollTop);/*最初に少しスクロールさせると公式も空気を読んで新着コメントが来てもスクロールしなくなる*/
  581.         commentsTable.dataset.mouseenter = 'true';
  582.         parent.scrollTop -= scroll;
  583.         commentsTable.style.transform = `translateY(-${scroll}px)`;
  584.       });
  585.       commentsTable.addEventListener('mouseleave', function(e){
  586.         delete commentsTable.dataset.mouseenter;
  587.         let scrollTopMax = parent.scrollHeight - parent.clientHeight, distance = scrollTopMax - parent.scrollTop - scroll;
  588.         parent.scrollTop = scrollTopMax;
  589.         animate(function(){parent.scrollTop = scrollTopMax + scroll});/*スクロールによって移動した分をさらに調整*/
  590.         commentsTable.style.transform = ``;
  591.         parent.animate([ 
  592.           {transform: `translateY(${distance}px)`},
  593.           {transform: `translateY(0)`},
  594.         ], {duration: 125, easing: EASING});
  595.         commentsTable.lastElementChild.dataset.new = 'true';/*すでに追加されている1件分*/
  596.       });
  597.     },
  598.     modifyComment: function(commentNode){
  599.       //log(commentNode);
  600.       const additionalVpos = (props.program.beginTime - props.program.openTime) * 100;
  601.       let contentNode = site.get.content(commentNode), timeNode = site.get.time(commentNode);
  602.       let commentType = commentNode.dataset.commentType, content = contentNode.textContent, vpos = additionalVpos + timeToSeconds(timeNode.textContent);
  603.       //if(commentType !== 'normal') log(commentType, commentNode.textContent);
  604.       /* コメントに追加情報を与える */
  605.       for(let i = chats.length - 1, chat; chat = chats[i]; i--){
  606.         /* 時刻の一致を検証 */
  607.         if(chat.vpos < vpos - 60*100) break;/*60秒以上古いログは追わずにあきらめる(TSではchatsの時系列がかなりばらけている)*/
  608.         //if(!(vpos <= chat.vpos && chat.vpos <= vpos + 100)) continue;/*timeNodeの表示時刻とvposは必ずしも一致しない*/
  609.         /* 既存の一致を検証 */
  610.         if(chat.commentNode && chat.commentNode.isConnected) continue;
  611.         /* 内容の一致を検証 */
  612.         switch(commentType){
  613.           case('normal'):/*通常コメント*/
  614.           case('trialWatch'):/*有料番組のお試し視聴*/
  615.             if(chat.content !== content) continue;
  616.             break;
  617.           case('operator'):/*運営コメント*/
  618.             let operator = content.split(/\s/);
  619.             if(!operator.every(o => chat.content.includes(o))) continue;
  620.             break;
  621.           case('nicoad'):/*ニコニ広告*/
  622.             let nicoad = content.match(/(?:【.+?】)?(.+)さんが([0-9]+)pt/) || content.match(/(?:提供：)?(.+)さん（([0-9]+)pt）/);
  623.             if(nicoad === null) log('Unknown nicoad format:', content);
  624.             else if(!chat.content.includes(nicoad[1]) || !chat.content.includes(nicoad[2])) continue;/*厳密ではないけど十分*/
  625.             break;
  626.           case('programExtend'):/*放送枠の延長*/
  627.           case('ranking'):/*ランキング入り通知*/
  628.           case('cruise'):/*クルーズのお知らせ*/
  629.           case('quote'):/*クルーズさんのコメント*/
  630.           case('spi'):/*ニコニコ新市場*/
  631.           case('gift'):/*ニコニコ新市場*/
  632.           case('transparent'):/*？*/
  633.             if(content.includes(chat.content)) continue;
  634.             if(chat.content.includes(content)) continue;
  635.             break;
  636.           default:
  637.             log('Unknown commentType found:', commentType, chats[i]);
  638.             continue;/*複数吐かれる時間内のログから当該chatを見つける*/
  639.         }
  640.         /* 晴れてペアとなるchatを見つけられたので */
  641.         chats[i].commentNode = commentNode;
  642.         switch(commentType){
  643.           case('normal'):
  644.           case('trialWatch'):
  645.             linkify(contentNode);/*URLをリンク化*/
  646.             commentNode.dataset.score = chat.score || 0;
  647.             commentNode.dataset.premium = chat.premium || 0;
  648.             commentNode.dataset.user_id = chat.user_id || '';
  649.             timeNode.before(createElement(html.score(commentNode.dataset.score)));/*NGスコア付与*/
  650.             //commentNode.addEventListener('click', core.showUserHistory.bind(commentNode), {capture: true});
  651.             break;
  652.           case('operator'):
  653.             let link = chat.content.match(/<a href="([^"]+)"/);
  654.             if(link === null) linkify(contentNode);/*URLをリンク化*/
  655.             else contentNode.innerHTML = `<a href="${link[1]}">${content}</a>`;
  656.             break;
  657.           case('nicoad'):
  658.             linkify(contentNode);/*URLをリンク化*/
  659.             break;
  660.           case('programExtend'):
  661.           case('ranking'):
  662.           case('cruise'):
  663.           case('quote'):
  664.           case('spi'):
  665.             break;
  666.           default:
  667.             break;
  668.         }
  669.         break;
  670.       }
  671.     },
  672.     slideUpNewComments: function(newComments){
  673.       if(elements.commentsTable.dataset.mouseenter) return;/*マウスオーバー中は処理しない*/
  674.       //連続起動しうるけど125ms以内には起こらないだろう
  675.       const DURATION = '125ms', EASING = 'ease';
  676.       let commentsTable = elements.commentsTable, parent = commentsTable.parentNode;
  677.       let scrollTopMax = parent.scrollHeight - parent.clientHeight;
  678.       let height = parseFloat(getComputedStyle(newComments[0]).height) * newComments.length;/*高さは共通のはずなので*/
  679.       for(let i = 0, comment; comment = newComments[i]; i++){
  680.         comment.dataset.new = 'true';
  681.       }
  682.       if(scrollTopMax === 0) return;/*放送開始時などコメントが少なくてスクロール不要*/
  683.       parent.scrollTop = scrollTopMax - 2;/* 本来は1でよいが、ブラウザのズーム倍率に対する保険 */
  684.       commentsTable.style.transform = `translateY(${height - 2}px)`;
  685.       animate(function(){
  686.         commentsTable.style.transition = `transform ${DURATION} ${EASING}`;
  687.         commentsTable.style.transform = `translateY(0)`;
  688.         commentsTable.addEventListener('transitionend', function(e){
  689.           commentsTable.style.transition = 'none';
  690.           animate(function(){parent.scrollTop = scrollTopMax + 1});
  691.         }, {once: true});
  692.       });
  693.     },
  694.     showUserHistory: function(e){
  695.       let commentNode = this, user_id = commentNode.dataset.user_id;
  696.       log(this, user_id, users[user_id]);
  697.     },
  698.     getTarget: function(selector, retry = 10, interval = 1*SECOND){
  699.       const key = selector.name;
  700.       const get = function(resolve, reject){
  701.         let selected = selector();
  702.         if(selected && selected.length > 0) selected.forEach((s) => s.dataset.selector = key);/* elements */
  703.         else if(selected && selected instanceof selected.ownerDocument.defaultView.HTMLElement) selected.dataset.selector = key;/* element */
  704.         else if(--retry) return log(`Not found: ${key}, retrying... (${retry})`), setTimeout(get, interval, resolve, reject);
  705.         else return reject(new Error(`Not found: ${selector.name}, I give up.`));
  706.         elements[key] = selected;
  707.         resolve(selected);
  708.       };
  709.       return new Promise(function(resolve, reject){
  710.         get(resolve, reject);
  711.       });
  712.     },
  713.     getTargets: function(selectors, retry = 10, interval = 1*SECOND){
  714.       return Promise.all(Object.values(selectors).map(selector => core.getTarget(selector, retry, interval)));
  715.     },
  716.     addStyle: function(name = 'style', d = document){
  717.       /* 本来cssの優先順位で解決すべきだが、headの挿入位置の影響を避けるためにbodyにしている */
  718.       if(html[name] === undefined) return;
  719.       if(d.body){
  720.         let style = createElement(html[name]()), id = SCRIPTID + '-' + name, old = d.getElementById(id);
  721.         style.id = id;
  722.         d.body.appendChild(style);
  723.         if(old) old.remove();
  724.       }
  725.       else{
  726.         let observer = observe(d.documentElement, function(){
  727.           if(!d.body) return;
  728.           observer.disconnect();
  729.           core.addStyle(name);
  730.         });
  731.       }
  732.     },
  733.   };
  734.   const html = {
  735.     indicator: () => `<div id="${SCRIPTID}-indicator"></div>`,
  736.     rewind: (rewinded) => `
  737.       <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">
  738.         <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>
  739.       </svg>
  740.     `,
  741.     localTime: () => `<span class="${SCRIPTID}-localTime"></span>`,
  742.     commentOpacityIndicator: (key) => `<span id="comment-opacity-indicator" data-opacity="${key}">${key}</span>`,
  743.     commentOpacitySelector: () => `
  744.       <ul id="comment-opacity-selector" aria-label="コメント透明度">
  745.         <li data-opacity="1">1</li>
  746.         <li data-opacity="2">2</li>
  747.         <li data-opacity="3">3</li>
  748.         <li data-opacity="4">4</li>
  749.         <li data-opacity="5">5</li>
  750.         <li data-opacity="6">6</li>
  751.         <li data-opacity="7">7</li>
  752.         <li data-opacity="8">8</li>
  753.         <li data-opacity="9">9</li>
  754.         <li data-opacity="0">0</li>
  755.       </ul>
  756.     `,
  757.     score: (score) => `<span class="___comment-score___${SCRIPTID}">${score}</span>`,
  758.     styleVideo: () => `
  759.       <style type="text/css" id="${SCRIPTID}-styleVideo">
  760.  
  761.       </style>
  762.     `,
  763.     styleLiveFullscreen: () => `
  764.       <style type="text/css">
  765.         /**** 変数 ****/
  766.         :root{
  767.           /*ヘッダ*/
  768.           --header-height: 36px;
  769.           /*左右比率*/
  770.           --screen-width: 75vw;
  771.           --comment-width: 25vw;
  772.           /*一覧コメント*/
  773.           --font-size: calc(4px + 1.2vmin);
  774.           --line-height: 1.5;
  775.           --negative-height: calc(var(--font-size) * -1.5);/*userstyles.orgがvar同士の計算に対応していないので*/
  776.           --nicoad-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48dGl0bGU+bmljb2FkLWljb248L3RpdGxlPjxwYXRoIGQ9Ik05NC4yOTIsNjguNDA2YTUuNjYzLDUuNjYzLDAsMCwwLDIuNTgtMS40MjljMy4xODctMy4xODcsMS44MzQtMTAuMjYxLTIuODg0LTE4Ljg3OWwtNS44MzQsMS4wNTNjMi4xMzQsNC40OCwyLjYyNyw3Ljk1NCwxLDkuNTc4LTMuNzc5LDMuNzgyLTE3LjU2Mi0zLjg4MS0zMC43ODUtMTcuMXMtMjAuODc5LTI3LTE3LjEtMzAuNzgzYzEuNjI0LTEuNjI0LDUuMS0xLjEzMSw5LjU3OSwxLjAwNUw1MS45LDYuMDE0QzQzLjI4NiwxLjMsMzYuMjEyLS4wNTksMzMuMDIyLDMuMTMyYTUuNjgzLDUuNjgzLDAsMCwwLTEuNDI5LDIuNTc5TDMxLjU4Nyw1LjcsMTMuOTM2LDcxLjU2MiwxLjYxMyw3NC44NjhhMi4xMzcsMi4xMzcsMCwwLDAtLjk2NS41MzZjLTIuMiwyLjIwOSwxLjM3NCw5LjM1NSw3Ljk4MywxNS45NjZzMTMuNzU4LDEwLjE4NSwxNS45NjIsNy45NzhhMi4xMjUsMi4xMjUsMCwwLDAsLjUzNi0uOTY3bDMuMy0xMi4zMjRMOTQuMyw2OC40MTZaIiBmaWxsPSIjNDA0MDQwIi8+PHJlY3QgeD0iNjAuMTIiIHk9IjIwLjY5IiB3aWR0aD0iMzEuNjAzIiBoZWlnaHQ9IjYuNzczIiByeD0iMy4wNTEiIHJ5PSIzLjA1MSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNS4yMTMgNjAuNzM3KSByb3RhdGUoLTQ1KSIgZmlsbD0iIzQwNDA0MCIvPjxyZWN0IHg9IjQ3LjM4MyIgeT0iMTAuNDMzIiB3aWR0aD0iMjguMjE3IiBoZWlnaHQ9IjYuNzczIiByeD0iMy4wNTEiIHJ5PSIzLjA1MSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzIuMjI4IDY5LjYzOSkgcm90YXRlKC03NSkiIGZpbGw9IiM0MDQwNDAiLz48cmVjdCB4PSI3Mi4wNzIiIHk9IjM1LjEyMiIgd2lkdGg9IjI4LjIxNyIgaGVpZ2h0PSI2Ljc3MyIgcng9IjMuMDUxIiByeT0iMy4wNTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03LjAzIDIzLjYxNykgcm90YXRlKC0xNSkiIGZpbGw9IiM0MDQwNDAiLz48L3N2Zz4=");
  777.           /*スクロールコメント*/
  778.           --opacity: .75;
  779.         }
  780.         /**** display:none ****/
  781.         [class*="page-header-area"]/*サイトロゴ+検索+広告*/,
  782.         [class*="billboard-ad"]/*バナー広告*/,
  783.         [class*="billboard-banner"]/*バナー広告*/,
  784.         [class*="operator-area"]/*empty*/,
  785.         [class*="player-foot-area"]/*empty*/,
  786.         dummy{
  787.           display: none !important;
  788.         }
  789.         /**** 全画面レイアウト(htmlからすべて指定しないと100%にできない) ****/
  790.         ::-webkit-scrollbar{
  791.           display: none;
  792.         }
  793.         body{
  794.           scrollbar-width: none;
  795.         }
  796.         html,
  797.         body,
  798.         #root,
  799.         [class*="_watch-page_"],
  800.         [class*="_player-area_"],
  801.         [class*="_player-body-area_"],
  802.         [class*="_player-section_"],
  803.         [class*="_leo-player_"],
  804.         [class*="_player-display_"],
  805.         [class*="_player-display-screen_"],
  806.         [class*="_player-status_"],
  807.         dummy{
  808.           height: 100% !important;
  809.           margin: 0 !important;
  810.           padding: 0 !important;
  811.         }
  812.         @media screen and (max-width: 640px){
  813.           #page-top,
  814.           #siteHeader{
  815.             display: none !important;
  816.           }
  817.         }
  818.         [class*="_player-area_"]{
  819.           display: flex;
  820.           flex-direction: column;
  821.         }
  822.         [class*="_player-area_"] [class*="_player-head-area_"] [class*="_nicoad-bar_"]/*ニコニ広告*/{
  823.           width: 100% !important;
  824.           max-width: 100% !important;
  825.           margin: 0 !important;
  826.         }
  827.         @media screen and (max-width: 960px){
  828.           [class*="_player-area_"] [class*="_player-head-area_"] [class*="_nicoad-bar_"]/*ニコニ広告*/{
  829.             display: none !important;
  830.           }
  831.         }
  832.         [class*="_player-area_"]{
  833.           height: auto !important;/*上書き*/
  834.         }
  835.         @media screen and (max-width: 640px){
  836.           [class*="_player-area_"]{
  837.             height: calc(100%) !important;
  838.           }
  839.         }
  840.         [class*="_player-area_"][data-browser-fullscreen]{
  841.           height: 100% !important;
  842.         }
  843.         [class*="_player-section_"]:not([data-browser-fullscreen]){
  844.           height: calc(100vh - var(--header-height)) !important;
  845.         }
  846.         [class*="_watch-page_"],
  847.         [class*="_player-body-area_"],
  848.         [class*="_player-section_"],
  849.         [class*="_player-display-screen_"],
  850.         dummy{
  851.           width: 100% !important;
  852.           max-width: none !important;
  853.           min-width: auto !important;
  854.           max-height: none !important;
  855.           min-height: auto !important;
  856.         }
  857.         [class*="_player-body-area_"]{
  858.           overflow: hidden;/*ニコニ広告ヘッダ付きなど画面の縦幅が狭いときにも高さ100%に収めるため*/
  859.         }
  860.         [data-browser-fullscreen] [class*="_player-display_"]/*メイン*/,
  861.         [data-browser-fullscreen] [class*="_player-display_"]/*メイン*/ > *{
  862.           width: 100%;
  863.         }
  864.         [class*="_player-display_"]/*メイン*/{
  865.           width: var(--screen-width);
  866.           min-width: var(--screen-width) !important;
  867.         }
  868.         [class*="_player-display_"]/*メイン*/ > *{
  869.           width: 100%;
  870.           min-width: 100% !important;
  871.         }
  872.         [class*="_player-setting-view_"]/*詳細設定*/,
  873.         [class*="_rich-view-status_"]/*ギフト*/,
  874.         [class*="_player-status_"]/*一覧コメント*/{
  875.           width: var(--comment-width);
  876.           min-width: var(--comment-width) !important;
  877.         }
  878.         [class*="_player-setting-view_"]/*詳細設定*/ > *,
  879.         [class*="_rich-view-status_"]/*ギフト*/ > *,
  880.         [class*="_player-status_"]/*一覧コメント*/ > *{
  881.           width: 100%;
  882.         }
  883.         body{
  884.           overflow-x: hidden;
  885.         }
  886.         /**** 配信者ツール ****/
  887.         [class*="_broadcaster-tool_"]{
  888.           max-width: 100% !important;
  889.         }
  890.         /**** 運営コメント ****/
  891.         [class*="_player-display-header_"]{
  892.           position: relative !important;/*運営コメントを映像に重ねない*/
  893.           height: 8vmin;/*運営コメントをより大きく*/
  894.           min-height: 8vmin;
  895.         }
  896.         [data-browser-fullscreen] [class*="_player-display-header_"]{
  897.           position: absolute !important;/*フルスクリーン時は公式仕様どおり映像に重ねる*/
  898.         }
  899.         [class*="_player-display-header_"] [class*="_announcement-renderer_"]{
  900.           padding: .5vmin 0 .5vmin;/*運営コメントをより大きく*/
  901.           box-sizing: border-box;
  902.         }
  903.         [data-browser-fullscreen] [class*="_player-display-header_"] [class*="_announcement-renderer_"]{
  904.           padding: .5vmin 0 3.5vmin;/*運営コメントをより大きく*/
  905.           box-sizing: content-box;
  906.           background: linear-gradient(
  907.             rgba(0,0,0,.500)  4vmin,
  908.             rgba(0,0,0,.481)  5vmin,
  909.             rgba(0,0,0,.427)  6vmin,
  910.             rgba(0,0,0,.346)  7vmin,
  911.             rgba(0,0,0,.154)  9vmin,
  912.             rgba(0,0,0,.073) 10vmin,
  913.             rgba(0,0,0,.019) 11vmin,
  914.             transparent
  915.           ) !important;/*背景にサインカーブの影*/
  916.           text-shadow:
  917.             rgba(0,0,0,.50)  1px  1px 2px,
  918.             rgba(0,0,0,.50) -1px  1px 2px,
  919.             rgba(0,0,0,.50)  1px -1px 2px,
  920.             rgba(0,0,0,.50) -1px -1px 2px,
  921.             rgba(0,0,0,.75)  0    1px 1px
  922.           ;/*公式の指定より影を濃くして目立たせる*/
  923.         }
  924.         [class*="_player-display-header_"] [class*="_announcement-renderer_"] [class*="_fitting-area_"]{
  925.           line-height: 1.25 !important;/*2行にわたる運営コメントをより大きく(リンク下線の余裕はどうしても必要)*/
  926.           font-size: calc(4vmin/1.25);/*運営コメントをより大きく*/
  927.           overflow: visible;/*ピッタリすぎてリンク下線の分だけはみ出てカットされるのを防ぐ*/
  928.           white-space: nowrap;/*美しくない強制改行をできるだけ防ぐ*/
  929.         }
  930.         html:not([data-browser-fullscreen]) [class*="_player-display-header_"] [class*="_announcement-renderer_"][data-fresh="false"],
  931.         [data-browser-fullscreen] [class*="_player-display_"]:hover [class*="_player-display-header_"] [class*="_announcement-renderer_"][data-fresh="false"]{
  932.           opacity: .75 !important;/*固定運営コメントが15秒で消えてしまうバグを回避*/
  933.           pointer-events: auto !important;
  934.         }
  935.         /**** スクロールコメント ****/
  936.         [class*="_comment-layer_"][data-extra-layout="showOperatorComment"]{
  937.           top: 50% !important;/*(通常画面での)運営コメント表示中の公式のレイアウト調整は不要なので上書きする*/
  938.           transform: translate(-50%, -50%) !important;
  939.         }
  940.         /*公式未対応につきTsuuで対応*/
  941.         [data-browser-fullscreen] [class*="_player-display_"][data-monitor-mode="manipulating"] [class*="_comment-layer_"][data-extra-layout="showOperatorComment"],
  942.         [data-browser-fullscreen] [class*="_player-display-header_"][data-fresh="true"] + [class*="_player-display-screen_"] [class*="_comment-layer_"][data-extra-layout="showOperatorComment"],
  943.         [data-browser-fullscreen] [class*="_player-display_"]:hover [class*="_comment-layer_"][data-extra-layout="showOperatorComment"]{
  944.           top: 50% !important;
  945.           transform: translate(-50%, calc(-50% + 8vmin)) !important;/*フルスクリーン時は逆に運営コメント表示中のレイアウト調整が欠けているので補う*/
  946.           transition: opacity 125ms, transform 500ms 0ms;
  947.         }
  948.         [class*="_player-display-screen_"] [class*="_comment-layer_"],
  949.         [class*="_player-display-screen_"] [class*="_telop-layer_"]{
  950.           opacity: var(--opacity);/*通常時の透明度*/
  951.           transition: opacity 125ms, transform 1000ms 1000ms;
  952.         }
  953.         /**** プレイヤフッタ ****/
  954.         [class*="_player-display-footer_"]::before{
  955.           opacity: 0;/*::before要素で影を表現するのはやめる*/
  956.         }
  957.         [class*="_broadcast-participation-area_"]{
  958.           background: black;/*背景を黒く*/
  959.         }
  960.         [data-browser-fullscreen] [class*="_player-display-footer_"]{
  961.           background: linear-gradient(-180deg,
  962.             transparent,
  963.             rgba(0,0,0,.019) 12px,
  964.             rgba(0,0,0,.073) 24px,
  965.             rgba(0,0,0,.154) 36px,
  966.             rgba(0,0,0,.346) 60px,
  967.             rgba(0,0,0,.427) 72px,
  968.             rgba(0,0,0,.481) 84px,
  969.             rgba(0,0,0,.500) 96px
  970.           ) !important;/*背景にサインカーブの影*/
  971.           padding-top: 24px;/*グラデーションの余裕(要素の高さは公式生放送で36+40pxなので計100px)*/
  972.         }
  973.         [data-browser-fullscreen] [class*="_controller-display-button_"][data-toggle-state="false"]{
  974.           transform: translateY(-24px);/*グラデーションの余裕でズレた分*/
  975.         }
  976.         [class*="_player-controller_"] button[aria-label]::before/*ボタンツールチップ*/,
  977.         [class*="_player-controller_"] [class*="_volume-size-control_"]::before,
  978.         [class*="_player-controller_"] [class*="_seek-information_"],
  979.         [class*="_player-controller_"] [class*="_setting-panel_"]/*設定パネル*/{
  980.           background: rgba(0,0,0,.75);/*半透明化*/
  981.         }
  982.         [data-browser-fullscreen] [class*="_player-controller_"] button > *|svg,
  983.         [data-browser-fullscreen] [class*="_player-controller_"] [class*="_slider-track_"]/*音量*/,
  984.         [data-browser-fullscreen] [class*="_player-controller_"] [class*="_program-statistics_"]/*番組統計情報*/,
  985.         [data-browser-fullscreen] [class*="_player-controller_"] span[class*="_elapsed-time_"]/*経過時間*/,
  986.         [data-browser-fullscreen] #comment-opacity-selector > li,
  987.         dummy{
  988.           filter:
  989.             drop-shadow(0 0 2px rgba(0,0,0,1.00))
  990.             drop-shadow(0 0 8px rgba(0,0,0,0.75))
  991.           ;/*少しだけ見やすく*/
  992.         }
  993.         [data-browser-fullscreen] [class*="_player-controller_"] [class*="_slider_"]/*時刻音量スライダ*/{
  994.           box-shadow: none;/*へんな影が追加される公式のミス(?)を回避*/
  995.         }
  996.         [data-browser-fullscreen] [class*="_program-statistics_"]/*番組統計情報; 2020/8現在要素がなくなった*/{
  997.           display: block !important;
  998.           color: white;
  999.           margin-left: 1em;
  1000.         }
  1001.         [data-browser-fullscreen] [class*="_program-statistics_"] ul{
  1002.           height: 100%;
  1003.         }
  1004.         [data-browser-fullscreen] [class*="_program-statistics_"] li > *|*{
  1005.           position: absolute;
  1006.           transform: translate(0,-50%);
  1007.           top: 50%;
  1008.           margin: 0 4px;
  1009.         }
  1010.         [class*="_time-status-area_"] span[class*="_elapsed-time_"] > span:first-child/*現在時刻*/,
  1011.         [class*="_time-status-area_"] [class*="_time-text-box_"]/*時刻指定*/{
  1012.           font-size: 16px;/*少し大きく(公式12px)*/
  1013.           line-height: 24px;
  1014.         }
  1015.         [data-browser-fullscreen] [class*="_time-status-area_"] span[class*="_elapsed-time_"] > span:first-child/*現在時刻*/,
  1016.         [data-browser-fullscreen] [class*="_time-status-area_"] [class*="_time-text-box_"]/*時刻指定*/{
  1017.           font-size: 18px;/*少し大きく(公式12px)*/
  1018.         }
  1019.         [class*="_time-status-area_"] span[class*="_elapsed-time_"] > span:nth-child(2)/*時刻の区切り*/{
  1020.           margin: 0 .5em;/*少し間隔を広げて見やすく*/
  1021.         }
  1022.         /**** ニコニコ市場 ****/
  1023.         [class*="_ichiba-counter_"]{
  1024.           position: absolute;
  1025.           bottom: 40px;
  1026.           pointer-events: none;
  1027.           x-filter:/* 負荷があるようなので暫定回避 */
  1028.             drop-shadow(0 0 2px rgba(0,0,0,0.25))
  1029.             drop-shadow(0 0 8px rgba(0,0,0,0.25))
  1030.           ;/*少しだけ見やすく*/
  1031.         }
  1032.         [class*="_ichiba-counter-section_"],
  1033.         [class*="_broadcast-participation-area-disabled-message-area_"]{
  1034.           opacity: 0;/*ふだんは邪魔なので*/
  1035.           pointer-events: none;
  1036.         }
  1037.         [class*="_broadcast-participation-area_"]:hover [class*="_ichiba-counter_"][data-frozen="false"] [class*="_ichiba-counter-section_"]{
  1038.           animation: NiconicoTsu-fade 2500ms 1 forwards;
  1039.         }
  1040.         @keyframes NiconicoTsu-fade{
  1041.             0%/*   0ms*/{opacity: 0; pointer-events: none;}
  1042.            10%/* 250ms*/{opacity: 0; pointer-events: auto;}
  1043.            20%/* 500ms*/{opacity: 1; pointer-events: auto;}
  1044.            60%/*1500ms*/{opacity: 1; pointer-events: auto;}
  1045.           100%/*2500ms*/{opacity: 0; pointer-events: none;}
  1046.         }
  1047.         [class*="_broadcast-participation-area_"] [class*="_ichiba-counter_"][data-frozen="false"] [class*="_ichiba-counter-section_"]:hover{
  1048.           opacity: 1 !important;
  1049.           pointer-events: auto !important;
  1050.         }
  1051.         [class*="_ichiba-counter-section_"] [class*="_queue-item-area_"] [class*="_item-placeholder_"]/*空欄アイテム枠*/,
  1052.         [class*="_ichiba-counter-section_"] [class*="_queue-item-area_"] button/*アイテム枠*/{
  1053.           background: rgba(0,0,0,.5);
  1054.           border-radius: 4px;
  1055.         }
  1056.         /**** コメントフォーム ****/
  1057.         [class*="_comment-post-panel_"]{
  1058.           padding: 0 !important;/*paddingとmarginの入れ替え*/
  1059.         }
  1060.         [class*="_comment-post-form_"]{
  1061.           margin: 0 8px 8px !important;/*paddingとmarginの入れ替え*/
  1062.         }
  1063.         [data-browser-fullscreen] [class*="_comment-post-panel_"]{
  1064.           max-width: 60em !important;/*ピクセル値ではなく可変に*/
  1065.         }
  1066.         [data-browser-fullscreen] [class*="_comment-post-form_"]{
  1067.           filter:
  1068.             drop-shadow(0 0 2px rgba(0,0,0,0.25))
  1069.             drop-shadow(0 0 8px rgba(0,0,0,0.25))
  1070.           ;/*少しだけ見やすく*/
  1071.         }
  1072.         [class*="_comment-post-form_"][aria-disabled="true"]/*タイムシフトでコメントができない状態*/{
  1073.           display: none;/*白く目立つ上に特に意味はないので*/
  1074.         }
  1075.         [class*="_comment-post-form_"] button[type="submit"]{
  1076.           transition: none !important;/*フルスクリーン時にtransitionかかるのを回避*/
  1077.         }
  1078.         input[name="command"]:not(:focus) + input[name="comment"]:not(:focus) + button[type="submit"]:not(:focus){
  1079.           color: #808080;/*コメント欄にフォーカスしていないならボタンは暗く*/
  1080.           background: #404040;
  1081.         }
  1082.         /**** ステータス/一覧コメント 共通 ****/
  1083.         [class*="_promotion-balloon_"]/*福引きの案内*/{
  1084.           display: none;
  1085.         }
  1086.         [class*="_player-status_"] *|svg > *|*{
  1087.           fill: #c0c0c0 !important;/*黒背景にしたぶんsvgの色も対応させる*/
  1088.         }
  1089.         [class*="_player-status_"] *|svg > *|*[fill="none"]{
  1090.           fill: none !important;/*黒背景にしたぶんsvgの色も対応させる*/
  1091.         }
  1092.         [class*="_program-statistics-menu_"],
  1093.         [class*="_tab-area_"]{
  1094.           background: black;
  1095.           border-color: gray;
  1096.           border-width: 1px;
  1097.         }
  1098.         [class*="_ng-setting-controller_"]::after{
  1099.           display: none;
  1100.         }
  1101.         [class*="_player-status_"],
  1102.         [class*="_tab-list_"] button/*コメント/おすすめ生放送*/{
  1103.           color: white;
  1104.           background: black;
  1105.           border: none;
  1106.         }
  1107.         [class*="_tab-list_"] button[aria-selected="true"]::after{
  1108.           background: white;
  1109.           height: 2px;
  1110.           bottom: 0px;
  1111.         }
  1112.         [class*="_tab-list_"] button:not([aria-selected="true"]){
  1113.           color: gray;
  1114.         }
  1115.         [class*="_tab-list_"] button:not([aria-selected="true"]):hover::after{
  1116.           background: gray;
  1117.           bottom: 0px;
  1118.         }
  1119.         /**** ステータス ****/
  1120.         [class*="_program-panel_"] [aria-label="部屋情報"] *,
  1121.         [class*="_program-panel_"] [class*="_comment-data-grid_"] header *{
  1122.           color: white;
  1123.           background: black;
  1124.           height: auto;
  1125.         }
  1126.         [class*="_program-panel_"]{
  1127.           width: 100%;
  1128.           height: calc(var(--font-size) * 4);
  1129.           display: block;
  1130.         }
  1131.         [class*="_program-panel_"] > *{
  1132.           padding: 0 0 0 1em;
  1133.         }
  1134.         [class*="_program-panel_"] *{
  1135.           font-size: var(--font-size) !important;
  1136.           line-height: 1.25 !important;
  1137.         }
  1138.         [class*="_program-panel_"] [class*="_header-area_"]{
  1139.           overflow: hidden;
  1140.           justify-content: flex-start;
  1141.         }
  1142.         [class*="_program-panel_"] [class*="_header-area_"] [aria-label="部屋情報"]{
  1143.           height: auto;
  1144.           white-space: nowrap;
  1145.         }
  1146.         [class*="_program-panel_"] [class*="_header-area_"] [aria-label="部屋情報"] + aside/*ギフトPR*/{
  1147.           margin: 0 .5em 0 .5em;
  1148.           height: auto;
  1149.           color: #c0c0c0;
  1150.         }
  1151.         [class*="_program-panel_"] [class*="_header-area_"] [aria-label="部屋情報"] + aside *{
  1152.           font-size: 87.5% !important;
  1153.         }
  1154.         [class*="_program-panel_"] [class*="_program-statistics_"] [data-value]{
  1155.           color: white;
  1156.         }
  1157.         [class*="_program-panel_"] [class*="_program-statistics_"] *|svg,
  1158.         [class*="_ng-panel-controller_"] [class*="_ng-button_"] *|svg{
  1159.           width: var(--font-size) !important;
  1160.           height: var(--font-size) !important;
  1161.         }
  1162.         /**** 一覧コメント ****/
  1163.         [class*="_comment-panel_"] [class*="_body_"]{
  1164.           -webkit-mask-image: linear-gradient(rgba(0,0,0,.5), black 1em);
  1165.           mask-image: linear-gradient(rgba(0,0,0,.5), black 1em);/*ヘッダとの境界をわかりやすくする影*/
  1166.         }
  1167.         [class*="_comment-panel_"] header{
  1168.           display: none;/*意味のある要素ではないので*/
  1169.         }
  1170.         [class*="_comment-panel_"] [class*="_header-table_"],
  1171.         [class*="_comment-panel_"] [class*="_table_"]{
  1172.           width: 100% !important;
  1173.         }
  1174.         [class*="_comment-panel_"] [class*="_table-row_"]:hover,
  1175.         [class*="_comment-panel_"] [class*="_table-row_"][aria-selected="true"]{
  1176.           background: #404040;
  1177.         }
  1178.         [class*="_comment-panel_"] [class*="_table-row_"] [class*="_table-cell_"]/*セル内スクロール対応*/{
  1179.           width: auto !important;
  1180.           overflow: visible !important;
  1181.           transition: transform 1000ms;
  1182.           flex: 1;
  1183.         }
  1184.         [class*="_comment-panel_"] [class*="_table-row_"]:hover [class*="_table-cell_"]{
  1185.           transform: translateX(calc(var(--comment-width) - 100%));/*セル内スクロール*/
  1186.         }
  1187.         [class*="_comment-panel_"] [class*="_table-row_"][data-comment-type="nicoad"] *|*::before/*広告アイコンを黄色に*/{
  1188.           -webkit-mask-image: var(--nicoad-icon);
  1189.           mask-image: var(--nicoad-icon);
  1190.           background: rgba(255,244,0,.75) !important;
  1191.           width: var(--font-size) !important;
  1192.           height: var(--font-size) !important;
  1193.           margin: 0 1em .2em 0;/*公式アイコンの重心調整*/
  1194.         }
  1195.         [class*="_comment-panel_"] [class*="_table-row_"][data-comment-type="nicoad"] */*広告文字を黄色に*/{
  1196.           color: rgba(255,244,0,.75) !important;
  1197.         }
  1198.         [class*="_comment-panel_"] [class*="_table-row_"][data-comment-type="trialWatch"] */*チャンネル無課金*/,
  1199.         [class*="_comment-panel_"] [class*="_table-row_"][data-comment-type="programExtend"] */*枠延長*/,
  1200.         [class*="_comment-panel_"] [class*="_table-row_"][data-comment-type="ranking"] */*ランキング入り通知*/,
  1201.         [class*="_comment-panel_"] [class*="_table-row_"][data-comment-type="cruise"] */*クルーズのお知らせ*/,
  1202.         [class*="_comment-panel_"] [class*="_table-row_"][data-comment-type="quote"] */*クルーズさんのコメント*/,
  1203.         [class*="_comment-panel_"] [class*="_table-row_"][data-comment-type="spi"] */*ニコニコ新市場*/,
  1204.         dummy{
  1205.           color: #a0a0a0 !important;/*黒背景に合わせて少し明るく*/
  1206.         }
  1207.         [class*="_comment-panel_"] [class*="_header-cell_"],
  1208.         [class*="_comment-panel_"] [class*="_table-cell_"]{
  1209.           font-size: var(--font-size);
  1210.           line-height: var(--line-height);
  1211.           padding: .2em 0 .2em 1em;
  1212.         }
  1213.         [class*="_comment-panel_"] [class*="_table-cell_"] > span{
  1214.           font-size: var(--font-size);
  1215.           width: auto !important;/*セル内スクロール対応*/
  1216.           overflow: visible !important;
  1217.         }
  1218.         [class*="_comment-panel_"] [class*="_table-cell_"] [class*="_comment-number_"]/*一部放送で表示されるコメント通し番号*/{
  1219.           display: none;
  1220.         }
  1221.         [class*="_comment-panel_"] [class*="_tooltip_"]{
  1222.           display: none;
  1223.           font-size: var(--font-size);
  1224.           color: white;
  1225.           background: rgba(32,32,32,.875);
  1226.           border-color: #404040;
  1227.         }
  1228.         /**** NGパネル ****/
  1229.         [class*="_ng-panel-controller_"] [class*="_ng-button_"][aria-expanded="false"]{
  1230.           width: var(--font-size) !important;
  1231.           height: var(--font-size) !important;
  1232.           /*少しだけ見やすく*/
  1233.           background: rgba(0,0,0,.75);
  1234.           border-radius: var(--font-size);
  1235.           padding: calc(var(--font-size) * .5);
  1236.           box-sizing: content-box;
  1237.           filter: drop-shadow(0 0 4px rgba(0,0,0,1.0));
  1238.         }
  1239.         [class*="_ng-panel_"] [class*="_ng-item-type-select-box_"],
  1240.         [class*="_ng-panel_"] [class*="_ng-register-button_"]{
  1241.           margin: 8px 0 0 8px;
  1242.         }
  1243.         [class*="_ng-panel_"] [class*="_ng-register-button_"]{
  1244.           flex: 1;
  1245.         }
  1246.         /**** おすすめ生放送 ****/
  1247.         [class*="_program-card-list_"] li{
  1248.           border-color: #333;
  1249.         }
  1250.         [class*="_program-title_"]{
  1251.           color: white;
  1252.         }
  1253.         [class*="_program-card_"]:hover{
  1254.           color: white;
  1255.           background: #333;
  1256.           border: none;
  1257.         }
  1258.         /**** その他 ****/
  1259.         [class*="_promote-menu_"]/*チケット購入者限定で放送中*/{
  1260.           background: rgba(255,255,255,.75);
  1261.           opacity: .25;
  1262.           transition: opacity 250ms;
  1263.         }
  1264.         [class*="_promote-menu_"]:hover{
  1265.           opacity: 1;
  1266.         }
  1267.         [class*="_banner-panel_"]{
  1268.           border: none;/*黒背景に合わせて広告の白ボーダーをなくす*/
  1269.           background: black;
  1270.         }
  1271.         [class*="_banner-panel_"] [class*="_close-button_"]{
  1272.           background: black;/*黒背景にしたぶん広告閉じるボタンの色も対応させる*/
  1273.         }
  1274.         [class*="_broadcast-participation-area_"]{
  1275.           border: none;/*タイムシフト時のコメント投稿欄の削除に合わせて(このままでは生放送中は不格好になるのでプレイヤ全体に下線を付与してある)*/
  1276.         }
  1277.         [class*="_player-area_"]{
  1278.           border-bottom: 1px solid #e5e5e5;/*コメント欄の下ボーダーをここで表現して区切りとする*/
  1279.         }
  1280.         [class*="_comment-post-form_"] [class*="_submit-button_"]{
  1281.           height: 100% !important;/*ボーダー1pxぶん調整*/
  1282.         }
  1283.         [class*="_snack-bar-area_"]{
  1284.           display: none;/*[タイムシフト視聴ではゲームやアンケートなどの操作はできません。]が邪魔*/
  1285.         }
  1286.         [class*="_program-information-area_"]{
  1287.           z-index: -1;/*後続のbox-shadowがプレイヤにかぶってくるので*/
  1288.         }
  1289.         [class*="_player-status_"] a,
  1290.         [class*="_program-statistics_"] button{
  1291.           color: inherit;
  1292.           background: transparent;
  1293.         }
  1294.         /**** 放送開始前 ****/
  1295.         [class*="_watch-rejected-information-overlay-area_"]{
  1296.           height: 100%;
  1297.         }
  1298.         [class*="_watch-rejected-information-overlay-area_"] [class*="_player-display-screen_"]{
  1299.           position: absolute;
  1300.           top: 0;
  1301.         }
  1302.         [class*="_watch-rejected-information-overlay-area_"] [class*="_player-display-screen_"] + [class*="_player-controller_"]{
  1303.           display: none;
  1304.         }
  1305.       </style>
  1306.     `,
  1307.     styleLive: () => `
  1308.       <style type="text/css">
  1309.         /* nicoHighlightColor: ${configs.nicoHighlightColor     = 'rgba(0,128,255,1)'} */
  1310.         /* panel_zIndex:       ${configs.panel_zIndex           = 101} */
  1311.         /* 流れるコメント透明度 */
  1312.         [data-selector="commentLayer"],
  1313.         [data-selector="telopLayer"]{
  1314.           transition: opacity 125ms;
  1315.         }
  1316.         [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="1"]{opacity: ${9/36 + ((9*(9+1))/2)/60}}/*比例25:75三角数(max:45)の重みがベスト*/
  1317.         [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="2"]{opacity: ${8/36 + ((8*(8+1))/2)/60}}
  1318.         [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="3"]{opacity: ${7/36 + ((7*(7+1))/2)/60}}
  1319.         [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="4"]{opacity: ${6/36 + ((6*(6+1))/2)/60}}
  1320.         [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="5"]{opacity: ${5/36 + ((5*(5+1))/2)/60}}
  1321.         [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="6"]{opacity: ${4/36 + ((4*(4+1))/2)/60}}
  1322.         [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="7"]{opacity: ${3/36 + ((3*(3+1))/2)/60}}
  1323.         [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="8"]{opacity: ${2/36 + ((2*(2+1))/2)/60}}
  1324.         [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="9"]{opacity: ${1/36 + ((1*(1+1))/2)/60}}
  1325.         [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="0"]{opacity: ${0/36 + ((0*(0+1))/2)/60}}
  1326.         [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="1"] ~ [data-selector="telopLayer"]{opacity: ${9/36 + ((9*(9+1))/2)/60}}
  1327.         [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="2"] ~ [data-selector="telopLayer"]{opacity: ${8/36 + ((8*(8+1))/2)/60}}
  1328.         [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="3"] ~ [data-selector="telopLayer"]{opacity: ${7/36 + ((7*(7+1))/2)/60}}
  1329.         [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="4"] ~ [data-selector="telopLayer"]{opacity: ${6/36 + ((6*(6+1))/2)/60}}
  1330.         [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="5"] ~ [data-selector="telopLayer"]{opacity: ${5/36 + ((5*(5+1))/2)/60}}
  1331.         [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="6"] ~ [data-selector="telopLayer"]{opacity: ${4/36 + ((4*(4+1))/2)/60}}
  1332.         [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="7"] ~ [data-selector="telopLayer"]{opacity: ${3/36 + ((3*(3+1))/2)/60}}
  1333.         [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="8"] ~ [data-selector="telopLayer"]{opacity: ${2/36 + ((2*(2+1))/2)/60}}
  1334.         [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="9"] ~ [data-selector="telopLayer"]{opacity: ${1/36 + ((1*(1+1))/2)/60}}
  1335.         [data-selector="playerDisplayScreen"] [data-selector="commentLayer"][data-opacity="0"] ~ [data-selector="telopLayer"]{opacity: ${0/36 + ((0*(0+1))/2)/60}}
  1336.         /* 10秒戻り中の流れるコメント非表示 */
  1337.         [data-selector="playerDisplayScreen"] #comment-layer-container{
  1338.           transition: opacity 1000ms;
  1339.           opacity: 1;
  1340.         }
  1341.         [data-selector="playerDisplayScreen"][data-rewinded="true"] #comment-layer-container{
  1342.           opacity: 0;
  1343.         }
  1344.         /* インジケータ */
  1345.         #${SCRIPTID}-indicator{
  1346.           position: absolute;
  1347.           bottom: 0;
  1348.           right: 0;
  1349.           padding: 1vh 1vw;
  1350.           font-size: 25vh;
  1351.           color: ${configs.nicoHighlightColor};
  1352.           filter: drop-shadow(0 0 2.5px rgba(0,0,0,.75));
  1353.           opacity: 0;
  1354.           z-index: ${configs.panel_zIndex};
  1355.           pointer-events: none;
  1356.           transition: opacity 250ms;
  1357.         }
  1358.         #${SCRIPTID}-indicator.active{
  1359.           opacity: .75;
  1360.         }
  1361.         #${SCRIPTID}-indicator #rewind{
  1362.           fill: rgba(195,195,195,.5);
  1363.           width: 25vh;
  1364.           height: 25vh;
  1365.         }
  1366.         #${SCRIPTID}-indicator #rewind.rewinded{
  1367.           fill: ${configs.nicoHighlightColor};
  1368.         }
  1369.         #${SCRIPTID}-indicator.active #rewind{
  1370.           animation: ${SCRIPTID}-blink 2s step-end infinite;
  1371.         }
  1372.         @keyframes ${SCRIPTID}-blink{
  1373.           50%{opacity: 0}
  1374.         }
  1375.         /* コメント透明度インジケータ・セレクタ */
  1376.         #comment-opacity-indicator{
  1377.           position: absolute;
  1378.           top: 0;
  1379.           left: 0;
  1380.           width: 100%;
  1381.           height: 100%;
  1382.           line-height: 32px;/*職人的調整*/
  1383.           font-size: 12px;
  1384.           font-weight: bold;
  1385.           color: black;
  1386.           z-index: 1;
  1387.         }
  1388.         #comment-opacity-indicator[data-opacity="1"], #comment-opacity-selector [data-opacity="1"]{opacity: ${9/9}}/*視認性を重視*/
  1389.         #comment-opacity-indicator[data-opacity="2"], #comment-opacity-selector [data-opacity="2"]{opacity: ${8/9}}
  1390.         #comment-opacity-indicator[data-opacity="3"], #comment-opacity-selector [data-opacity="3"]{opacity: ${7/9}}
  1391.         #comment-opacity-indicator[data-opacity="4"], #comment-opacity-selector [data-opacity="4"]{opacity: ${6/9}}
  1392.         #comment-opacity-indicator[data-opacity="5"], #comment-opacity-selector [data-opacity="5"]{opacity: ${5/9}}
  1393.         #comment-opacity-indicator[data-opacity="6"], #comment-opacity-selector [data-opacity="6"]{opacity: ${4/9}}
  1394.         #comment-opacity-indicator[data-opacity="7"], #comment-opacity-selector [data-opacity="7"]{opacity: ${3/9}}
  1395.         #comment-opacity-indicator[data-opacity="8"], #comment-opacity-selector [data-opacity="8"]{opacity: ${2/9}}
  1396.         #comment-opacity-indicator[data-opacity="9"], #comment-opacity-selector [data-opacity="9"]{opacity: ${1/9}}
  1397.         #comment-opacity-indicator[data-opacity="0"], #comment-opacity-selector [data-opacity="0"]{opacity: ${0/9}}
  1398.         [data-selector="commentVisibilityButton"][data-toggle-state="false"] #comment-opacity-indicator{visibility: hidden}
  1399.         [data-selector="commentVisibilityButton"]{
  1400.           z-index: 1;/*後のセレクタより上に*/
  1401.         }
  1402.         #comment-opacity-selector{
  1403.           color: white;
  1404.           padding: 0;
  1405.           margin: 0;
  1406.           list-style-type: none;
  1407.           display: flex;
  1408.           position: absolute;
  1409.           height: 100%;
  1410.           line-height: 32px;
  1411.           font-size: 12px;
  1412.           opacity: 0;
  1413.           pointer-events: none;
  1414.           transform: translate(calc(-100% + 32px), 0);
  1415.           transition: 250ms;
  1416.         }
  1417.         #comment-opacity-selector::before/*公式がクラス指定じゃないのでやむなくコピペ*/{
  1418.           content: attr(aria-label);
  1419.           display: block;
  1420.           position: absolute;
  1421.           bottom: 100%;
  1422.           left: 50%;
  1423.           padding: 6px 8px;
  1424.           letter-spacing: normal;
  1425.           box-sizing: border-box;
  1426.           text-align: center;
  1427.           white-space: nowrap;
  1428.           color: #fff;
  1429.           border-radius: 2px;
  1430.           background: rgba(0,0,0,.75);/*改変*/
  1431.           font-size: 12px;
  1432.           line-height: 1;
  1433.           pointer-events: none;
  1434.           transform: translate(-50%);
  1435.           z-index: 10000;
  1436.           box-shadow: 0 0 2px 0 rgba(0,0,0,.5);
  1437.           opacity: 0;
  1438.           transition: opacity .12s ease;
  1439.         }
  1440.         #comment-opacity-selector:hover::before{
  1441.           opacity: 1;
  1442.         }
  1443.         [data-selector="commentVisibilityButton"]:hover + #comment-opacity-selector,
  1444.         [data-selector="commentVisibilityButton"] + #comment-opacity-selector:hover{
  1445.           pointer-events: auto;
  1446.           opacity: 1;
  1447.           transform: translate(calc(-100% + 0px), 0);
  1448.         }
  1449.         #comment-opacity-selector li{
  1450.           padding: 0 .25em;
  1451.           cursor: pointer;
  1452.           transition: .12s ease;/*公式に合わせる*/
  1453.         }
  1454.         #comment-opacity-selector li:first-child{
  1455.           padding: 0 .25em 0 1.25em;
  1456.         }
  1457.         #comment-opacity-selector li:hover{
  1458.           opacity: 1;
  1459.           color: ${configs.nicoHighlightColor};
  1460.         }
  1461.         /* 当日時刻の追加 */
  1462.         [data-selector="seekInformation"]{
  1463.           display: flex;
  1464.           flex-direction: column;
  1465.         }
  1466.         [data-selector="seekInformation"] .${SCRIPTID}-localTime{
  1467.           color: #808080;
  1468.           font-size: 12px;
  1469.           margin-bottom: .25em;
  1470.         }
  1471.         [data-selector="timeStatusArea"] button[data-live-status="live"] ~ div .${SCRIPTID}-localTime{
  1472.           display: none;
  1473.         }
  1474.         [data-selector="timeStatusArea"] .${SCRIPTID}-localTime{
  1475.           color: #808080;
  1476.           font-size: 12px !important;
  1477.           margin: 0 .5em;
  1478.         }
  1479.         [data-browser-fullscreen] [data-selector="timeStatusArea"] .${SCRIPTID}-localTime{
  1480.           color: #c0c0c0;
  1481.         }
  1482.         [data-selector="timeStatusArea"] .${SCRIPTID}-localTime + span{
  1483.           font-size: 16px;/*少し大きく(公式12px)*/
  1484.           line-height: 24px;
  1485.         }
  1486.         [data-browser-fullscreen] [data-selector="timeStatusArea"] .${SCRIPTID}-localTime + span{
  1487.           font-size: 18px;/*少し大きく(公式12px)*/
  1488.         }
  1489.         [data-selector="timeStatusArea"] .${SCRIPTID}-localTime + span + span/*時刻の区切り*/{
  1490.           margin: 0 .5em;/*少し間隔を広げて見やすく*/
  1491.         }
  1492.         /* 新着コメント停止状態 */
  1493.         [class*="_comment-panel_"]:hover::after{
  1494.           content: " ";
  1495.           position: absolute;
  1496.           bottom: 0;
  1497.           width: 100%;
  1498.           height: 4px;
  1499.           animation: ${SCRIPTID}-stop 1s linear infinite alternate;
  1500.         }
  1501.         @keyframes ${SCRIPTID}-stop{
  1502.           0%{
  1503.             background: ${configs.nicoHighlightColor};
  1504.           }
  1505.           100%{
  1506.             background: transparent;
  1507.           }
  1508.         }
  1509.         /* ユーザー発言一覧 */
  1510.         dummy [class*="_comment-panel_"] [class*="_table-row_"][data-comment-type="normal"]{
  1511.           cursor: pointer;
  1512.         }
  1513.         /* 新着コメントのハイライト */
  1514.         [class*="_comment-panel_"] [class*="_table-row_"][data-new="true"]::after{
  1515.           animation: ${SCRIPTID}-new 6s linear 1 forwards;
  1516.           content: " ";
  1517.           width: 100%;
  1518.           height: 32px;
  1519.           background: rgba(255,255,255,.250);
  1520.           position: absolute;
  1521.           pointer-events: none;
  1522.         }
  1523.         @keyframes ${SCRIPTID}-new{
  1524.           0%{
  1525.             opacity: 1;
  1526.           }
  1527.           100%{
  1528.             opacity: 0;
  1529.           }
  1530.         }
  1531.         /* 新着コメントの公式スクロールインジケータ */
  1532.         [class*="_comment-panel_"] button[class*="_indicator_"]{
  1533.           opacity: 0 !important;
  1534.         }
  1535.         [class*="_comment-panel_"]:hover button[class*="_indicator_"]{
  1536.           opacity: 1 !important;
  1537.         }
  1538.         /* NGスコア */
  1539.         [class*="_comment-panel_"] [class*="_table-row_"] [class="___comment-score___${SCRIPTID}"]{
  1540.           visibility: hidden;
  1541.           margin: 0 .25em;
  1542.         }
  1543.         [class*="_comment-panel_"] [class*="_table-row_"]:hover [class="___comment-score___${SCRIPTID}"]{
  1544.           visibility: visible;
  1545.           color: #808080;
  1546.         }
  1547.       </style>
  1548.     `,
  1549.   };
  1550.   const setTimeout = window.setTimeout.bind(window), clearTimeout = window.clearTimeout.bind(window), setInterval = window.setInterval.bind(window), clearInterval = window.clearInterval.bind(window), requestAnimationFrame = window.requestAnimationFrame.bind(window), requestIdleCallback = window.requestIdleCallback.bind(window);
  1551.   const alert = window.alert.bind(window), confirm = window.confirm.bind(window), prompt = window.prompt.bind(window), getComputedStyle = window.getComputedStyle.bind(window), fetch = window.fetch.bind(window);
  1552.   if(!('isConnected' in Node.prototype)) Object.defineProperty(Node.prototype, 'isConnected', {get: function(){return document.contains(this)}});
  1553.   if(!('fullscreenElement' in document)) Object.defineProperty(document, 'fullscreenElement', {get: function(){return document.mozFullScreenElement}});
  1554.   class Storage{
  1555.     static key(key){
  1556.       return (SCRIPTID) ? (SCRIPTID + '-' + key) : key;
  1557.     }
  1558.     static save(key, value, expire = null){
  1559.       key = Storage.key(key);
  1560.       localStorage[key] = JSON.stringify({
  1561.         value: value,
  1562.         saved: Date.now(),
  1563.         expire: expire,
  1564.       });
  1565.     }
  1566.     static read(key){
  1567.       key = Storage.key(key);
  1568.       if(localStorage[key] === undefined) return undefined;
  1569.       let data = JSON.parse(localStorage[key]);
  1570.       if(data.value === undefined) return undefined;
  1571.       if(data.expire === undefined) return data;
  1572.       if(data.expire === null) return data.value;
  1573.       if(data.expire < Date.now()) return localStorage.removeItem(key);
  1574.       return data.value;
  1575.     }
  1576.     static delete(key){
  1577.       key = Storage.key(key);
  1578.       delete localStorage.removeItem(key);
  1579.     }
  1580.     static saved(key){
  1581.       key = Storage.key(key);
  1582.       if(localStorage[key] === undefined) return undefined;
  1583.       let data = JSON.parse(localStorage[key]);
  1584.       if(data.saved) return data.saved;
  1585.       else return undefined;
  1586.     }
  1587.   }
  1588.   const $ = function(s){return document.querySelector(s)};
  1589.   const $$ = function(s){return document.querySelectorAll(s)};
  1590.   const animate = function(callback, ...params){requestAnimationFrame(() => requestAnimationFrame(() => callback(...params)))};
  1591.   const wait = function(ms){return new Promise((resolve) => setTimeout(resolve, ms))};
  1592.   const createElement = function(html = '<span></span>'){
  1593.     let outer = document.createElement('div');
  1594.     outer.innerHTML = html;
  1595.     return outer.firstElementChild;
  1596.   };
  1597.   const observe = function(element, callback, options = {childList: true, attributes: false, characterData: false, subtree: false}){
  1598.     let observer = new MutationObserver(callback.bind(element));
  1599.     observer.observe(element, options);
  1600.     return observer;
  1601.   };
  1602.   const linkify = function(node){
  1603.     split(node);
  1604.     function split(n){
  1605.       if(['style', 'script', 'a'].includes(n.localName)) return;
  1606.       if(n.nodeType === Node.TEXT_NODE){
  1607.         let pos = n.data.search(linkify.RE);
  1608.         if(0 <= pos){
  1609.           let target = n.splitText(pos);/*pos直前までのnとpos以降のtargetに分割*/
  1610.           let rest = target.splitText(RegExp.lastMatch.length);/*targetと続くrestに分割*/
  1611.           /* この時点でn(処理済み),target(リンクテキスト),rest(次に処理)の3つに分割されている */
  1612.           let a = document.createElement('a');
  1613.           let match = target.data.match(linkify.RE);
  1614.           switch(true){
  1615.             case(match[1] !== undefined): a.href = (match[1][0] == 'h') ? match[1] : 'h' + match[1]; break;
  1616.             case(match[2] !== undefined): a.href = 'http://' + match[2]; break;
  1617.             case(match[3] !== undefined): a.href = 'mailto:' + match[4] + '@' + match[5]; break;
  1618.           }
  1619.           a.appendChild(target);/*textContent*/
  1620.           rest.before(a);
  1621.         }
  1622.       }else{
  1623.         for(let i = 0; n.childNodes[i]; i++) split(n.childNodes[i]);/*回しながらchildNodesは増えていく*/
  1624.       }
  1625.     }
  1626.   };
  1627.   linkify.RE = new RegExp([
  1628.     '(h?ttps?://[-\\w_./~*%$@:;,!?&=+#]+[-\\w_/~*%$@:;&=+#])',/*通常のURL*/
  1629.     '((?:\\w+\\.)+\\w+/[-\\w_./~*%$@:;,!?&=+#]*)',/*http://の省略形*/
  1630.     '((\\w[-\\w_.]+)(?:@|＠)(\\w[-\\w_.]+\\w))',/*メールアドレス*/
  1631.   ].join('|'));
  1632.   const secondsToTime = function(seconds){
  1633.     let floor = Math.floor, zero = (s) => s.toString().padStart(2, '0');
  1634.     let h = floor(seconds/3600), m = floor(seconds/60)%60, s = floor(seconds%60);
  1635.     if(h) return h + '時間' + zero(m) + '分' + zero(s) + '秒';
  1636.     if(m) return m + '分' + zero(s) + '秒';
  1637.     if(s) return s + '秒';
  1638.   };
  1639.   const timeToSeconds = function(time){
  1640.     let sign = (time[0] === '-') ? -1 : +1, parts = time.replace(/^-/, '').split(':').map(p => parseFloat(p)), s = 1, m = 60*s, h = 60*m;
  1641.     switch(parts.length){
  1642.       case(1): return sign * (parts[0]*s);
  1643.       case(2): return sign * (parts[0]*m + parts[1]*s);
  1644.       case(3): return sign * (parts[0]*h + parts[1]*m + parts[2]*s);
  1645.       default: return 0;
  1646.     }
  1647.   };
  1648.   const atLeast = function(min, b){
  1649.     return Math.max(min, b);
  1650.   };
  1651.   const atMost = function(a, max){
  1652.     return Math.min(a, max);
  1653.   };
  1654.   const between = function(min, b, max){
  1655.     return Math.min(Math.max(min, b), max);
  1656.   };
  1657.   const log = function(){
  1658.     if(typeof DEBUG === 'undefined') return;
  1659.     console.log(...log.build(new Error(), ...arguments));
  1660.   };
  1661.   log.build = function(error, ...args){
  1662.     let l = log.last = log.now || new Date(), n = log.now = new Date();
  1663.     let line = log.format.getLine(error), callers = log.format.getCallers(error);
  1664.     //console.log(error.stack);
  1665.     return [SCRIPTID + ':',
  1666.       /* 00:00:00.000  */ n.toLocaleTimeString() + '.' + n.getTime().toString().slice(-3),
  1667.       /* +0.000s       */ '+' + ((n-l)/1000).toFixed(3) + 's',
  1668.       /* :00           */ ':' + line,
  1669.       /* caller.caller */ (callers[2] ? callers[2] + '() => ' : '') +
  1670.       /* caller        */ (callers[1] || '') + '()',
  1671.       ...args
  1672.     ];
  1673.   };
  1674.   log.formats = [{
  1675.       name: 'Firefox Scratchpad',
  1676.       detector: /MARKER@Scratchpad/,
  1677.       getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1],
  1678.       getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
  1679.     }, {
  1680.       name: 'Firefox Console',
  1681.       detector: /MARKER@debugger/,
  1682.       getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1],
  1683.       getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
  1684.     }, {
  1685.       name: 'Firefox Greasemonkey 3',
  1686.       detector: /\/gm_scripts\//,
  1687.       getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1],
  1688.       getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
  1689.     }, {
  1690.       name: 'Firefox Greasemonkey 4+',
  1691.       detector: /MARKER@user-script:/,
  1692.       getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1] - 500,
  1693.       getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
  1694.     }, {
  1695.       name: 'Firefox Tampermonkey',
  1696.       detector: /MARKER@moz-extension:/,
  1697.       getLine: (e) => e.stack.split('\n')[1].match(/([0-9]+):[0-9]+$/)[1] - 2,
  1698.       getCallers: (e) => e.stack.match(/^[^@]*(?=@)/gm),
  1699.     }, {
  1700.       name: 'Chrome Console',
  1701.       detector: /at MARKER \(<anonymous>/,
  1702.       getLine: (e) => e.stack.split('\n')[2].match(/([0-9]+):[0-9]+\)?$/)[1],
  1703.       getCallers: (e) => e.stack.match(/[^ ]+(?= \(<anonymous>)/gm),
  1704.     }, {
  1705.       name: 'Chrome Tampermonkey',
  1706.       detector: /at MARKER \(chrome-extension:.*?\/userscript.html\?name=/,
  1707.       getLine: (e) => e.stack.split('\n')[2].match(/([0-9]+):[0-9]+\)?$/)[1] - 1,
  1708.       getCallers: (e) => e.stack.match(/[^ ]+(?= \(chrome-extension:)/gm),
  1709.     }, {
  1710.       name: 'Chrome Extension',
  1711.       detector: /at MARKER \(chrome-extension:/,
  1712.       getLine: (e) => e.stack.split('\n')[2].match(/([0-9]+):[0-9]+\)?$/)[1],
  1713.       getCallers: (e) => e.stack.match(/[^ ]+(?= \(chrome-extension:)/gm),
  1714.     }, {
  1715.       name: 'Edge Console',
  1716.       detector: /at MARKER \(eval/,
  1717.       getLine: (e) => e.stack.split('\n')[2].match(/([0-9]+):[0-9]+\)$/)[1],
  1718.       getCallers: (e) => e.stack.match(/[^ ]+(?= \(eval)/gm),
  1719.     }, {
  1720.       name: 'Edge Tampermonkey',
  1721.       detector: /at MARKER \(Function/,
  1722.       getLine: (e) => e.stack.split('\n')[2].match(/([0-9]+):[0-9]+\)$/)[1] - 4,
  1723.       getCallers: (e) => e.stack.match(/[^ ]+(?= \(Function)/gm),
  1724.     }, {
  1725.       name: 'Safari',
  1726.       detector: /^MARKER$/m,
  1727.       getLine: (e) => 0,/*e.lineが用意されているが最終呼び出し位置のみ*/
  1728.       getCallers: (e) => e.stack.split('\n'),
  1729.     }, {
  1730.       name: 'Default',
  1731.       detector: /./,
  1732.       getLine: (e) => 0,
  1733.       getCallers: (e) => [],
  1734.   }];
  1735.   log.format = log.formats.find(function MARKER(f){
  1736.     if(!f.detector.test(new Error().stack)) return false;
  1737.     //console.log('////', f.name, 'wants', 0/*the exact line number here*/, '\n' + new Error().stack);
  1738.     return true;
  1739.   });
  1740.   const warn = function(){
  1741.     if(!DEBUG) return;
  1742.     let body = Array.from(arguments).join(' ');
  1743.     if(warn.notifications[body]) return;
  1744.     Notification.requestPermission();
  1745.     warn.notifications[body] = new Notification(SCRIPTNAME, {body: body});
  1746.     warn.notifications[body].addEventListener('click', function(e){
  1747.       Object.values(warn.notifications).forEach(n => n.close());
  1748.       warn.notifications = {};
  1749.     });
  1750.     log(body);
  1751.   };
  1752.   warn.notifications = {};
  1753.   const time = function(label){
  1754.     if(!DEBUG) return;
  1755.     const BAR = '|', TOTAL = 100;
  1756.     switch(true){
  1757.       case(label === undefined):/* time() to output total */
  1758.         let total = 0;
  1759.         log('Total:');
  1760.         Object.keys(time.records).forEach((label) => total += time.records[label].total);
  1761.         Object.keys(time.records).forEach((label) => {
  1762.           console.log(
  1763.             BAR.repeat((time.records[label].total / total) * TOTAL),
  1764.             label + ':',
  1765.             (time.records[label].total).toFixed(3) + 'ms',
  1766.             '(' + time.records[label].count + ')',
  1767.           );
  1768.         });
  1769.         time.records = {};
  1770.         break;
  1771.       case(!time.records[label]):/* time('label') to create and start the record */
  1772.         time.records[label] = {count: 0, from: performance.now(), total: 0};
  1773.         break;
  1774.       case(time.records[label].from === null):/* time('label') to re-start the lap */
  1775.         time.records[label].from = performance.now();
  1776.         break;
  1777.       case(0 < time.records[label].from):/* time('label') to add lap time to the record */
  1778.         time.records[label].total += performance.now() - time.records[label].from;
  1779.         time.records[label].from = null;
  1780.         time.records[label].count += 1;
  1781.         break;
  1782.     }
  1783.   };
  1784.   time.records = {};
  1785.   core.initialize();
  1786.   if(window === top && console.timeEnd) console.timeEnd(SCRIPTID);
  1787. })();