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