☰

MylistPocket

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

目前为 2016-11-29 提交的版本，查看 最新版本。

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