Untitled

// ==UserScript==
// @name         PIP Easy
// @namespace    PIP Easy
// @version      0.1
// @description  Kích hoạt Picture in picture dễ dàng.
// @author       *
// @match        *://*/*
// @grant        GM_addStyle
// @license      MIT License
// ==/UserScript==

class EasyPictureInPicture {
    constructor() {
        if (document.pictureInPictureEnabled) {
            document.body.addEventListener('mousemove', (evt) => this.event(evt), {passive: true});
            document.body.addEventListener('touchstart', (evt) => this.event(evt), {passive: true});
        }
    }
    event(evt) {
        if (!this.eventLocked) {
            this.eventLocked = !!setTimeout(() => {
                this.eventLocked = false;
            }, 50);

            var posX = evt.clientX || evt.changedTouches[0].clientX;
            var posY = evt.clientY || evt.changedTouches[0].clientY;
            var elems = document.elementsFromPoint(posX, posY);
            for (let elem of elems) {
                if (elem.tagName === 'VIDEO' && elem.readyState) {
                    this.showButton(elem);
                    break;
                }
            }
        }
    }
    popOut() {
        if (document.pictureInPictureElement === this.epipTarget) {
            document.exitPictureInPicture();
            return
        }
        this.epipTarget.requestPictureInPicture();
    }
    showButton(target) {
        if (!this.epipButton) {
            this.epipButton = this.createButton();
        }

        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('right', '0', '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() {
        var resIcon = `<svg width="100%" height="100%" viewBox="-8 -6 36 36"><use class="ytp-svg-shadow" href="#ACT_PiP_Path"></use><path fill="#fff" id="ACT_PiP_Path" d="M2.5,17A1.5,1.5,0,0,1,1,15.5v-9A1.5,1.5,0,0,1,2.5,5h13A1.5,1.5,0,0,1,17,6.5V10h1V6.5A2.5,2.5,0,0,0,15.5,4H2.5A2.5,2.5,0,0,0,0,6.5v9A2.5,2.5,0,0,0,2.5,18H7V17Z M18.5,11h-8A2.5,2.5,0,0,0,8,13.5v5A2.5,2.5,0,0,0,10.5,21h8A2.5,2.5,0,0,0,21,18.5v-5A2.5,2.5,0,0,0,18.5,11Z"></path></svg>
`;

        GM_addStyle(`
        #epip-button {
            all: unset !important;
            z-index: 2147483647 !important;
            position: absolute !important;
            pointer-events: none !important;
            opacity: 0 !important;
            transition: all .4s ease-in-out!important;
            margin: 10px 10px 0 0!important;
        }
        #epip-button > .epip-icon {
            all: unset !important;
            width: 36px !important;
            height: 36px !important;
        }
        `);

        var button = document.createElement('button');
        button.id = 'epip-button';
        button.tabIndex = -1;
        button.addEventListener('click', () => this.popOut());
        button.insertAdjacentHTML('afterbegin', resIcon);
        button.firstChild.classList.add('epip-icon');
        document.documentElement.append(button);
        return button;
    }
}

new EasyPictureInPicture();