Tighter integration between Tidal and Last.fm
// ==UserScript==
// @name Tidal Last.fm Scrobbles and Likes
// @namespace tidal_lastfm_scrobbles_and_likes
// @version 60
// @description Tighter integration between Tidal and Last.fm
// @match https://listen.tidal.com/*
// @require https://cdnjs.cloudflare.com/ajax/libs/spark-md5/3.0.0/spark-md5.min.js
// @grant GM_registerMenuCommand
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_log
// @license MIT
// ==/UserScript==
(function () {
'use strict';
let lastFmApiKey = GM_getValue('lastFmApiKey', '371319cf7884f13ab8c2b93cbed670de');
let lastFmApiSecret = GM_getValue('lastFmApiSecret', '0486033e3a77c3260fea6c4d70ce1f91');
let lastFmApiSessionKey = GM_getValue('lastFmApiSessionKey', '');
let lastFmUsername = GM_getValue('lastFmUsername', '');
let playCountCache = {};
let currentUrl = window.location.href;
let currentPlayingTrackId = -1;
let lastBlurTime = Date.now();
let domObserver = new MutationObserver(handleMutations);
GM_registerMenuCommand('Last.fm API Key', () => {
lastFmApiKey = prompt('Please enter your Last.fm API key, or keep the default:', lastFmApiKey) || lastFmApiKey;
GM_setValue('lastFmApiKey', lastFmApiKey);
});
GM_registerMenuCommand('Last.fm API Secret', () => {
lastFmApiSecret = prompt('Please enter your Last.fm API secret, or keep the default:', lastFmApiSecret) || lastFmApiSecret;
GM_setValue('lastFmApiSecret', lastFmApiSecret);
});
GM_registerMenuCommand('Last.fm Logout', () => {
GM_setValue('lastFmApiSessionKey', '');
});
// If the page was not open for 5 minutes, force refetch stats, maybe user scrobbled something
function handleVisibilityChange() {
if (!document.hidden && (Date.now() - lastBlurTime) > 300000) { // 5 minutes
// GM_log('Page was hidden for more than 5 minutes, force refetch stats');
resetAndRedraw();
} else {
lastBlurTime = Date.now();
}
}
document.addEventListener('visibilitychange', handleVisibilityChange);
function startObserving() {
domObserver.observe(document.querySelector('body'), { childList: true, subtree: true, attributes: true });
}
function stopObserving() {
domObserver.disconnect();
}
// Clear cache, fetch everything again and redraw. Call when we think that something changed.
function resetAndRedraw() {
playCountCache = {};
drawPlayCounts();
lastBlurTime = Date.now();
}
function processLastFmResponse(response) {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json().then(data => {
if (data && data.track && typeof data.track.userplaycount !== 'undefined') {
return {
playCount: data.track.userplaycount,
loved: data.track.userloved
};
} else {
throw new Error('Invalid response format or missing userplaycount');
}
});
}
function getCacheKey(artistName, trackName) {
return `artist:${encodeURIComponent(artistName)},track:${encodeURIComponent(trackName)}`;
}
function delayedFetchPlayCount(artistName, trackName, forceFetch, delay) {
setTimeout(() => {
getCachedPlayCount(artistName, trackName, forceFetch); // Force fetch
}, delay);
}
function getCachedPlayCount(artistName, trackName, forceFetch) {
const cacheKey = getCacheKey(artistName, trackName);
// GM_log(`forceFetch: ${forceFetch}, hasCache: ${!playCountCache.hasOwnProperty(cacheKey)}`);
if (forceFetch || !playCountCache.hasOwnProperty(cacheKey)) {
playCountCache[cacheKey] = {
playCount: -1,
loved: -1
};
const url = `https://ws.audioscrobbler.com/2.0/?method=track.getInfo&api_key=${lastFmApiKey}&artist=${encodeURIComponent(artistName)}&track=${encodeURIComponent(trackName)}&username=${lastFmUsername}&autocorrect=0&format=json`;
fetch(url).then(processLastFmResponse).then(result => {
// GM_log(`${artistName} - ${trackName} ${url} -> ${result.playCount}, ${result.loved}`);
playCountCache[cacheKey] = result;
drawPlayCounts(); // Update the UI with the new value
}).catch(error => {
console.error('Error fetching play count from Last.fm: ', error);
GM_log(`Error fetching play count from Last.fm: ${error}`);
delete playCountCache[cacheKey];
delayedFetchPlayCount(artistName, trackName, /*forceFetch*/ false, 5000);
});
}
return playCountCache[cacheKey];
}
// Unlove logic is implemented, but not used for simplicity
async function setLastFmLoveStatus(trackName, artistName, shouldLove) {
const cacheKey = getCacheKey(artistName, trackName);
// Fetching play count should happen before that function. Otherwise weird race conditions can happen.
if (!playCountCache.hasOwnProperty(cacheKey) || playCountCache[cacheKey].loved == -1 || playCountCache[cacheKey].loved == shouldLove) {
return;
}
playCountCache[cacheKey].loved = -1;
// GM_log(`Toggling Last.fm love status for ${artistName} - ${trackName} to ${shouldLove ? 'love' : 'unlove'}`);
// Determine the method based on whether we are loving or unloving the track
const method = shouldLove ? 'track.love' : 'track.unlove';
// Prepare the parameters for the API call
const params = {
api_key: lastFmApiKey,
method: method,
track: trackName,
artist: artistName,
sk: lastFmApiSessionKey // The session key you've previously obtained
};
// Generate the API signature
const apiSig = generateApiSignature(params, lastFmApiSecret); // Assuming you have a function to generate the signature
// Add the api_sig and format to the parameters
params.api_sig = apiSig;
params.format = 'json';
// Make the API call to love/unlove the track
const url = 'https://ws.audioscrobbler.com/2.0/';
const formData = new URLSearchParams();
for (const [key, value] of Object.entries(params)) {
formData.append(key, value);
}
try {
const response = await fetch(url, {
method: 'POST',
body: formData
});
const data = await response.json();
GM_log(`Last.fm ${method} request: ${JSON.stringify(data)}`);
if (data.error) {
throw new Error(`Error in Last.fm ${method} request: ${data.message}`);
}
playCountCache[cacheKey].loved = shouldLove;
drawPlayCounts();
} catch (error) {
GM_log(`Error in Last.fm ${method} request: ${error}`);
delete playCountCache[cacheKey];
delayedFetchPlayCount(artistName, trackName, /*forceFetch*/ false, 1000);
console.error('Last.fm request failed:', error);
}
}
// Get currently played track ID from the footer
function getNowPlayingTrackId() {
const trackInfoElement = document.querySelector('[data-test="left-column-footer-player"]');
const nowPlayingTrackId = trackInfoElement && trackInfoElement.hasAttribute('data-track--content-id')
? trackInfoElement.getAttribute('data-track--content-id')
: -1;
return nowPlayingTrackId;
}
// We redraw everything on url change, or on currently played track change
function manageCache() {
if (currentUrl !== window.location.href) {
// GM_log(`URL changed, resetting cache and redrawing.`);
resetAndRedraw();
currentUrl = window.location.href;
}
// In the footer, where current played track is, it's hard to find actual track name
// Because some tracks have version and it displayed there, for example "Spectra (Live)"
const nowPlayingTrackId = getNowPlayingTrackId();
// GM_log(`Now playing track ID: ${nowPlayingTrackId}`);
if (nowPlayingTrackId !== currentPlayingTrackId) {
if (currentPlayingTrackId !== -1) {
// GM_log(`Track changed, refreshing play count after delay.`);
setTimeout(() => {
// GM_log(`Track changed, refreshing play count.`);
resetAndRedraw();
}, 3000); // Last.fm updates stats only after a second or two
}
currentPlayingTrackId = nowPlayingTrackId;
}
}
function getTrackLink(artistName, trackName) {
return `https://www.last.fm/user/${lastFmUsername}/library/music/${encodeURIComponent(artistName)}/_/${encodeURIComponent(trackName)}`;
}
// Html element with play count to be inserted into the DOM
function createPlayCountElement(artistName, trackName) {
const container = document.createElement('a');
container.className = 'play-count-container';
// container.href can change, when a tracks move in the list, so we set it in drawPlayCounts()
container.target = '_blank'; // Open in a new tab
// Flex container for consistent sizing
const flexElement = document.createElement('div');
flexElement.style.display = 'flex';
flexElement.style.justifyContent = 'center';
flexElement.style.alignItems = 'center';
flexElement.style.width = '1em'; // Set fixed width to 1em
flexElement.style.height = '100%';
flexElement.style.marginLeft = '4px'; // Add 4px left margin
// Add text content
const textElement = document.createElement('span');
flexElement.appendChild(textElement);
container.appendChild(flexElement);
return container;
}
function createOrGetPlayCountElement(track, artistName, trackName) {
let playCountElement = track.querySelector('.play-count-container');
if (playCountElement) {
return playCountElement;
}
playCountElement = createPlayCountElement(artistName, trackName);
const favoriteButton = track.querySelector('[data-test="add-to-favorites-button"]');
if (favoriteButton) {
favoriteButton.parentNode.insertBefore(playCountElement, favoriteButton);
// Make cell around favorite button big enough to accomodate play count
const flexContainer = favoriteButton.closest('div[role="cell"]');
if (flexContainer) {
flexContainer.style.flex = '0 0 130px';
}
}
return playCountElement;
}
function getArtistAndTrackNames(track) {
const trackNameElement = track.querySelector('[data-test="table-cell-title"]');
const artistNameElements = track.querySelectorAll('[data-test="track-row-artist"] a');
// childNodes[0] to ignore something like that: Spectra <span>(Live)</span>
const trackName = trackNameElement ? trackNameElement.childNodes[0].textContent.trim() : '';
const artistName = artistNameElements.length > 0 ? Array.from(artistNameElements).map(el => el.textContent.trim()).join(', ') : '';
return { artistName, trackName };
}
function drawPlayCounts() {
stopObserving(); // to not trigger mutation observer with our changes
const isOnFavoritesPage = window.location.href === 'https://listen.tidal.com/my-collection/tracks';
document.querySelectorAll('[data-track-id]').forEach(track => {
const favoriteButton = track.querySelector('[data-test="add-to-favorites-button"]');
if (!favoriteButton) {
return;
}
const { artistName, trackName } = getArtistAndTrackNames(track);
const playCountElement = createOrGetPlayCountElement(track, artistName, trackName);
const { playCount, loved } = getCachedPlayCount(artistName, trackName, /*forceFetch*/ false);
playCountElement.href = getTrackLink(artistName, trackName);
const textElement = playCountElement.querySelector('span');
textElement.textContent = playCount === -1 ? '?' : (playCount > 0 ? playCount.toString() : '\u00A0\u00A0');
if (loved == 1) {
favoriteButton.classList.add('make-it-red');
} else if (loved == 0) {
favoriteButton.classList.remove('make-it-red');
}
const favorited = favoriteButton.getAttribute('aria-checked') === 'true';
if (favorited) {
// We don't unlove Last.fm tracks ever for simplicity
setLastFmLoveStatus(trackName, artistName, favorited);
}
});
startObserving();
}
function handleMutations(mutations) {
mutations.forEach(mutation => {
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
manageCache();
drawPlayCounts();
}
// When we like/unlike a track, the mutation above isn't triggered, but this one is
if (mutation.type === 'attributes' && mutation.attributeName === 'aria-checked') {
drawPlayCounts();
}
});
}
// Function to fetch the session key
async function fetchSessionKey(apiKey, secret, token) {
const params = {
api_key: apiKey,
method: 'auth.getSession',
token: token // The token received from the callback URL
};
const apiSig = await generateApiSignature(params, secret);
params.api_sig = apiSig;
const url = 'https://ws.audioscrobbler.com/2.0/';
const formData = new URLSearchParams();
for (const [key, value] of Object.entries(params)) {
formData.append(key, value);
}
formData.append('format', 'json'); // Specify the response format
const response = await fetch(url, {
method: 'POST',
body: formData
});
const data = await response.json();
if (data.error) {
throw new Error(`Error fetching session key: ${data.error}, message: ${data.message}`);
}
lastFmApiSessionKey = data.session.key;
GM_setValue('lastFmApiSessionKey', lastFmApiSessionKey);
lastFmUsername = data.session.name;
GM_setValue('lastFmUsername', lastFmUsername);
}
function generateApiSignature(params, secret) {
const orderedParams = {};
Object.keys(params).sort().forEach(function (key) {
orderedParams[key] = params[key];
});
let concatenatedParams = '';
for (let key in orderedParams) {
concatenatedParams += key + orderedParams[key];
}
concatenatedParams += secret;
return md5(concatenatedParams);
}
function md5(message) {
return SparkMD5.hash(message);
}
function authenticateWithLastFm() {
const callbackUrl = encodeURIComponent(window.location.href.split('#')[0]); // Remove any existing hash
const authUrl = `http://www.last.fm/api/auth/?api_key=${lastFmApiKey}&cb=${callbackUrl}`;
window.location.href = authUrl;
}
// Function to check for a token in the URL parameters and remove it
function checkForToken() {
const urlParams = new URLSearchParams(window.location.search);
const token = urlParams.get('token');
if (token) {
window.history.pushState({}, document.title, window.location.pathname + window.location.hash);
fetchSessionKey(lastFmApiKey, lastFmApiSecret, token)
.then(() => {
startTrackingMutations();
})
.catch(error => {
GM_log(`Error fetching session key: ${error}`);
authenticateWithLastFm();
});
return true;
}
return false;
}
function startTrackingMutations() {
manageCache();
drawPlayCounts();
}
const style = document.createElement('style');
style.textContent = `
.make-it-red svg {
color: #f88 !important;
}
`;
document.head.appendChild(style);
if (lastFmApiSessionKey) {
// GM_log(`Last.fm session key: ${lastFmApiSessionKey}`);
startTrackingMutations();
} else if (!checkForToken()) {
GM_log('Last.fm session key not found, authenticating...');
authenticateWithLastFm();
}
})();