/*
Script to get IMDb rating next to the release year under poster on cards in Jellyfin
Inspired by this post: https://www.reddit.com/r/jellyfin/comments/1qn68yy/jellyfin_ratings_setup_complete/
Disclaimer: Everything apart from code copied from the above script was written by my AI slaves.
1. Install Jellyfin JavaScript Injector
https://github.com/n00bcodr/Jellyfin-JavaScript-Injector
2. Restart Jellyfin after installing the plugin.
3. Create an account on https://api.mdblist.com/ and generate an API key
You will get 1K free requests per day. A $1.80 Patreon sub gives you 10K.
If you show a lot of cards, 1K won't be enough, but you can set cache below.
cURL command to check your rate limit info:
$ curl "https://api.mdblist.com/user?apikey=YOUR_MDBLIST_API_KEY_HERE"
4. Go to: Dashboard → Plugins → JavaScript Injector
5. Paste the full JavaScript code into the large Custom JavaScript box and save.
*/
(function () {
'use strict';
const API_KEY = 'YOUR_MDBLIST_API_KEY_HERE';
const LOGO = 'https://cdn.jsdelivr.net/gh/Druidblack/jellyfin_ratings@main/logo/IMDb.png';
const CACHE_TTL_MS = 7 * 24 * 60 * 60 * 1000;
const REQUEST_DELAY_MS = 300;
const ratingCache = new Map();
const queue = [];
const queued = new WeakSet();
let queueRunning = false;
const visibleObserver = new IntersectionObserver(entries => {
for (const entry of entries) {
if (!entry.isIntersecting) continue;
visibleObserver.unobserve(entry.target);
enqueue(entry.target);
}
}, {
root: null,
rootMargin: '600px 0px',
threshold: 0.01
});
function scan(root = document) {
root.querySelectorAll('.card[data-id]:not([data-imdb-done])').forEach(observeCard);
root.querySelectorAll('.listItem[data-id]:not([data-imdb-done])').forEach(observeListItem);
}
function observeCard(card) {
if (!['Movie', 'Series'].includes(card.dataset.type)) return;
const target =
card.querySelector('.cardText-secondary') ||
card.querySelector('.cardText-first');
if (!target) return;
visibleObserver.observe(card);
}
function observeListItem(item) {
if (!['Movie', 'Series'].includes(item.dataset.type)) return;
const target = item.querySelector('.listItemBodyText');
if (!target) return;
visibleObserver.observe(item);
}
function enqueue(el) {
if (el.dataset.imdbDone) return;
if (queued.has(el)) return;
queued.add(el);
queue.push(el);
runQueue();
}
function runQueue() {
if (queueRunning) return;
queueRunning = true;
processNext();
}
function processNext() {
const el = queue.shift();
if (!el) {
queueRunning = false;
return;
}
processElement(el)
.finally(() => {
setTimeout(processNext, REQUEST_DELAY_MS);
});
}
function processElement(el) {
if (el.dataset.imdbDone) return Promise.resolve();
const isList = el.classList.contains('listItem');
let target;
if (isList) {
target = el.querySelector('.listItemBodyText');
} else {
target =
el.querySelector('.cardText-secondary') ||
el.querySelector('.cardText-first');
}
if (!target) return Promise.resolve();
el.dataset.imdbDone = '1';
return injectRating(el, target);
}
function injectRating(el, target) {
const row = document.createElement('span');
row.className = 'imdb-home-rating';
row.style.cssText =
'display:inline-flex;align-items:center;gap:0px;font-size:inherit;margin-left:8px;vertical-align:middle;color:inherit';
target.appendChild(row);
return ApiClient
.getItem(ApiClient.getCurrentUserId(), el.dataset.id)
.then(item => {
if (!item || !item.ProviderIds) return null;
const type =
item.Type === 'Series'
? 'show'
: 'movie';
return getRating(type, item.ProviderIds);
})
.then(rating => {
if (!rating) {
row.remove();
return;
}
row.innerHTML = '';
const logo = document.createElement('span');
logo.title = 'IMDb: ' + rating;
logo.style.cssText =
'display:inline-block;' +
'height:1.15em;' +
'width:2.6em;' +
'background-color:currentColor;' +
'mask:url("' + LOGO + '") center / contain no-repeat;' +
'-webkit-mask:url("' + LOGO + '") center / contain no-repeat;' +
'vertical-align:middle;' +
'opacity:.55';
const value = document.createElement('span');
value.textContent = rating;
value.style.color = 'inherit';
row.append(
logo,
value
);
})
.catch(() => {
row.remove();
});
}
function getRating(type, providerIds) {
const tmdb = providerIds.Tmdb;
const imdb = providerIds.Imdb;
const tvdb = providerIds.Tvdb;
const key =
type +
':' +
(tmdb || imdb || tvdb);
if (ratingCache.has(key)) {
return Promise.resolve(
ratingCache.get(key)
);
}
const cached =
getCachedRating(key);
if (cached !== undefined) {
ratingCache.set(
key,
cached
);
return Promise.resolve(
cached
);
}
const urls = [];
if (tmdb) {
urls.push(
`https://api.mdblist.com/tmdb/${type}/${tmdb}?apikey=${API_KEY}`
);
}
if (imdb) {
urls.push(
`https://api.mdblist.com/imdb/${type}/${imdb}?apikey=${API_KEY}`
);
}
if (tvdb) {
urls.push(
`https://api.mdblist.com/tvdb/${type}/${tvdb}?apikey=${API_KEY}`
);
}
return tryUrls(
urls,
key
);
}
function tryUrls(urls, key) {
if (!urls.length) {
ratingCache.set(
key,
null
);
setCachedRating(
key,
null
);
return Promise.resolve(
null
);
}
const url =
urls.shift();
return fetch(url)
.then(r =>
r.ok
? r.json()
: null
)
.then(j => {
const imdb =
j &&
Array.isArray(j.ratings)
? j.ratings.find(
x =>
String(
x.source || ''
).toLowerCase()
=== 'imdb'
)
: null;
const value =
imdb &&
imdb.value != null
? Number(
imdb.value
).toFixed(1)
: null;
if (value) {
ratingCache.set(
key,
value
);
setCachedRating(
key,
value
);
return value;
}
return tryUrls(
urls,
key
);
})
.catch(() =>
tryUrls(
urls,
key
)
);
}
function getCachedRating(key) {
const raw =
localStorage.getItem(
'imdb-rating:' + key
);
if (!raw)
return undefined;
try {
const cached =
JSON.parse(raw);
if (
!cached ||
typeof cached !== 'object'
)
return undefined;
if (
Date.now()
- cached.time
> CACHE_TTL_MS
)
return undefined;
return cached.value;
} catch {
return undefined;
}
}
function setCachedRating(
key,
value
) {
try {
localStorage.setItem(
'imdb-rating:' + key,
JSON.stringify({
time:
Date.now(),
value
})
);
} catch {}
}
new MutationObserver(
mutations => {
for (
const mutation
of mutations
) {
for (
const node
of mutation.addedNodes
) {
if (
node.nodeType !== 1
)
continue;
scan(node);
}
}
}
)
.observe(
document.body,
{
childList: true,
subtree: true
}
);
setTimeout(
scan,
1000
);
setTimeout(
scan,
3000
);
setTimeout(
scan,
6000
);
window.addEventListener(
'hashchange',
() =>
setTimeout(
scan,
1000
)
);
window.addEventListener(
'popstate',
() =>
setTimeout(
scan,
1000
)
);
document.addEventListener(
'viewshow',
() =>
setTimeout(
scan,
1000
)
);
setInterval(
scan,
3000
);
})();
