☰

Easy Picture-in-Picture

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

目前為 2019-01-03 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         Easy Picture-in-Picture
// @namespace    easy-picture-in-picture.user.js
// @version      1.4
// @description  動画上部にポップアウト ボタンを表示して、ピクチャー・イン・ピクチャーを簡単に実行できるようにします。
// @author       nafumofu
// @match        *://*/*
// @grant        GM_addStyle
// @license      MIT License
// ==/UserScript==

class EasyPictureInPicture {
    constructor() {
        this.epipButton = this.createButton();
        document.body.addEventListener('mousemove', (event) => this.event(event), {passive: true});
        document.body.addEventListener('touchstart', (event) => this.event(event), {passive: true});
    }
    event(event) {
        if (!this.eventLocked) {
            this.eventLocked = !!setTimeout(() => {
                this.eventLocked = false;
            }, 50);
            
            var posX = event.screenX || event.changedTouches[0].screenX;
            var posY = event.screenY || event.changedTouches[0].screenY;
            var elems = document.elementsFromPoint(posX, posY);
            for (let elem of elems) {
                if (elem.tagName === 'VIDEO') {
                    this.showButton(elem);
                    break;
                }
            }
        }
    }
    popOut() {
        if (document.pictureInPictureElement === this.epipTarget) {
            document.exitPictureInPicture();
        } else {
            this.epipTarget.requestPictureInPicture();
        }
    }
    showButton(target) {
        if (!target.disablePictureInPicture) {
            this.epipTarget = target;
            
            var style = this.epipButton.style;
            var compStyle = getComputedStyle(this.epipButton);
            var rect =this.epipTarget.getBoundingClientRect();
            var posY = window.scrollY + rect.top;
            var posX = window.scrollX + rect.left + (rect.width / 2 - parseInt(compStyle.width) / 2);
            
            style.setProperty('top', `${posY}px`, 'important');
            style.setProperty('left', `${posX}px`, 'important');
            style.setProperty('opacity', '1', 'important');
            style.setProperty('pointer-events', 'auto', 'important');
            
            clearTimeout(this.epipTimer);
            this.epipTimer = setTimeout(() => {
                style.setProperty('opacity', '0', 'important');
                style.setProperty('pointer-events', 'none', 'important');
            }, 3000);
        }
    }
    createButton() {
        GM_addStyle(`
        #epip-button {
            all: unset !important;
            z-index: 2147483647 !important;
            transition: opacity 0.3s !important;
            pointer-events: none !important;
            opacity: 0 !important;
            position: absolute !important;
            background: rgba(0,0,0,0.4) !important;
            color: #ffffff !important;
            font-size: 13px !important;
            font-family: Verdana !important;
            text-align: center !important;
            top: 0 !important;
            width: 80px !important;
            height: 30px !important;
            border: solid 1px rgba(255,255,255,0.4) !important;
            border-top: none !important;
            border-radius: 0 0 8px 8px !important;
        }
        `);
        
        var button = document.createElement('button');
        button.id = 'epip-button';
        button.tabIndex = -1;
        button.textContent = 'Pop-out';
        button.addEventListener('click', () => this.popOut());
        document.documentElement.append(button);
        return button;
    }
}

setTimeout(() => {
    if (document.pictureInPictureEnabled) {
        new EasyPictureInPicture();
    }
}, 1000);