// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      2024-01-06
// @description  try to take over the world!
// @author       You
// @match        https://tinychat.com/room/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tinychat.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Function to add buttons to the waiting content
    function addButtonsToWaitingContent() {
        // Wait for the shadow host element to become available
        const waitForShadowHost = setInterval(function() {
            const shadowHost = document.querySelector("#content").shadowRoot.querySelector("#room-content > tc-videolist").shadowRoot.querySelector("#videos > div:nth-child(2) > div > tc-video-item");
            if (shadowHost && shadowHost.shadowRoot) {
                clearInterval(waitForShadowHost);

                // Access shadow DOM
                const mainElement = shadowHost.shadowRoot;
                const overlayDiv = mainElement.querySelector("div > div > div.overlay");
                const waitingContent = mainElement.querySelector("div > div > div.waiting > div");

                if (overlayDiv && waitingContent) {
                    // Insert voting button into overlay div
                    const votingButtonHTML = `
                        <button class="voting-button">
                            <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <!-- Your SVG path and other elements go here -->
                            </svg>
                        </button>
                    `;
                    overlayDiv.innerHTML = votingButtonHTML;

                    // Insert blank span into waiting-content div
                    const blankSpanHTML = '<span></span>';
                    waitingContent.innerHTML = blankSpanHTML;

                    // Add dynamic CSS styles for the voting button
                    const style = document.createElement('style');
                    style.textContent = `
                        .video > div > .overlay > .voting-button {
                            /* Your styling for the voting button */
                        }
                        /* Add other styles for the buttons as needed */
                    `;

                    // Append the style element to the document head
                    document.head.appendChild(style);
                } else {
                    console.error('Overlay or waiting content element not found');
                }
            }
        }, 100);
    }

    // Wait for the page to load before adding the buttons
    window.addEventListener('load', addButtonsToWaitingContent);
})();