puhutv Picture in Picture

Picture in Picture mode for puhutv

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         puhutv Picture in Picture
// @name:tr         puhutv Picture in Picture
// @namespace    puhutvPiP
// @version      1.3.1
// @description  Picture in Picture mode for puhutv
// @description:tr  puhutv için Picture in Picture modu
// @author       Runterya
// @homepage     https://github.com/Runteryaa
// @match        https://puhutv.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=puhutv.com
// @grant        none
// @license      MIT
// @compatible   chrome
// @compatible   edge
// @compatible   opera
// @compatible   safari
// ==/UserScript==

console.log("puhutvPiP");

// Wait for the page to load
window.addEventListener('load', () => {
    // Add a delay of 2 seconds before adding the button
    setTimeout(() => {
        // Find the video player element (you may need to adjust the selector)
        const vid = document.querySelector('#dyg-player-new-player_html5_api');

        // Find the target div element
        const targetDiv = document.querySelector('[title="Tam Ekran"]') || document.querySelector('.vjs-fullscreen-control');

        // Add the Picture-in-Picture button just before the target div
        const pipBtn = document.createElement('button');
        pipBtn.id = 'pip-btn';
        pipBtn.className = 'vjs-icon-picture-in-picture-enter vjs-control vjs-button';

        pipBtn.style.fontSize = '26px';
        pipBtn.style.width = '40px';
        pipBtn.style.height = '30px';
        pipBtn.style.color = '#828282';
        pipBtn.style.cursor = 'pointer';

        // Append the button directly to the document body
        document.body.appendChild(pipBtn);


        // Insert the container just before the target div
        targetDiv.parentNode.insertBefore(pipBtn, targetDiv);

        // Function to toggle Picture-in-Picture mode
        // Function to toggle Picture-in-Picture mode
        const togglePiP = () => {
            const vid = document.querySelector('#dyg-player-new-player_html5_api');

            // Check if the browser supports requestPictureInPicture
            if ('pictureInPictureEnabled' in document && document.pictureInPictureEnabled) {
                if (document.pictureInPictureElement === vid) {
                    document.exitPictureInPicture();
                } else {
                    // Request Picture-in-Picture mode
                    vid.requestPictureInPicture()
                        .then(() => {
                        console.log('Entered Picture-in-Picture mode.');
                    })
                        .catch((error) => {
                        console.error('Error entering Picture-in-Picture mode:', error);
                    });
                }
            } else {
                // Alert the user that Picture-in-Picture is not supported
                alert('Your browser does not support Picture-in-Picture mode.');
            }
        };

        // On click of the PiP button, toggle Picture-in-Picture mode
        pipBtn.addEventListener('click', togglePiP);


        // On click of the PiP button, toggle Picture-in-Picture mode
        pipBtn.addEventListener('click', togglePiP);
    }, 3000);
});