☰

Netflix Recommendation Explorer

Add a "More Info" button to Netflix "More Like This" and Collections recommendations

// ==UserScript==
// @name         Netflix Recommendation Explorer
// @version      0.2
// @description  Add a "More Info" button to Netflix "More Like This" and Collections recommendations
// @author       Kevin Shay @kshay
// @grant        none
// @match        https://www.netflix.com/*
// @namespace https://greasyfork.org/users/154233
// ==/UserScript==

(function() {
    // The recommendation cards we want to modify are not necessarily on the page when the script runs,
    // so we need to account for a few different scenarios of either finding them immediately or
    // watching for them to be added to the page. Different classnames are also used depending whether
    // the target is a More Like This or a Collection.


    function addButton(titleCardContainer) {
        let metaWrapper = titleCardContainer.querySelector('.titleCard--metadataWrapper');
        let trackContent = metaWrapper.querySelector('.ptrack-content');
        if (!trackContent) {
            return;
        }
        let videoId = JSON.parse(decodeURIComponent(trackContent.getAttribute('data-ui-tracking-context'))).video_id;
        let moreInfoBtn = document.createElement('button');
        moreInfoBtn.appendChild(document.createTextNode('More Info'));
        moreInfoBtn.classList.add('color-secondary', 'hasLabel');
        // Just some basic styling, could clean this up by injecting a class declaration but not bothering for now
        moreInfoBtn.style.backgroundColor = 'rgba(109, 109, 110, 0.7)';
        moreInfoBtn.style.border = '0';
        moreInfoBtn.style.borderRadius = '4px';
        moreInfoBtn.style.fontSize = '.8em';
        moreInfoBtn.style.fontWeight = 'bold';
        moreInfoBtn.style.margin = '0 0 5px 10px';
        moreInfoBtn.style.padding = '0.8rem';
        moreInfoBtn.addEventListener('click', (evt) => {
            // Will still work without this but after a flash of the title starting to play
            evt.stopPropagation();
            window.location.href = `/title/${videoId}`
        });
        metaWrapper.insertBefore(moreInfoBtn, metaWrapper.querySelector('.titleCard-synopsis'));
    }

    const sectionObserver = new MutationObserver((mutationList) => {
        mutationList.forEach((mutation) => {
            mutation.addedNodes.forEach((added) => {
                if (added.classList?.contains('titleCard--container')) {
                    addButton(added);
                }
            });
        });
    });
    // Once the target elements are found, this function does the actual work of pulling out the video id
    // and injecting the link button.
    function addButtons(targets) {
        targets.forEach((target) => {
            sectionObserver.observe(target, { subtree: true, childList: true });
        });
    }

    const detailObserver = new MutationObserver((mutationList) => {
        mutationList.forEach((mutation) => {
            mutation.addedNodes.forEach((infoAdded) => {
                if (infoAdded.classList?.contains('section-container') || infoAdded.classList?.contains('ptrack-container')) {
                    addButtons([infoAdded]);
                }
            });
        });
    });

    // Once the modal is on the page, it may or may not already contain the recommendation sections, so we either
    // add the buttons immediately or watch for the sections to be added.
    function addOrObserve(target) {
        let sectionContainers = target.querySelectorAll('.section-container,.titleGroup--container');
        if (sectionContainers.length > 0) {
            addButtons(sectionContainers);
        } else {
            detailObserver.observe(target, { subtree: true, childList: true });
        }
    }

    // The modal may be on the page already; if so, we can operate on it immediately.
    let detailModal = document.querySelector('.detail-modal-container');
    if (detailModal) {
        addOrObserve(detailModal);
    }

    // Watch from the top-level container for the modal to be added. We still want this
    // even if it was initially on the page because it can be closed and opened again.
    const appObserver = new MutationObserver((mutationList) => {
        mutationList.forEach((mutation) => {
            mutation.addedNodes.forEach((appAdded) => {
                if (appAdded.classList?.contains('detail-modal-container') || appAdded.classList?.contains('detail-modal')) {
                    addOrObserve(appAdded);
                }
            });
        });
    });
    appObserver.observe(document.getElementById('appMountPoint'), { subtree: true, childList: true });
})();