☰

nicovideo-comfortable-controller-fader

ニコニコ動画のプレイヤー下部のコントローラーを自然にフェードイン・フェードアウトさせます。

  1. // ==UserScript==
  2. // @name        nicovideo-comfortable-controller-fader
  3. // @namespace   https://github.com/dnek
  4. // @version     1.0
  5. // @author      dnek
  6. // @description ニコニコ動画のプレイヤー下部のコントローラーを自然にフェードイン・フェードアウトさせます。
  7. // @description:ja    ニコニコ動画のプレイヤー下部のコントローラーを自然にフェードイン・フェードアウトさせます。
  8. // @homepageURL https://github.com/dnek/nicovideo-comfortable-controller-fader
  9. // @match       https://www.nicovideo.jp/watch/*
  10. // @grant       GM_addStyle
  11. // @license     MIT license
  12. // ==/UserScript==
  13.  
  14. (async () => {
  15.     'use strict';
  16.  
  17.     GM_addStyle(`
  18. div[data-styling-id=":r3:"] {
  19.     > div[data-styling-id=":r4:"] {
  20.         opacity: 0;
  21.         pointer-events: none;
  22.         &:hover {
  23.             opacity: 1;
  24.             pointer-events: auto;
  25.         }
  26.     }
  27. }
  28. `);
  29.  
  30.     const mouseMovingStyleEl = GM_addStyle(`
  31. div[data-styling-id=":r3:"] {
  32.     > div[data-styling-id=":r4:"] {
  33.         opacity: 1;
  34.         pointer-events: auto;
  35.     }
  36. }
  37. `);
  38.     mouseMovingStyleEl.disabled = true;
  39.  
  40.     let timeoutID;
  41.  
  42.     const initFader = () => {
  43.         const controllerEl = document.querySelector('div[data-styling-id=":r3:"] > div[data-styling-id=":r4:"]');
  44.         if (controllerEl === null) {
  45.             return;
  46.         }
  47.  
  48.         controllerEl.setAttribute('nccf-controller', '');
  49.  
  50.         const enableMouseMovingStyle = () => {
  51.             clearTimeout(timeoutID);
  52.             timeoutID = setTimeout(() => {
  53.                 mouseMovingStyleEl.disabled = true;
  54.             }, 2000);
  55.             mouseMovingStyleEl.disabled = false;
  56.         };
  57.  
  58.         enableMouseMovingStyle();
  59.  
  60.         const playerEl = controllerEl.parentElement;
  61.  
  62.         playerEl.addEventListener('mousemove', enableMouseMovingStyle);
  63.  
  64.         playerEl.addEventListener('mouseleave', () => {
  65.             clearTimeout(timeoutID);
  66.             mouseMovingStyleEl.disabled = true;
  67.         });
  68.  
  69.         console.log('nicovideo-comfortable-controller-fader is added.');
  70.     };
  71.  
  72.     setInterval(() => {
  73.         if (document.querySelector('div[nccf-controller]') === null) {
  74.             initFader();
  75.         }
  76.     }, 100);
  77. })();