☰

Chaturbate streamer menu preview pop-up

Display model preview image in menu in full size next to the menu

// ==UserScript==
// @name         Chaturbate streamer menu preview pop-up
// @namespace    http://tampermonkey.net/
// @version      1.01
// @description  Display model preview image in menu in full size next to the menu
// @author       Brsrk
// @icon         https://www.google.com/s2/favicons?sz=32&domain=chaturbate.com
// @icon64       https://www.google.com/s2/favicons?sz=64&domain=chaturbate.com
// @match        https://chaturbate.com/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Function to add tooltip to image
    function addTooltip(img) {
        img.addEventListener('mouseover', (e) => {
            const rect = img.getBoundingClientRect();
            const tooltip = document.createElement('div');
            tooltip.style.position = 'fixed';

            const edgeThreshold = 400; // pixels from the edge
            if (rect.left < edgeThreshold) {
                tooltip.style.left = (rect.right + 5) + 'px'; // show on the right
            } else if (rect.right > window.innerWidth - edgeThreshold) {
                tooltip.style.left = (rect.left - 365) + 'px'; // show on the left
            } else {
                // default to left side if image is in the middle
                tooltip.style.left = (rect.left - 365) + 'px';
            }

            tooltip.style.top = (rect.top + 32) + 'px';
            tooltip.style.zIndex = '10000';
            tooltip.style.pointerEvents = 'none';

            const tooltipImg = document.createElement('img');
            tooltipImg.src = img.src;
            tooltipImg.style.maxWidth = '400px';
            tooltipImg.style.maxHeight = '300px';
            tooltipImg.style.borderRadius = '7px';
            tooltipImg.style.border = '1.5px solid #1c2833';
            tooltip.appendChild(tooltipImg);

            document.body.appendChild(tooltip);

            img.addEventListener('mouseout', () => {
                tooltip.remove();
            });
        });
    }

    // Use MutationObserver to detect dynamic content loading
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.addedNodes) {
                mutation.addedNodes.forEach((node) => {
                    if (node.nodeName === 'IMG' && node.src && node.src.startsWith('https://thumb.live.mmcdn.com/ri/')) {
                        addTooltip(node);
                    } else if (node.querySelectorAll) {
                        const images = node.querySelectorAll('img[src^="https://thumb.live.mmcdn.com/ri/"]');
                        images.forEach(addTooltip);
                    }
                });
            }
        });
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    const existingImages = document.querySelectorAll('img');
    const matchingImages = Array.from(existingImages).filter(img => img.src && img.src.startsWith('https://thumb.live.mmcdn.com/ri/'));
    matchingImages.forEach(addTooltip);
})();