SoundCloud: Additional "Add to playlist" button

Add to playlist

Adds an "Add to playlist" button below waveform for easier and quicker access.

Verze ze dne 21. 10. 2022. Zobrazit nejnovější verzi.

Zeptejte se na otázku, přidejte recenzi nebo skript nahlašte.

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