MPP BG Sync

Syncs backgrounds via chat.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         MPP BG Sync
// @namespace    http://tampermonkey.net/
// @version      2.1
// @description  Syncs backgrounds via chat.
// @author       MrButtersLot
// @match        https://www.multiplayerpiano.net/*
// @match        https://multiplayerpiano.net/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const mainLayer = document.createElement('div');
    mainLayer.style = "position:fixed; top:0; left:0; width:100vw; height:100vh; pointer-events:none; z-index:-1; background:black; background-repeat:no-repeat; background-position:center; background-size:contain;";
    document.body.appendChild(mainLayer);

    const videoLayer = document.createElement('video');
    videoLayer.style = "position:fixed; top:0; left:0; width:100vw; height:100vh; object-fit:contain; z-index:-2; background:black; display:none;";
    videoLayer.loop = true; videoLayer.muted = true; videoLayer.autoplay = true;
    document.body.appendChild(videoLayer);

    const showMessage = () => {
        const msg = document.createElement('div');
        msg.innerText = "say !bg [imgur link] to change background globally";
        msg.style = "position:fixed; top:40%; left:50%; transform:translate(-50%, -50%); background:rgba(0,0,0,0.8); color:#2ecc71; padding:15px 30px; border-radius:10px; font-family:sans-serif; font-weight:bold; font-size:1.2em; z-index:10001; pointer-events:none; border:2px solid #2ecc71; transition:opacity 1s ease-out;";
        document.body.appendChild(msg);

        setTimeout(() => {
            msg.style.opacity = "0";
            setTimeout(() => msg.remove(), 1000);
        }, 3000);
    };

    const apply = (url) => {
        if (!url || !url.includes('i.imgur.com')) return;
        const isVid = url.toLowerCase().endsWith('.mp4');
        
        if (isVid) {
            document.body.style.backgroundImage = "none";
            mainLayer.style.backgroundImage = "none";
            if (videoLayer.src !== url) {
                videoLayer.src = url;
                videoLayer.style.display = "block";
                videoLayer.play().catch(()=>{});
            }
        } else {
            videoLayer.style.display = "none";
            videoLayer.pause();
            const css = `url(${url})`;
            document.body.style.background = `black ${css} no-repeat center center fixed`;
            document.body.style.backgroundSize = "contain";
            mainLayer.style.backgroundImage = css;
        }
    };

    const checkHistory = () => {
        setTimeout(() => {
            const list = document.querySelectorAll('#chat li');
            for (let i = list.length - 1; i >= 0; i--) {
                const txt = list[i].innerText;
                const hit = txt.match(/!bg\s+(https?:\/\/i\.imgur\.com\/\S+)/);
                if (hit) {
                    apply(hit[1]);
                    break;
                }
            }
        }, 500);
    };

    const start = () => {
        if (window.MPP && window.MPP.client) {
            window.MPP.client.on('a', (m) => {
                const t = (m.a || "").trim();
                if (t.startsWith('!bg ')) apply(t.split(' ')[1]);
            });
            window.MPP.client.on('ch', checkHistory);
            checkHistory();
            showMessage();
        } else {
            setTimeout(start, 500);
        }
    };

    const btn = document.createElement('button');
    btn.innerText = "BRING TO FRONT";
    btn.style = "position:fixed; top:10px; right:10px; z-index:10000; background:#e67e22; color:white; border:none; padding:6px 12px; cursor:pointer; font-weight:bold; border-radius:4px; opacity:0.6; transition:0.3s;";
    
    let active = false;
    btn.onclick = () => {
        active = !active;
        mainLayer.style.zIndex = active ? "9998" : "-1";
        videoLayer.style.zIndex = active ? "9997" : "-2";
        mainLayer.style.pointerEvents = active ? "all" : "none";
        btn.innerText = active ? "SEND TO BACK" : "BRING TO FRONT";
        btn.style.background = active ? "#95a5a6" : "#e67e22";
    };
    
    document.body.appendChild(btn);
    start();
})();