☰

SoundCloud: Additional "Add to playlist" button

Adds an additional "Add to playlist" buttons for easier and quicker access.

当前为 2022-10-23 提交的版本，查看 最新版本。

// ==UserScript==
// @name         SoundCloud: Additional "Add to playlist" button
// @description  Adds an additional "Add to playlist" buttons for easier and quicker access.
// @version      0.4
// @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;
}
`);

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