☰

MylistPocket

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

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

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