☰

MylistPocket

動画をあとで見る ＋ 簡易NG機能。 ZenzaWatchとの連携も可能。

当前为 2018-04-27 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        MylistPocket
  3. // @namespace   https://github.com/segabito/
  4. // @description 動画をあとで見る ＋ 簡易NG機能。 ZenzaWatchとの連携も可能。
  5. // @match       *://www.nicovideo.jp/*
  6. // @match       *://ext.nicovideo.jp/
  7. // @match       *://ext.nicovideo.jp/#*
  8. // @match       *://ch.nicovideo.jp/*
  9. // @match       *://com.nicovideo.jp/*
  10. // @match       *://commons.nicovideo.jp/*
  11. // @match       *://dic.nicovideo.jp/*
  12. // @match       *://ex.nicovideo.jp/*
  13. // @match       *://info.nicovideo.jp/*
  14. // @match       *://search.nicovideo.jp/*
  15. // @match       *://uad.nicovideo.jp/*
  16. // @match       *://site.nicovideo.jp/*
  17. // @exclude     *://ads*.nicovideo.jp/*
  18. // @exclude     *://www.upload.nicovideo.jp/*
  19. // @exclude     *://www.nicovideo.jp/watch/*?edit=*
  20. // @exclude     *://ch.nicovideo.jp/tool/*
  21. // @exclude     *://flapi.nicovideo.jp/*
  22. // @exclude     *://dic.nicovideo.jp/p/*
  23. // @version     0.3.11
  24. // @grant       none
  25. // @author      segabito macmoto
  26. // @license     public domain
  27. // @require     https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js
  28. // ==/UserScript==
  29.  
  30. // 保留
  31. // https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents.js
  32.  
  33. (function() {
  34.   const PRODUCT = 'MylistPocket';
  35.  
  36.   const monkey = function(PRODUCT) {
  37.     const console = window.console;
  38.     //const $ = window.jQuery;
  39.     console.log(`exec ${PRODUCT}..`);
  40.     const TOKEN = 'r:' + (Math.random());
  41.  
  42.     const CONSTANT = {
  43.       BASE_Z_INDEX: 100000
  44.     };
  45.     const MylistPocket = {debug: {}};
  46.     window.MylistPocket = MylistPocket;
  47.  
  48.     const __css__ = (`
  49.       a[href*='watch/'] {
  50.         display: inline-block;
  51.       }
  52.  
  53.       .mylistPocketHoverMenu {
  54.         display: none;
  55.         opacity: 0.8;
  56.         position: absolute;
  57.         z-index: ${CONSTANT.BASE_Z_INDEX + 100000};
  58.         font-size: 8pt;
  59.         padding: 0;
  60.         line-height: 26px;
  61.         font-weight: bold;
  62.         text-align: center;
  63.         transition: box-shadow 0.2s ease, opacity 0.4s ease, padding 0.2s ease;
  64.         user-select: none;
  65.       }
  66.  
  67.       .mylistPocketHoverMenu.is-busy {
  68.         opacity: 0 !important;
  69.         pointer-events: none;
  70.       }
  71.         .mylistPocketHoverMenu.is-otherDomain .wwwOnly {
  72.           display: none;
  73.         }
  74.         .mylistPocketHoverMenu.is-otherDomain:not(.is-zenzaReady) .wwwZenzaOnly {
  75.           display: none;
  76.         }
  77.         .mylistPocketHoverMenu .zenzaMenu {
  78.           display: none;
  79.         }
  80.         .mylistPocketHoverMenu.is-zenzaReady .zenzaMenu {
  81.           display: inline-block;
  82.         }
  83.  
  84.  
  85.       .mylistPocketButton {
  86.         /*font-family: Menlo;*/
  87.         display: block;
  88.         font-weight: bolder;
  89.         cursor: pointer;
  90.         width: 32px;
  91.         height: 26px;
  92.         cursor: pointer;
  93.         box-shadow: 1px 1px 1px #000;
  94.         transition:
  95.           0.1s box-shadow ease,
  96.           0.1s transform ease;
  97.         font-size: 16px;
  98.         line-height: 24px;
  99.         -webkit-user-select: none;
  100.         -moz-use-select: none;
  101.         user-select: none;
  102.         outline: none;
  103.       }
  104.  
  105.       .mylistPocketButton:hover {
  106.         transform: scale(1.2);
  107.         box-shadow: 4px 4px 5px #000;
  108.       }
  109.  
  110.       .mylistPocketButton:active {
  111.         transform: scale(1.0);
  112.         box-shadow: none;
  113.         transition: none;
  114.       }
  115.  
  116.       .is-deflistUpdating .mylistPocketButton.deflist-add::after,
  117.       .is-deflistSuccess  .mylistPocketButton.deflist-add::after,
  118.       .is-deflistFail     .mylistPocketButton.deflist-add::after,
  119.       .mylistPocketButton:hover::after, #mylistPocket-poupup [tooltip] {
  120.         content: attr(tooltip);
  121.         position: absolute;
  122.         /*top:  0px;
  123.         left: 50%;*/
  124.         top:  50%;
  125.         right: -8px;
  126.         padding: 2px 4px;
  127.         white-space: nowrap;
  128.         font-size: 12px;
  129.         color: #fff;
  130.         background: #333;
  131.         transform: translate3d(-50%, -120%, 0);
  132.         transform: translate3d(100%, -50%, 0);
  133.         pointer-events: none;
  134.       }
  135.  
  136.       .is-deflistUpdating .mylistPocketButton.deflist-add {
  137.         cursor: wait;
  138.         opacity: 0.9;
  139.         transform: scale(1.0);
  140.         box-shadow: none;
  141.         transition: none;
  142.         background: #888;
  143.         border-style: inset;
  144.       }
  145.       .is-deflistSuccess .mylistPocketButton.deflist-add,
  146.       .is-deflistFail    .mylistPocketButton.deflist-add {
  147.         transform: scale(1.0);
  148.         box-shadow: none;
  149.         transition: none;
  150.       }
  151.       .is-deflistSuccess  .mylistPocketButton.deflist-add::after {
  152.         content: attr(data-result);
  153.         background: #393;
  154.       }
  155.       .is-deflistFail     .mylistPocketButton.deflist-add::after {
  156.         content: attr(data-result);
  157.         background: #933;
  158.       }
  159.       .is-deflistUpdating .mylistPocketButton.deflist-add::after {
  160.         content: '更新中';
  161.         background: #333;
  162.       }
  163.  
  164.       .mylistPocketButton + .mylistPocketButton {
  165.         margin-top: 4px;
  166.       }
  167.  
  168.       .mylistPocketHoverMenu:hover {
  169.         font-weibht: bolder;
  170.         opacity: 1;
  171.       }
  172.  
  173.       .mylistPocketHoverMenu:active {
  174.       }
  175.  
  176.       .mylistPocketHoverMenu.is-show {
  177.         display: block;
  178.       }
  179.  
  180.       #mylistPocket-popup {
  181.         display: none;
  182.         perspective: 800px;
  183.       }
  184.       #mylistPocket-popup.is-firefox {
  185.         /*perspective: none !important;*/
  186.         position: fixed;
  187.         z-index: 200000;
  188.         transform: translate3d(-50%, -50%, 0);
  189.         opacity: 0;
  190.         transition: 0.3s opacity ease;
  191.         top: -9999px; left: -9999px;
  192.       }
  193.  
  194.       #mylistPocket-popup.show {
  195.         display: block;
  196.       }
  197.       #mylistPocket-popup.is-firefox.show {
  198.         top: 50%;
  199.         left: 50%;
  200.         opacity: 1;
  201.       }
  202.  
  203.  
  204.       #mylistPocket-popup .owner-icon {
  205.         width: 64px;
  206.         height: 64px;
  207.         transform-origin: center;
  208.         transform-origin: center;
  209.         transition:
  210.           0.2s transform ease,
  211.           0.2s box-shadow ease
  212.         ;
  213.       }
  214.       #mylistPocket-popup .owner-icon:hover {
  215.       }
  216.  
  217.       #mylistPocket-popup .description a {
  218.         color: #ffff00 !important;
  219.         text-decoration: none !important;
  220.         font-weight: normal !important;
  221.         display: inline-block;
  222.       }
  223.       #mylistPocket-popup .description a.watch {
  224.         display: block;
  225.       }
  226.  
  227.       #mylistPocket-popup .description a:visited {
  228.         color: #ffff99 !important;
  229.       }
  230.       #mylistPocket-popup .description button {
  231.         /*font-family: Menlo;*/
  232.         font-size: 16px;
  233.         font-weight: bolder;
  234.         margin: 4px 8px;
  235.         padding: 4px 8px;
  236.         cursor: pointer;
  237.         border-radius: 0;
  238.         background: #333;
  239.         color: #ccc;
  240.         border: solid 2px #ccc;
  241.         outline: none;
  242.       }
  243.       #mylistPocket-popup .description button:hover {
  244.         transform: translate(-2px,-2px);
  245.         box-shadow: 2px 2px 2px #000;
  246.         background: #666;
  247.         transition:
  248.           0.2s transform ease,
  249.           0.2s box-shadow ease
  250.           ;
  251.       }
  252.       #mylistPocket-popup .description button:active {
  253.         transform: none;
  254.         box-shadow: none;
  255.         transition: none;
  256.       }
  257.       #mylistPocket-popup .description button:active::hover {
  258.         opacity: 0;
  259.       }
  260.  
  261.       #mylistPocket-popup .watch {
  262.         display: block;
  263.         position: relative;
  264.         line-height: 60px;
  265.         box-sizing: border-box;
  266.         padding: 4px 16px;;
  267.         min-height: 60px;
  268.         width: 280px;
  269.         margin: 8px 10px;
  270.         background: #444;
  271.         border-radius: 4px;
  272.       }
  273.  
  274.       #mylistPocket-popup .watch:hover {
  275.         background: #446;
  276.       }
  277.  
  278.       #mylistPocket-popup .videoThumbnail {
  279.         position: absolute;
  280.         right: 16px;
  281.         height: 60px;
  282.         transform-origin: center;
  283.         transition:
  284.           0.2s transform ease,
  285.           0.2s box-shadow ease
  286.         ;
  287.       }
  288.       #mylistPocket-popup .videoThumbnail:hover {
  289.         transform: scale(2);
  290.         box-shadow: 0 0 8px #888;
  291.         transition:
  292.           0.2s transform ease 0.5s,
  293.           0.2s box-shadow ease 0.5s
  294.         ;
  295.       }
  296.  
  297.  
  298.     .zenzaPlayerContainer.is-error   #mylistPocket-popup,
  299.     .zenzaPlayerContainer.is-loading #mylistPocket-popup,
  300.     .zenzaPlayerContainer.error   #mylistPocket-popup,
  301.     .zenzaPlayerContainer.loading #mylistPocket-popup {
  302.       opacity: 0;
  303.       pointer-events: none;
  304.     }
  305.  
  306.     .mylistPocketHoverMenu.is-guest .is-need-login {
  307.       display: none !important;
  308.     }
  309.  
  310.       .xDomainLoaderFrame {
  311.         position: fixed;
  312.         left: -100%;
  313.         top: -100%;
  314.         width: 64px;
  315.         height: 64px;
  316.         opacity: 0;
  317.         border: 0;
  318.       }
  319.     `).trim();
  320.  
  321.     const nicoadHideCss = `
  322.       .nicoadVideoItem {
  323.         display: none;
  324.       }
  325.     `.trim();
  326.  
  327.     const __tpl__ = (`
  328.       <div class="mylistPocketHoverMenu scalingUI">
  329.         <button class="mylistPocketButton command deflist-add wwwZenzaOnly is-need-login" data-command="deflist"
  330.           tooltip="とりあえずマイリスト">&#x271A;</button>
  331.         <button class="mylistPocketButton command info" data-command="info"
  332.           tooltip="動画情報を表示">？</button>
  333.         <button class="mylistPocketButton command playlist-queue zenzaMenu" data-command="playlist-queue"
  334.           tooltip="ZenzaWatchのプレイリストに追加">▶</button>
  335.       </div>
  336.       </div>
  337.  
  338.       <div id="mylistPocket-popup">
  339.         <span slot="video-title">【実況】どんぐりころころの大冒険 Part1(最終回)</span>
  340.         <a href="/watch/sm9" slot="watch-link"></a>
  341.         <img slot="video-thumbnail" data-type="image">
  342.         <a slot="owner-page-link" href="//www.nicovideo.jp/user/1234" class="owner-page-link target-change" data-type="link" rel="noopener"><img slot="owner-icon" class="owner-icon" src="http://res.nimg.jp/img/user/thumb/blank_s.jpg" data-type="image"></img></a>
  343.  
  344.         <span slot="upload-date"     data-type="date">1970/01/01 00:00</span>
  345.         <span slot="view-counter"    data-type="int">12,345</span>
  346.         <span slot="mylist-counter"  data-type="int">6,789</span>
  347.         <span slot="comment-counter" data-type="int">2,525</span>
  348.  
  349.         <span slot="duration" class="duration">1:23</span>
  350.  
  351.         <span slot="owner-id">1234</span>
  352.         <span slot="locale-owner-name">ほげほげ</span>
  353.  
  354.         <div slot="error-description"></div>
  355.         <div class="description" slot="description" data-type="html"></div>
  356.         <span slot="last-res-body"></span>
  357.  
  358.       </div>
  359.  
  360.       <template id="mylistPocket-popup-template">
  361.         <style>
  362.  
  363.           :host(#mylistPocket-popup) {
  364.             position: fixed;
  365.             z-index: 200000;
  366.             transform: translate3d(-50%, -50%, 0);
  367.             opacity: 0;
  368.             transition: 0.3s opacity ease;
  369.             top: -9999px; left: -9999px;
  370.           }
  371.  
  372.           :host(#mylistPocket-popup.show) {
  373.             top: 50%;
  374.             left: 50%;
  375.             opacity: 1;
  376.           }
  377.  
  378.           .root.is-otherDomain .wwwOnly {
  379.             display: none;
  380.           }
  381.           .root.is-otherDomain:not(.is-zenzaReady) .wwwZenzaOnly {
  382.             display: none;
  383.           }
  384.  
  385.           * {
  386.             box-sizing: border-box;
  387.             font-kerning: none;
  388.           }
  389.  
  390.           a {
  391.             color: #ffff00;
  392.             font-weight: bold;
  393.             display: inline-block;
  394.           }
  395.  
  396.           a:visited {
  397.             color: #ffff99;
  398.           }
  399.  
  400.           button {
  401.             font-size: 14px;
  402.             padding: 8px 8px;
  403.             cursor: pointer;
  404.             border-radius: 0;
  405.             margin: 0;
  406.             background: #333;
  407.             color: #ccc;
  408.             border: solid 2px #ccc;
  409.             outline: none;
  410.             line-height: 20px;
  411.             user-select: none;
  412.             -webkit-user-select: none;
  413.             -moz-user-select: none;
  414.           }
  415.           button:hover {
  416.             transform: translate(-4px,-4px);
  417.             box-shadow: 4px 4px 4px #000;
  418.             background: #666;
  419.             transition:
  420.               0.2s transform ease,
  421.               0.2s box-shadow ease
  422.               ;
  423.           }
  424.  
  425.           button.is-updating {
  426.             cursor: wait;
  427.           }
  428.           button.is-active,
  429.           button:active {
  430.             transform: none;
  431.             box-shadow: none;
  432.             transition: none;
  433.           }
  434.           button.is-active::after,
  435.           button:active::after {
  436.             opacity: 0;
  437.           }
  438.  
  439.  
  440.           [tooltip] {
  441.             position: relative;
  442.           }
  443.  
  444.           .is-deflistUpdating .deflist-add::after,
  445.           .is-deflistSuccess  .deflist-add::after,
  446.           .is-deflistFail     .deflist-add::after,
  447.           [tooltip]:hover::after {
  448.             content: attr(tooltip);
  449.             position: absolute;
  450.             top:  0px;
  451.             left: 50%;
  452.             padding: 2px 4px;
  453.             white-space: nowrap;
  454.             font-size: 14px;
  455.             color: #fff;
  456.             background: #333;
  457.             transform: translate3d(-50%, -120%, 0);
  458.             pointer-events: none;
  459.  
  460.           }
  461.  
  462.  
  463.           .root {
  464.             text-align: left;
  465.  
  466.             border-radius: 0px;
  467.             outline-offset: 8px;
  468.             border: 12px solid rgba(32, 32, 32, 0);
  469.             border-radius: 20px;
  470.             padding: 8px 0;
  471.             background: rgba(0, 0, 0, 0.7);
  472.             color: #ccc;
  473.             box-shadow: 0 0 16px #000;
  474.             transition:
  475.               0.6s -webkit-clip-path ease,
  476.               0.6s clip-path ease,
  477.               0.5s transform ease;
  478.               /*0.4s border-radius ease-out 0.4s,
  479.               0.4s height ease-out 0.4s*/
  480.             ;
  481.           }
  482.  
  483.           .root * {
  484.           }
  485.  
  486.           .root.show {
  487.             opacity: 1;
  488.           }
  489.  
  490.           .root.is-loading,
  491.           .root.is-loading.is-ok,
  492.           .root.is-loading.is-fail {
  493.             text-align: center;
  494.             position: relative;
  495.             width: 190px;
  496.             height: 190px;
  497.             padding: 32px;
  498.             opacity: 0.8;
  499.             cursor: wait;
  500.             border-radius: 100%;
  501.             clip-path: circle(100px at center) !important;
  502.             transition: none;
  503.             outline: none;
  504.             transform: none !important;
  505.           }
  506.           .root.is-firefox {
  507.           }
  508.           .root.is-loading > * {
  509.             pointer-events: none;
  510.           }
  511.  
  512.           .root.is-setting {
  513.             transform: rotateX(180deg);
  514.           }
  515.  
  516.           .root.is-setting > *:not(.setting-panel) {
  517.             pointer-events: none;
  518.             z-index: 1;
  519.           }
  520.  
  521.           .root:not(.is-setting) > .setting-panel {
  522.             pointer-events: none;
  523.           }
  524.  
  525.           .root.is-setting > .setting-panel {
  526.             display: block;
  527.             opacity: 1;
  528.             pointer-events: auto;
  529.           }
  530.  
  531.           .root.is-loading         .loading-inner,
  532.           .root.is-loading.is-ok   .loading-inner,
  533.           .root.is-loading.is-fail .loading-inner {
  534.             position: absolute;
  535.             top: 50%;
  536.             left: 50%;
  537.             transform: translate3d(-50%, -50%, 0);
  538.           }
  539.  
  540.           .loading-inner .spinner {
  541.             font-size: 64px;
  542.             display: inline-block;
  543.             animation-name: spin;
  544.             animation-iteration-count: infinite;
  545.             animation-duration: 3s;
  546.             animation-timing-function: linear;
  547.           }
  548.  
  549.           @keyframes spin {
  550.             0%   { transform: rotate(0deg); }
  551.             100% { transform: rotate(1800deg); }
  552.           }
  553.  
  554.  
  555.  
  556.           .root.is-ok {
  557.             width: 800px;
  558.             /*clip-path: circle(800px at center);*/
  559.           }
  560.  
  561.           .root.is-ok.noclip {
  562.             clip-path: none;
  563.           }
  564.  
  565.           .root.is-fail {
  566.             font-size: 120%;
  567.             white-space: nowrap;
  568.             text-align: center;
  569.             padding: 16px;
  570.           }
  571.  
  572.           .root.is-loading>*:not(.loading-now),
  573.           .root.is-loading.is-ok>*:not(.loading-now),
  574.           .root.is-loading.is-fail>*:not(.loading-now),
  575.           .root.is-fail:not(.is-loading)>*:not(.error-info),
  576.           .root.is-ok:not(.is-loading)>*:not(.video-detail):not(.setting-panel) {
  577.             display: none !important;
  578.           }
  579.  
  580.           .root.is-loading>.loading-now,
  581.           .root.is-fail>.error-info,
  582.           .root.is-ok>.video-detail {
  583.             display: block;
  584.           }
  585.  
  586.           .header {
  587.             padding: 8px 8px 8px;
  588.             font-size: 12px;
  589.           }
  590.             .upload-date {
  591.               margin-right: 8px;
  592.             }
  593.             .counter span + span {
  594.               margin-left: 8px;
  595.             }
  596.             .video-title {
  597.               font-weight: bolder;
  598.               font-size: 22px;
  599.               margin-bottom: 4px;
  600.             }
  601.  
  602.             .close-button {
  603.               position: absolute;
  604.               right: 0;
  605.               top: 0;
  606.               transition: 0.2s background ease, 0.2s border-color ease;
  607.               cursor: pointer;
  608.               width: 48px;
  609.               height: 48px;
  610.               font-size: 28px;
  611.               line-height: 36px;
  612.               text-align: center;
  613.               user-select: none;
  614.               border: 6px solid rgba(80, 80, 80, 0.5);
  615.               border-color: transparent;
  616.               border-radius: 0 16px 0 0;
  617.             }
  618.             .close-button:hover {
  619.               background: #333;
  620.               /*border-color: rgba(0, 0, 0, 0.9);*/
  621.               /*transform: translate(-50%, -50%) scale(2.5);*/
  622.             }
  623.             .close-button:active {
  624.               /*transform: translate(-50%, -50%) scale(2) rotate(360deg);*/
  625.               box-shadow: none;
  626.               transition: none;
  627.             }
  628.  
  629.             .is-setting .close-button {
  630.               display: none;
  631.             }
  632.  
  633.  
  634.  
  635.  
  636.           .main {
  637.             display: flex;
  638.             background: rgba(0, 0, 0, 0.2);
  639.             box-shadow: 0 0 4px rgba(0, 0, 0, 0.5) inset;
  640.           }
  641.  
  642.           .main-left {
  643.             width: 360px;
  644.             padding: 8px;
  645.             z-index: 100;
  646.           }
  647.             .video-thumbnail-container {
  648.               position: relative;
  649.               width: 360px;
  650.               height: 270px;
  651.               background: #000;
  652.               /*box-shadow: 2px 2px 4px #000;*/
  653.             }
  654.             .video-thumbnail-container ::slotted(img) {
  655.               width: 360px;
  656.               height: 270px;
  657.             }
  658.  
  659.             .video-thumbnail-container .duration {
  660.               position: absolute;
  661.               display: inline-block;
  662.               right: 0;
  663.               bottom: 0;
  664.               font-size: 14px;
  665.               background: #000;
  666.               color: #fff;
  667.               padding: 2px 4px;
  668.             }
  669.             .video-thumbnail-container:hover .duration {
  670.               display: none;
  671.             }
  672.  
  673.  
  674.           .main-right {
  675.             position: relative;
  676.             padding: 0;
  677.             flex-grow: 1;
  678.             font-size: 14px;
  679.           }
  680.  
  681.             ::slotted(.owner-page-link) {
  682.               display: inline-block;
  683.               vertical-align: middle;
  684.             }
  685.  
  686.             .owner-page-link img {
  687.               border: 1px solid #333;
  688.               border-radius: 3px;
  689.             }
  690.  
  691.             .video-info {
  692.               /*background: rgba(0, 0, 0, 0.2);*/
  693.               max-height: 282px;
  694.               overflow-x: hidden;
  695.               overflow-y: scroll;
  696.             }
  697.  
  698.             *::-webkit-scrollbar,
  699.             .video-info::-webkit-scrollbar {
  700.               background: rgba(34, 34, 34, 0.5);
  701.             }
  702.  
  703.             *::-webkit-scrollbar-thumb,
  704.             .video-info::-webkit-scrollbar-thumb {
  705.               border-radius: 0;
  706.               background: #666;
  707.             }
  708.  
  709.             *::-webkit-scrollbar-button,
  710.             .video-info::-webkit-scrollbar-button {
  711.               background: #666;
  712.               display: none;
  713.             }
  714.  
  715.             *::scrollbar,
  716.             .video-info::scrollbar {
  717.               background: #222;
  718.             }
  719.  
  720.             *::scrollbar-thumb,
  721.             .video-info::scrollbar-thumb {
  722.               border-radius: 0;
  723.               background: #666;
  724.             }
  725.  
  726.             *::scrollbar-button,
  727.             .video-info::scrollbar-button {
  728.               background: #666;
  729.               display: none;
  730.             }
  731.  
  732.  
  733.  
  734.             .owner-info {
  735.               margin: 16px;
  736.               display: table;
  737.             }
  738.  
  739.               .owner-info * {
  740.                 vertical-align: middle;
  741.                 word-break: break-all;
  742.               }
  743.               
  744.               .owner-info>* {
  745.                 display: table-cell !important;
  746.               }
  747.               
  748.               .owner-name {
  749.                 display: inline-block;
  750.                 padding: 8px;
  751.                 font-size: 18px;
  752.               }
  753.               .owner-info.is-favorited {
  754.                 font-weight: bolder;
  755.                 color: orange;
  756.               }
  757.  
  758.               .owner-info.is-ng {
  759.                 color: #888;
  760.                 text-decoration: line-through;
  761.               }
  762.  
  763.               .is-channel .owner-name::before {
  764.                 content: 'CH';
  765.                 margin: 0 4px;
  766.                 background: #999;
  767.                 color: #333;
  768.                 padding: 2px 4px;
  769.                 border: 1px solid;
  770.               }
  771.  
  772.               .locale-owner-name::after {
  773.                 content: ' さん';
  774.               }
  775.  
  776.               .owner-info .add-ng-button,
  777.               .owner-info .add-fav-button {
  778.                 visibility: hidden;
  779.                 pointer-events: none;
  780.               }
  781.               .is-ng-enable .owner-info:hover .add-ng-button,
  782.               .is-ng-enable .owner-info:hover .add-fav-button {
  783.                 visibility: visible;
  784.                 pointer-events: auto;
  785.               }
  786.  
  787.             .description {
  788.               word-break: break-all;
  789.               line-height: 1.5;
  790.               padding: 0 16px 8px;
  791.             }
  792.  
  793.             .description:first-letter {
  794.               font-size: 24px;
  795.             }
  796.             
  797.             .last-res-body {
  798.               margin: 16px 16px 0;
  799.               border: 1px solid #ccc;
  800.               padding: 4px;
  801.               border-radius: 4px;
  802.               word-break: break-all;
  803.               font-size: 12px;
  804.               min-height: 24px;
  805.             }
  806.  
  807.  
  808.           .footer {
  809.             padding: 8px;
  810.           }
  811.  
  812.             .pocket-button {
  813.               cusror: pointer;
  814.             }
  815.  
  816.             .pocket-button:active {
  817.             }
  818.  
  819.  
  820.             .video-tags {
  821.               display: block;
  822.             }
  823.  
  824.               .tag-container {
  825.                 display: inline-block;
  826.                 position: relative;
  827.                 padding: 4px 8px;
  828.                 border: 1px solid #888;
  829.                 border-radius: 4px;
  830.                 margin: 0 20px 4px 0;
  831.               }
  832.               .tag-container .tag {
  833.                 display: inline-block;
  834.                 font-size: 14px;
  835.                 color: #ccc;
  836.                 text-decoration: none;
  837.                 cursor: pointer;
  838.               }
  839.               .tag-container:hover .tag {
  840.                 color: #fff !important;
  841.               }
  842.               .tag-container.is-favorited .tag {
  843.                 font-weight: bolder;
  844.                 color: orange !important;
  845.               }
  846.               .tag-container.is-ng .tag {
  847.                 text-decoration: line-through;
  848.                 color: #888 !important;
  849.               }
  850.  
  851.  
  852.               .tag-container       .add-ng-button,
  853.               .tag-container       .add-fav-button {
  854.                 position: absolute !important;
  855.                 visibility: hidden;
  856.                 pointer-events: none;
  857.               }
  858.               .is-ng-enable .tag-container:hover .add-ng-button,
  859.               .is-ng-enable .tag-container:hover .add-fav-button {
  860.                 visibility: visible;
  861.                 pointer-events: auto;
  862.                 width: 24px;
  863.                 height: 24px;
  864.                 line-height: 24px;
  865.                 font-size: 24px;
  866.                 vertical-align: bottom;
  867.                 display: inline-block;
  868.               }
  869.               .is-ng-enable .tag-container:hover .add-ng-button {
  870.                 right: -16px;
  871.               }
  872.               .is-ng-enable .tag-container:hover .add-fav-button {
  873.                 left: -16px;
  874.               }
  875.             
  876.             .footer-menu {
  877.               position: absolute;
  878.               right: 0px;
  879.               bottom: 0px;
  880.               transform: translate3d(0, 120%, 0);
  881.               opacity: 1;
  882.               transition:
  883.                 0.4s opacity ease 0.4s,
  884.                 0.4s transform ease 0.4s;
  885.             }
  886.  
  887.             .is-setting .video-detail .footer-menu {
  888.               transform: translate3d(0, 0, 0);
  889.               opacity: 0;
  890.             }
  891.  
  892.               .footer-menu button {
  893.                 min-width: 70px;
  894.               }
  895.               
  896.               .regular-menu {
  897.                 display: inline-block;
  898.                 background: rgba(0, 0, 0, 0.7);
  899.                 position: relative;
  900.                 border-radius: 8px;
  901.                 padding: 12px 16px;
  902.                 box-shadow: 0 0 16px #000;
  903.               }
  904.  
  905.               .is-deflistUpdating .deflist-add {
  906.                 cursor: wait;
  907.                 opacity: 0.9;
  908.                 transform: scale(1.0);
  909.                 box-shadow: none;
  910.                 transition: none;
  911.               }
  912.               .is-deflistSuccess .deflist-add,
  913.               .is-deflistFail    .deflist-add {
  914.                 transform: scale(1.0);
  915.                 box-shadow: none;
  916.                 transition: none;
  917.               }
  918.               .is-deflistSuccess  .deflist-add::after {
  919.                 content: attr(data-result);
  920.                 background: #393;
  921.               }
  922.               .is-deflistFail     .deflist-add::after {
  923.                 content: attr(data-result);
  924.                 background: #933;
  925.               }
  926.               .is-deflistUpdating .deflist-add::after {
  927.                 content: '更新中';
  928.                 background: #333;
  929.               }
  930.  
  931.               .zenza-menu {
  932.                 display: none;
  933.               }
  934.  
  935.               .is-zenzaReady .zenza-menu {
  936.                 display: inline-block;
  937.                 background: rgba(0, 0, 0, 0.7);
  938.                 margin-left: 32px;
  939.                 position: relative;
  940.                 border-radius: 8px;
  941.                 padding: 12px 16px;
  942.                 box-shadow: 0 0 16px #000;
  943.               }
  944.  
  945.               .is-zenzaReady .zenza-menu::after {
  946.                 content: 'ZenzaWatch';
  947.                 position: absolute;
  948.                 left: 50%;
  949.                 bottom: 10px;
  950.                 padding: 2px 8px;
  951.                 transform: translate(-50%, 100%);
  952.                 pointer-events: none;
  953.                 font-weith: bolder;
  954.                 background: rgba(0, 0, 0, 0.7);
  955.                 pointer-events: none;
  956.                 border-radius: 4px;
  957.                 white-space: nowrap;
  958.               }
  959.  
  960.               .setting-menu {
  961.                 display: inline-block;
  962.                 background: rgba(0, 0, 0, 0.7);
  963.                 margin-left: 32px;
  964.                 position: relative;
  965.                 border-radius: 8px;
  966.                 padding: 12px 16px;
  967.                 box-shadow: 0 0 16px #000;
  968.               }
  969.  
  970.           .toggle-setting-button {
  971.             font-size: 32px;
  972.             border-radius: 100%;
  973.             border: 12px solid #333;
  974.             cursor: pointer;
  975.             background: rgba(32, 32, 32, 1);
  976.             transition:
  977.               0.2s transform ease
  978.               ;
  979.           }
  980.  
  981.           .toggle-setting-button:hover {
  982.             transform: scale(1.2);
  983.             box-shadow: none;
  984.             background: rgba(32, 32, 32, 1);
  985.             background: transparent;
  986.           }
  987.  
  988.           .toggle-setting-button:active {
  989.             transform: scale(1.0);
  990.           }
  991.  
  992.           .setting-panel {
  993.             opacity: 0;
  994.             position: absolute;
  995.             top: 0;
  996.             left: 0;
  997.             width: 100%;
  998.             height: 100%;
  999.             padding: 8px 12px;
  1000.             z-index: 10000;
  1001.             background: rgba(50, 50, 64, 0.9);
  1002.             border-radius: 16px;
  1003.             color: #ccc;
  1004.             /*-webkit-user-select: none;
  1005.             user-select: none;*/
  1006.             transform: rotateX(180deg);
  1007.             transition: 0.25s opacity ease 0.25s;
  1008.           }
  1009.           .is-setting .setting-panel {
  1010.             transition: 0.25s opacity ease;
  1011.           }
  1012.             .setting-panel-main {
  1013.               width: 100%;
  1014.               height: 100%;
  1015.               overflow-y: scroll;
  1016.               overflow-x: hidden;
  1017.             }
  1018.  
  1019.             .root:not(.is-setting) .setting-panel .footer-menu {
  1020.               transform: translate3d(0, 0, 0);
  1021.               opacity: 0;
  1022.             }
  1023.  
  1024.             .root.is-setting       .setting-panel .footer-menu {
  1025.               right:  -12px;
  1026.               bottom: -12px;
  1027.               transform: translate3d(0, 120%, 0);
  1028.               opacity: 1;
  1029.               transition:
  1030.                 0.4s opacity ease 0.4s,
  1031.                 0.4s transform ease 0.4s;
  1032.             }
  1033.  
  1034.  
  1035.             .close-setting-menu {
  1036.               display: inline-block;
  1037.               background: rgba(0, 0, 0, 0.7);
  1038.               margin-left: 32px;
  1039.               position: relative;
  1040.               border-radius: 8px;
  1041.               padding: 12px 16px;
  1042.               box-shadow: 0 0 16px #000;
  1043.             }
  1044.             
  1045.             .setting-label {
  1046.               display: inline-block;
  1047.               line-height: 24px;
  1048.               padding: 8px;
  1049.             }
  1050.  
  1051.             .setting-label:hover {
  1052.               text-shadow: 0 0 4px #996;
  1053.             }
  1054.  
  1055.             .setting-label * {
  1056.               cursor: pointer;
  1057.             }
  1058.  
  1059.             .setting-label input[type=checkbox] {
  1060.               transform: scale(2);
  1061.               margin: 8px;
  1062.               vertical-align: middle;
  1063.             }
  1064.  
  1065.             .setting-label input + span {
  1066.               font-size: 16px;
  1067.             }
  1068.  
  1069.             .setting-label input:checked + span {
  1070.             }
  1071.  
  1072.  
  1073.             .setting-fav,
  1074.             .setting-ng-textarea,
  1075.             .setting-fav-textarea {
  1076.               display: none;
  1077.             }
  1078.  
  1079.             .is-ng-enable .setting-fav {
  1080.               display: block;
  1081.             }
  1082.             .is-ng-enable .setting-ng-textarea,
  1083.             .is-ng-enable .setting-fav-textarea {
  1084.               display: flex;
  1085.             }
  1086.  
  1087.               .setting-ng-text-column,
  1088.               .setting-fav-text-column {
  1089.                 flex: 1;
  1090.                 position: relative;
  1091.                 padding: 8px;
  1092.               }
  1093.  
  1094.                 .setting-ng-text-column textarea,
  1095.                 .setting-fav-text-column textarea {
  1096.                   width: 100%;
  1097.                   height: 150px;
  1098.                   background: transparent;
  1099.                   color: #ccc;
  1100.                 }
  1101.  
  1102.             .setting-ng-label {
  1103.               display: none;
  1104.             }
  1105.  
  1106.             .is-ng-enable .setting-ng-label {
  1107.               display: inline-block;
  1108.             }
  1109.  
  1110.  
  1111.           .add-ng-button,
  1112.           .add-fav-button {
  1113.             display: none;
  1114.           }
  1115.  
  1116.           .is-ng-enable .add-ng-button,
  1117.           .is-ng-enable .add-fav-button {
  1118.             display: inline-block;
  1119.             position: relative;
  1120.             width: 32px;
  1121.             height: 32px;
  1122.             line-height: 32px;
  1123.             font-size: 28px;
  1124.             padding: 0;
  1125.             margin: 0;
  1126.             /*border-radius: 100%;*/
  1127.             border: none;
  1128.             text-align: center;
  1129.             color: red;
  1130.             font-weight: bolder;
  1131.             cursor: pointer;
  1132.             background: transparent;
  1133.             box-shadow: none;
  1134.             transition:
  1135.               0.2s transform ease,
  1136.               0.2s text-shadow ease;
  1137.           }
  1138.           .is-ng-enable .add-fav-button {
  1139.             color: orange;
  1140.           }
  1141.           .is-ng-enable .add-ng-button:hover,
  1142.           .is-ng-enable .add-fav-button:hover {
  1143.             transform: scale(1.2);
  1144.             text-shadow: 2px 2px 4px black;
  1145.           }
  1146.           .is-ng-enable .add-ng-button:active,
  1147.           .is-ng-enable .add-fav-button:active {
  1148.             transform: scale(1.0);
  1149.             text-shadow: 0   0   2px black;
  1150.           }
  1151.           .is-ng-enable .add-ng-button:hover::after,
  1152.           .is-ng-enable .add-fav-button:hover::after {
  1153.             content: 'NG登録';
  1154.             position: absolute;
  1155.             top: 0;
  1156.             left: 50%;
  1157.             transform: translate(-50%, -80%);
  1158.             font-size: 12px;
  1159.             line-height: 12px;
  1160.             white-space: nowrap;
  1161.             background: rgba(192, 192, 192, 0.8);
  1162.             color: #000;
  1163.             opacity: 0.9;
  1164.             padding: 2px 4px;
  1165.             text-shadow: none;
  1166.             font-weight: normal;
  1167.             pointer-evnets: none !important;
  1168.           }
  1169.           .is-ng-enable .is-ng .add-ng-button:hover::after,
  1170.           .is-ng-enable .is-ng .add-fav-button:hover::after {
  1171.             content: 'NG解除';
  1172.           }
  1173.           .is-ng-enable .add-fav-button:hover::after {
  1174.             content: '強調登録';
  1175.           }
  1176.           .is-ng-enable .is-favorited .add-fav-button:hover::after {
  1177.             content: '強調解除';
  1178.           }
  1179.           .is-ng-enable .add-ng-button:active:hover::after,
  1180.           .is-ng-enable .add-fav-button:active:hover::after {
  1181.             display: none;
  1182.           }
  1183.  
  1184.        </style>
  1185.         <div class="popup root">
  1186.           <div class="loading-now">
  1187.             <div class="loading-inner">
  1188.               <span class="spinner">&#8987;</span>
  1189.             </div>
  1190.           </div>
  1191.           <div class="error-info">
  1192.             <slot name="error-description"></slot>
  1193.           </div>
  1194.           <div class="video-detail">
  1195.             <div class="header">
  1196.               <div class="video-title"><slot name="video-title"></slot></div>
  1197.  
  1198.               <span class="upload-date">投稿: <slot name="upload-date"/></span>
  1199.               <span class="counter">
  1200.                 <span class="view-counter">再生: <slot name="view-counter"/></span>
  1201.                 <span class="comment-counter">コメント: <slot name="comment-counter"/></span>
  1202.                 <span class="mylist-counter">マイリスト: <slot name="mylist-counter"/></span>
  1203.               </span>
  1204.               <div class="close-button command" data-command="close" tooltip="閉じる">
  1205.                 &#x2716;
  1206.               </div>
  1207.             </div>
  1208.  
  1209.             <div class="main">
  1210.  
  1211.               <div class=" main-left">
  1212.                 <div class="video-thumbnail-container">
  1213.                   <slot name="video-thumbnail"></slot>
  1214.                   <span class="duration"><slot name="duration"></slot></slot>
  1215.                 </div>
  1216.               </div>
  1217.  
  1218.               <div class="video-info main-right scrollable">
  1219.  
  1220.                 <div class="owner-info">
  1221.                   <slot name="owner-page-link"></slot>
  1222.                   <span class="owner-name"><slot name="locale-owner-name"></slot>
  1223.                   <button class="add-fav-button command" data-command="toggle-fav-owner">★</button>
  1224.                   <button class="add-ng-button command" data-command="toggle-ng-owner">&#x2716;</button>
  1225.                   </span>
  1226.                 </div>
  1227.  
  1228.                 <div class="description">
  1229.                   <slot name="description"></slot>
  1230.                 </div>
  1231.  
  1232.                 <div class="last-res-body">
  1233.                   <slot name="last-res-body"></slot>
  1234.                 </div>
  1235.  
  1236.                 
  1237.               </div>
  1238.  
  1239.             </div>
  1240.  
  1241.             <div class="footer">
  1242.               <div class="video-tags">
  1243.                 <slot name="tag"></slot>
  1244.               </div>
  1245.             </div>
  1246.             <div class="footer-menu scalingUI">
  1247.               <div class="regular-menu">
  1248.                 <button
  1249.                   class="mylistPocketButton deflist-add pocket-button command command-watch-id wwwZenzaOnly"
  1250.                   data-command="deflist-add"
  1251.                   tooltip="とりあえずマイリスト"
  1252.                 >とり</button>
  1253.                 <button
  1254.                   class="pocket-button command command-watch-id"
  1255.                   data-command="mylist-window"
  1256.                   tooltip="マイリスト"
  1257.                 >マイ</button>
  1258.                 <button
  1259.                   class="pocket-button command command-watch-id"
  1260.                   data-command="open-mylist-open"
  1261.                   tooltip="公開マイリスト"
  1262.                 >公開</button>
  1263.                  <button
  1264.                   class="pocket-button command command-video-id"
  1265.                   data-command="twitter-hash-open"
  1266.                   tooltip="Twitterの反応"
  1267.                 >#Twitter</button>
  1268.               </div>
  1269.  
  1270.  
  1271.               <div class="zenza-menu">
  1272.                 <button
  1273.                   class="pocket-button command command-watch-id"
  1274.                   data-command="zenza-open-now"
  1275.                   tooltip="ZenzaWatchで開く"
  1276.                 >Zen</button>
  1277.                 <button
  1278.                   class="pocket-button command command-watch-id"
  1279.                   data-command="playlist-inert"
  1280.                   tooltip="プレイリスト(次に再生)"
  1281.                 >playlist</button>
  1282.                 <button
  1283.                   class="pocket-button command command-watch-id"
  1284.                   data-command="playlist-queue"
  1285.                   tooltip="プレイリスト(末尾に追加)"
  1286.                 >▶</button>
  1287.               </div>
  1288.  
  1289.               <div class="setting-menu">
  1290.                 <button
  1291.                   class="pocket-button command"
  1292.                   data-command="toggle-setting"
  1293.                 >設 定</button>
  1294.               </div>
  1295.  
  1296.             </div>
  1297.           </div>
  1298.           <div class="setting-panel">
  1299.  
  1300.             <div class="setting-panel-main scrollable">
  1301.               <h2>MylistPocket 設定</h2>
  1302.               <label class="setting-label">
  1303.                 <input
  1304.                   type="checkbox"
  1305.                   class="setting-form"
  1306.                   data-config-name="openNewWindow"
  1307.                 >
  1308.                 <span>タグやリンクを新しいタブで開く (次回から反映)</span>
  1309.               </label>
  1310.  
  1311.               <label class="setting-label">
  1312.                 <input
  1313.                   type="checkbox"
  1314.                   class="setting-form"
  1315.                   data-config-name="enableAutoComment"
  1316.                   data-config-namespace="mylist"
  1317.                 >
  1318.                 <span>マイリストコメントに投稿者名を入れる</span>
  1319.               </label>
  1320.  
  1321.  
  1322.               <h2>NG設定(リロード後に反映)</h2>
  1323.               <label class="setting-label">
  1324.                 <input
  1325.                   type="checkbox"
  1326.                   class="setting-form"
  1327.                   data-config-name="enable"
  1328.                   data-config-namespace="ng"
  1329.                 >
  1330.                 <span>簡易NG＆強調機能を使う</span>
  1331.               </label>
  1332.  
  1333.               <label class="setting-label">
  1334.                 <input
  1335.                   type="checkbox"
  1336.                   class="setting-form"
  1337.                   data-config-name="hide"
  1338.                   data-config-namespace="nicoad"
  1339.                 >
  1340.                 <span>検索結果のニコニ広告を消す</span>
  1341.               </label>
  1342.  
  1343.               <label class="setting-label wwwOnly wwwZenzaOnly setting-ng-label">
  1344.                 <input
  1345.                   type="checkbox"
  1346.                   class="setting-form"
  1347.                   data-config-name="syncZenza"
  1348.                   data-config-namespace="ng"
  1349.                 >
  1350.                 <span>NGタグ・投稿者をZenzaWatchにも反映する</span>
  1351.               </label>
  1352.  
  1353.               <div class="setting-ng-textarea setting-ng">
  1354.                 <div class="setting-ng-text-column">
  1355.                   投稿者ID
  1356.                   <textarea
  1357.                     class="setting-form"
  1358.                     data-config-name="owner"
  1359.                     data-config-namespace="ng"
  1360.                   ></textarea>
  1361.                 </div>
  1362.                 <div class="setting-ng-text-column">
  1363.                   タグ
  1364.                   <textarea
  1365.                     class="setting-form"
  1366.                     data-config-name="tag"
  1367.                     data-config-namespace="ng"
  1368.                   ></textarea>
  1369.                 </div>
  1370.                 <div class="setting-ng-text-column">
  1371.                   タイトル・説明文
  1372.                   <textarea
  1373.                     class="setting-form"
  1374.                     data-config-name="word"
  1375.                     data-config-namespace="ng"
  1376.                   ></textarea>
  1377.                 </div>
  1378.                </div>
  1379.               <h2 class="setting-fav">強調表示設定</h2>
  1380.               <div class="setting-fav-textarea setting-fav">
  1381.                 <div class="setting-fav-text-column">
  1382.                   投稿者ID
  1383.                   <textarea
  1384.                     class="setting-form"
  1385.                     data-config-name="owner"
  1386.                     data-config-namespace="fav"
  1387.                   ></textarea>
  1388.                 </div>
  1389.                 <div class="setting-fav-text-column">
  1390.                   タグ
  1391.                   <textarea
  1392.                     class="setting-form"
  1393.                     data-config-name="tag"
  1394.                     data-config-namespace="fav"
  1395.                   ></textarea>
  1396.                 </div>
  1397.                 <div class="setting-fav-text-column">
  1398.                   タイトル・説明文
  1399.                   <textarea
  1400.                     class="setting-form"
  1401.                     data-config-name="word"
  1402.                     data-config-namespace="fav"
  1403.                   ></textarea>
  1404.                 </div>
  1405.                </div>
  1406.  
  1407.              </div>
  1408.  
  1409.             <div class="footer-menu">
  1410.               <div class="close-setting-menu">
  1411.                 <button
  1412.                   class="pocket-button command"
  1413.                   data-command="toggle-setting"
  1414.                 >戻 る</button>
  1415.               </div>
  1416.             </div>
  1417.  
  1418.           </div>
  1419.         </div>
  1420.       </template>
  1421.     `).trim();
  1422.  
  1423.     const __ng_css__ = `
  1424.       /* .item_cell 将棋盤ランキング  .item 従来のランキングと検索 */
  1425.  
  1426.       .item_cell.is-ng-wait .item,
  1427.       .item.is-ng-wait {
  1428.         outline: 1px dotted rgba(192, 192, 192, 0.8);
  1429.       }
  1430.  
  1431.       .item_cell.is-ng-queue .item,
  1432.       .item.is-ng-queue {
  1433.         outline: 2px dotted rgba(192, 192, 192, 0.8);
  1434.       }
  1435.  
  1436.       .item_cell.is-ng-current .item,
  1437.       .item.is-ng-current {
  1438.         outline: 3px dotted rgba(128, 225, 128, 0.8);
  1439.       }
  1440.  
  1441.       .item_cell.is-ng-resolved .item,
  1442.       .item.is-ng-resolved {
  1443.         outline: 0px solid green;
  1444.       }
  1445.  
  1446.       .item_cell.is-fav-favorited .item,
  1447.       .item.is-fav-favorited {
  1448.         outline: 3px dotted orange;
  1449.         outline-offset: 3px;
  1450.       }
  1451.       .item.videoRanking.is-fav-favorited {
  1452.         outline-offset: -3px;
  1453.       }
  1454.  
  1455.       .item_cell.is-ng-rejected {
  1456.         opacity: 0;
  1457.         pointer-events: none;
  1458.       }
  1459.  
  1460.       .item.is-ng-rejected {
  1461.         display: none;
  1462.         opacity: 0;
  1463.         pointer-events: none;
  1464.       }
  1465.  
  1466.       .NicorepoTimelineItem.is-ng-rejected {
  1467.         display: none;
  1468.         opacity: 0;
  1469.         pointer-events: none;
  1470.       }
  1471.       
  1472.       body.is-ng-disable .is-ng-rejected {
  1473.         outline: none;
  1474.         display: block !important;
  1475.         pointer-events: auto;
  1476.         opacity: 0.5;
  1477.       }
  1478.  
  1479.       /*.is-ng-failed:not(.COMMUNITY) {
  1480.         outline: black dotted 1px;
  1481.         opacity: 0.5;
  1482.       }*/
  1483.  
  1484.       /* チャンネル検索 */
  1485.         #search .item.is-ng-rejected {
  1486.           display: none;
  1487.         }
  1488.  
  1489.       /* 新検索β */
  1490.         #row-results .is-ng-wait {
  1491.           outline: 1px dotted rgba(192, 192, 192, 0.8);
  1492.         }
  1493.  
  1494.         #row-results .is-ng-queue {
  1495.           outline: 2px dotted rgba(192, 192, 192, 0.8);
  1496.         }
  1497.  
  1498.         #row-results .is-ng-rejected {
  1499.           display: none;
  1500.         }
  1501.  
  1502.         #row-results .is-fav-favorited {
  1503.           outline: 4px dotted pink;
  1504.         }
  1505.  
  1506.     `;
  1507.  
  1508.     // TODO: ライブラリ化
  1509.     const util = MylistPocket.util = (() => {
  1510.       const util = {};
  1511.  
  1512.       const addedStyle = {};
  1513.       util.addStyle = function(styles, id) {
  1514.         var elm = document.createElement('style');
  1515.         elm.type = 'text/css';
  1516.         if (id) { elm.id = id; }
  1517.         if (addedStyle[styles]) { return; }
  1518.         addedStyle[styles] = 1;
  1519.  
  1520.         var text = styles.toString();
  1521.         text = document.createTextNode(text);
  1522.         elm.appendChild(text);
  1523.         var head = document.getElementsByTagName('head');
  1524.         head = head[0];
  1525.         head.appendChild(elm);
  1526.         return elm;
  1527.       };
  1528.  
  1529.       util.mixin = function(self, o) {
  1530.         _.each(Object.keys(o), f => {
  1531.           if (!_.isFunction(o[f])) { return; }
  1532.           if (_.isFunction(self[f])) { return; }
  1533.           self[f] = o[f].bind(o);
  1534.         });
  1535.       };
  1536.  
  1537.       util.createWebWorker = function(func) {
  1538.         const src = func.toString().replace(/^function.*?\{/, '').replace(/}$/, '');
  1539.         const blob = new Blob([src], {type: 'text\/javascript'});
  1540.         const url = URL.createObjectURL(blob);
  1541.  
  1542.         return new Worker(url);
  1543.       };
  1544.  
  1545.       util.attachShadowDom = function({host, tpl, mode = 'open'}) {
  1546.         const root = host.attachShadow ?
  1547.           host.attachShadow({mode}) : host.createShadowRoot();
  1548.         const node = document.importNode(tpl.content, true);
  1549.         root.appendChild(node);
  1550.         return root;
  1551.       };
  1552.  
  1553.  
  1554.  
  1555.       util.getWatchId = function(url) {
  1556.         /\/?watch\/([a-z0-9]+)/.test(url || location.pathname);
  1557.         return RegExp.$1;
  1558.       };
  1559.  
  1560.       util.isLogin = function() {
  1561.         return document.getElementsByClassName('siteHeaderLogin').length < 1;
  1562.       };
  1563.  
  1564.       util.escapeHtml = function(text) {
  1565.         var map = {
  1566.           '&':    '&amp;',
  1567.           '\x27': '&#39;',
  1568.           '"':    '&quot;',
  1569.           '<':    '&lt;',
  1570.           '>':    '&gt;'
  1571.         };
  1572.         return text.replace(/[&"'<>]/g, char => {
  1573.           return map[char];
  1574.         });
  1575.       };
  1576.  
  1577.       util.unescapeHtml = function(text) {
  1578.         var map = {
  1579.           '&amp;'  : '&' ,
  1580.           '&#39;'  : '\x27',
  1581.           '&quot;' : '"',
  1582.           '&lt;'   : '<',
  1583.           '&gt;'   : '>'
  1584.         };
  1585.         return text.replace(/(&amp;|&#39;|&quot;|&lt;|&gt;)/g, char => {
  1586.           return map[char];
  1587.         });
  1588.       };
  1589.  
  1590.       util.escapeRegs = function(text) {
  1591.         const map = {
  1592.           '\\': '\\\\',
  1593.           '*':  '\\*',
  1594.           '+':  '\\+',
  1595.           '.':  '\\.',
  1596.           '?':  '\\?',
  1597.           '{':  '\\{',
  1598.           '}':  '\\}',
  1599.           '(':  '\\(',
  1600.           ')':  '\\)',
  1601.           '[':  '\\[',
  1602.           ']':  '\\]',
  1603.           '^':  '\\^',
  1604.           '$':  '\\$',
  1605.           '-':  '\\-',
  1606.           '|':  '\\|',
  1607.           '/':  '\\/',
  1608.         };
  1609.         return text.replace(/[\\\*\+\.\?\{\}\(\)\[\]\^\$\-\|\/]/g, char => {
  1610.           return map[char];
  1611.         });
  1612.       };
  1613.  
  1614.       util.hasLargeThumbnail = function(videoId) { // return true;
  1615.         // 大サムネが存在する最初の動画ID。 ソースはちゆ12歳
  1616.         // ※この数字以降でもごく稀に例外はある。
  1617.         var threthold = 16371888;
  1618.         var cid = videoId.substr(0, 2);
  1619.         if (cid !== 'sm') { return false; }
  1620.  
  1621.         var fid = videoId.substr(2) * 1;
  1622.         if (fid < threthold) { return false; }
  1623.  
  1624.         return true;
  1625.       };
  1626.  
  1627.       util.httpLink = function(html) {
  1628.         let links = {}, keyCount = 0;
  1629.         const getTmpKey = function() { return ` <!--${keyCount++}--> `; };
  1630.  
  1631.  
  1632.         html = html.replace(/@([a-zA-Z0-9_]+)/g,
  1633.           (g, id) => {
  1634.             const tmpKey = getTmpKey();
  1635.             links[tmpKey] =
  1636.               ` <a href="https://twitter.com/${id}" class="twitterLink" rel="noopener" target="_blank">@${id}</a> `;
  1637.             return tmpKey;
  1638.           });
  1639.  
  1640.  
  1641.         html = html.replace(/(im)(\d+)/g,
  1642.           ` <a href="//seiga.nicovideo.jp/seiga/$1$2" class="seigaLink" rel="noopener" target="_blank">$1$2</a> `);
  1643.         html = html.replace(/(co)(\d+)/g,
  1644.           ` <a href="//com.nicovideo.jp/community/$1$2" class="communityLink" rel="noopener" target="_blank">$1$2</a> `);
  1645.         html = html.replace(/(watch|mylist|user)\/(\d+)/g, ` <a href="/$1/$2" rel="noopener" class="videoLink target-change">$1/$2</a> `);
  1646.         html = html.replace(/(sm|nm|so)(\d+)/g,       ` <a href="/watch/$1$2" rel="noopener" class="videoLink target-change">$1$2</a> `);
  1647.  
  1648.         let linkmatch = /<a.*?<\/a>/, n;
  1649.         html = html.split('<br />').join(' <br /> ');
  1650.         while ((n = linkmatch.exec(html)) !== null) {
  1651.           let tmpKey = getTmpKey();
  1652.           links[tmpKey] = n;
  1653.           html = html.replace(n, tmpKey);
  1654.         }
  1655.  
  1656.         html = html.replace(/\((https?:\/\/[\x21-\x3b\x3d-\x7e]+)\)/gi, '( $1 )');
  1657.         html = html.replace(/(https?:\/\/[\x21-\x3b\x3d-\x7e]+)http/gi, '$1 http');
  1658.         html = html.replace(/(https?:\/\/[\x21-\x3b\x3d-\x7e]+)/gi, '<a href="$1" rel="noopener" target="_blank" class="otherSite">$1</a>');
  1659.         Object.keys(links).forEach(tmpKey => {
  1660.           html = html.replace(tmpKey, links[tmpKey]);
  1661.         });
  1662.  
  1663.         html = html.split(' <br /> ').join('<br />');
  1664.         return html;
  1665.       };
  1666.  
  1667.       util.getSleepPromise = function(sleepTime, label = 'sleep') {
  1668.         return function(result) {
  1669.           return new Promise(resolve => {
  1670.             //console.time('sleep promise...' + label);
  1671.             window.setTimeout(() => {
  1672.               //console.timeEnd('sleep promise...' + label);
  1673.               return resolve(result);
  1674.             }, sleepTime);
  1675.           });
  1676.         };
  1677.       };
  1678.  
  1679.       util.getPageLanguage = function() {
  1680.         try {
  1681.           var h = document.getElementsByClassName('html')[0];
  1682.           return h.lang || 'ja-JP';
  1683.         } catch(e) {
  1684.           return 'ja-JP';
  1685.         }
  1686.       };
  1687.  
  1688.  
  1689.       const videoIdReg = /^[a-z]{2}\d+$/;
  1690.       util.getThumbnailUrlByVideoId = function(videoId) {
  1691.         if (!videoIdReg.test(videoId)) {
  1692.           return null;
  1693.         }
  1694.         const fileId = parseInt(videoId.substr(2), 10);
  1695.         const num = (fileId % 4) + 1;
  1696.         const large = util.hasLargeThumbnail(videoId) ? '.L' : '';
  1697.         return '//tn-skr' + num + '.smilevideo.jp/smile?i=' + fileId + large;
  1698.       };
  1699.  
  1700.       util.isFirefox = function() {
  1701.         return navigator.userAgent.toLowerCase().indexOf('firefox') >= 0;
  1702.       };
  1703.  
  1704.       return util;
  1705.     })();
  1706.  
  1707.  
  1708.     class Emitter {
  1709.       constructor() {
  1710.       }
  1711.  
  1712.       on(name, callback) {
  1713.         if (!this._events) { this._events = {}; }
  1714.         name = name.toLowerCase();
  1715.         if (!this._events[name]) {
  1716.           this._events[name] = [];
  1717.         }
  1718.         this._events[name].push(callback);
  1719.       }
  1720.  
  1721.       clear(name) {
  1722.         if (!this._events) { this._events = {}; }
  1723.         if (name) {
  1724.           this._events[name] = [];
  1725.         } else {
  1726.           this._events = {};
  1727.         }
  1728.       }
  1729.  
  1730.       emit(name) {
  1731.         if (!this._events) { this._events = {}; }
  1732.         name = name.toLowerCase();
  1733.         if (!this._events.hasOwnProperty(name)) { return; }
  1734.         const e = this._events[name];
  1735.         const arg = Array.prototype.slice.call(arguments, 1);
  1736.         for (let i =0, len = e.length; i < len; i++) {
  1737.           e[i].apply(null, arg);
  1738.         }
  1739.       }
  1740.  
  1741.       emitAsync(...args) {
  1742.         window.setTimeout(() => {
  1743.           this.emit(...args);
  1744.         }, 0);
  1745.       }
  1746.     }
  1747.  
  1748.     MylistPocket.emitter = util.emitter = new Emitter();
  1749.  
  1750.     const ZenzaDetector = (function() {
  1751.       let isReady = false;
  1752.       let Zenza = null;
  1753.       const emitter = new Emitter();
  1754.  
  1755.       const initialize = function() {
  1756.         const onZenzaReady = () => {
  1757.           isReady = true;
  1758.           Zenza = window.ZenzaWatch;
  1759.  
  1760.           Zenza.emitter.on('hideHover', () => {
  1761.             util.emitter.emit('hideHover');
  1762.           });
  1763.  
  1764.           Zenza.emitter.on('csrfToken', (token) => {
  1765.             util.emitter.emit('csrfToken', token);
  1766.           });
  1767.  
  1768.           let popup = document.getElementById('mylistPocket-popup');
  1769.           let defaultContainer = document.getElementById('mylistPocketDomContainer');
  1770.           let zenzaContainer;
  1771.           Zenza.emitter.on('fullScreenStatusChange', isFull => {
  1772.             if (isFull) {
  1773.               if (!zenzaContainer) {
  1774.                 zenzaContainer = document.querySelector('.zenzaPlayerContainer');
  1775.               }
  1776.               zenzaContainer.appendChild(popup);
  1777.             } else {
  1778.               defaultContainer.appendChild(popup);
  1779.             }
  1780.           });
  1781.           emitter.emit('ready', Zenza);
  1782.         };
  1783.  
  1784.         if (window.ZenzaWatch && window.ZenzaWatch.ready) {
  1785.           window.console.log('ZenzaWatch is Ready');
  1786.           onZenzaReady();
  1787.         } else {
  1788.           document.body.addEventListener('ZenzaWatchInitialize', function() {
  1789.             window.console.log('ZenzaWatchInitialize MylistPocket');
  1790.             onZenzaReady();
  1791.           });
  1792.         }
  1793.       };
  1794.  
  1795.       const detect = function() {
  1796.         return new Promise(res => {
  1797.           if (isReady) {
  1798.             return res(Zenza);
  1799.           }
  1800.           emitter.on('ready', () => {
  1801.             res(Zenza);
  1802.           });
  1803.         });
  1804.       };
  1805.  
  1806.       return {
  1807.         initialize: initialize,
  1808.         detect: detect
  1809.       };
  1810.  
  1811.     })();
  1812.  
  1813.     const StorageWriter = (function() {
  1814.       const emitter = new Emitter();
  1815.       // マイページのJSON.stringifyがPrototype.jsのせいでぶっこわれているので
  1816.       // 汚染されていないWebWorkerを使って書き込む
  1817.       const func = function(self) {
  1818.         self.onmessage = function(e) {
  1819.           const key     = e.data.key;
  1820.           const value   = e.data.value;
  1821.           const storage = e.data.storage;
  1822.           self.postMessage({key, value: JSON.stringify(value), storage});
  1823.         };
  1824.       };
  1825.  
  1826.       const worker = util.createWebWorker(func);
  1827.       worker.addEventListener('message', (e) => {
  1828.         const key     = e.data.key;
  1829.         const value   = e.data.value;
  1830.         const storage = e.data.storage === 'session' ? sessionStorage : localStorage;
  1831.         storage[key] = value;
  1832.         emitter.emit('write', {key, value, storage: e.data.storage});
  1833.       });
  1834.  
  1835.       return {
  1836.         write: function({key, value, storage = 'local'}) {
  1837.           worker.postMessage({
  1838.             key,
  1839.             value,
  1840.             storage
  1841.           });
  1842.         },
  1843.         on: function(...args) { emitter.on(...args); }
  1844.       };
  1845.     })();
  1846.  
  1847.     MylistPocket.debug.writer = StorageWriter;
  1848.  
  1849.  
  1850.     const config = (function() {
  1851.       const prefix = PRODUCT + '_config_';
  1852.       const emitter = new Emitter();
  1853.  
  1854.       const defaultConfig = {
  1855.         debug: false,
  1856.  
  1857.         'videoInfo.openNewWindow': false,
  1858.         'mylist.enableAutoComment': true, // マイリストコメントに投稿者を入れる
  1859.  
  1860.         'nicoad.hide': false,
  1861.  
  1862.         'ng.enable': false,
  1863.         'ng.owner':   '',
  1864.         'ng.word':    '',
  1865.         'ng.tag':     '',
  1866.         'ng.syncZenza': false,
  1867.  
  1868.         'fav.owner':   '',
  1869.         'fav.word':    '',
  1870.         'fav.tag':     ''
  1871.       };
  1872.  
  1873.       const config = {};
  1874.       let noEmit = false;
  1875.  
  1876.  
  1877.       emitter.refresh = (emitChange = false) => {
  1878.         //console.log('keys', Object.keys(localStorage));
  1879.         Object.keys(defaultConfig).forEach(key => {
  1880.           var storageKey = prefix + key;
  1881.           //console.log('conf', storageKey, localStorage.hasOwnProperty(storageKey), localStorage[storageKey]);
  1882.           if (localStorage.hasOwnProperty(storageKey) || localStorage[storageKey] !== undefined) {
  1883.             try {
  1884.               let lastValue = config[key];
  1885.               let newValue = JSON.parse(localStorage.getItem(storageKey));
  1886.               if (lastValue !== newValue) {
  1887.                 config[key] = newValue;
  1888.                 if (emitChange) {
  1889.                   emitter.emit('key', newValue);
  1890.                   emitter.emit('@update', {key, value: newValue});
  1891.                 }
  1892.               }
  1893.             } catch (e) {
  1894.               window.console.error('config parse error key:"%s" value:"%s" ', key, localStorage.getItem(storageKey), e);
  1895.               config[key] = defaultConfig[key];
  1896.             }
  1897.           } else {
  1898.             config[key] = defaultConfig[key];
  1899.           }
  1900.         });
  1901.       };
  1902.       emitter.refresh();
  1903.  
  1904.       //Chrome Canary v60でlocalStorageにデータが有ってもhasOwnPropertyがfalseを返したりする
  1905.       //window.fuga = window.localStorage;
  1906.       //function dump() {
  1907.       //  Object.keys(window.fuga).forEach(key => {
  1908.       //    console.log('DUMP key="%s" hasOwn="%s" value="%s"', key, window.fuga.hasOwnProperty(key), window.fuga.getItem(key));
  1909.       //  });
  1910.       //}
  1911.       //dump();
  1912.       //window.setTimeout(dump, 3000);
  1913.  
  1914.       emitter.getValue = function(key, refresh) {
  1915.         if (refresh) {
  1916.           emitter.refreshValue(key);
  1917.         }
  1918.         return config[key];
  1919.       };
  1920.  
  1921.       emitter.setValue = function(key, value) {
  1922.         if (config[key] !== value && arguments.length >= 2) {
  1923.           var storageKey = prefix + key;
  1924.             StorageWriter.write({key: storageKey, value});
  1925.           config[key] = value;
  1926.           emitter.emit(key, value);
  1927.           emitter.emit('@update', {key, value});
  1928.           //console.log('%cconfig update "%s" = "%s"', 'background: cyan', key, value);
  1929.         }
  1930.       };
  1931.  
  1932.       emitter.clearConfig = function() {
  1933.         noEmit = true;
  1934.         Object.keys(defaultConfig).forEach(key => {
  1935.           if (['message', 'debug'].includes(key)) { return; }
  1936.           var storageKey = prefix + key;
  1937.           try {
  1938.             if (localStorage.hasOwnProperty(storageKey) || localStorage[storageKey] !== undefined) {
  1939.               localStorage.removeItem(storageKey);
  1940.             }
  1941.             config[key] = defaultConfig[key];
  1942.           } catch (e) {}
  1943.         });
  1944.         noEmit = false;
  1945.       };
  1946.  
  1947.       emitter.getKeys = function() {
  1948.         return Object.keys(defaultConfig);
  1949.       };
  1950.  
  1951.       emitter.namespace = function(name) {
  1952.         return {
  1953.           getValue: (key) => { return emitter.getValue(name + '.' + key); },
  1954.           setValue: (key, value) => { emitter.setValue(name + '.' + key, value); },
  1955.           refresh: () => { emitter.refresh(); },
  1956.           on: (key, func) => {
  1957.             if (key === '@update') {
  1958.               emitter.on('@update', ({key, value}) => {
  1959.                 const pre = name + '.';
  1960.                 //console.log('@update', key, value, pre);
  1961.                 if (key.startsWith(pre)) {
  1962.                   func({key: key.replace(pre, ''), value});
  1963.                 }
  1964.               });
  1965.             } else {
  1966.               emitter.on(name + '.' + key, func);
  1967.             }
  1968.           }
  1969.         };
  1970.       };
  1971.  
  1972.       StorageWriter.on('write', ({key, value, storage}) => {
  1973.         if (storage === 'session') { return; }
  1974.         const _key = key.replace(prefix, '');
  1975.         if (!config.hasOwnProperty(_key)) { return; }
  1976.         MylistPocket.broadcast.postMessage(
  1977.           {type: 'config-update', key, value, storage}
  1978.         );
  1979.       });
  1980.  
  1981.       return emitter;
  1982.     })();
  1983.     MylistPocket.config = config;
  1984.  
  1985.     MylistPocket.broadcast = (function(config) {
  1986.       if (!window.BroadcastChannel) { return; }
  1987.       const broadcastChannel = new window.BroadcastChannel(PRODUCT);
  1988.  
  1989.       const onBroadcastMessage = (e) => {
  1990.         const data = e.data;
  1991.         //window.console.info(`${PRODUCT}: onBroadcastMessage`, data);
  1992.         switch (data.type) {
  1993.           case 'config-update':
  1994.             config.refresh(true);
  1995.             break;
  1996.         }
  1997.       };
  1998.  
  1999.       broadcastChannel.addEventListener('message', onBroadcastMessage);
  2000.  
  2001.       return {
  2002.         postMessage: (...args) => { broadcastChannel.postMessage(...args); }
  2003.       };
  2004.       
  2005.     })(config);
  2006.  
  2007.  
  2008.  
  2009.     const CacheStorage = (function() {
  2010.       var PREFIX = PRODUCT + '_cache_';
  2011.  
  2012.       class CacheStorage {
  2013.  
  2014.         constructor(storage, gc = false) {
  2015.           this._storage = storage;
  2016.           this._memory = {};
  2017.           if (gc) { this.gc(); }
  2018.           Object.keys(storage).forEach((key) => {
  2019.             if (key.indexOf(PREFIX) === 0) {
  2020.               this._memory[key] = storage[key];
  2021.             }
  2022.           });
  2023.         }
  2024.  
  2025.         gc() {
  2026.           const storage = this._storage;
  2027.           Object.keys(storage).forEach((key) => {
  2028.             if (key.indexOf(PREFIX) === 0) {
  2029.               let item;
  2030.               try {
  2031.                 item = JSON.parse(this._storage[key]);
  2032.               } catch(e) {
  2033.                 storage.removeItem(key);
  2034.               }
  2035.               //console.info(
  2036.               //  `key: ${key}, expiredAt: ${item.expiredAt}, now: ${Date.now()}`);
  2037.               if (item.expiredAt === '' || item.expiredAt > Date.now()) {
  2038.                 //console.info('not expired: ', key);
  2039.                 return;
  2040.               }
  2041.               //console.info('cache expired: ', key, item.expiredAt);
  2042.               storage.removeItem(key);
  2043.             }
  2044.           });
  2045.         }
  2046.  
  2047.         setItem(key, data, expireTime) {
  2048.           key = PREFIX + key;
  2049.           const expiredAt =
  2050.             typeof expireTime === 'number' ? (Date.now() + expireTime) : '';
  2051.  
  2052.           const cacheData = {
  2053.             data: data,
  2054.             type: typeof data,
  2055.             expiredAt: expiredAt
  2056.           };
  2057.  
  2058.           this._memory[key] = cacheData;
  2059.           StorageWriter.write({
  2060.             key,
  2061.             value: cacheData,
  2062.             storage: this._storage === sessionStorage ? 'session' : 'local'
  2063.           });
  2064.           //this._storage[key] = JSON.stringify(cacheData);
  2065.         }
  2066.  
  2067.         getItem(key) {
  2068.           key = PREFIX + key;
  2069.           if (!(this._storage.hasOwnProperty(key) || this._storage[key] !== undefined)) {
  2070.             return null;
  2071.           }
  2072.           let item = null;
  2073.           try {
  2074.             item = JSON.parse(this._storage[key]);
  2075.           } catch(e) {
  2076.             delete this._memory[key];
  2077.             this._storage.removeItem(key);
  2078.             return null;
  2079.           }
  2080.  
  2081.           if (item.expiredAt === '' || item.expiredAt > Date.now()) {
  2082.             return item.data;
  2083.           }
  2084.           return null;
  2085.         }
  2086.  
  2087.         removeItem(key) {
  2088.           if (this._memory.hasOwnProperty(key)) {
  2089.             delete this._memory[key];
  2090.           }
  2091.           key = PREFIX + key;
  2092.           if (this._storage.hasOwnProperty(key) || this._storage[key] !== undefined) {
  2093.             this._storage.removeItem(key);
  2094.           }
  2095.         }
  2096.  
  2097.         clear() {
  2098.           const storage = this._storage;
  2099.           this._memory = {};
  2100.           Object.keys(storage).forEach((v) => {
  2101.             if (v.indexOf(PREFIX) === 0) {
  2102.               storage.removeItem(v);
  2103.             }
  2104.           });
  2105.         }
  2106.       }
  2107.       return CacheStorage;
  2108.     })();
  2109.     MylistPocket.debug.sessionCache = new CacheStorage(sessionStorage, true);
  2110.     MylistPocket.debug.localCache   = new CacheStorage(localStorage, true);
  2111.  
  2112.     const WindowMessageEmitter = (function() {
  2113.       const emitter = new Emitter();
  2114.       const knownSource = [];
  2115.  
  2116.       const onMessage = (event) => {
  2117.         if (_.indexOf(knownSource, event.source) < 0 //&&
  2118.             //event.origin !== location.protocol + '//ext.nicovideo.jp'
  2119.             ) { return; }
  2120.  
  2121.         try {
  2122.           var data = JSON.parse(event.data);
  2123.           if (data.id !== PRODUCT) { return; }
  2124.  
  2125.           emitter.emit('onMessage', data.body, data.type);
  2126.         } catch (e) {
  2127.           console.log(
  2128.             '%cMylistPocket.Error: window.onMessage  - ',
  2129.             'color: red; background: yellow',
  2130.             e,
  2131.             event
  2132.           );
  2133.           console.log('%corigin: ', 'background: yellow;', event.origin);
  2134.           console.log('%cdata: ',   'background: yellow;', event.data);
  2135.           console.trace();
  2136.         }
  2137.       };
  2138.  
  2139.       emitter.addKnownSource = (win) => {
  2140.         knownSource.push(win);
  2141.       };
  2142.  
  2143.       window.addEventListener('message', onMessage);
  2144.  
  2145.       return emitter;
  2146.     })();
  2147.  
  2148.  
  2149.     const CrossDomainGate = (function() {
  2150.  
  2151.       class CrossDomainGate extends Emitter {
  2152.         constructor(params) {
  2153.           super();
  2154.  
  2155.           this._baseUrl  = params.baseUrl;
  2156.           this._origin   = params.origin || location.href;
  2157.           this._type     = params.type;
  2158.           this._messager = params.messager || WindowMessageEmitter;
  2159.  
  2160.           this._loaderFrame = null;
  2161.           this._sessions = {};
  2162.           this._initializeStatus = '';
  2163.         }
  2164.  
  2165.         _initializeFrame() {
  2166.           switch (this._initializeStatus) {
  2167.             case 'done':
  2168.               return new Promise((resolve) => {
  2169.                 window.setTimeout(() => { resolve(); }, 0);
  2170.               });
  2171.             case 'initializing':
  2172.               return new Promise((resolve, reject) => {
  2173.                 this.on('initialize', (e) => {
  2174.                   if (e.status === 'ok') { resolve(); } else { reject(e); }
  2175.                 });
  2176.               });
  2177.             case '':
  2178.               this._initializeStatus = 'initializing';
  2179.               var initialPromise = new Promise((resolve, reject) => {
  2180.                 this._sessions.initial = {
  2181.                   promise: initialPromise,
  2182.                   resolve: resolve,
  2183.                   reject: reject
  2184.                 };
  2185.  
  2186.                 setTimeout(() => {
  2187.                   if (this._initializeStatus !== 'done') {
  2188.                     var rej = {
  2189.                       status: 'fail',
  2190.                       message: 'CrossDomainGate初期化タイムアウト (' + this._type + ')'
  2191.                     };
  2192.                     reject(rej);
  2193.                     this.emit('initialize', rej);
  2194.                   }
  2195.                 }, 60 * 1000);
  2196.                 this._initializeCrossDomainGate();
  2197.               });
  2198.               return initialPromise;
  2199.           }
  2200.         }
  2201.  
  2202.         _initializeCrossDomainGate() {
  2203.           this._initializeCrossDomainGate = _.noop;
  2204.           this._messager.on('onMessage', this._onMessage.bind(this));
  2205.  
  2206.           console.log('%c initialize ' + this._type, 'background: lightgreen;');
  2207.  
  2208.           const loaderFrame = document.createElement('iframe');
  2209.  
  2210.           loaderFrame.name = this._type + 'Loader';
  2211.           loaderFrame.className = 'xDomainLoaderFrame ' + this._type;
  2212.           document.body.appendChild(loaderFrame);
  2213.  
  2214.           this._loaderFrame = loaderFrame;
  2215.           this._loaderWindow = loaderFrame.contentWindow;
  2216.           this._messager.addKnownSource(this._loaderWindow);
  2217.           this._loaderWindow.location.href = this._baseUrl + '#' + TOKEN;
  2218.         }
  2219.  
  2220.         _onMessage(data, type) {
  2221.           if (type !== this._type) {
  2222.             return;
  2223.           }
  2224.           const info      = data.message;
  2225.           const token     = info.token;
  2226.           const sessionId = info.sessionId;
  2227.           const status    = info.status;
  2228.           const command   = info.command || 'loadUrl';
  2229.           let session   = this._sessions[sessionId];
  2230.  
  2231.           if (status === 'initialized') {
  2232.             this._initializeStatus = 'done';
  2233.             this._sessions.initial.resolve();
  2234.             this.emitAsync('initialize', {status: 'ok'});
  2235.             return;
  2236.           }
  2237.  
  2238.           if (token !== TOKEN) {
  2239.             window.console.log('invalid token:', token, TOKEN);
  2240.             return;
  2241.           }
  2242.  
  2243.           switch (command) {
  2244.             case 'dumpConfig':
  2245.               this._onDumpConfig(info.body);
  2246.               break;
  2247.  
  2248.             default:
  2249.               if (!session) { return; }
  2250.               if (status === 'ok') { session.resolve(info.body); }
  2251.               else { session.reject({ message: status }); }
  2252.               session = null;
  2253.               delete this._sessions[sessionId];
  2254.               break;
  2255.           }
  2256.         }
  2257.  
  2258.         load(url, options) {
  2259.           return this._postMessage({
  2260.             command: 'loadUrl',
  2261.             url: url,
  2262.             options: options
  2263.           }, true);
  2264.         }
  2265.  
  2266.         _postMessage(message, needPromise) {
  2267.           return new Promise((resolve, reject) => {
  2268.             message.sessionId = this._type + '_' + Math.random();
  2269.             message.token = TOKEN;
  2270.             if (needPromise) {
  2271.               this._sessions[message.sessionId] = {
  2272.                 resolve: resolve,
  2273.                 reject: reject
  2274.               };
  2275.             }
  2276.  
  2277.             return this._initializeFrame().then(() => {
  2278.               try {
  2279.                 this._loaderWindow.postMessage(
  2280.                   JSON.stringify(message),
  2281.                   this._origin
  2282.                 );
  2283.               } catch (e) {
  2284.                 console.log('%cException!', 'background: red;', e);
  2285.               }
  2286.             });
  2287.           });
  2288.         }
  2289.  
  2290.  
  2291.       }
  2292.  
  2293.       return CrossDomainGate;
  2294.     })();
  2295.  
  2296.  
  2297.  
  2298.     const CsrfTokenLoader = (() => {
  2299.       const cacheStorage = new CacheStorage(
  2300.         location.host === 'www.nicovideo.jp' ? localStorage : sessionStorage);
  2301.       const TIMEOUT = 10 * 1000;
  2302.       const CACHE_EXPIRE_TIME = 60 * 30 * 1000;
  2303.  
  2304.       class CsrfTokenLoader {
  2305.         static load() {
  2306.           return new Promise((resolve, reject) => {
  2307.             const cache = cacheStorage.getItem('csrfToken');
  2308.             if (cacheStorage.getItem('csrfToken')) {
  2309.               return resolve(cache);
  2310.             }
  2311.  
  2312.             let timeoutTimer = window.setTimeout(() => {
  2313.               reject('timeout');
  2314.             }, TIMEOUT);
  2315.  
  2316.             return CsrfTokenLoader._getToken().then((token) => {
  2317.               window.clearTimeout(timeoutTimer);
  2318.               CsrfTokenLoader.saveToCache(token);
  2319.               resolve(token);
  2320.             });
  2321.           });
  2322.         }
  2323.  
  2324.         static saveToCache(token) {
  2325.           cacheStorage.setItem('csrfToken', token, CACHE_EXPIRE_TIME);
  2326.         }
  2327.  
  2328.         static _getToken() {
  2329.           const url = 'http://www.nicovideo.jp/mylist_add/video/sm9';
  2330.           const tokenReg = /NicoAPI\.token *= *["']([a-z0-9\-]+)["'];/;
  2331.  
  2332.           return fetch(url, {
  2333.             credentials: 'include'
  2334.           }).then((res) => {
  2335.             return res.text();
  2336.           }).then((result) => {
  2337.             if (tokenReg.test(result)) {
  2338.               let token = RegExp.$1;
  2339.               return Promise.resolve(token);
  2340.             } else {
  2341.               return Promise.reject('token parse error');
  2342.             }
  2343.           });
  2344.         }
  2345.       }
  2346.  
  2347.       util.emitter.on('csrfToken', (token) => {
  2348.         CsrfTokenLoader.saveToCache(token);
  2349.       });
  2350.  
  2351.       return CsrfTokenLoader;
  2352.     })();
  2353.  
  2354.     MylistPocket.debug.CsrfTokenLoader = CsrfTokenLoader;
  2355.  
  2356.     const ThumbInfoLoader = (() => {
  2357.       const BASE_URL = location.protocol + '//ext.nicovideo.jp/';
  2358.       const MESSAGE_ORIGIN = location.protocol + '//ext.nicovideo.jp/';
  2359.       const CACHE_EXPIRE_TIME = 3 * 60 * 60 * 1000;
  2360.       //const CACHE_EXPIRE_TIME = 60 * 1000;
  2361.       let gate = null;
  2362.       let cacheStorage = new CacheStorage(sessionStorage);
  2363.  
  2364.       class ThumbInfoLoader {
  2365.  
  2366.         constructor() {
  2367.           this._emitter = new Emitter();
  2368.  
  2369.           gate = new CrossDomainGate({
  2370.             baseUrl: BASE_URL,
  2371.             origin: MESSAGE_ORIGIN,
  2372.             type: 'thumbInfo' + PRODUCT,
  2373.             messager: WindowMessageEmitter
  2374.           });
  2375.         }
  2376.  
  2377.         _onMessage(data, type) {
  2378.           if (type !== 'videoInfoLoader') { return; }
  2379.           const info = data.message;
  2380.  
  2381.           this.emit('load', info, 'THUMB_WATCH');
  2382.         }
  2383.  
  2384.         _parseXml(xmlText) {
  2385.           const parser = new DOMParser();
  2386.           const xml = parser.parseFromString(xmlText, 'text/xml');
  2387.           const val = (name) => {
  2388.             var elms = xml.getElementsByTagName(name);
  2389.             if (elms.length < 1) {
  2390.               return '';
  2391.             }
  2392.             return elms[0].innerHTML;
  2393.           };
  2394.  
  2395.           const resp = xml.getElementsByTagName('nicovideo_thumb_response');
  2396.           if (resp.length < 1 || resp[0].getAttribute('status') !== 'ok') {
  2397.             return {
  2398.               status: 'fail',
  2399.               code: val('code'),
  2400.               message: val('description')
  2401.             };
  2402.           }
  2403.  
  2404.           const duration = (() => {
  2405.             const tmp = val('length').split(':');
  2406.             return parseInt(tmp[0], 10) * 60 + parseInt(tmp[1], 10);
  2407.           })();
  2408.           const watchId = val('watch_url').split('/').reverse()[0];
  2409.           const postedAt = (new Date(val('first_retrieve'))).toLocaleString();
  2410.           const tags = (() => {
  2411.             const result = [], t = xml.getElementsByTagName('tag');
  2412.             _.each(t, (tag) => {
  2413.               result.push(tag.innerHTML);
  2414.             });
  2415.             return result;
  2416.           })();
  2417.  
  2418.           const result = {
  2419.             status: 'ok',
  2420.             _format:     'thumbInfo',
  2421.             v:            watchId,
  2422.             id:           val('video_id') || '',
  2423.             title:        val('title'),
  2424.             description:  val('description'),
  2425.             thumbnail:    val('thumbnail_url'),
  2426.             movieType:    val('movie_type'),
  2427.             lastResBody:  val('last_res_body'),
  2428.             duration:     duration,
  2429.             postedAt:     postedAt,
  2430.             mylistCount:  parseInt(val('mylist_counter'), 10),
  2431.             viewCount:    parseInt(val('view_counter'), 10),
  2432.             commentCount: parseInt(val('comment_num'), 10),
  2433.             tagList: tags
  2434.           };
  2435.           const userId = val('user_id');
  2436.           if (userId !== '') {
  2437.             result.owner = {
  2438.               type: 'user',
  2439.               id: userId,
  2440.               name: val('user_nickname') || '(非公開ユーザー)',
  2441.               url:  userId ? ('//www.nicovideo.jp/user/' + userId) : '#',
  2442.               icon: val('user_icon_url') || '//res.nimg.jp/img/user/thumb/blank.jpg'
  2443.             };
  2444.           }
  2445.           const channelId  = val('ch_id');
  2446.           if (channelId !== '') {
  2447.             result.owner = {
  2448.               type: 'channel',
  2449.               id: channelId,
  2450.               name: val('ch_name') || '(非公開ユーザー)',
  2451.               url: '//ch.nicovideo.jp/ch' + channelId,
  2452.               icon: val('ch_icon_url') || '//res.nimg.jp/img/user/thumb/blank.jpg'
  2453.             };
  2454.           }
  2455.  
  2456.           return result;
  2457.         }
  2458.  
  2459.         loadXml(watchId) {
  2460.           return this.load(watchId, 'xml');
  2461.         }
  2462.  
  2463.         load(watchId, format) {
  2464.           return new Promise((resolve, reject) => {
  2465.             const cache = cacheStorage.getItem('thumbInfo_' + watchId);
  2466.  
  2467.             const onLoad = (xml) => {
  2468.               const result = this._parseXml(xml);
  2469.               result.fromCache = !!cache;
  2470.               if (result.status === 'ok') {
  2471.                 if (!cache) {
  2472.                   cacheStorage.setItem('thumbInfo_' + watchId, xml, CACHE_EXPIRE_TIME);
  2473.                 }
  2474.                 resolve({data: format === 'xml' ? xml : result, watchId});
  2475.               } else {
  2476.                 reject({data: format === 'xml' ? xml : result, watchId});
  2477.               }
  2478.             };
  2479.  
  2480.             if (cache) {
  2481.               //console.log('cache exist: ', watchId);
  2482.               onLoad(cache);
  2483.               //window.setTimeout(() => { onLoad(cache); }, 0);
  2484.               return;
  2485.             }
  2486.  
  2487.             gate.load(BASE_URL + 'api/getthumbinfo/' + watchId).then(onLoad);
  2488.           });
  2489.         }
  2490.       }
  2491.  
  2492.       const loader = new ThumbInfoLoader();
  2493.       return {
  2494.         load:    (watchId) => { return loader.load(watchId); },
  2495.         loadXml: (watchId) => { return loader.loadXml(watchId); },
  2496.         loadOwnerInfo: (watchId) => {
  2497.           return loader.load(watchId).then((info) => {
  2498.             const owner = info.data.owner;
  2499.             if (!owner) {
  2500.               return {};
  2501.             }
  2502.  
  2503.             const lang = util.getPageLanguage();
  2504.             const prefix = owner.type === 'user' ? '投稿者: ' : '提供: ';
  2505.             const suffix =
  2506.               (owner.type === 'user' && lang === 'ja-JP') ? ' さん' : '';
  2507.             owner.localeName = `${prefix}${owner.name}${suffix}`;
  2508.             return owner;
  2509.           });
  2510.         }
  2511.       };
  2512.  
  2513.     })();
  2514.  
  2515.     MylistPocket.debug.ThumbInfoLoader = ThumbInfoLoader;
  2516.  
  2517.  
  2518.  
  2519.     const DeflistApiLoader = ((CsrfTokenLoader) => {
  2520.       const cacheStorage = new CacheStorage(
  2521.         location.host === 'www.nicovideo.jp' ? localStorage : sessionStorage);
  2522.       const TIMEOUT = 30000;
  2523.       const CACHE_EXPIRE_TIME = 60 * 3 * 1000;
  2524.       let isZenzaReady = false;
  2525.  
  2526.       class DeflistApiLoader {
  2527.  
  2528.         static getItems() {
  2529.           const url = '//www.nicovideo.jp/api/deflist/list';
  2530.           const cacheKey = 'deflistItems';
  2531.  
  2532.           return new Promise(function(resolve, reject) {
  2533.  
  2534.             const cache = cacheStorage.getItem(cacheKey);
  2535.             if (cache) {
  2536.               window.setTimeout(() => {
  2537.                 resolve({items: cache.mylistitem, status: cache.status, from: 'cache'});
  2538.               }, 0);
  2539.               return;
  2540.             }
  2541.  
  2542.             let timeoutTimer = window.setTimeout(() => {
  2543.               timeoutTimer = null;
  2544.               reject({status: 'fail', description: 'timeout'});
  2545.             }, TIMEOUT);
  2546.  
  2547.             fetch(url, {
  2548.               credentials: 'include'
  2549.             }).then((res) => {
  2550.               return res.json();
  2551.             }).then((json) => {
  2552.               if (json.status !== 'ok') {
  2553.                 return reject(json);
  2554.               }
  2555.  
  2556.               if (timeoutTimer) { window.clearTimeout(timeoutTimer);
  2557.               } else { return; }
  2558.  
  2559.               cacheStorage.setItem(cacheKey, json, CACHE_EXPIRE_TIME);
  2560.               resolve({items: json.mylistitem, status: json.status, from: 'fetch'});
  2561.             });
  2562.           });
  2563.         }
  2564.  
  2565.         static findItemByWatchId(watchId) {
  2566.           return DeflistApiLoader.getItems().then(({items}) => {
  2567.             for (var i = 0, len = items.length; i < len; i++) {
  2568.               var item = items[i], wid = item.id || item.item_data.watch_id;
  2569.               if (wid === watchId) {
  2570.                 return Promise.resolve(item);
  2571.               }
  2572.             }
  2573.             return Promise.reject();
  2574.           });
  2575.         }
  2576.  
  2577.         static _removeItem({watchId, token}) {
  2578.           const cacheKey = 'deflistItems';
  2579.           DeflistApiLoader.findItemByWatchId(watchId).then((item) => {
  2580.           const url = '//www.nicovideo.jp/api/deflist/delete';
  2581.           const body = 'id_list[0][]=' + item.item_id + '&token=' + token;
  2582.  
  2583.           const req = {
  2584.             credentials: 'include',
  2585.             method: 'post',
  2586.             body,
  2587.             headers: {'Content-Type': 'application/x-www-form-urlencoded'}
  2588.           };
  2589.  
  2590.           return fetch(url, req)
  2591.             .then(res => { return res.json(); })
  2592.             .then((result) => {
  2593.               if (result.status !== 'ok') {
  2594.                 return Promise.reject({
  2595.                   status: 'fail',
  2596.                   result: result,
  2597.                   code: result.error.code,
  2598.                   message: result.error.description
  2599.                 });
  2600.               }
  2601.  
  2602.  
  2603.               cacheStorage.removeItem(cacheKey);
  2604.               util.emitter.emitAsync('deflistRemove', watchId);
  2605.               return Promise.resolve({
  2606.                 status: 'ok',
  2607.                 result: result,
  2608.                 message: 'とりあえずマイリストから削除'
  2609.               });
  2610.  
  2611.             }, (err) => {
  2612.               return Promise.reject({
  2613.                 result: err,
  2614.                 message: 'とりあえずマイリストから削除失敗(2)'
  2615.               });
  2616.             });
  2617.  
  2618.           }, (err) => {
  2619.             return Promise.reject({
  2620.               status: 'fail',
  2621.               result: err,
  2622.               message: '動画が見つかりません'
  2623.             });
  2624.           });
  2625.         }
  2626.  
  2627.         static removeItem(watchId) {
  2628.           return CsrfTokenLoader.load().then((token) => {
  2629.             return DeflistApiLoader._removeItem({watchId, token});
  2630.           });
  2631.         }
  2632.  
  2633.         static __addItem({watchId, description, token, isRetry = false}) {
  2634.           const cacheKey = 'deflistItems';
  2635.           const url = '//www.nicovideo.jp/api/deflist/add';
  2636.           let body = 'item_id=' + watchId + '&token=' + token;
  2637.           if (description) {
  2638.             body += '&description='+ encodeURIComponent(description);
  2639.           }
  2640.  
  2641.           const req = {
  2642.             method: 'post',
  2643.             credentials: 'include',
  2644.             body,
  2645.             headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  2646.           };
  2647.  
  2648.           return new Promise((resolve, reject) => {
  2649.             fetch(url, req)
  2650.               .then((res) => { return res.json(); })
  2651.               .then((result) => {
  2652.  
  2653.               if (result.status && result.status === 'ok') {
  2654.                 cacheStorage.removeItem(cacheKey);
  2655.                 //ZenzaWatch.emitter.emitAsync('deflistAdd', watchId, description);
  2656.                 return resolve({
  2657.                   status: 'ok',
  2658.                   result: result,
  2659.                   message: 'とりあえずマイリスト登録'
  2660.                 });
  2661.               }
  2662.  
  2663.               if (!result.status || !result.error) {
  2664.                 return reject({
  2665.                   status: 'fail',
  2666.                   result: result,
  2667.                   message: 'とりあえずマイリスト登録失敗(100)'
  2668.                 });
  2669.               }
  2670.  
  2671.               if (result.error.code !== 'EXIST' || isRetry) {
  2672.                 return reject({
  2673.                   status: 'fail',
  2674.                   result: result,
  2675.                   code: result.error.code,
  2676.                   message: result.error.description
  2677.                 });
  2678.               }
  2679.  
  2680.               /**
  2681.               * すでに登録されている場合は、いったん削除して再度追加(先頭に移動)
  2682.               */
  2683.               return DeflistApiLoader.removeItem(watchId)
  2684.                 .then(util.getSleepPromise(1500, 'deflist remove'))
  2685.                 .then(() => {
  2686.                 return DeflistApiLoader._addItem(watchId, description, true)
  2687.                   .then((result) => {
  2688.                     resolve({
  2689.                       status: 'ok',
  2690.                       result: result,
  2691.                       message: 'とりあえずマイリストの先頭に移動'
  2692.                     });
  2693.                 });
  2694.               }, (err) => {
  2695.  
  2696.                 reject({
  2697.                   status: 'fail',
  2698.                   result: err.result,
  2699.                   code:   err.code,
  2700.                   message: 'とりあえずマイリスト登録失敗(101)'
  2701.                 });
  2702.               });
  2703.  
  2704.             }, (err) => {
  2705.               reject({
  2706.                 status: 'fail',
  2707.                 result: err,
  2708.                 message: 'とりあえずマイリスト登録失敗(200)'
  2709.               });
  2710.             });
  2711.           });
  2712.         }
  2713.  
  2714.         static _addItem(watchId, description, isRetry = false) {
  2715.           return CsrfTokenLoader.load().then((token) => {
  2716.             return DeflistApiLoader.__addItem({watchId, description, isRetry, token});
  2717.           });
  2718.         }
  2719.  
  2720.         static addItem(watchId, description) {
  2721.           return DeflistApiLoader._addItem(watchId, description, false);
  2722.         }
  2723.  
  2724.         static addItemWithOwnerName(watchId) {
  2725.           return ThumbInfoLoader.loadOwnerInfo(watchId).then((owner) => {
  2726.             if (!owner.id) {
  2727.               return DeflistApiLoader.addItem(watchId);
  2728.             }
  2729.  
  2730.             const description = owner.localeName;
  2731.             return DeflistApiLoader.addItem(watchId, description);
  2732.           }, () => {
  2733.             return DeflistApiLoader.addItem(watchId);
  2734.           });
  2735.           //  .then(
  2736.           //    (result) => { console.log('ok', result); },
  2737.           //    (err)    => { console.error('err', err); }
  2738.           //);
  2739.         }
  2740.  
  2741.         static clearCache() {
  2742.           cacheStorage.removeItem('deflistItems');
  2743.         }
  2744.  
  2745.       }
  2746.  
  2747.       ZenzaDetector.detect().then((ZenzaWatch) => {
  2748.         isZenzaReady = true;
  2749.         ZenzaWatch.emitter.on('deflistRemove', () => {
  2750.           DeflistApiLoader.clearCache();
  2751.         });
  2752.       });
  2753.  
  2754.       //DeflistApiLoader.clearCache();
  2755.  
  2756.       return DeflistApiLoader;
  2757.     })(CsrfTokenLoader);
  2758.  
  2759.     MylistPocket.debug.DeflistApiLoader = DeflistApiLoader;
  2760.  
  2761.     class HoverMenu extends Emitter {
  2762.       constructor() {
  2763.         super();
  2764.         this._init();
  2765.       }
  2766.       
  2767.       _init() {
  2768.         this._view = document.querySelector('.mylistPocketHoverMenu');
  2769.  
  2770.         this._view.addEventListener('click',     this._onClick.bind(this));
  2771.         this._view.addEventListener('mousedown', this._onMousedown.bind(this));
  2772.         this._view.addEventListener('contextmenu', this._onContextMenu.bind(this));
  2773.  
  2774.         //$('body')
  2775.         //  .on('mouseover', 'a[href*="watch/"],a[href*="nico.ms/"]',
  2776.         //      this._onHover.bind(this))
  2777.         //  .on('mouseover', 'a[href*="watch/"],a[href*="nico.ms/"]',
  2778.         //      _.debounce(this._onHoverEnd.bind(this), 500))
  2779.         //  .on('mouseout',  'a[href*="watch/"],a[href*="nico.ms/"]',
  2780.         //      this._onMouseout.bind(this));
  2781.  
  2782.         document.body.addEventListener(
  2783.           'mouseover', this._onHover.bind(this), {passive: true});
  2784.         document.body.addEventListener(
  2785.           'mouseout',  this._onMouseout.bind(this), {passive: true});
  2786.         document.body.addEventListener(
  2787.           'click', () => { this.hide(); }, {passive: true});
  2788.  
  2789.         this._onHoverEnd = _.debounce(this._onHoverEnd.bind(this), 500);
  2790.  
  2791.         util.emitter.on('hideHover', () => {
  2792.           this.hide();
  2793.         });
  2794.  
  2795.         this._x = this._y = 0;
  2796.  
  2797.         ZenzaDetector.detect().then((ZenzaWatch) => {
  2798.           this._isZenzaReady = true;
  2799.           this.addClass('is-zenzaReady');
  2800.           ZenzaWatch.emitter.on('DialogPlayerOpen', _.debounce(() => {
  2801.             this.hide();
  2802.           }, 1000));
  2803.         });
  2804.  
  2805.         this.toggleClass('is-otherDomain', location.host !== 'www.nicovideo.jp');
  2806.         this.toggleClass('is-guest', !util.isLogin());
  2807.         this._deflistButton = this._view.querySelector('.mylistPocketButton.deflist-add');
  2808.         MylistPocket.debug.hoverMenu = this._view;
  2809.       }
  2810.  
  2811.       toggleClass(className, v) {
  2812.         className.split(/ +/).forEach((c) => {
  2813.           this._view.classList.toggle(c, v);
  2814.         });
  2815.       }
  2816.  
  2817.       addClass(className)    { this.toggleClass(className, true); }
  2818.       removeClass(className) { this.toggleClass(className, false); }
  2819.  
  2820.       hide() {
  2821.         this.removeClass('is-show');
  2822.       }
  2823.  
  2824.       show() {
  2825.         this.addClass('is-show');
  2826.       }
  2827.  
  2828.       moveTo(x, y) {
  2829.         this._x = x;
  2830.         this._y = y;
  2831.         this._view.style.left = x + 'px';
  2832.         this._view.style.top  = y + 'px';
  2833.       }
  2834.  
  2835.       _onClick(e) {
  2836.         e.preventDefault();
  2837.         e.stopPropagation();
  2838.       }
  2839.  
  2840.       _onContextMenu(e) {
  2841.         e.preventDefault();
  2842.         e.stopPropagation();
  2843.       }
  2844.  
  2845.       _onMousedown(e) {
  2846.         const watchId = this._watchId;
  2847.         const target = e.target.classList.contains('command') ?
  2848.           e.target : e.target.closest('.command');
  2849.         const command = target.getAttribute('data-command');
  2850.         e.preventDefault();
  2851.         e.stopPropagation();
  2852.  
  2853.         if (command === 'info') {
  2854.           this._videoInfo(watchId);
  2855.           this.hide();
  2856.         } else if (command === 'playlist-queue') {
  2857.           this.emit('playlist-queue', watchId, this);
  2858.         } else {
  2859.           if (e.button !== 0 || e.shiftKey) {
  2860.             this._deflistRemove(watchId);
  2861.           } else {
  2862.             this._deflist(watchId);
  2863.           }
  2864.         }
  2865.       }
  2866.  
  2867.       _videoInfo(watchId) {
  2868.         this.emit('info', watchId || this._watchId, this);
  2869.       }
  2870.  
  2871.       _deflist(watchId) {
  2872.         this.emit('deflist-add', watchId || this._watchId, this);
  2873.       }
  2874.  
  2875.       _deflistRemove(watchId) {
  2876.         this.emit('deflist-remove', watchId || this._watchId, this);
  2877.       }
  2878.  
  2879.       _onHover(e) {
  2880.         const target = this._isTargetElement(e);
  2881.         if (!target) { return; }
  2882.  
  2883.         this._hoverElement = target;
  2884.         this._onHoverEnd(e);
  2885.       }
  2886.  
  2887.       _onHoverEnd(e) {
  2888.         const target =
  2889.           e.target.tagName === 'A' ? e.target : e.target.closest('a');
  2890.         if (this._hoverElement !== target) { return; }
  2891.         const href = target.getAttribute('data-href') || target.getAttribute('href');
  2892.         const watchId = util.getWatchId(href);
  2893.         const offset = target.getBoundingClientRect();
  2894.         //const bodyOffset = document.body.getBoundingClientRect();
  2895.         const scrollTop  = document.documentElement.scrollTop  || document.body.scrollTop  || 0;
  2896.         const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || 0;
  2897.         const left = offset.left + scrollLeft;
  2898.         const top  = offset.top  + scrollTop;
  2899.         const host = target.hostname;
  2900.         if (host !== 'www.nicovideo.jp' && host !== 'nico.ms') { return; }
  2901.  
  2902.         if (target.classList.contains('noHoverMenu')) { return; }
  2903.         if (!watchId.match(/^[a-z0-9]+$/)) { return; }
  2904.         if (watchId.indexOf('lv') === 0) { return; }
  2905.  
  2906.         this._watchId = watchId;
  2907.         this.show();
  2908.         this.moveTo(
  2909.           left + target.offsetWidth  - this._view.offsetWidth / 2,
  2910.           top  + target.offsetHeight / 2 - this._view.offsetHeight / 2
  2911.         );
  2912.       }
  2913.  
  2914.       _onMouseout(e) {
  2915.         const target = this._isTargetElement(e);
  2916.         if (!target) { return; }
  2917.  
  2918.         if (this._hoverElement === e.target) {
  2919.           this._hoverElement = null;
  2920.         }
  2921.       }
  2922.  
  2923.       _isTargetElement(e) {
  2924.         const target =
  2925.           e.target.tagName === 'A' ? e.target : e.target.closest('a');
  2926.         if (!target) { return false; }
  2927.         const href = target.href || '';
  2928.         if (!/(watch\/[a-z0-9]+|nico\.ms\/[a-z0-9]+)/.test(href)) { return false; }
  2929.         return target;
  2930.       }
  2931.  
  2932.       set isBusy(v) {
  2933.         this._isBusy = v;
  2934.         this.toggleClass('is-busy', v);
  2935.       }
  2936.  
  2937.       get isBusy() {
  2938.         return !!this._isBusy;
  2939.       }
  2940.  
  2941.       notifyBeginDeflistUpdate(/*watchId*/) {
  2942.         this.addClass('is-deflistUpdating');
  2943.       }
  2944.  
  2945.       notifyEndDeflistUpdate(result) {
  2946.         this.addClass('is-deflistSuccess');
  2947.         window.setTimeout(() => { this.removeClass('is-deflistSuccess'); }, 3000);
  2948.  
  2949.         //window.console.info('ok result', result);
  2950.         this._deflistButton.setAttribute('data-result', result.message || '登録しました');
  2951.         this.removeClass('is-deflistUpdating');
  2952.       }
  2953.  
  2954.       notifyFailDeflistUpdate(result) {
  2955.         this.addClass('is-deflistFail');
  2956.         window.setTimeout(() => { this.removeClass('is-deflistFail'); }, 3000);
  2957.  
  2958.         //window.console.info('fail result', result);
  2959.         this._deflistButton.setAttribute('data-result', result.message || '登録失敗');
  2960.         this.removeClass('is-deflistUpdating');
  2961.       }
  2962.     }
  2963.  
  2964.  
  2965.     class VideoInfoView extends Emitter {
  2966.       constructor({host, tpl}) {
  2967.         super();
  2968.         this._host = host;
  2969.         this._tpl = tpl;
  2970.         this._slot = {};
  2971.  
  2972.         this._config    = config.namespace('videoInfo');
  2973.         this._mylistConfig = config.namespace('mylist');
  2974.         const ngConfig  = this._ngConfig  = config.namespace('ng');
  2975.         const favConfig = this._favConfig = config.namespace('fav');
  2976.         this._nicoadConfig = config.namespace('nicoad');
  2977.  
  2978.         const {ngChecker, favChecker} = initNgChecker({ngConfig, favConfig});
  2979.         this._ngChecker  = ngChecker;
  2980.         this._favChecker = favChecker;
  2981.       }
  2982.  
  2983.       _initialize() {
  2984.         if (this._isInitialized) { return; }
  2985.         const host = this._host;
  2986.         const tpl = this._tpl;
  2987.  
  2988.         this._shadowRoot = util.attachShadowDom({host, tpl});
  2989.         Array.prototype.forEach.call(this._host.querySelectorAll('*'), (elm) => {
  2990.           //this._host.querySelectorAll('*').forEach((elm) => {
  2991.           const slot = elm.getAttribute('slot');
  2992.           if (!slot) { return; }
  2993.           //const type = elm.getAttribute('data-type') || 'string';
  2994.           this._slot[slot] = elm;
  2995.         });
  2996.  
  2997.         this._rootDom = this._shadowRoot.querySelector('.root');
  2998.         this._hostDom = this._host;
  2999.  
  3000.         this._rootDom.addEventListener('mousedown', e => { e.stopPropagation(); });
  3001.         this._rootDom.querySelector('.setting-panel-main').addEventListener('click', e => {
  3002.           e.stopPropagation();
  3003.         });
  3004.  
  3005.         this._initSettingPanel();
  3006.  
  3007.         const updateNgEnable = v => { this.toggleClass('is-ng-enable', v); };
  3008.         updateNgEnable(this._ngConfig.getValue('enable'));
  3009.         this._ngConfig.on('enable', updateNgEnable);
  3010.  
  3011.         Array.prototype.forEach.call(
  3012.           this._rootDom.querySelectorAll('.scrollable'),
  3013.           elm => {
  3014.             elm.addEventListener('wheel', this._cancelMouseWheel);
  3015.           });
  3016.  
  3017.         this._rootDom.addEventListener('click', this._onClick.bind(this));
  3018.  
  3019.         this._boundOnBodyMouseDown = this._onBodyMouseDown.bind(this);
  3020.  
  3021.         MylistPocket.debug.view = this;
  3022.  
  3023.         util.emitter.on('hideHover', () => {
  3024.           this.hide();
  3025.         });
  3026.  
  3027.         const debUpdateFavNg = _.debounce(this._updateFavNg.bind(this), 100);
  3028.         this._ngConfig    .on('@update', debUpdateFavNg);
  3029.         this._favConfig   .on('@update', debUpdateFavNg);
  3030.         //this._mylistConfig.on('@update', debUpdateFavNg);
  3031.  
  3032.         ZenzaDetector.detect().then(() => {
  3033.           this._isZenzaReady = true;
  3034.           this.addClass('is-zenzaReady');
  3035.           window.ZenzaWatch.emitter.on('DialogPlayerOpen', _.debounce(() => {
  3036.             this.hide();
  3037.           }, 1000));
  3038.         });
  3039.   
  3040.         this._videoInfoArea = this._rootDom.querySelector('.video-info');
  3041.         this._deflistButton =
  3042.           this._rootDom.querySelector('.mylistPocketButton.deflist-add');
  3043.  
  3044.         this.toggleClass('is-otherDomain', location.host !== 'www.nicovideo.jp');
  3045.         this.toggleClass('is-firefox', util.isFirefox());
  3046.         this._isInitialized = true;
  3047.       }
  3048.  
  3049.       _initSettingPanel() {
  3050.         const onSettingFormChange = this._onSettingFormChange.bind(this);
  3051.  
  3052.         const refresh = () => {
  3053.           //console.log('refresh setting-form');
  3054.           Array.from(this._rootDom.querySelectorAll('.setting-form')).forEach(elm => {
  3055.             const name = elm.getAttribute('data-config-name');
  3056.             if (!name) { return; }
  3057.             const namespace = elm.getAttribute('data-config-namespace') || '';
  3058.             let config = this._config;
  3059.             if (namespace === 'ng')  { config = this._ngConfig; }
  3060.             if (namespace === 'fav') { config = this._favConfig; }
  3061.             if (namespace === 'mylist') { config = this._mylistConfig; }
  3062.             if (namespace === 'nicoad') { config = this._nicoadConfig; }
  3063.             const tagName = (elm.tagName.toLowerCase()).toLowerCase();
  3064.             if (tagName === 'input') {
  3065.               const type = (elm.type || '').toLowerCase();
  3066.               switch (type) {
  3067.                 case 'checkbox':
  3068.                   elm.checked = !!config.getValue(name);
  3069.                   break;
  3070.                 default:
  3071.                   elm.value   = config.getValue(name);
  3072.                   break;
  3073.               }
  3074.             } else if (tagName === 'select' || tagName === 'textarea') {
  3075.               elm.value = config.getValue(name);
  3076.             }
  3077.  
  3078.             elm.removeEventListener('change', onSettingFormChange);
  3079.             elm.addEventListener('change', onSettingFormChange);
  3080.           });
  3081.         };
  3082.  
  3083.         const onUpdate = _.debounce(refresh, 100);
  3084.  
  3085.         const syncZenza = _.debounce(() => {
  3086.           if (!this._ngConfig.getValue('syncZenza') || !this._isZenzaReady) { return; }
  3087.           window.ZenzaWatch.config.setValue(
  3088.             'videoTagFilter',   this._ngConfig.getValue('tag'));
  3089.           window.ZenzaWatch.config.setValue(
  3090.             'videoOwnerFilter', this._ngConfig.getValue('owner'));
  3091.         }, 1000);
  3092.  
  3093.         refresh();
  3094.  
  3095.         this._config  .on('@update',  onUpdate);
  3096.         this._favConfig.on('@update', onUpdate);
  3097.         this._ngConfig.on('@update', () => {
  3098.           onUpdate();
  3099.           syncZenza();
  3100.         });
  3101.  
  3102.       }
  3103.  
  3104.       _onSettingFormChange(e) {
  3105.         const elm = e.target;
  3106.         const name = elm.getAttribute('data-config-name');
  3107.         if (!name) { return; }
  3108.         const namespace = elm.getAttribute('data-config-namespace') || '';
  3109.         let config = this._config;
  3110.         if (namespace === 'ng')  { config = this._ngConfig; }
  3111.         if (namespace === 'fav') { config = this._favConfig; }
  3112.         if (namespace === 'nicoad') { config = this._nicoadConfig; }
  3113.         if (namespace === 'mylist') { config = this._mylistConfig; }
  3114.  
  3115.         const tagName = (elm.tagName.toLowerCase()).toLowerCase();
  3116.         if (tagName === 'input') {
  3117.           const type = (elm.type || '').toLowerCase();
  3118.           switch (type) {
  3119.             case 'checkbox':
  3120.               config.setValue(name, elm.checked);
  3121.               break;
  3122.             default:
  3123.               config.setValue(name, elm.value);
  3124.               break;
  3125.           }
  3126.         } else if (tagName === 'select' || tagName === 'textarea') {
  3127.           config.setValue(name, elm.value);
  3128.         }
  3129.       }
  3130.  
  3131.       toggleClass(className, v) {
  3132.         className.split(/ +/).forEach((c) => {
  3133.           this._rootDom.classList.toggle(c, v);
  3134.           this._hostDom.classList.toggle(c, v);
  3135.         });
  3136.       }
  3137.  
  3138.       addClass(className)    { this.toggleClass(className, true); }
  3139.       removeClass(className) { this.toggleClass(className, false); }
  3140.       
  3141.       bind(videoInfo) {
  3142.         this._videoInfo = videoInfo;
  3143.         //console.info('status?', videoInfo.status, videoInfo.status === 'ok');
  3144.         if (videoInfo.status === 'ok') {
  3145.           this._bindSuccess(videoInfo);
  3146.         } else {
  3147.           this._bindFail(videoInfo);
  3148.         }
  3149.         window.setTimeout(() => {
  3150.           this.removeClass('is-loading');
  3151.         }, 0);
  3152.       }
  3153.  
  3154.       _onClick(e) {
  3155.         const t = e.target;
  3156.         const elm =
  3157.           t.classList.contains('command') ?
  3158.             t : e.target.closest('.command');
  3159.         if (!elm) { return; }
  3160.  
  3161.         // 簡易 throttle
  3162.         if (elm.classList.contains('is-active')) { return; }
  3163.         elm.classList.add('is-active');
  3164.         window.setTimeout(() => { elm.classList.remove('is-active'); }, 500);
  3165.  
  3166.         e.preventDefault();
  3167.         e.stopPropagation();
  3168.         const command = elm.getAttribute('data-command');
  3169.         const param   = elm.getAttribute('data-param');
  3170.         switch (command) {
  3171.           case 'toggle-setting':
  3172.             this.toggleSettingPanel();
  3173.             break;
  3174.           case 'add-ng-tag':    case 'add-fav-tag':
  3175.           case 'toggle-ng-tag': case 'toggle-fav-tag': {
  3176.               const tag = elm.getAttribute('data-tag') || '';
  3177.               if (!tag) { break; }
  3178.               this.emit('command', command, {
  3179.                 watchId: this._videoInfo.watchId,
  3180.                 value: tag
  3181.               }, this);
  3182.             }
  3183.             break;
  3184.           case 'add-ng-owner':    case 'add-fav-owner':
  3185.           case 'toggle-ng-owner': case 'toggle-fav-owner': {
  3186.               let owner =
  3187.                 (this._videoInfo.isChannel ? 'ch' : '') +
  3188.                  this._videoInfo.ownerId + '#' + this._videoInfo.ownerName;
  3189.               this.emit('command', command, {
  3190.                 watchId: this._videoInfo.watchId,
  3191.                 value: owner
  3192.               }, this);
  3193.             }
  3194.             break;
  3195.           case 'close':
  3196.             this.hide();
  3197.             break;
  3198.            default:
  3199.             this.emit('command', command, param, this);
  3200.         }
  3201.       }
  3202.  
  3203.       _updateFavNg() {
  3204.         if (!this._isInitialized) { return; }
  3205.         if (!this._videoInfo  || this._videoInfo.status !== 'ok') { return; }
  3206.  
  3207.         const videoInfo = this._videoInfo;
  3208.         const ownerInfo = this._rootDom.querySelector('.owner-info');
  3209.         ownerInfo.classList.toggle('is-favorited',
  3210.           this._favChecker.isMatchOwner(videoInfo.owner));
  3211.         ownerInfo.classList.toggle('is-ng',
  3212.           this._ngChecker .isMatchOwner(videoInfo.owner));
  3213.  
  3214.         Array.prototype.forEach.call(
  3215.           this._rootDom.querySelectorAll('.tag-container'),
  3216.           (elm) => {
  3217.             const tag = elm.getAttribute('data-tag');
  3218.             elm.classList.toggle('is-favorited', this._favChecker.isMatchTag(tag));
  3219.             elm.classList.toggle('is-ng',        this._ngChecker.isMatchTag(tag));
  3220.           });
  3221.       }
  3222.  
  3223.       _cancelMouseWheel(e) {
  3224.         const target = this;
  3225.         const delta  = -e.deltaY;
  3226.         const scrollTop    = target.scrollTop;
  3227.         const height       = target.offsetHeight;
  3228.         const scrollHeight = target.scrollHeight;
  3229.         if (delta > 0) { // up
  3230.           if (scrollTop <= delta) {
  3231.             target.scrollTop = 0;
  3232.             e.preventDefault(); e.stopPropagation();
  3233.           }
  3234.         } else if (scrollTop >= scrollHeight - height + delta) { // down
  3235.           target.scrollTop = scrollHeight - height;
  3236.           e.preventDefault(); e.stopPropagation();
  3237.         }
  3238.       }
  3239.  
  3240.       toggleSettingPanel() {
  3241.         this.toggleClass('is-setting');
  3242.       }
  3243.  
  3244.       _onBodyMouseDown() {
  3245.         document.body.removeEventListener('mousedown', this._boundOnBodyMouseDown);
  3246.         this.hide();
  3247.       }
  3248.  
  3249.       reset() {
  3250.         this._initialize();
  3251.         window.setTimeout(() => { this._videoInfoArea.scrollTop = 0; }, 0);
  3252.         this.removeClass('noclip');
  3253.         this.addClass('is-loading');
  3254.       }
  3255.  
  3256.       show() {
  3257.         this.addClass('show');
  3258.         document.body.addEventListener('mousedown', this._boundOnBodyMouseDown);
  3259.       }
  3260.  
  3261.       hide() {
  3262.         this._videoInfoArea.scrollTop = 0;
  3263.         this.removeClass('show is-ok is-fail noclip is-setting');
  3264.       }
  3265.       
  3266.       _bindSuccess(videoInfo) {
  3267.         const toCamel = p => {
  3268.           return p.replace(/-./g, s => { return s.charAt(1).toUpperCase(); });
  3269.         };
  3270.  
  3271.         Object.keys(this._slot).forEach((key) => {
  3272.           const camelKey = toCamel(key);
  3273.           const data = videoInfo[camelKey];
  3274.           //console.log('keys', typeof data, key, camelKey, data);
  3275.           if (typeof data !== 'string' && typeof data !== 'object') { return; }
  3276.  
  3277.           const elm = this._slot[key];
  3278.           const type = elm.getAttribute('data-type') || 'string';
  3279.  
  3280.           switch (type) {
  3281.             case 'html':
  3282.               this._createDescription(elm, data);
  3283.               break;
  3284.             case 'int':
  3285.               let i = parseInt(data, 10);
  3286.               i = i.toLocaleString ? i.toLocaleString() : i;
  3287.               elm.textContent = i;
  3288.               break;
  3289.             case 'link':
  3290.               elm.href = data;
  3291.               break;
  3292.             case 'image':
  3293.               elm.src = data;
  3294.               break;
  3295.             case 'date':
  3296.               elm.textContent = data.toLocaleString();
  3297.               break;
  3298.             default:
  3299.               elm.textContent = data;
  3300.           }
  3301.         });
  3302.  
  3303.         const df = document.createDocumentFragment();
  3304.         //Array.prototype.forEach.call(this._host.querySelectorAll('.tag'), t => { t.remove(); });
  3305.         videoInfo.tags.forEach(tag => { df.appendChild((this._createTagSlot(tag))); });
  3306.         const videoTags = this._rootDom.querySelector('.video-tags');
  3307.         videoTags.innerHTML = '';
  3308.         videoTags.appendChild(df);
  3309.  
  3310.         Array.prototype.forEach.call(this._rootDom.querySelectorAll('.command-watch-id'), elm => {
  3311.           elm.setAttribute('data-param', videoInfo.watchId);
  3312.         });
  3313.         Array.prototype.forEach.call(this._rootDom.querySelectorAll('.command-video-id'), elm => {
  3314.           elm.setAttribute('data-param', videoInfo.videoId);
  3315.         });
  3316.  
  3317.         const target = this._config.getValue('openNewWindow') ? '_blank' : '_self';
  3318.         Array.prototype.forEach.call(
  3319.           this._host.querySelectorAll('.target-change'), elm => {
  3320.           elm.target = target;
  3321.           elm.rel = 'noopener';
  3322.         });
  3323.  
  3324.         this._updateFavNg();
  3325.  
  3326.         this.toggleClass('is-channel', videoInfo.isChannel);
  3327.         this.addClass('is-ok');
  3328.         this.removeClass('is-fail');
  3329.         window.setTimeout(() => { this.addClass('noclip'); }, 800);
  3330.       }
  3331.  
  3332.       _createDescription(elm, data) {
  3333.         elm.innerHTML = util.httpLink(data);
  3334.         const watchReg = /watch\/([a-z0-9]+)/;
  3335.         const isZenzaReady = this._isZenzaReady;
  3336.         //if (util.isFirefox()) { return; }
  3337.         Array.from(elm.querySelectorAll('.videoLink[href*=\'watch/\']')).forEach((link) => {
  3338.           const href = link.getAttribute('href');
  3339.           if (!watchReg.test(href)) { return; }
  3340.           const watchId = RegExp.$1;
  3341.           if (isZenzaReady) {
  3342.             link.classList.add('noHoverMenu');
  3343.             link.classList.add('command');
  3344.             link.setAttribute('data-command', 'zenza-open');
  3345.             link.setAttribute('data-param', watchId);
  3346.           }
  3347.           const btn = document.createElement('button');
  3348.           btn.innerHTML = '？';
  3349.           btn.className = 'command command-button noHoverMenu';
  3350.           btn.setAttribute('slot', 'command-button');
  3351.           btn.setAttribute('tooltip', '動画情報');
  3352.           btn.setAttribute('data-command', 'info');
  3353.           btn.setAttribute('data-param', watchId);
  3354.           link.appendChild(btn);
  3355.  
  3356.           const thumbnail = util.getThumbnailUrlByVideoId(watchId);
  3357.           if (thumbnail) {
  3358.             const img = document.createElement('img');
  3359.             img.className = 'videoThumbnail';
  3360.             img.src = thumbnail;
  3361.             link.classList.add('popupThumbnail');
  3362.             link.appendChild(img);
  3363.           }
  3364.           link.classList.add('watch');
  3365.         });
  3366.       }
  3367.  
  3368.       _bindFail(videoInfo) {
  3369.         this._slot['error-description'].textContent =
  3370.           `動画情報の取得に失敗しました (${videoInfo.description})`;
  3371.         this.addClass('is-fail');
  3372.         this.removeClass('is-ok');
  3373.       }
  3374.  
  3375.  
  3376.       _createTagSlot(tag) {
  3377.         const text = util.escapeHtml(tag.text);
  3378.         const lock = tag.isLocked ? 'is-locked' : '';
  3379.         const span = document.createElement('span');
  3380.  
  3381.         const a = document.createElement('a');
  3382.         const target = this._config.getValue('openNewWindow') ? '_blank' : '_self';
  3383.         a.textContent = tag.text;
  3384.         a.className = `tag ${lock}`;
  3385.         a.target    = target;
  3386.         a.rel       = 'noopener';
  3387.         a.href      = `/tag/${encodeURIComponent(text)}`;
  3388.         span.appendChild(a);
  3389.  
  3390.         const fav = document.createElement('button');
  3391.         fav.className = 'add-fav-button command';
  3392.         fav.setAttribute('data-command', 'toggle-fav-tag');
  3393.         fav.setAttribute('data-tag', tag.text);
  3394.         fav.innerHTML = '★'; //'&#8416;'; // &#x2716;
  3395.         span.appendChild(fav);
  3396.  
  3397.         const bt = document.createElement('button');
  3398.         bt.className = 'add-ng-button command';
  3399.         bt.setAttribute('data-command', 'toggle-ng-tag');
  3400.         bt.setAttribute('data-tag', tag.text);
  3401.         bt.innerHTML = '&#x2716;'; //'&#8416;'; // &#x2716;
  3402.         span.appendChild(bt);
  3403.  
  3404.         span.className = 'tag-container';
  3405.         span.setAttribute('data-tag', tag.text);
  3406.         span.slot = 'tag';
  3407.         return span;
  3408.       }
  3409.  
  3410.       notifyBeginDeflistUpdate(/*watchId*/) {
  3411.         this.addClass('is-deflistUpdating');
  3412.       }
  3413.  
  3414.       notifyEndDeflistUpdate(result) {
  3415.         this.addClass('is-deflistSuccess');
  3416.         window.setTimeout(() => { this.removeClass('is-deflistSuccess'); }, 3000);
  3417.  
  3418.         //window.console.info('ok result', result);
  3419.         this._deflistButton.setAttribute('data-result', result.message || '登録しました');
  3420.         this.removeClass('is-deflistUpdating');
  3421.       }
  3422.  
  3423.       notifyFailDeflistUpdate(result) {
  3424.         this.addClass('is-deflistFail');
  3425.         window.setTimeout(() => { this.removeClass('is-deflistFail'); }, 3000);
  3426.  
  3427.         //window.console.info('fail result', result);
  3428.         this._deflistButton.setAttribute('data-result', result.message || '登録失敗');
  3429.         this.removeClass('is-deflistUpdating');
  3430.       }
  3431.     }
  3432.  
  3433.  
  3434.     class VideoInfo {
  3435.       static createByThumbInfo({xml, watchId}) {
  3436.         const dom = (new DOMParser()).parseFromString(xml, 'text/xml');
  3437.         const status =
  3438.           dom.getElementsByTagName('nicovideo_thumb_response')[0].getAttribute('status');
  3439.         //console.info('status', status);
  3440.         const t = function(name) {
  3441.           const tt = dom.getElementsByTagName(name);
  3442.           if (!tt || !tt[0]) {
  3443.             return '';
  3444.           }
  3445.           return tt[0].textContent.trim();
  3446.         };
  3447.  
  3448.         const videoId = t('video_id');
  3449.         let thumbnail = t('thumbnail_url');
  3450.         if (util.hasLargeThumbnail(videoId)) {
  3451.           thumbnail += '.L';
  3452.         }
  3453.  
  3454.         const isChannel = !!t('ch_id');
  3455.         const tags = [];
  3456.         const rawData = {
  3457.           status,
  3458.           videoId:        t('video_id'),
  3459.           watchId:        isChannel ? t('video_id') : watchId,
  3460.           videoTitle:     t('title'),
  3461.           videoThumbnail: thumbnail,
  3462.           uploadDate:     t('first_retrieve'),
  3463.           duration:       t('length'),
  3464.           viewCounter:    t('view_counter'),
  3465.           mylistCounter:  t('mylist_counter'),
  3466.           commentCounter: t('comment_num'),
  3467.           description:    t('description'),
  3468.           lastResBody:    t('last_res_body'),
  3469.           isChannel,
  3470.           ownerId:   isChannel ? t('ch_id')       : t('user_id'),
  3471.           ownerName: isChannel ? t('ch_name')     : t('user_nickname'),
  3472.           ownerIcon: isChannel ? t('ch_icon_url') : t('user_icon_url'),
  3473.           tags
  3474.         };
  3475.  
  3476.         dom.querySelectorAll('tag').forEach(tag => {
  3477.           const isLocked = tag.getAttribute('lock');
  3478.           const text = tag.textContent;
  3479.           tags.push({text, isLocked});
  3480.         });
  3481.  
  3482.         return new VideoInfo(rawData);
  3483.       }
  3484.  
  3485.       constructor(rawData) {
  3486.         this._rawData = rawData;
  3487.       }
  3488.  
  3489.       get status()           { return this._rawData.status; }
  3490.       get videoId()          { return this._rawData.videoId; }
  3491.       get watchId()          { return this._rawData.watchId; }
  3492.       get videoTitle()       { return this._rawData.videoTitle; }
  3493.       get videoThumbnail()   { return this._rawData.videoThumbnail; }
  3494.       get description()      { return this._rawData.description; }
  3495.       get duration()         { return this._rawData.duration; }
  3496.       get owner() {
  3497.         return {
  3498.           type: this.isChannel ? 'channel' : 'user',
  3499.           id:   this.ownerId,
  3500.           name: this.ownerName,
  3501.           icon: this.ownerIcon
  3502.         };
  3503.       }
  3504.  
  3505.       get ownerPageLink()  {
  3506.         const ownerId = this.ownerId;
  3507.         if (this.isChannel) {
  3508.           return `//ch.nicovideo.jp/ch${ownerId}`;
  3509.         } else {
  3510.           return `//www.nicovideo.jp/user/${ownerId}`;
  3511.         }
  3512.       }
  3513.       get ownerIcon()      { return this._rawData.ownerIcon; }
  3514.       get ownerName()      { return this._rawData.ownerName; }
  3515.       get localeOwnerName() {
  3516.         if (this.isChannel) {
  3517.           return this.ownerName;
  3518.         } else {
  3519.           // TODO: 言語依存
  3520.           return this.ownerName + ' さん';
  3521.         }
  3522.       }
  3523.       get ownerId()        { return this._rawData.ownerId; }
  3524.       get isChannel()      { return this._rawData.isChannel; }
  3525.       get uploadDate()     { return new Date(this._rawData.uploadDate); }
  3526.  
  3527.       get viewCounter()    { return this._rawData.viewCounter; }
  3528.       get mylistCounter()  { return this._rawData.mylistCounter; }
  3529.       get commentCounter() { return this._rawData.commentCounter; }
  3530.  
  3531.       get lastResBody()    { return this._rawData.lastResBody; }
  3532.       get tags() { return this._rawData.tags; }
  3533.     }
  3534.  
  3535.  
  3536.  
  3537.     const deflistAdd = (watchId) => {
  3538.       const enableAutoComment = config.getValue('mylist.enableAutoComment');
  3539.       if (location.host === 'www.nicovideo.jp') {
  3540.         if (enableAutoComment) {
  3541.           return DeflistApiLoader.addItemWithOwnerName(watchId);
  3542.         } else {
  3543.           return DeflistApiLoader.addItem(watchId, '');
  3544.         }
  3545.       }
  3546.  
  3547.       let zenza;
  3548.       let token;
  3549.       return ZenzaDetector.detect().then((z) => {
  3550.         zenza = z;
  3551.       }).then(() => {
  3552.         return CsrfTokenLoader.load().then((t) => {
  3553.           token = t;
  3554.         }, () => { return Promise.resolve(); });
  3555.       }).then(() => {
  3556.         if (!enableAutoComment) { return {}; }
  3557.         return ThumbInfoLoader.loadOwnerInfo(watchId);
  3558.       }).then((owner) => {
  3559.         //console.info(watchId, token, owner, zenza);
  3560.         if (!owner.id) {
  3561.           return zenza.external.deflistAdd({watchId});
  3562.         }
  3563.  
  3564.         const description = owner.localeName;
  3565.         return zenza.external.deflistAdd({watchId, description, token});
  3566.       });
  3567.     };
  3568.  
  3569.     const deflistRemove = (watchId) => {
  3570.       if (location.host === 'www.nicovideo.jp') {
  3571.         return DeflistApiLoader.removeItem(watchId);
  3572.       }
  3573.  
  3574.       let zenza;
  3575.       let token;
  3576.       return ZenzaDetector.detect().then((z) => {
  3577.         zenza = z;
  3578.       }).then(() => {
  3579.         return CsrfTokenLoader.load().then((t) => {
  3580.           token = t;
  3581.         }, () => { return Promise.resolve(); });
  3582.       }).then(() => {
  3583.         return zenza.external.deflistRemove({watchId, token});
  3584.       });
  3585.       
  3586.     };
  3587.  
  3588.  
  3589.  
  3590.     class MatchChecker {
  3591.       constructor({word = '', tag = '', owner = ''}) {
  3592.         this.init({word, tag, owner});
  3593.       }
  3594.  
  3595.       init({word, tag, owner}) {
  3596.         this._tag = [];
  3597.         tag.split(/[\r\n]+/).forEach((t) => {
  3598.           if (t) { this._tag.push(t.trim()); }
  3599.         });
  3600.         this._tag = _.uniq(this._tag);
  3601.  
  3602.         let wordTmp = [];
  3603.         this._word = null;
  3604.         word.split(/[\r\n]+/).forEach((w) => {
  3605.           if (w) { wordTmp.push(util.escapeRegs(w.trim())); }
  3606.         });
  3607.         wordTmp = _.uniq(wordTmp);
  3608.         if (wordTmp.length > 0) {
  3609.           this._word = new RegExp('(' + wordTmp.join('|') + ')', 'i');
  3610.         }
  3611.         //console.info('word', word, wordTmp.length, this._word);
  3612.  
  3613.         this._userId    = [];
  3614.         this._channelId = [];
  3615.         owner.split(/[\r\n]+/).forEach((o) => {
  3616.           if (typeof o === 'string') {
  3617.             const id = o.split('#')[0].trim();
  3618.             if (id.startsWith('ch')) {
  3619.               this._channelId.push(parseInt(id.substring(2)));
  3620.             } else {
  3621.               this._userId.push(parseInt(id));
  3622.             }
  3623.           }
  3624.         });
  3625.         this._userId    = _.uniq(this._userId);
  3626.         this._channelId = _.uniq(this._channelId);
  3627.  
  3628.         //console.info('ng', this._tag, this._word, this._userId, this._channelId);
  3629.       }
  3630.  
  3631.       isMatch(data) {
  3632.         if (this._isMatchTag(data.tagList)) { return true; }
  3633.         if (this._isMatchOwner(data.owner)) { return true; }
  3634.         if (this._isMatchWord({title: data.title, description: data.description})) { return true; }
  3635.       }
  3636.  
  3637.       _isMatchTag(tagList = []) {
  3638.         if (this._tag.length < 1) { return false; }
  3639.  
  3640.         const tagTmp = [];
  3641.         tagList.forEach(t => { if (t) { tagTmp.push(util.escapeRegs(t.trim())); } });
  3642.         const tagReg = new RegExp(' (' + tagTmp.join('|') + ') ', 'i');
  3643.         const _tag = ' ' + this._tag.join(' ') + ' ';
  3644.         return tagReg.test(_tag);
  3645.       }
  3646.  
  3647.       _isMatchOwner(owner) {
  3648.         const _id = owner.type === 'user' ? this._userId : this._channelId;
  3649.         return _id.includes(parseInt(owner.id, 10));
  3650.       }
  3651.  
  3652.       _isMatchWord({title, description}) {
  3653.         if (!this._word) { return false; }
  3654.         //console.log(title, this._word.test(title));
  3655.         //console.log(description, this._word.test(description));
  3656.         return this._word.test(title) || this._word.test(description);
  3657.       }
  3658.  
  3659.       isMatchTag(tag) {
  3660.         return this._isMatchTag([tag]);
  3661.       }
  3662.  
  3663.       isMatchOwner(owner) {
  3664.         return this._isMatchOwner(owner);
  3665.       }
  3666.     }
  3667.  
  3668.     class NgChecker extends MatchChecker {
  3669.       isNg(data) {
  3670.         return super.isMatch(data);
  3671.       }
  3672.     }
  3673.  
  3674.     const initDom = () => {
  3675.       util.addStyle(__css__);
  3676.       const f = document.createElement('div');
  3677.       f.id = 'mylistPocketDomContainer';
  3678.       f.innerHTML = __tpl__;
  3679.       document.body.appendChild(f);
  3680.     };
  3681.  
  3682.     const initZenzaBridge = () => {
  3683.       ZenzaDetector.initialize();
  3684.     };
  3685.  
  3686.     const createVideoInfoView = () => {
  3687.       const host = document.getElementById('mylistPocket-popup');
  3688.       const tpl  = document.getElementById('mylistPocket-popup-template');
  3689.       const vv = new VideoInfoView({host, tpl});
  3690.       return vv;
  3691.     };
  3692.  
  3693.     const createVideoInfoLoader = (vv) => {
  3694.  
  3695.       const onVideoInfoLoad = ({data, watchId}) => {
  3696.         const vi = VideoInfo.createByThumbInfo({xml: data, watchId});
  3697.         vv.bind(vi);
  3698.       };
  3699.  
  3700.       const onVideoInfoFail = () => {
  3701.         vv.bind({status: 'fail', description: '通信失敗'});
  3702.         return Promise.resolve();
  3703.       };
  3704.  
  3705.       return function(watchId) {
  3706.         vv.reset();
  3707.         vv.show();
  3708.         return ThumbInfoLoader.loadXml(watchId).then(
  3709.           onVideoInfoLoad, onVideoInfoFail
  3710.         );
  3711.       };
  3712.     };
  3713.  
  3714.     const createCommandDispatcher = ({infoView}) => {
  3715.       const info = createVideoInfoLoader(infoView);
  3716.  
  3717.       const ngConfig  = config.namespace('ng');
  3718.       const favConfig = config.namespace('fav');
  3719.       const {ngChecker, favChecker} = initNgChecker({ngConfig, favConfig});
  3720.  
  3721.       const toggleFavNg = (command, param) => {
  3722.         let [cmd, namespace, key] = command.split('-');
  3723.         let _config = namespace === 'fav' ? favConfig : ngConfig;
  3724.         _config.refresh();
  3725.         const value = param.value.trim();
  3726.         let ngs = _config.getValue(key).trim().split(/[\r\n]/);
  3727.         const isContain = ngs.includes(value);
  3728.  
  3729.         if (isContain || cmd === 'remove') {
  3730.           ngs = ngs.filter((line) => {
  3731.             if (line === value) {
  3732.               window.console.info('%c-%s:%s', 'background: cyan', key, value);
  3733.             }
  3734.             return line !== value;
  3735.           });
  3736.           cmd = 'remove';
  3737.         } else if (!isContain || cmd === 'add') {
  3738.           ngs.push(value);
  3739.           window.console.info('%c+%s:%s', 'background: cyan', key, value);
  3740.           cmd = 'add';
  3741.         }
  3742.  
  3743.         ngs = _.uniq(ngs);
  3744.  
  3745.         _config.setValue(key, ngs.join('\n').trim());
  3746.  
  3747.         const className = namespace === 'fav' ? 'is-fav-favorited' : 'is-ng-rejected';
  3748.         Array.prototype.forEach.call(
  3749.           document.querySelectorAll(`*[data-watch-id=${param.watchId}]`),
  3750.           item => { item.classList.toggle(className, cmd === 'add'); });
  3751.       };
  3752.  
  3753.       return (command, param, src) => {
  3754.         switch(command) {
  3755.           case 'info':
  3756.             return info(param);
  3757.           case 'load':
  3758.             return QueueLoader.load(param);
  3759.           case 'fav-status':
  3760.             return QueueLoader.load(param).then((result) => {
  3761.               if (!result || !result.data || result.data.status === 'fail' || result.data.code === 'DELETED') {
  3762.                 return Promise.reject({status: 'unknown', result});
  3763.               }
  3764.               if (ngChecker.isMatch(result.data)) {
  3765.                 return {status: 'ng', result};
  3766.               }
  3767.               if (favChecker.isMatch(result.data)) {
  3768.                 return {status: 'favorite', result};
  3769.               }
  3770.               return {status: 'default', result};
  3771.             });
  3772.           case 'mylist-window':
  3773.             window.open(
  3774.              '//www.nicovideo.jp/mylist_add/video/' + param,
  3775.              'nicomylistadd',
  3776.              'width=500, height=400, menubar=no, scrollbars=no');
  3777.             break;
  3778.           case 'twitter-hash-open':
  3779.             window.open('https://twitter.com/hashtag/' + param + '?src=hash');
  3780.             break;
  3781.           case 'open-mylist-open':
  3782.             window.open('//www.nicovideo.jp/openlist/' + param);
  3783.             break;
  3784.           case 'mylist-comment-open':
  3785.             window.open('//www.nicovideo.jp/mylistcomment/video/' + param);
  3786.             break;
  3787.            case 'zenza-open-now':
  3788.             window.ZenzaWatch.external.sendOrExecCommand('openNow', param);
  3789.             break;
  3790.           case 'zenza-open':
  3791.             window.ZenzaWatch.external.sendOrOpen(param);
  3792.             break;
  3793.           case 'playlist-inert':
  3794.             window.ZenzaWatch.external.playlist.insert(param);
  3795.             break;
  3796.           case 'playlist-queue':
  3797.             window.ZenzaWatch.external.playlist.add(param);
  3798.             break;
  3799.           case 'deflist-add':
  3800.             src.notifyBeginDeflistUpdate('is-deflistUpdating');
  3801.  
  3802.             return deflistAdd(param)
  3803.               .then(util.getSleepPromise(1000, 'deflist-add'))
  3804.               .then((result) => {
  3805.                 src.notifyEndDeflistUpdate(result);
  3806.               }, (err) => {
  3807.                 console.error('deflist-add-result', err);
  3808.                 src.notifyFailDeflistUpdate(err);
  3809.               });
  3810.           case 'deflist-remove':
  3811.             src.notifyBeginDeflistUpdate('is-deflistUpdating');
  3812.  
  3813.             return deflistRemove(param)
  3814.               .then(util.getSleepPromise(1000, 'deflist-remove'))
  3815.               .then(() => {
  3816.                 src.notifyEndDeflistUpdate({message: '削除しました'});
  3817.               }, (err) => {
  3818.                 console.error('deflist-remove-result', err);
  3819.                 src.notifyFailDeflistUpdate(err);
  3820.               });
  3821.            case 'add-ng-word':  case 'add-ng-tag':  case 'add-ng-owner':
  3822.           case 'add-fav-word': case 'add-fav-tag': case 'add-fav-owner':
  3823.           case 'remove-ng-word':  case 'remove-ng-tag':  case 'remove-ng-owner':
  3824.           case 'remove-fav-word': case 'remove-fav-tag': case 'remove-fav-owner':
  3825.           case 'toggle-ng-word':  case 'toggle-ng-tag':  case 'toggle-ng-owner':
  3826.           case 'toggle-fav-word': case 'toggle-fav-tag': case 'toggle-fav-owner':
  3827.             toggleFavNg(command, param);
  3828.             break;
  3829.         }
  3830.       };
  3831.     };
  3832.  
  3833.     const initExternal = (dispatcher, hoverMenu, infoView) => {
  3834.       MylistPocket.external = {
  3835.         info: watchId => { return dispatcher('info', watchId); },
  3836.         load: watchId => { return dispatcher('load', watchId); },
  3837.         getFavStatus: (watchId) => { return dispatcher('fav-status', watchId); },
  3838.         observe: (params /*{query, container, closest}*/) => { initNg(params); },
  3839.         hide: () => {
  3840.           hoverMenu.hide();
  3841.           infoView.hide();
  3842.         }
  3843.       };
  3844.  
  3845.       MylistPocket.isReady = true;
  3846.  
  3847.       const ev = new CustomEvent('MylistPocketInitialized', { detail: { MylistPocket } });
  3848.       document.body.dispatchEvent(ev);
  3849.       // 過去の互換用
  3850.       if (window.jQuery) {
  3851.         window.jQuery('body').trigger('MylistPocketReady', MylistPocket);
  3852.       }
  3853.     };
  3854.  
  3855.  
  3856.     const QueueLoader = (() => {
  3857.       let lastPromise = null;
  3858.       let count = 0;
  3859.       const MAX_LOAD = 6;
  3860.       const promises = [];
  3861.  
  3862.       const load = function(watchId, item) {
  3863.         count = (count + 1) % MAX_LOAD;
  3864.         lastPromise = promises[count];
  3865.         
  3866.         //console.time('load-' + watchId);
  3867.         const onLoad = (result) => {
  3868.           //console.timeEnd('load-' + watchId);
  3869.           if (item) {
  3870.             watchId = (result.data.id || '').startsWith('so') ? result.data.id : watchId;
  3871.             item.setAttribute('data-watch-id', watchId);
  3872.             item.setAttribute('data-thumb-info', JSON.stringify(result));
  3873.           }
  3874.           const sleepTime = result.data.fromCache ? 0 : 50;
  3875.           return (util.getSleepPromise(sleepTime,  'success-' + watchId))(result);
  3876.         };
  3877.         const onFail = util.getSleepPromise(1000, 'fail-'    + watchId);
  3878.  
  3879.         if (!lastPromise) {
  3880.           if (item) { item.classList.add('is-ng-current'); }
  3881.           lastPromise = ThumbInfoLoader.load(watchId).then(onLoad, onFail);
  3882.         } else {
  3883.           //lastPromise = Promise.all([lastPromise]).then(() => {
  3884.           lastPromise = Promise.race(promises).then(() => {
  3885.             if (item) { item.classList.add('is-ng-current'); }
  3886.             return ThumbInfoLoader.load(watchId).then(onLoad, onFail);
  3887.           });
  3888.         }
  3889.  
  3890.         promises[count] = lastPromise;
  3891.         return lastPromise;
  3892.       };
  3893.  
  3894.       return {
  3895.         load
  3896.       };
  3897.     })();
  3898.  
  3899.     const getNgEnv = () => {
  3900.       if (location.host === 'www.nicovideo.jp' &&
  3901.          (location.pathname.startsWith('/ranking') ||
  3902.           location.pathname.startsWith('/tag')     ||
  3903.           location.pathname.startsWith('/search'))
  3904.       ) {
  3905.         return {
  3906.           query: '.item[data-video-id]:not(.is-ng-wait), .item_cell[data-video-id]:not(.is-ng-wait)',
  3907.           container: document.querySelector('.column.main, .container.column1024-0')
  3908.         };
  3909.       }
  3910.       if (location.host === 'www.nicovideo.jp' &&
  3911.           document.querySelector('#MyPageNicorepoApp, #UserPageNicorepoApp')) {
  3912.         return {
  3913.           query: 'a[href*="/watch/"]:not(.is-ng-wait)',
  3914.           container: document.querySelector('#MyPageNicorepoApp, #UserPageNicorepoApp'),
  3915.           closest: '.log'
  3916.         };
  3917.       }
  3918.  
  3919.       if (location.host === 'ch.nicovideo.jp' &&
  3920.           location.pathname.startsWith('/search')) {
  3921.         return {
  3922.           query: '.item:not(.is-ng-wait)',
  3923.           container: document.querySelector('.site_body')
  3924.         };
  3925.       }
  3926.  
  3927.       if (location.host === 'search.nicovideo.jp') {
  3928.         return {
  3929.           query: '.video:not(.is-ng-wait)',
  3930.           container: document.querySelector('#row-results')
  3931.         };
  3932.       }
  3933.  
  3934.  
  3935.       return {query: null, container: null};
  3936.     };
  3937.  
  3938.     const initNgConfig = () => {
  3939.       const ngConfig = config.namespace('ng');
  3940.       const updateEnable = v => { document.body.classList.toggle('is-ng-disable', !v); };
  3941.       updateEnable(ngConfig.getValue('enable'));
  3942.       if (!ngConfig.getValue('enable')) { return {}; }
  3943.       ngConfig.on('enable', updateEnable);
  3944.  
  3945.       const favConfig = config.namespace('fav');
  3946.       return {ngConfig, favConfig};
  3947.     };
  3948.  
  3949.     const initNgChecker = ({ngConfig, favConfig}) => {
  3950.       const ngChecker = new NgChecker({
  3951.         word:  ngConfig.getValue('word'),
  3952.         tag:   ngConfig.getValue('tag'),
  3953.         owner: ngConfig.getValue('owner')
  3954.       });
  3955.  
  3956.       ngConfig.on('@update', _.debounce(({key, value}) => {
  3957.         //console.info('ngConfig updated: ', key, value);
  3958.         ngChecker.init({
  3959.           word:  ngConfig.getValue('word'),
  3960.           tag:   ngConfig.getValue('tag'),
  3961.           owner: ngConfig.getValue('owner')
  3962.         });
  3963.       }, 100));
  3964.  
  3965.  
  3966.       const favChecker = new MatchChecker({
  3967.         word:  favConfig.getValue('word'),
  3968.         tag:   favConfig.getValue('tag'),
  3969.         owner: favConfig.getValue('owner')
  3970.       });
  3971.  
  3972.       favConfig.on('@update', _.debounce(({key, value}) => {
  3973.         //console.info('favConfig updated: ', key, value);
  3974.         favChecker.init({
  3975.           word:  favConfig.getValue('word'),
  3976.           tag:   favConfig.getValue('tag'),
  3977.           owner: favConfig.getValue('owner')
  3978.         });
  3979.       }, 100));
  3980.  
  3981.        return {ngChecker, favChecker};
  3982.     };
  3983.  
  3984.     const initIntersectionObserver = (onInview) => {
  3985.  
  3986.       const onItemInview = item => {
  3987.         let watchId = item.getAttribute('data-id') ||
  3988.           item.getAttribute('data-video-id') ||
  3989.           item.getAttribute('data-watch-id');
  3990.         const ignore = () => {
  3991.           item.classList.add('is-ng-ignore');
  3992.         };
  3993.         if (!watchId) {
  3994.           const a = item.querySelector("a[href*='watch/']");
  3995.           if (!a) { return ignore(); }
  3996.           if (a.hostname !== 'www.nicovideo.jp') { return ignore(); }
  3997.           if (!/^\/watch\/([a-z0-9]+)/.test(a.pathname)) { return ignore(); }
  3998.           watchId = RegExp.$1;
  3999.         }
  4000.  
  4001.         if (!watchId) { return ignore(); }
  4002.  
  4003.         item.classList.add('is-ng-queue');
  4004.         onInview(item, watchId);
  4005.       };
  4006.  
  4007.       const intersectionObserver = new window.IntersectionObserver(entries => {
  4008.         entries.forEach(entry => {
  4009.           const item = entry.target;
  4010.           intersectionObserver.unobserve(item);
  4011.           onItemInview(item);
  4012.         });
  4013.       }, { rootMargin: '400px'});
  4014.  
  4015.       return intersectionObserver;
  4016.     };
  4017.  
  4018.     const initNgDom = ({intersectionObserver, query, closest, container}) => {
  4019.  
  4020.       if (!container) { return; }
  4021.       util.addStyle(__ng_css__);
  4022.  
  4023.       const update = () => {
  4024.         let items = (container || document).querySelectorAll(query);
  4025.         if (!items || items.length < 1) { return; }
  4026.         if (closest) {
  4027.           let tmp = [];
  4028.           Array.from(items).forEach(item => {
  4029.             const c = item.closest(closest);
  4030.             if (c && !tmp.includes(c)) {
  4031.               tmp.push(c);
  4032.             }
  4033.           });
  4034.           items = tmp;
  4035.         }
  4036.         if (!items || items.length < 1) { return; }
  4037.         Array.from(items).forEach(item => {
  4038.           //if (item.offsetLeft < 0) { return; }
  4039.           if (item.classList.contains('is-ng-ignore')) { return; }
  4040.           item.classList.add('is-ng-wait');
  4041.           intersectionObserver.observe(item);
  4042.         });
  4043.       };
  4044.       update();
  4045.  
  4046.       const onUpdate = _.throttle(update, 1000);
  4047.  
  4048.       if (!container) { return; }
  4049.       const mutationObserver = new window.MutationObserver((mutations) => {
  4050.         let isAdded = false;
  4051.         mutations.forEach(mutation => {
  4052.           if (mutation.addedNodes && mutation.addedNodes.length > 0) {
  4053.             isAdded = true;
  4054.           }
  4055.         });
  4056.         if (isAdded) { onUpdate(); }
  4057.       });
  4058.  
  4059.       mutationObserver.observe(
  4060.         container,
  4061.         {childList: true, characterData: false, attributes: false, subtree: true}
  4062.       );
  4063.     };
  4064.  
  4065.     const initNg = params => {
  4066.       if (!window.IntersectionObserver) { return; }
  4067.  
  4068.       let {query, container, closest} = params ? params : getNgEnv();
  4069.  
  4070.       if (!query) { return; }
  4071.  
  4072.       const {ngConfig, favConfig} = initNgConfig();
  4073.       if (!ngConfig) { return; }
  4074.  
  4075.       const {ngChecker, favChecker} = initNgChecker({ngConfig, favConfig});
  4076.  
  4077.       const onItemInview = (item, watchId) => {
  4078.  
  4079.         const loadLazy = () => {
  4080.           const lazyImage = item.querySelector('.jsLazyImage');
  4081.           if (lazyImage) {
  4082.             const origImage = lazyImage.getAttribute('data-original');
  4083.             if (origImage) {
  4084.               lazyImage.src = origImage;
  4085.               lazyImage.classList.remove('jsLazyImage');
  4086.             }
  4087.           }
  4088.         };
  4089.  
  4090.         QueueLoader.load(watchId, item).then(
  4091.           (result) => {
  4092.             item.classList.remove('is-ng-current');
  4093.             if (!result || !result.data || result.data.status === 'fail' || result.data.code === 'DELETED') {
  4094.               if (result && result.data && result.data.code !== 'COMMUNITY') {
  4095.                 console.error('empty data', watchId, result, result.data ? result.data.code : 'unknown');
  4096.               }
  4097.               item.classList.add('is-ng-failed', (result && result.data) ? result.data.code : 'is-no-data');
  4098.             } else {
  4099.               item.classList.add(
  4100.                 ngChecker.isNg(result.data) ? 'is-ng-rejected' : 'is-ng-resolved');
  4101.               if (favChecker.isMatch(result.data)) {
  4102.                 item.classList.add('is-fav-favorited');
  4103.               }
  4104.  
  4105.               // チャンネル動画のリンクを watch/so〜 に置き換える
  4106.               if (!(result.data.id || '').startsWith('so')) { return; }
  4107.               for (let a of item.querySelectorAll(`a[href*="watch/${watchId}"]`)) {
  4108.                 let href = a.getAttribute('href');
  4109.                 href = href.replace(/watch\/([0-9]+)/, `watch/${result.data.id}`);
  4110.                 a.setAttribute('href', href);
  4111.               }
  4112.             }
  4113.  
  4114.             loadLazy();
  4115.           },
  4116.           () => {
  4117.             item.classList.remove('is-ng-current');
  4118.             item.classList.add('is-ng-failed');
  4119.             loadLazy();
  4120.           }
  4121.         );
  4122.       };
  4123.  
  4124.       const intersectionObserver = initIntersectionObserver(onItemInview);
  4125.  
  4126.       initNgDom({intersectionObserver, query, container, closest});
  4127.     };
  4128.  
  4129.     const init = () => {
  4130.       initDom();
  4131.       initZenzaBridge();
  4132.  
  4133.       const infoView = createVideoInfoView();
  4134.       const dispatcher = createCommandDispatcher({infoView});
  4135.  
  4136.       infoView.on('command', dispatcher);
  4137.  
  4138.       const hoverMenu = new HoverMenu();
  4139.       hoverMenu.on('info', (watchId) => {
  4140.         hoverMenu.isBusy = true;
  4141.  
  4142.         dispatcher('info', watchId)
  4143.           .then(() => { hoverMenu.isBusy = false; });
  4144.       });
  4145.       hoverMenu.on('deflist-add', (watchId, src) => {
  4146.         dispatcher('deflist-add', watchId, src);
  4147.       });
  4148.       hoverMenu.on('deflist-remove', (watchId, src) => {
  4149.         dispatcher('deflist-remove', watchId, src);
  4150.       });
  4151.       hoverMenu.on('playlist-queue', (watchId, src) => {
  4152.         dispatcher('playlist-queue', watchId, src);
  4153.       });
  4154.       MylistPocket.debug.hoverMenu = hoverMenu;
  4155.  
  4156.       initNg();
  4157.  
  4158.       if (config.getValue('nicoad.hide')) {
  4159.         util.addStyle(nicoadHideCss);
  4160.       }
  4161.  
  4162.       initExternal(dispatcher, hoverMenu, infoView);
  4163.     };
  4164.  
  4165.     init();
  4166.   };
  4167.  
  4168.   const postToParent = function(type, message, token) {
  4169.     const origin = document.referrer;
  4170.     //console.info('postToParent type=%s, message=%s, token=%s, origin=%s',
  4171.     //  type, message, token, origin);
  4172.     try {
  4173.       parent.postMessage(JSON.stringify({
  4174.           id: PRODUCT,
  4175.           type: type,
  4176.           body: {
  4177.             token: token,
  4178.             url: location.href,
  4179.             message: message
  4180.           }
  4181.         }),
  4182.         origin);
  4183.     } catch (e) {
  4184.       alert(e);
  4185.       console.log('err', e);
  4186.     }
  4187.   };
  4188.  
  4189.   const parseUrl = (url) => {
  4190.     const a = document.createElement('a');
  4191.     a.href = url;
  4192.     return a;
  4193.   };
  4194.  
  4195.   const HOST_REG = /^[a-z0-9]*\.nicovideo\.jp$/;
  4196.   const thumbInfoApi = function() {
  4197.     if (window.name.indexOf('thumbInfo' + PRODUCT + 'Loader') < 0 ) { return; }
  4198.     window.console.log(
  4199.       '%cCrossDomainGate: %s %s',
  4200.       'background: lightgreen;',
  4201.       PRODUCT,
  4202.       location.host);
  4203.  
  4204.     if (!HOST_REG.test(parseUrl(document.referrer).hostname)) {
  4205.       window.console.log('disable bridge');
  4206.       return;
  4207.     }
  4208.  
  4209.     const type = 'thumbInfo' + PRODUCT;
  4210.     const token = location.hash ? location.hash.substr(1) : null;
  4211.     location.hash = '';
  4212.  
  4213.     window.addEventListener('message', (event) => {
  4214.       const data = JSON.parse(event.data);
  4215.       let timeoutTimer, isTimeout = false;
  4216.  
  4217.       if (!HOST_REG.test(parseUrl(event.origin).hostname)) { return; }
  4218.  
  4219.       if (data.token !== token) { return; }
  4220.       //window.console.log('child onMessage', data, event);
  4221.  
  4222.  
  4223.       if (!data.url) { return; }
  4224.       const sessionId = data.sessionId;
  4225.       fetch(data.url).then((resp) => {
  4226.         return resp.text();
  4227.       }).then((text) => {
  4228.         if (isTimeout) { return; }
  4229.         else { window.clearTimeout(timeoutTimer); }
  4230.  
  4231.         try {
  4232.           postToParent(type, {
  4233.             sessionId: sessionId,
  4234.             status: 'ok',
  4235.             token: token,
  4236.             url: data.url,
  4237.             body: text
  4238.           });
  4239.         } catch (e) {
  4240.           console.log(
  4241.             '%cError: parent.postMessage - ',
  4242.             'color: red; background: yellow',
  4243.             e, event.origin, event.data);
  4244.         }
  4245.       });
  4246.  
  4247.       timeoutTimer = window.setTimeout(() => {
  4248.         isTimeout = true;
  4249.         postToParent(type, {
  4250.           sessionId: sessionId,
  4251.           status: 'timeout',
  4252.           command: 'loadUrl',
  4253.           url: data.url
  4254.         });
  4255.       }, 30000);
  4256.  
  4257.     });
  4258.  
  4259.     try {
  4260.       postToParent(type, { status: 'initialized' });
  4261.     } catch (e) {
  4262.       console.log('err', e);
  4263.     }
  4264.   };
  4265.  
  4266.  
  4267.   const loadGm = function() {
  4268.     const script = document.createElement('script');
  4269.     script.id = `${PRODUCT}Loader`;
  4270.     script.setAttribute('type', 'text/javascript');
  4271.     script.setAttribute('charset', 'UTF-8');
  4272.     script.appendChild(document.createTextNode( '(' + monkey + ')("' + PRODUCT + '");' ));
  4273.     document.body.appendChild(script);
  4274.   };
  4275.  
  4276.  
  4277.   const host = window.location.host || '';
  4278.   //const href = (location.href || '').replace(/#.*$/, '');
  4279.   //const prot = location.protocol;
  4280.   if (host === 'ext.nicovideo.jp' &&
  4281.       window.name.indexOf('thumbInfo' + PRODUCT + 'Loader') >= 0) {
  4282.     thumbInfoApi();
  4283.   } else if (window === top) {
  4284.     loadGm();
  4285.   }
  4286. })();