☰

MylistPocket

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

当前为 2017-05-16 提交的版本，查看 最新版本。

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