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