RateYourMusic - Visual Rating Bar

Greasy Fork is available in English.
RateYourMusic - Visual Rating Bar

Adds a simple visual rating bar on releases pages.
当前为 2021-03-19 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         RateYourMusic - Visual Rating Bar
// @namespace    rym-rating-bar
// @version      0.3
// @description  Adds a simple visual rating bar on releases pages.
// @author       Kazaam
// @match        https://rateyourmusic.com/release/*
// @icon         https://www.google.com/s2/favicons?domain=rateyourmusic.com
// @grant        GM_addStyle
// ==/UserScript==

/* eslint-env jquery */

(function () {
    'use strict';

    // ==================================================
    // OPTIONS
    // ==================================================

    // Do you want to enable the rating bar rounded corners? (choices: true or false)
    const rounded_bar = true;

    // If you enabled the rouned_bar (above setting), how much you want to round the rating bar cornes ? (choices: from 1)
    const border_radius = 8;

    // The rating bar width. Set 100% to get a full-width bar, or specify a fixed width in pixels (eg. 200px)
    const rating_bar_width = "100%";

    // The rating bar height, only in pixels (eg. 20)
    const rating_bar_height = "20"

    // Choose between the blending colors mode (choices: flat or fade)
    const color_mode = "flat";

    // ==================================================

     const css_flat = "linear-gradient(90deg, rgba(249,65,68,1) 24.67%, rgba(248,150,30,1) 24.67%, rgba(248,150,30,1) 37.11%, rgba(249,199,79,1) 37.11%, rgba(249,199,79,1) 49.48%, rgba(144,190,109,1) 49.48%, rgba(144,190,109,1) 61.85%, rgba(85,164,103,1) 61.85%, rgba(85,164,103,1) 74.20%, rgba(63,130,164,1) 74.20%)";
     const css_fade = "linear-gradient(90deg, rgba(249,65,68,1) 0%, rgba(249,182,62,1) 35%, rgba(43,147,72,1) 70%, rgba(43,147,72,1) 98%, rgba(255,255,255,1) 99%)";

    GM_addStyle(`
    .us-rym-rating-wrapper {
        width: ${rating_bar_width};
        background: rgb(249,65,68);
        background: ${(color_mode === "fade" ? css_fade : css_flat)};
        border-radius: ${rounded_bar ? border_radius : 0}px;
        text-align: right;
        font-size: 0;
        box-shadow: inset 0px 0px 8px -4px black;
        margin-top: 6px;
    }

    .us-rym-rating-hidden {
        background-color: #fbfbfb;
        height: ${rating_bar_height}px;
        border:1px solid #dddddd;
        border-left-width: 0;
        display: inline-block;
        border-radius: 0 ${rounded_bar ? border_radius : 0}px ${rounded_bar ? border_radius : 0}px 0;
        box-shadow: inset 0px 0px 8px -6px black;
    }`);

    const avg_rating = parseFloat($('.avg_rating').html());
    const rating_percent = avg_rating * 100 / 5;

    const rating_bar = `
    <div class="us-rym-rating-wrapper">
        <span class="us-rym-rating-hidden" style="width:${100-rating_percent}%;"></span>
    </div>`;

    $('tr th:contains("RYM Rating")').next('td').append(rating_bar);

    console.log('RateYourMusic Rating Bar loaded.');
})();