Makes spotify and soundcloud more compatible with lowerend devices like chromebooks
// ==UserScript==
// @name Spotify + SoundCloud lite
// @namespace https://greasyfork.org/
// @version 1.0
// @description Makes spotify and soundcloud more compatible with lowerend devices like chromebooks
// @author You
// @match https://open.spotify.com/*
// @match https://soundcloud.com/*
// @grant none
// @run-at document-start
// @license MIT
// ==/UserScript==
(function () {
'use strict';
//--------------------------------------------------
// CSS PERFORMANCE PATCHES
//--------------------------------------------------
const style = document.createElement('style');
style.textContent = `
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
backdrop-filter: none !important;
filter: none !important;
text-shadow: none !important;
box-shadow: none !important;
}
video,
canvas {
display: none !important;
visibility: hidden !important;
}
img {
image-rendering: auto !important;
}
[style*="blur"],
[class*="blur"] {
filter: none !important;
backdrop-filter: none !important;
}
/* Spotify canvas/video areas */
[data-testid*="canvas"],
[class*="canvas"],
[class*="video"] {
display: none !important;
}
`;
document.documentElement.appendChild(style);
//--------------------------------------------------
// BLOCK VIDEO LOADING
//--------------------------------------------------
const OriginalVideo = window.HTMLVideoElement;
Object.defineProperty(window, 'HTMLVideoElement', {
value: function () {
return new OriginalVideo();
}
});
//--------------------------------------------------
// LOW-RES IMAGE REPLACEMENT
//--------------------------------------------------
function optimizeImage(img) {
if (img.dataset.ultraLiteDone) return;
img.dataset.ultraLiteDone = '1';
img.loading = 'lazy';
img.decoding = 'async';
if (img.width > 128)
img.style.maxWidth = '128px';
if (img.height > 128)
img.style.maxHeight = '128px';
try {
const src = img.src;
if (!src) return;
// Spotify image downsizing
if (src.includes('i.scdn.co')) {
img.src =
'data:image/svg+xml,' +
encodeURIComponent(`
<svg xmlns="http://www.w3.org/2000/svg"
width="64"
height="64">
<rect width="100%" height="100%" fill="#222"/>
</svg>
`);
}
// SoundCloud image downsizing
if (src.includes('sndcdn.com')) {
img.src = src
.replace('t500x500', 't67x67')
.replace('crop', 'large');
}
} catch (e) {}
}
//--------------------------------------------------
// VIDEO KILLER
//--------------------------------------------------
function disableVideo(video) {
try {
video.pause();
video.removeAttribute('autoplay');
video.removeAttribute('loop');
video.preload = 'none';
video.src = '';
video.load();
video.remove();
} catch (e) {}
}
//--------------------------------------------------
// DOM CLEANUP
//--------------------------------------------------
function cleanup() {
document.querySelectorAll('video').forEach(disableVideo);
document.querySelectorAll('img').forEach(optimizeImage);
document.querySelectorAll('canvas').forEach(el => {
el.remove();
});
}
//--------------------------------------------------
// NETWORK OPTIMIZER
//--------------------------------------------------
const origFetch = window.fetch;
window.fetch = function(resource, options) {
const url = String(resource);
if (
url.includes('.mp4') ||
url.includes('/video/') ||
url.includes('canvas')
) {
return new Promise(() => {});
}
return origFetch.apply(this, arguments);
};
//--------------------------------------------------
// OBSERVER
//--------------------------------------------------
const observer = new MutationObserver(cleanup);
window.addEventListener('DOMContentLoaded', () => {
cleanup();
observer.observe(document.body, {
subtree: true,
childList: true
});
setInterval(cleanup, 3000);
});
})();