Adds Buttons to your favorite playlists, and extra functionality.
// ==UserScript==
// @name Playlists buttons V3
// @version 3.1.1
// @description Adds Buttons to your favorite playlists, and extra functionality.
// @author Bliwi
// @match https://soundcloud.com/*
// @grant none
// @run-at document-end
// @noframes
// @license MIT
// @namespace https://greatest.deepsurf.us/en/scripts/449016-playlists-buttons-v3
// ==/UserScript==
(function() {
'use strict';
let smallArtglobal = '';
let globalAccent = '';
var root = document.documentElement;
//Load things
setTimeout(function welcome(){
root.style.setProperty('--welcome', 'none');
}, 100);
var savedUrls = JSON.parse(localStorage.getItem('urls'));
var savedNames = JSON.parse(localStorage.getItem('names'));
let currentPage = location.href;
setTimeout(playlistsLoad, 500);
setInterval(function()
{
// Interval function. Put stuff you want to check every 500 miliseconds.
if(!document.querySelector('.pinbutton')){
if(window.location.href.indexOf("com/you/sets") != -1){
pinToSidebar();
}
var parentElement = document.querySelector('.playbackSoundBadge');
let small = parentElement.querySelector('span.sc-artwork.sc-artwork-4x');
let localAccent = getComputedStyle(document.documentElement).getPropertyValue('--accent');
let smallArt = small.style.backgroundImage;
const styles = getComputedStyle(document.documentElement);
const floating = styles.getPropertyValue('--floating-accent');
if(smallArt != smallArtglobal && floating == 1){
console.log('they are not equal',smallArtglobal);
smallArtglobal = smallArt;
let filteredUrl = smallArt.replace('url("', '').replace('")', '');
generateAccentColor(filteredUrl, function(accentColor) {
console.log('Accent Color:', accentColor);
let rgbAccent = 'rgb('+accentColor+')'
root.style.setProperty('--accent', rgbAccent);
var meta = document.querySelector('meta[name="theme-color"]');
setTimeout(meta.setAttribute("content", rgbAccent),30);
});
} else if (localAccent != globalAccent) {
console.log('they are not equal',localAccent);
globalAccent = localAccent;
var meta = document.querySelector('meta[name="theme-color"]');
meta.setAttribute("content", localAccent);
}
};
//add the future lazy load fix in here
}, 500);
//console.log(savedNames);
// Floating-app theme frame
appTheme('app-theme-top','#app');
appTheme('app-theme-background','#app');
setTimeout(appTheme('app-theme-corner-1','.app-theme-top'), 1);
setTimeout(appTheme('app-theme-corner-2','.app-theme-top'), 1);
setTimeout(appTheme('app-theme-corner-3','.app-theme-top'), 1);
setTimeout(appTheme('app-theme-corner-4','.app-theme-top'), 1);
setTimeout(appTheme('app-theme-shadow','.app-theme-top'), 1);
setTimeout(appTheme('app-theme-bottom','.app-theme-top'), 1);
setTimeout(appTheme('app-theme-left','.app-theme-top'), 1);
setTimeout(appTheme('app-theme-right','.app-theme-top'), 1);
function appTheme(a,b){
let thing = document.createElement('a');
let parent = document.querySelector(b);
thing.className = a;
parent.insertBefore(thing, parent.children[2]);
};
//add new playlist button
function pinToSidebar() {
//Pin button
let button = document.createElement('a');
let header = document.querySelector('.collectionSection__flexFill');
button.className = 'pinbutton';
button.innerHTML = '📌';
button.title = 'Pin all the playlists';
header.insertBefore(button, header.children[2]);
//Clear
setTimeout(function clear(){
let button = document.createElement('a');
let header = document.querySelector('.collectionSection__flexFill');
button.className = 'pinbutton';
button.innerHTML = '🗑️';
button.title = 'Remove all the playlists from the sidebar';
header.insertBefore(button, header.children[2]);
button.onclick = function (){
if (confirm("Are you sure you want to remove all the pinned playlists?")){
var savedUrls = [];
var savedNames = [];
localStorage.setItem('names', JSON.stringify(savedNames));
localStorage.setItem('urls', JSON.stringify(savedUrls));
location.reload();}
}
},10)
//Plus Button
setTimeout(
function plus() {
let button = document.createElement('a');
let header = document.querySelector('.collectionSection__flexFill');
button.className = 'pinbutton';
button.innerHTML = '➕';
button.title = 'Add a single playlist to the sidebar.';
header.insertBefore(button, header.children[2]);
button.onclick = function (){
var newName = prompt('Enter the name of the playlist:');
if (newName) {
var newURL = prompt('Enter the URL for the playlist:');
if (newURL) {
var modifiedUrl = newURL.replace('https://soundcloud.com', '').replace('http://soundcloud.com', '');
savedUrls.push(modifiedUrl);
savedNames.push(newName);
console.log(savedNames);
console.log(savedUrls);
localStorage.setItem('names', JSON.stringify(savedNames));
localStorage.setItem('urls', JSON.stringify(savedUrls));
if (confirm("Done pinning,Soundfy will now reload to take effect.")){location.reload();}
}
}
}
},
10);
//Extract the playlists
button.onclick = function (){
setInterval(window.scrollTo(0,document.body.scrollHeight - 1200), 10);
button.innerHTML = 'Extracting the playlists';
setTimeout(function done(){
if (confirm("Done pinning,Soundfy will now reload to take effect.")){location.reload();}
},1000)
// Query the elements on the page
var elements = document.querySelectorAll('a.sc-link-primary.sc-link-dark.sc-type-light.sc-text-secondary.playableTile__mainHeading.playableTile__heading.audibleTile__audibleHeading.sc-truncate.sc-font-light.sc-text-h4');
// Store the URLs in variables
//
var urls = [];
var names = [];
for (var i = 0; i < elements.length; i++) {
let button = document.createElement('a');
let header = document.querySelector('.collectionSection__top');
header.style.display = "block !important";
button.innerHTML = modnames3;
header.insertBefore(button, header.children[2]);
button.className = 'playlist-name';
var url = elements[i].href;
var modifiedUrl = url.replace('https://soundcloud.com', '').replace('http://soundcloud.com', '');
var modnames = url.replace('https://soundcloud.com/', '').replace('http://soundcloud.com/', '');
var modnames2 = modnames.replace('-', ' ').replace('-', ' ');
var modnames3 = modnames2.replace('/sets/', ' - ').replace('/sets/', ' - ');
names.push(modnames3);
urls.push(modifiedUrl);
}
console.log(urls);
console.log(names);
//Save the Urls and names to the local storage
//
localStorage.setItem('urls', JSON.stringify(urls));
localStorage.setItem('names', JSON.stringify(names));
};
}
//functions
//Load the playlists
function playlistsLoad() {
let container = document.createElement('div');
let header = document.querySelector('.header');
container.className = 'container';
container.id = 'iframe-container';
header.insertBefore(container, header.children[2]);
for (var i = 0; i < savedUrls.length; i++) {
var url = savedUrls[i];
var name = savedNames[i];
insertButton(name,url);
}
}
//Insert the buttons
function insertButton(playlistname,playlistlink) {
let playlist = document.createElement('a');
let header = document.querySelector('.container');
const i = savedNames.indexOf(playlistname);
playlist.id = i;
playlist.innerHTML = playlistname;
playlist.className = 'playlist-button';
playlist.href = playlistlink;
//Delete or rename
playlist.ondblclick = function() {
var newName = prompt('Enter a new name(del to delete):');
if (newName === 'del') {
//delete savedNames[i];
savedNames.splice(i, 1);
savedUrls.splice(i, 1);
playlist.className = '';
playlist.innerHTML = '';
playlist.href = '';
console.log(savedNames);
localStorage.setItem('names', JSON.stringify(savedNames));
localStorage.setItem('urls', JSON.stringify(savedUrls));
} else if (newName) {
// Rename
playlist.innerHTML = newName;
savedNames[i] = newName;
console.log(savedNames);
localStorage.setItem('names', JSON.stringify(savedNames));
}
}
if (header) {
header.insertBefore(playlist, header.children[2]);
} else {setTimeout(playlistsLoad, 1000);}
}
//Generate accent color
function generateAccentColor(imageUrl, callback) {
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
var colorCounts = {};
var maxCount = 0;
var dominantColor;
// Loop through the image pixels and count the occurrences of each color
for (var i = 0; i < data.length; i += 4) {
var r = data[i];
var g = data[i + 1];
var b = data[i + 2];
var rgb = r + ',' + g + ',' + b;
if (colorCounts[rgb]) {
colorCounts[rgb]++;
} else {
colorCounts[rgb] = 1;
}
if (colorCounts[rgb] > maxCount) {
maxCount = colorCounts[rgb];
dominantColor = rgb;
}
}
// Return the dominant color
callback(dominantColor);
};
// Load the image
img.src = imageUrl;
}
})();