Adds details to performer cards.

performer-card-details.user.js

// ==UserScript==
// @name         Performer Card Details
// @namespace    QxxxGit
// @version      0.1
// @description  Adds details to performer cards.
// @author       QxxxGit
// @match        http://localhost:9999/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=undefined.localhost
// @require     https://raw.githubusercontent.com/7dJx1qP/stash-userscripts/master/src\StashUserscriptLibrary.js
// @grant       unsafeWindow
// @grant       GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    const descriptionMaxLines = 7;

    const {
        stash,
        waitForElementClass,
    } = unsafeWindow.stash;

    const performerDetailsCache = [];
    class PerformerCache {
        constructor(id, details) {
            this.id = id;
            this.details = details;
        }
    }
    
    const addPerformerToCache = (performer) => {
        if(performerDetailsCache.find((p) => p.id === performer?.id)) return;

        const performerCacheObj = new PerformerCache(performer?.id, performer?.details);

        performerDetailsCache.push(performerCacheObj);
    };

    GM_addStyle(`.performer-description {
        display: -webkit-box;
        -webkit-line-clamp: ${descriptionMaxLines};
        -webkit-box-orient: vertical;
    }
    .performer-card.grid-card.card hr {
        margin-top: auto;
    }`);

    const display = () => {
        waitForElementClass('performer-card grid-card card', function() {
            const cardSections = document.querySelectorAll('.card-section');
            
            for(let cardSectionIndex in cardSections) {
                if(!isNaN(cardSectionIndex)) {
                    const card = cardSections[cardSectionIndex];
                    const link = card?.querySelectorAll('a')[0].href;
    
                    if(link) {
                        const userIdFromLink = link.split('/').pop();
                        const performer = performerDetailsCache.find((p) => p.id === userIdFromLink);
                        const performerId = performer?.id;
                        const performerDetails = performer?.details;
                        
                        if(performer === null || performer === undefined) continue;
                        if(performerDetails === null || performerDetails === undefined || performerDetails === '') continue;
    
                        const descriptionNode = document.createElement('div');
                        // descId to prevent duplicate append
                        const descId = `desc-${performerId}`;
                        descriptionNode.classList.add('performer-description', 'TruncatedText');
                        descriptionNode.setAttribute('id', descId);
                        descriptionNode.innerText = performerDetails;
    
                        if(descriptionNode.innerText !== '') {
                            if(!document.getElementById(descId)) {
                                card.appendChild(descriptionNode);
                            }
                        }
                    }
                }
            }
        });
    }

    stash.addEventListener('stash:response', function(e) {
        // any GQL queries for performers, including filters, pagination changes, etc.
        const performers = e.detail.data.findPerformers?.performers;

        if(performers) {
            performers.forEach((p) => addPerformerToCache(p));
        }
    });

    stash.addEventListener('page:studio:performers', () => display());
    stash.addEventListener('page:performers', () => display());
})();