Adds an "Add to playlist" button below waveform for easier and quicker access.
Від
// ==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