brobada / Vimeo Show Case ID Extractor

// ==UserScript==
// @name        Vimeo Show Case ID Extractor
// @version     1
// @description Get vimeo showcase id on right click
// @author      Obada Kadri
// @license     MIT
// @match       *://vimeo.com/*
// ==/UserScript==

Array.prototype.naturalSort= function(){
    var a, b, a1, b1, rx=/(\d+)|(\D+)/g, rd=/\d+/;
    return this.sort(function(as, bs){
        a= String(as.title).toLowerCase().match(rx);
        b= String(bs.title).toLowerCase().match(rx);
        while(a.length && b.length){
            a1= a.shift();
            b1= b.shift();
            if(rd.test(a1) || rd.test(b1)){
                if(!rd.test(a1)) return 1;
                if(!rd.test(b1)) return -1;
                if(a1!= b1) return a1-b1;
            }
            else if(a1!= b1) return b1 < a1? 1: -1;
        }
        return a.length - b.length;
    });
}

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

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

function listShowCaseIds() {
    const settingsBtnsArr = Array.from(document.querySelectorAll('.sc-cpmLhU.cDOpKO[aria-label=Settings] a'));

    const title2Id = settingsBtnsArr.map(el => {
        const card = el.closest('.sc-gxMtzJ.bxMKMZ');
        const title = card.querySelector('span.sc-eAKXzc').innerText;
        const id = el.href.split('/').slice(-2, -1)[0];
        return {title, id};
    }).naturalSort();
    //.sort((a1,a2) => a1.title<a2.title ? 1 : a1.title>a2.title ? -1 : 0);

    console.log(title2Id.map(t2i => `${t2i.title}: ${t2i.id}`).join('\n'));
}


waitForElm('button.sc-hizQCF.kIiVJp').then(b => {
    const btnShowCase = document.createElement("button");
    btnShowCase.classList.add("btn-show-case-id");
    const btnShowCaseTxt = document.createTextNode("Log Show Case Ids");
    btnShowCase.appendChild(btnShowCaseTxt);
    btnShowCase.addEventListener('click', function (be) {
        listShowCaseIds();
    });

    const btnSection = document.querySelector('.sc-grYksN.kQmikw');
    if (btnSection) {
        btnSection.innerHTML = '';
        btnSection.appendChild(btnShowCase);
    }
});