SoundCloud: Additional "Add to Playlist" button

Adds an additional "Add to Playlist" buttons for easier and quicker access.
اعتبارا من 29-01-2024. شاهد أحدث إصدار.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         SoundCloud: Additional "Add to Playlist" button
// @description  Adds an additional "Add to Playlist" buttons for easier and quicker access.
// @version      0.6
// @author       iammordaty
// @namespace    https://github.com/iammordaty
// @match        https://soundcloud.com/*
// @license      MIT
// @grant        none
// @icon         https://a-v2.sndcdn.com/assets/images/sc-icons/favicon-2cadd14bdb.ico
// ==/UserScript==

// https://davidwalsh.name/detect-node-insertion
document.head.insertAdjacentHTML('beforeend', `
    <style>
    @keyframes nodeInserted {
        from { opacity: 0.99; }
        to { opacity: 1; }
    }

    .soundList__item, .listenEngagement__footer, .trackList__item, .historicalPlays__item {
        animation-duration: 0.001s;
        animation-name: nodeInserted;
    }
`);

const BUTTON_CLASS_NAMES = [
    'sc-button-medium',
    'sc-button-secondary',
    'sc-button-small',
    'sc-button-icon',
    'sc-button',
    'sc-button-responsive',
];

const getButtonClassList = refNodeClassList => {
    const classList = BUTTON_CLASS_NAMES.filter(value => refNodeClassList.includes(value));

    return [ ...classList, 'sc-button-add-to-playlist', 'sc-button-addtoset' ];
};

const createButton = (container, refNode) => {
    const button = document.createElement('button');

    button.setAttribute('role', 'button');

    const classList = getButtonClassList([ ...refNode.classList ]);
    button.classList.add(...classList);

    button.innerHTML = 'Add to Playlist';
    button.setAttribute('title', 'Add this track to Playlist');

    button.addEventListener('click', () => {
        // Ignoring case sensitiveness in querySelectorAll: https://stackoverflow.com/a/38399344
        container.querySelector('button[title="more" i]').click();

        document.querySelector('button[title="add to playlist" i]').click();
    }, false);

    return button;
};

const insertButton = (button, refButton) => refButton.parentNode.insertBefore(button, refButton);

const onNodeInsert = ({ animationName, target: container }) => {
    if (animationName !== 'nodeInserted') {
        return;
    }

    const refButton = container.querySelector('.sc-button-more');

    if (!refButton) {
        return;
    }

    const button = createButton(container, refButton);

    insertButton(button, refButton);
}

document.addEventListener('animationstart', onNodeInsert, false);