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.0
//
// @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 to inject the requested HTML into the top-navbar
    function injectButton(navbar) {
        // Prevent duplicate injections if the script runs multiple times
        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 matching your exact button logic
        buttonContainer.innerHTML = `
            <button 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);
    }

    // Observer to find nav "top-navbar" inside div "page-container" dynamically
    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);
                // Keep observing in case the site handles client-side re-renders,
                // but we prevent duplicate inserts using the 'tm-spectate-toggle-btn' check.
            }
        }
    });

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