Create a section illustrating the user reception of the release on RateYourMusic
// ==UserScript==
// @name RYM User Reception
// @namespace http://tampermonkey.net/
// @version 1.1
// @description Create a section illustrating the user reception of the release on RateYourMusic
// @author https://greasyfork.org/users/1320826-polachek
// @match https://rateyourmusic.com/release/*
// @match https://rateyourmusic.com/film/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=rateyourmusic.com
// @grant GM_addStyle
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
// @license MIT
// ==/UserScript==
(function() {
'use strict';
GM_addStyle(`
.rym-reception {
margin-top: 0px;
line-height: 1.8;
padding: 10px 0;
border-top: 1px solid var(--mono-d);
}
.rym-reception div {
display: flex;
align-items: center;
font-family: var(--font-family-sans-serif);
transition: font-size 0.3s;
}
.rym-reception .emoji {
margin-right: 8px;
font-size: 1.2em;
}
.rym-reception .top-item {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 5px;
}
.rym-reception .other-items {
font-size: 0.95em;
opacity: 0.9;
}
.rym-meter {
display: flex;
align-items: center;
margin-top: 15px;
padding: 10px;
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
z-index: 1;
}
.rym-meter::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.0);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.0);
z-index: 1;
border-radius: 8px;
}
.rym-meter-circle {
position: absolute;
left: 10px;
width: 60px;
height: 60px;
border-radius: 50%;
z-index: 0;
}
.rym-meter-percentage {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.4em;
color: white;
position: relative;
z-index: 2;
}
.rym-meter-circle::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}
.rym-meter-label {
margin-left: 15px;
font-weight: bold;
font-size: 1.1em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 5px;
position: relative;
z-index: 2;
}
.rym-meter-acclaim { background: radial-gradient(circle at 30% 30%, #FFD700, #D4AF37); }
.rym-meter-very-positive { background: radial-gradient(circle at 30% 30%, #2E8B57, #006400); }
.rym-meter-positive { background: radial-gradient(circle at 30% 30%, #32CD32, #228B22); }
.rym-meter-mixed { background: radial-gradient(circle at 30% 30%, #FFA500, #FF8C00); }
.rym-meter-negative { background: radial-gradient(circle at 30% 30%, #FF4500, #B22222); }
.rym-meter-panned { background: radial-gradient(circle at 30% 30%, #555, #000); }
`);
function initUserReception() {
const statsContainer = $('.catalog_stats.hide-for-small');
if (!statsContainer.length) return;
let chartData = [];
const hiddenTable = $('#chart_div table');
if (hiddenTable.length) {
hiddenTable.find('tbody tr').each(function() {
const rating = parseFloat($(this).find('td:first').text().trim());
const count = parseInt($(this).find('td:last').text().trim());
if (!isNaN(rating) && !isNaN(count)) {
chartData.push([rating, count]);
}
});
}
if (chartData.length === 0) {
const scriptContent = $('script:contains("drawChart1")').text();
const regex = /data\.addRows\(\[([\s\S]*?)\]\)/;
const match = scriptContent.match(regex);
if (match && match[1]) {
try {
const dataString = '[' + match[1].replace(/\s/g, '') + ']';
chartData = JSON.parse(dataString);
} catch (e) {
console.error('RYM User Reception: Erro ao analisar dados', e);
return;
}
}
}
if (chartData.length === 0) return;
const categoryMap = {
'loved it': [5.0],
'really liked it': [4.0, 4.5],
'liked it': [3.0, 3.5],
'tolerated it': [2.5],
'didn\'t like it': [1.5, 2.0],
'despised it': [0.5, 1.0]
};
const emojiMap = {
'loved it': '🥰',
'really liked it': '🤩',
'liked it': '😏',
'tolerated it': '😐',
'didn\'t like it': '😒',
'despised it': '😖'
};
const categoryCounts = {};
let total = 0;
Object.keys(categoryMap).forEach(category => {
categoryCounts[category] = 0;
});
chartData.forEach(([rating, count]) => {
for (const [category, ratings] of Object.entries(categoryMap)) {
if (ratings.includes(rating)) {
categoryCounts[category] += count;
total += count;
break;
}
}
});
if (total === 0) return;
const receptionData = [];
Object.keys(categoryCounts).forEach(category => {
const percentage = ((categoryCounts[category] / total) * 100).toFixed(1);
receptionData.push({
category,
percentage,
emoji: emojiMap[category]
});
});
receptionData.sort((a, b) => parseFloat(b.percentage) - parseFloat(a.percentage));
const positivePercentage = (
categoryCounts['loved it'] +
categoryCounts['really liked it'] +
categoryCounts['liked it']
) / total * 100;
let ratingClass, ratingLabel;
const roundedPercentage = Math.round(positivePercentage);
if (roundedPercentage >= 95) {
ratingClass = 'rym-meter-acclaim';
ratingLabel = 'ACCLAIM';
} else if (roundedPercentage >= 80) {
ratingClass = 'rym-meter-very-positive';
ratingLabel = 'VERY<br>POSITIVE';
} else if (roundedPercentage >= 60) {
ratingClass = 'rym-meter-positive';
ratingLabel = 'POSITIVE';
} else if (roundedPercentage >= 40) {
ratingClass = 'rym-meter-mixed';
ratingLabel = 'MIXED';
} else if (roundedPercentage >= 20) {
ratingClass = 'rym-meter-negative';
ratingLabel = 'NEGATIVE';
} else {
ratingClass = 'rym-meter-panned';
ratingLabel = 'PANNED';
}
const meterHTML = `
<div class="rym-meter">
<div class="rym-meter-circle ${ratingClass}"></div>
<div class="rym-meter-percentage">
${roundedPercentage}%
</div>
<div class="rym-meter-label">
${ratingLabel}
</div>
</div>
`;
let topItemHTML = '';
let otherItemsHTML = '';
receptionData.forEach((item, index) => {
const line = `<div><span class="emoji">${item.emoji}</span> ${item.percentage}% ${item.category}</div>`;
if (index === 0) {
topItemHTML = `<div class="top-item">${line}</div>`;
} else {
otherItemsHTML += `<div class="other-items">${line}</div>`;
}
});
const sectionHTML = `
<div class="header">User reception</div>
${meterHTML}
<div class="rym-reception">
${topItemHTML}
${otherItemsHTML}
</div>
`;
statsContainer.append(sectionHTML);
}
const checkReady = setInterval(() => {
if ($('#chart_div').length && $('script:contains("drawChart1")').length) {
clearInterval(checkReady);
initUserReception();
}
}, 500);
setTimeout(() => {
clearInterval(checkReady);
if ($('.rym-reception').length === 0) {
initUserReception();
}
}, 5000);
})();