☰

Youtube PIP Button

Adds a pop out to PIP button video menu.

// ==UserScript==
// @name         Youtube PIP Button
// @namespace     m-youtube-com-pip-button
// @version      1.01
// @description  Adds a pop out to PIP button video menu.
// @author       Lu Mặp
// @match        https://m.youtube.com/*
// @match        https://youtube.com/*
// @match        https://*.youtube.com/*
// @icon         https://www.svgrepo.com/download/347276/picture-in-picture.svg
// @grant        none
// ==/UserScript==

(function() {
    function createButton() {
        const button = document.createElement('button');
        button.id = "pipbutton"; // Đặt ID cho nút
        button.className = "pipbutton";
        button.style.cssText = `
            margin: 0 4px;
            padding: 0;
            background-color: transparent;
            border: none;
            cursor: pointer;
            transition: opacity 0.3s ease;
        `;

        // Tạo phần tử img cho icon SVG
        const svgIcon = document.createElement('img');
        svgIcon.src = 'https://www.svgrepo.com/download/347276/picture-in-picture.svg'; // Đường dẫn đến file SVG
        svgIcon.alt = "PIP Icon"; // Thêm mô tả cho hình ảnh
        svgIcon.style.cssText = `
            width: 24px; /* Chiều rộng của icon */
            height: 24px; /* Chiều cao của icon */
            filter: brightness(0) invert(1); /* Mặc định là màu trắng cho dark mode */
            transition: filter 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà */
        `;

        // Kiểm tra chế độ dark mode và điều chỉnh màu sắc
        const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
        if (!isDarkMode) {
            svgIcon.style.filter = 'none'; // Để nguyên màu gốc nếu không phải dark mode
        }

        button.appendChild(svgIcon); // Thêm icon vào nút

        // Sự kiện khi di chuột
        button.onmouseover = () => button.style.opacity = "0.6";
        button.onmouseout = () => button.style.opacity = "1";

        // Sự kiện khi nhấn nút
        button.onclick = () => {
            const video = document.querySelector("video");
            if (video) {
                document.pictureInPictureElement ?
                    document.exitPictureInPicture() :
                    (video.disablePictureInPicture = false, video.requestPictureInPicture());
            }
        };

        return button;
    }

    function addButtonToMenu() {
        const menuContainer = document.querySelector('.ytp-left-controls');

        // Kiểm tra xem nút đã được thêm chưa bằng ID và đang ở trang xem video
        if (menuContainer && !document.getElementById("pipbutton") && document.querySelector("video")) {
            menuContainer.appendChild(createButton());
        }
    }

    // Gọi hàm một lần để thêm nút PIP vào khu vực menu
    addButtonToMenu();

    // Theo dõi sự thay đổi URL để kiểm tra khi nào người dùng chuyển đến trang video khác
    const observer = new MutationObserver(() => {
        addButtonToMenu();
    });

    observer.observe(document.body, { childList: true, subtree: true });
})();