add spectate toggle

since talkomatic currently doesnt have a spectate toggle, you can switch your spectate mode while in a room
换行
// ==UserScript==
// @name        add spectate toggle
// @namespace   Violentmonkey Scripts
// @icon        https://classic.talkomatic.co/images/icons/favicon.png
// @version     1.0.1
//
// @match       https://classic.talkomatic.co/room.html*
// @grant       none
//
// @author      paul
// @description since talkomatic currently doesnt have a spectate toggle, you can switch your spectate mode while in a room
// @license     MIT
// ==/UserScript==

(function() {
    'use strict';

    function injectButton(navbar) {
        if (document.getElementById('tm-spectate-toggle-btn')) return;

        const buttonContainer = document.createElement('div');
        buttonContainer.id = 'tm-spectate-toggle-btn';
        buttonContainer.style.display = 'inline-block';
        buttonContainer.style.margin = '0 5px';

        // Injected HTML block with your exact CSS inline styles added
        buttonContainer.innerHTML = `
            <button
                style="font-size: 14px; cursor: pointer; background-color: black; color: white; border: 1px solid #ff9800; padding: 10px; border-radius: 5px; font-family: talkoSS, Arial, sans-serif; white-space: nowrap;"
                onmousedown="if (location.search.match('spectate')) {location.assign(\`room.html?roomId=\${currentRoomId}\`)} else {location.assign(\`room.html?roomId=\${currentRoomId}&spectate=1\`)}">
                Toggle Spectate
            </button>
        `.trim();

        navbar.appendChild(buttonContainer);
    }

    const observer = new MutationObserver((mutations, obs) => {
        const pageContainer = document.querySelector('div.page-container, #page-container');
        if (pageContainer) {
            const navbar = pageContainer.querySelector('nav.top-navbar, #top-navbar');
            if (navbar) {
                injectButton(navbar);
            }
        }
    });

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