☰

MylistPocket

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

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

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