// ==UserScript==
// @name        [Chrome] Enable Picture-in-picture (PiP) for Weverse.io
// @namespace   Weverse Enhancements
// @match       *://weverse.io/*/live/*
// @include     *://weverse.io/*/live*
// @include     *://weverse.io*
// @grant       GM_getValue
// @grant       GM_setValue
// @version     4.3
// @author      jho / @jhooo_o
// @run-at      document-end
// @description Enable Picture-in-picture (PiP) on weverse.io for Chrome browser.
// @license     MIT
// @icon		https://cdn-v2pstatic.weverse.io/wev_web_fe/assets/1.0.0/icons/logo192.png
// @downloadURL none
// ==/UserScript==

let auto_translate_status = GM_getValue('storage_translator', false);
const pip_btn_icon = `
    <span class="pzp-pc-ui-button__tooltip">Toggle Picture-in-picture</span>
    <span focusable="false" class="pzp-ui-icon pzp-pc-pip-button__icon pzp-pc-viewmode-button__icon" >
    <svg class="pzp-ui-icon__svg" width="36" height="36" viewBox="0 0 36 36">
    <g id="Layer_1" data-name="Layer 1" focusable="false">
        <path fill="currentColor" d="M26.8,11.77c-.13-.24-.32-.44-.57-.57-.24-.13-.49-.2-1.16-.2H10.92c-.67,0-.91,.07-1.16,.2-.24,.13-.44,.32-.57,.57-.13,.24-.2,.49-.2,1.16v9.49c0,.67,.07,.91,.2,1.16,.13,.24,.33,.44,.57,.57,.24,.13,.49,.2,3.21,.2h14.15c-1.39,0-1.14-.07-.9-.2,.24-.13,.44-.32,.57-.57,.13-.24,.2-.49,.2-1.16V12.92c0-.67-.07-.91-.2-1.16Zm-1.8,9.53c0,.55-.45,1-1,1h-6.94c-.55,0-1-.45-1-1v-3.5c0-.55,.45-1,1-1h6.94c.55,0,1,.45,1,1v3.5Z" style="fill-rule: evenodd;"/></g>
    </svg>
    </span>
    `;

const mutation_config = { childList: true, subtree: true };

const is_firefox = /firefox/i.test(navigator.userAgent);
if (is_firefox) {
    console.log('██████████ User is using Firefox. PIP button will not be appended.');
} else {
    console.log('██████████ User is not using Firefox. PIP button will be added.');
}

function toggle_pip() {

    const video_player_wrapper = document.querySelector(".webplayer-internal-source-wrapper");
    const video_player = document.querySelector(".webplayer-internal-video");
    if (document.pictureInPictureElement) {
        document.exitPictureInPicture()
            .then(() => console.log("██████████ Exited Picture-in-picture mode"))
            .catch(error => console.error("██████████ Error exiting PiP mode:", error));
    } else {
        video_player.requestPictureInPicture()
            .then(() => console.log("██████████ Entered Picture-in-picture mode"))
            .catch(error => console.error("██████████ Error entering PiP mode:", error));
    }
}


function append_elem(changes, observer) {
    // Append Picture-in-picture
    const video_player = document.querySelector(".webplayer-internal-video");
    if (video_player) {
        if (video_player.hasAttribute("disablepictureinpicture")) {
            video_player.removeAttribute("disablepictureinpicture");
            console.log("██████████ Picture-in-picture is re-enabled.");
        }

        const locations = document.querySelectorAll(".pzp-pc__bottom-buttons-right, .pzp-mobile-bottom.pzp-mobile__bottom");
        if (locations.length > 0 && !is_firefox) {
            const pip_btn_exist = Array.from(locations).some(location => location.querySelector(".pzp-button-pip"));
            if (!pip_btn_exist) {
                const btn = document.createElement("button");
                btn.setAttribute("aria-label", "Toggle Picture-in-picture");
                const btn_class_names = locations[0].classList.contains("pzp-mobile-bottom")
                    ? ["pzp-button", "pzp-setting-button", "pzp-mobile__setting-button", "pzp-button-pip"]
                    : ["pzp-button", "pzp-button-pip", "pzp-pc-viewmode-button", "pzp-pc__viewmode-button", "pzp-pc-ui-button"];
                btn_class_names.forEach(item => btn.classList.add(item));
                btn.innerHTML = pip_btn_icon;
                btn.addEventListener("click", () => toggle_pip());
                locations[0].insertBefore(btn, locations[0].lastChild);
            }
        }
    }

}

// Observers

const elem_appender_observer = new MutationObserver(append_elem);
elem_appender_observer.observe(document, mutation_config);