SoundCloud: Additional "Add to playlist" button

Adds an "Add to playlist" button below waveform for easier and quicker access.
Verzia zo dňa 21.10.2022. Pozri najnovšiu verziu.
Spýtať sa otázku, uverejniť recenziu, alebo nahlásiť skript.
Zalomiť riadky
// ==UserScript==
// @name         SoundCloud: Additional "Add to playlist" button
// @description  Adds an "Add to playlist" button below waveform for easier and quicker access.
// @version      0.3
// @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 {
    animation-duration: 0.001s;
    animation-name: nodeInserted;
}
</style>
    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