SoundCloud: Additional "Add to playlist" button

Add to playlist

Adds an "Add to playlist" button below waveform for easier and quicker access.
اعتبارا من 21-10-2022. شاهد أحدث إصدار.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Add to playlist
// @description  Adds an "Add to playlist" button below waveform for easier and quicker access.
// @version      0.1
// @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, .l-about-main {
    animation-duration: 0.001s;
    animation-name: nodeInserted;
}
</style>
`);

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', () => {
        container.querySelector('button[title="More"]').click();

        document.querySelector('button[title="Add to playlist"]').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); // standard + firefox
document.addEventListener('MSAnimationStart', onNodeInsert, false); // IE
document.addEventListener('webkitAnimationStart', onNodeInsert, false); // Chrome + Safari