☰

add spectate toggle

since talkomatic currently doesnt have a spectate toggle, you can switch your spectate mode while in a room

Nasıl kurarım

Bu betiği kurabilmeniz için Tampermonkey, Greasemonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği yüklemek için Tampermonkey gibi bir uzantı yüklemeniz gerekir.

Bu betiği kurabilmeniz için Tampermonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği kurabilmeniz için Tampermonkey ya da Userscripts gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği indirebilmeniz için ayrıca Tampermonkey gibi bir eklenti kurmanız gerekmektedir.

Bu betiği yüklemek için bir betik yöneticisi eklentisi yüklemeniz gerekecektir.

(Zaten bir betik yöneticim var, hadi yükleyelim!)

Nasıl kurarım

Bu stili yüklemek için Stylus gibi bir uzantı yüklemeniz gerekir.

Bu stili yüklemek için Stylus gibi bir uzantı kurmanız gerekir.

Bu stili yükleyebilmek için Stylus gibi bir uzantı yüklemeniz gerekir.

Bu stili yüklemek için bir kullanıcı stili yöneticisi uzantısı yüklemeniz gerekir.

Bu stili yüklemek için bir kullanıcı stili yöneticisi uzantısı kurmanız gerekir.

Bu stili yükleyebilmek için bir kullanıcı stili yöneticisi uzantısı yüklemeniz gerekir.

(Zateb bir user-style yöneticim var, yükleyeyim!) 

// ==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
    });
})();