hidden menu button #2

// ==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/*
// @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(".overlay");
                const waitingContent = mainElement.querySelector("div > div > div.waiting > div");

                if (overlayDiv && waitingContent) {
                    // Insert voting button into overlay div as the last child (nth-child 6)
                    const votingButtonHTML = `
                        <button class="voting-button">
                            <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <!-- Replace this with your actual SVG path for the voting button -->
                                <path d="M10 0C4.485 0 0 4.485 0 10s4.485 10 10 10 10-4.485 10-10S15.515 0 10 0zm0 18.75C5.5 18.75 1.25 14.5 1.25 10S5.5 1.25 10 1.25 18.75 5.5 18.75 10 14.5 18.75 10 18.75z"/>
                            </svg>
                        </button>
                    `;
                    overlayDiv.insertAdjacentHTML('beforeend', votingButtonHTML);

                    // Insert additional buttons into the video-context div
                    const videoContextDiv = mainElement.querySelector(".video-context-content");
                    if (videoContextDiv) {
                        const additionalButtonHTML = `
                            <button class="new-button">
                                <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                    <!-- Replace this with your actual SVG path for the new button -->
                                    <path d="M10 0C4.485 0 0 4.485 0 10s4.485 10 10 10 10-4.485 10-10S15.515 0 10 0zm0 18.75C5.5 18.75 1.25 14.5 1.25 10S5.5 1.25 10 1.25 18.75 5.5 18.75 10 14.5 18.75 10 18.75z"/>
                                </svg>
                            </button>
                        `;
                        videoContextDiv.insertAdjacentHTML('beforeend', additionalButtonHTML);
                    }

                    // Add dynamic CSS styles for the buttons
                    const style = document.createElement('style');
                    style.textContent = `
                        .overlay button.voting-button,
                        .video-context-content button.new-button {
                            display: none;
                            position: absolute;
                            top: 50% !important; /* Move the button halfway down the overlay */
                            left: 10px; /* Adjust the left position as needed */
                            transform: translateY(-50%); /* Center the button vertically */
                            /* Your styling for the buttons */
                        }
                        .overlay:hover button.voting-button,
                        .video-context-content:hover button.new-button {
                            display: block;
                        }
                        /* 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);
})();