addind a button on the frontpage?

[PINKISH 2]

I've seen this on google and i really want to do the same and add a button to redirect to jellyseer. How can i do that?

[KobayashiM 27]

Would this work for you? I probably should've posted it in the Web App CSS forum.

 

[Happy2Play 9782]

Yes the only way to do this is edit html/js files as discussed in linked topic above or previous similar links in this section.

This will only work in the Web Client and note this has to be done with every server update as those files get replaced.

 

 

[zetree 0]

Saw this while I was trying to figure the same thing out.

Save this as like Seer.js and add this to the bottom of your index.html, above </body>

<script src="Seer.js" defer></script>

Seer.js (edit the placeholder link at the bottom)

const AddRequestMedia = () => {
    const targetClass = '.headerSelectedPlayer.headerSectionItem';
    const headerRightClass = '.headerTop-withSectionTabs .headerRight';
    const osdClass = '.view-videoosd-videoosd'; 
    const breakpoint = 1080;

    // 1. Inject Styles
    const styleId = 'injected-button-styles';
    if (!document.getElementById(styleId)) {
        const styleSheet = document.createElement("style");
        styleSheet.id = styleId;
        styleSheet.textContent = `
            .request-button {
                background-color: #21A9E1 !important;
                color: white !important; 
                border: none !important;
                margin: 0 15px 0 0 !important;
                padding: 5px 10px !important;
                font-family: sans-serif !important;
                font-size: 14px !important;
                font-weight: 600 !important;
                border-radius: 3px !important;
                cursor: pointer !important;
                transition: background-color 0.3s ease;
                display: inline-block !important;
                text-decoration: none !important;
                text-align: center !important;
                white-space: nowrap !important;
            }
            .request-button:hover {
                background-color: #1B8CBA !important;
            }
        `;
        document.head.appendChild(styleSheet);
    }

    // 2. Advanced Check: Is the OSD actually visible?
    const isElementVisible = (selector) => {
        const el = document.querySelector(selector);
        if (!el) return false;
        
        // Checks if element is hidden via CSS or has no size
        const style = window.getComputedStyle(el);
        return (style.display !== 'none' && style.visibility !== 'hidden' && el.offsetParent !== null);
    };

    // 3. Logic for Visibility and Layout
    const updateLayout = () => {
        const btn = document.querySelector('.request-button');
        const headerRight = document.querySelector(headerRightClass);
        
        // Hide if screen is small OR OSD is actually visible
        const isVideoOSDActive = isElementVisible(osdClass);
        const isSmallScreen = window.innerWidth <= breakpoint;
        const shouldHide = isSmallScreen || isVideoOSDActive;

        if (btn) {
            btn.style.setProperty('display', shouldHide ? 'none' : 'inline-block', 'important');
        }

        if (headerRight) {
            if (!shouldHide) {
                headerRight.style.setProperty('width', '30%', 'important');
            } else {
                headerRight.style.removeProperty('width');
            }
        }
    };

    // 4. Observe and Inject
    const observer = new MutationObserver(() => {
        const targetDiv = document.querySelector(targetClass);
        
        if (targetDiv && !document.querySelector('.request-button')) {
            const link = document.createElement('a');
            link.href = 'https://your-request-url.com';
            link.target = '_blank';
            link.rel = 'noopener noreferrer';
            link.className = 'request-button';
            link.textContent = 'Request Media';
            targetDiv.prepend(link);
        }

        updateLayout();
    });

    observer.observe(document.body, { 
        childList: true, 
        subtree: true,
        attributes: true, // Crucial: detects style changes like display: none
        attributeFilter: ['style', 'class'] 
    });

    window.addEventListener('resize', updateLayout);
};

AddRequestMedia();