☰

Easy Picture-in-Picture

Picture in Picture を簡単に利用できるようにポップアウト ボタンを追加します。

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

  1. // ==UserScript==
  2. // @name         Easy Picture-in-Picture
  3. // @namespace    easy-picture-in-picture.user.js
  4. // @version      1.9
  5. // @description  Picture in Picture を簡単に利用できるようにポップアウト ボタンを追加します。
  6. // @author       nafumofu
  7. // @match        *://*/*
  8. // @grant        GM_addStyle
  9. // @grant        GM_getResourceText
  10. // @license      MIT License
  11. // ==/UserScript==
  12.  
  13. class EasyPictureInPicture {
  14.     constructor() {
  15.         if (document.pictureInPictureEnabled) {
  16.             document.body.addEventListener('mousemove', (evt) => this.event(evt), {passive: true});
  17.             document.body.addEventListener('touchstart', (evt) => this.event(evt), {passive: true});
  18.         }
  19.     }
  20.     event(evt) {
  21.         if (!this.eventLocked) {
  22.             this.eventLocked = !!setTimeout(() => {
  23.                 this.eventLocked = false;
  24.             }, 50);
  25.             
  26.             var posX = evt.clientX || evt.changedTouches[0].clientX;
  27.             var posY = evt.clientY || evt.changedTouches[0].clientY;
  28.             var elems = document.elementsFromPoint(posX, posY);
  29.             for (let elem of elems) {
  30.                 if (elem.tagName === 'VIDEO' && elem.readyState) {
  31.                     this.showButton(elem);
  32.                     break;
  33.                 }
  34.             }
  35.         }
  36.     }
  37.     popOut() {
  38.         if (document.pictureInPictureElement === this.epipTarget) {
  39.             document.exitPictureInPicture();
  40.             return
  41.         }
  42.         this.epipTarget.requestPictureInPicture();
  43.     }
  44.     showButton(target) {
  45.         if (!this.epipButton) {
  46.             this.epipButton = this.createButton();
  47.         }
  48.         
  49.         if (!target.disablePictureInPicture) {
  50.             this.epipTarget = target;
  51.             
  52.             var style = this.epipButton.style;
  53.             var compStyle = getComputedStyle(this.epipButton);
  54.             var rect =this.epipTarget.getBoundingClientRect();
  55.             var posY = window.scrollY + rect.top;
  56.             var posX = window.scrollX + rect.left + (rect.width / 2 - parseInt(compStyle.width) / 2);
  57.             
  58.             style.setProperty('top', `${posY}px`, 'important');
  59.             style.setProperty('left', `${posX}px`, 'important');
  60.             style.setProperty('opacity', '1', 'important');
  61.             style.setProperty('pointer-events', 'auto', 'important');
  62.             
  63.             clearTimeout(this.epipTimer);
  64.             this.epipTimer = setTimeout(() => {
  65.                 style.setProperty('opacity', '0', 'important');
  66.                 style.setProperty('pointer-events', 'none', 'important');
  67.             }, 3000);
  68.         }
  69.     }
  70.     createButton() {
  71.         // https://material.io/resources/icons/?icon=picture_in_picture_alt&style=round
  72.         var resIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M18 11h-6c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1zm5 8V4.98C23 3.88 22.1 3 21 3H3c-1.1 0-2 .88-2 1.98V19c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2zm-3 .02H4c-.55 0-1-.45-1-1V5.97c0-.55.45-1 1-1h16c.55 0 1 .45 1 1v12.05c0 .55-.45 1-1 1z"/></svg>`;
  73.         
  74.         GM_addStyle(`
  75.         #epip-button {
  76.             all: unset !important;
  77.             z-index: 2147483647 !important;
  78.             position: absolute !important;
  79.             pointer-events: none !important;
  80.             opacity: 0 !important;
  81.             transition: opacity 0.3s !important;
  82.             margin-top: 4px !important;
  83.         }
  84.         #epip-button > .epip-icon {
  85.             all: unset !important;
  86.             fill: rgba(255,255,255,0.95) !important;
  87.             background: rgba(0,0,0,0.5) !important;
  88.             width: 20px !important;
  89.             height: 20px !important;
  90.             padding: 6px !important;
  91.             border-radius: 50% !important;
  92.         }
  93.         `);
  94.         
  95.         var button = document.createElement('button');
  96.         button.id = 'epip-button';
  97.         button.tabIndex = -1;
  98.         button.addEventListener('click', () => this.popOut());
  99.         button.insertAdjacentHTML('afterbegin', resIcon);
  100.         button.firstChild.classList.add('epip-icon');
  101.         document.documentElement.append(button);
  102.         return button;
  103.     }
  104. }
  105.  
  106. new EasyPictureInPicture();