☰

Easy Picture-in-Picture

動画上部にポップアウト ボタンを表示して、ピクチャー・イン・ピクチャーを簡単に実行できるようにします。

当前为 2019-01-01 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Easy Picture-in-Picture
  3. // @namespace    easy-picture-in-picture.user.js
  4. // @version      1.1
  5. // @description  動画上部にポップアウト ボタンを表示して、ピクチャー・イン・ピクチャーを簡単に実行できるようにします。
  6. // @author       nafumofu
  7. // @match        *://*/*
  8. // @grant        GM_addStyle
  9. // @license      MIT License
  10. // ==/UserScript==
  11.  
  12. class EasyPictureInPicture {
  13.     constructor() {
  14.         this.epipButton = this.createButton();
  15.         document.body.addEventListener('mousemove', (event) => this.event(event), {passive: true});
  16.         document.body.addEventListener('touchstart', (event) => this.event(event), {passive: true});
  17.     }
  18.     event(event) {
  19.         if (!this.eventLocked) {
  20.             this.eventLocked = !!setTimeout(() => {
  21.                 this.eventLocked = false;
  22.             }, 50);
  23.             
  24.             var posX = event.screenX || event.changedTouches[0].screenX;
  25.             var posY = event.screenY || event.changedTouches[0].screenY;
  26.             var nodes = document.elementsFromPoint(posX, posY);
  27.             for (let node of nodes) {
  28.                 if (node.tagName === 'VIDEO') {
  29.                     this.showButton(node);
  30.                     break;
  31.                 }
  32.             }
  33.         }
  34.     }
  35.     popout() {
  36.         document.pictureInPictureElement ? document.exitPictureInPicture() : this.epipTarget.requestPictureInPicture();
  37.     }
  38.     showButton(target) {
  39.         if (!target.disablePictureInPicture) {
  40.             this.epipTarget = target;
  41.             
  42.             var style = this.epipButton.style;
  43.             var compStyle = getComputedStyle(this.epipButton);
  44.             var rect =this.epipTarget.getBoundingClientRect();
  45.             var posY = window.scrollY + rect.top;
  46.             var posX = window.scrollX + rect.left + (rect.width / 2 - parseInt(compStyle.width) / 2);
  47.             
  48.             style.setProperty('top', `${posY}px`, 'important');
  49.             style.setProperty('left', `${posX}px`, 'important');
  50.             style.setProperty('opacity', '1', 'important');
  51.             
  52.             clearTimeout(this.epipTimer);
  53.             this.epipTimer = setTimeout(() => {
  54.                 style.setProperty('opacity', '0', 'important');
  55.             }, 3000);
  56.         }
  57.     }
  58.     createButton() {
  59.         GM_addStyle(`
  60.         #epip-button {
  61.             all: unset !important;
  62.             opacity: 0 !important;
  63.             position: absolute !important;
  64.             background: rgba(0,0,0,0.4) !important;
  65.             color: #ffffff !important;
  66.             font-size: 13px !important;
  67.             text-align: center !important;
  68.             width: 80px !important;
  69.             height: 30px !important;
  70.             border: solid 1px rgba(255,255,255,0.4) !important;
  71.             border-top: none !important;
  72.             border-radius: 0 0 8px 8px !important;
  73.             z-index: 2147483647 !important;
  74.             transition: opacity 0.3s !important;
  75.         }
  76.         `);
  77.         
  78.         var button = document.createElement('button');
  79.         button.id = 'epip-button';
  80.         button.textContent = 'Pop-out';
  81.         button.addEventListener('click', () => this.popout());
  82.         document.documentElement.append(button);
  83.         return button;
  84.     }
  85. }
  86.  
  87. setTimeout(() => {
  88.     if (document.pictureInPictureEnabled) {
  89.         new EasyPictureInPicture();
  90.     }
  91. }, 1000);