Adds new features to enhance the iCheckMovies user experience
// ==UserScript==
// @name iCheckMovies Enhanced
// @namespace iCheckMovies
// @description Adds new features to enhance the iCheckMovies user experience
// @license MIT; https://opensource.org/licenses/MIT
// @author themagician, monk-time
// @include http://icheckmovies.com*
// @include http://www.icheckmovies.com*
// @include https://icheckmovies.com*
// @include https://www.icheckmovies.com*
// @grant unsafeWindow
// @grant GM_getValue
// @icon https://www.icheckmovies.com/favicon.ico
// @version 2.0.3
// ==/UserScript==
'use strict';
const VERSION = '2.0.3';
// ----- Utils -----
const $ = sel => document.querySelector(sel); // eslint-disable-line no-redeclare
const $$ = sel => document.querySelectorAll(sel);
const save = (key, val) => localStorage.setItem(key, JSON.stringify(val));
const load = key => JSON.parse(localStorage.getItem(key));
const addCSS = css => document.head.insertAdjacentHTML('beforeend', `<style>${css}</style>`);
const extractFrom = async (url, extractor) => {
const r = await fetch(url, { credentials: 'same-origin' });
const html = await r.text();
const el = new DOMParser().parseFromString(html, 'text/html');
return extractor(el);
};
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
// ----- Data migration for 1.8.0 -> 2.0.0; remove afterwards -----
const migrateData = () => {
// 1.8.0 didn't work in GM
if (typeof GM_getValue === 'undefined') return; // eslint-disable-line camelcase
const hasMigrated = localStorage.getItem('icme_migrated_1_8_0');
if (hasMigrated) return;
const strHiddenLists = GM_getValue('hidden_lists');
if (strHiddenLists) {
const hiddenLists = JSON.parse(strHiddenLists);
console.log('Migrating hidden_lists from GM storage', hiddenLists);
save('icme_hidden_lists', hiddenLists);
}
const strOwnedMovies = GM_getValue('owned_movies');
if (strOwnedMovies) {
const ownedMoviesArr = JSON.parse(strOwnedMovies);
console.log('Migrating owned_movies from GM storage', ownedMoviesArr);
const ownedMovies = Object.fromEntries(ownedMoviesArr.map(id => [id, true]));
save('icme_owned_movies', ownedMovies);
}
localStorage.setItem('icme_migrated_1_8_0', true);
};
migrateData();
// ----- Interacting with ICM -----
// Mutually exclusive regexes for matching page type
const reICM = Object.freeze({
movie: // movie pages only, not /movies/ or /movies/checked/ etc. or /rankings/
// https://www.icheckmovies.com/movies/inception/
// https://www.icheckmovies.com/movies/inception/comments/
/icheckmovies\.com\/movies\/(?!$|\?|(?:(un)?checked|favorited|disliked|watchlist|owned|recommended)\/)[^/]+\/(?!rankings\/)/,
movieList: // personal user list
// https://www.icheckmovies.com/lists/imdbs+2010s+top+50/
// https://www.icheckmovies.com/lists/imdbs+2010s+top+50/?sort=title
// https://www.icheckmovies.com/lists/alfred+hitchcock+filmography/fritz/
// https://www.icheckmovies.com/lists/alfred+hitchcock+filmography/fritz/?sort=title
// https://www.icheckmovies.com/lists/watchlist+2015/juliske/
/icheckmovies\.com\/lists\/(?!$|\?|(?:favorited|disliked|watchlist)\/)/,
movieListGeneral: // /movies/ only
// https://www.icheckmovies.com/movies/
// https://www.icheckmovies.com/movies/?sort=title
/icheckmovies\.com\/movies\/(?:$|\?)/,
movieListSpecial: // /movies/checked/ etc.
// https://www.icheckmovies.com/movies/favorited/
// https://www.icheckmovies.com/movies/favorited/?sort=title
// https://www.icheckmovies.com/movies/checked/
// https://www.icheckmovies.com/movies/checked/?sort=title
// https://www.icheckmovies.com/movies/unchecked/
// https://www.icheckmovies.com/movies/owned/
/icheckmovies\.com\/movies\/(?:((un)?checked|favorited|disliked|watchlist|owned|recommended)\/)/,
movieSearch:
// https://www.icheckmovies.com/search/movies/?query=inception
/icheckmovies\.com\/search\/movies\//,
movieRankings:
// https://www.icheckmovies.com/movies/inception/rankings/
// https://www.icheckmovies.com/movies/inception/rankings/?excludetags=user:icheckmovies
/icheckmovies\.com\/movies\/[^/]+\/rankings\//,
listsGeneral: // /lists/ only
// https://www.icheckmovies.com/lists/
// https://www.icheckmovies.com/lists/?sort=dateadded
/icheckmovies\.com\/lists\/(?:$|\?)/,
listsSpecial: // /lists/favorited/ etc.
// https://www.icheckmovies.com/lists/favorited/
// https://www.icheckmovies.com/lists/favorited/?sort=name
/icheckmovies\.com\/lists\/(?:favorited|disliked|watchlist)\//,
listsSearch:
// https://www.icheckmovies.com/search/lists/?query=nolan
/icheckmovies\.com\/search\/lists\//,
progress:
// https://www.icheckmovies.com/profiles/progress/
/icheckmovies.com\/profiles\/progress\//,
});
const addToMovieListBar = htmlStr => {
if (!$('#icmeControls')) {
const html = '<div id="icmeControls" style="height: 35px; position: relative"></div>';
// movieList and movieListGeneral+Special use different headers
const elMain = $(':is(#topList, #listTitle) ~ .container:last-of-type');
elMain.insertAdjacentHTML('beforebegin', html);
}
$('#icmeControls').insertAdjacentHTML('beforeend', htmlStr);
};
const addNearOrderByLinks = htmlStr => {
addCSS(`.icmeOrderByLink {
float: left;
margin-right: 1em;
}`);
$('#listOrderingWrapper').insertAdjacentHTML('afterbegin', htmlStr);
};
// Remove the premium feature pop-up using two ways to unbind events from the button
// (only one is not enough because TM/VM launch the script at different times)
const removePremiumPopup = el => {
const elClone = el.cloneNode(true);
el.replaceWith(elClone);
elClone.classList.remove('paidFeature');
elClone.href = '#';
return elClone;
};
// ----- Base classes and config windows -----
class BaseModule {
constructor(globalCfg) {
this.metadata = null; // check any module for required fields
this.config = null; // will be created after the module has been registered
this.globalCfg = globalCfg; // allows modules to use Save/Set/Get
}
// Create a necessary metadata.options item for if a module should be loaded by default.
static getStatus(isEnabled) {
return {
id: 'enabled',
desc: 'Enabled',
type: 'checkbox',
default: isEnabled,
};
}
/**
* Check if the current page matches at least one of given page types.
*
* @param {(string|string[])} keys - A key of reICM, or an array of keys
* @returns {boolean} true if the current page matches any of specified regexes
*/
static matchesPageType(keys) {
if (!Array.isArray(keys)) keys = [keys];
const matchUrl = regex => regex.test(window.location.href);
return BaseModule.getRegexes(keys).some(matchUrl);
}
static getRegexes(arrOfKeys) {
return arrOfKeys.map(key => {
if (reICM[key] === undefined) {
throw new TypeError(`Invalid icm-regex name: ${key}`);
}
return reICM[key];
});
}
isOnSupportedPage() {
return BaseModule.matchesPageType(this.metadata.enableOn);
}
// Synchronize the loaded config with the module's options (delete outdated, add new)
// and make it accessible to the module.
syncGlobalCfg() {
const { id } = this.metadata;
const config = {};
for (const opt of this.metadata.options) {
config[opt.id] = this.globalCfg.get(`${id}.${opt.id}`) ?? opt.default;
}
// Link module's config values to the whole config.
// As they both reference the same object, you can modify module's config from inside it.
// Changes through the ConfigWindow will be immediately available to modules.
this.config = config;
this.globalCfg.data[id] = config;
}
}
class GlobalCfg {
constructor() {
// test:
// ['1', '1.7', '1.7.1', '1.7.1.1', '1.7.1.1.1'].map(verToNumber) ===
// [1000, 1700, 1710, 1711, 1711]
const verToNumber = str => Number(`${str.replace(/\./g, '')}0000`.slice(0, 4));
this.data = {
script_info: {
version: VERSION, // dot-separated string
revision: verToNumber(VERSION), // 4-digit number
},
};
const oldcfg = load('icm_enhanced');
if (!oldcfg || !oldcfg.script_info) return;
const oldInfo = oldcfg.script_info;
const newInfo = this.data.script_info;
// Rewrite script_info in the loaded config
this.data = { ...oldcfg, script_info: newInfo };
const isUpdated = oldInfo.revision !== newInfo.revision;
if (isUpdated) {
console.log(`Updating to ${newInfo.revision}`);
this.save();
}
}
save() {
save('icm_enhanced', this.data);
}
// Get a config value by a dot-separated path
get(path) {
return path.split('.').reduce((prev, curr) => prev && prev[curr], this.data);
}
// Set a config value by a dot-separated path
set(path, value) {
const parts = path.split('.');
const last = parts.pop();
let obj = this.data;
for (const part of parts) {
if (!(obj[part] instanceof Object)) obj[part] = {};
obj = obj[part];
}
obj[last] = value;
}
// Set false to true and vice versa
toggle(path) {
const val = this.get(path);
let toggled;
if (val === true || val === false) {
toggled = !val;
} else if (val === 'asc' || val === 'desc') {
toggled = val === 'asc' ? 'desc' : 'asc';
} else {
return false; // couldn't toggle the value
}
this.set(path, toggled);
return true; // value has been toggled
}
}
class ConfigWindow {
constructor(globalCfg) {
this.globalCfg = globalCfg;
this.modules = [];
}
addModule(metadata) {
if (!this.modules.some(m => m.id === metadata.id)) {
this.modules.push(metadata);
}
}
buildOptionHTML(path, { frontDesc, desc, type, default: def, inline, newline }) {
let value = this.globalCfg.get(path); // always up to date
// optValue can be a string (until a module parses it) or an array (after)
if (Array.isArray(value)) {
value = value.join('\n');
}
const attrPath = `data-cfg-path="${path}"`;
const checkbox = () => `
${newline ? '<br>' : ''}
<p${inline ? ' class="icmeCfgInlineOpt"' : ''}>
${frontDesc ?? ''}
<label>
<input type="checkbox" ${attrPath} ${value ? 'checked="checked"' : ''}
title="default: ${def ? 'yes' : 'no'}">
${desc}
</label>
</p>`;
const textinput = () => `
<p>
${desc}:
<input type="text" ${attrPath} value="${value}" title="default: ${def}">
</p>`;
const textarea = () => `
<p>
<span class="icmeCfgTextareaDesc">${desc}:</span>
<textarea rows="4" cols="70" ${attrPath}>${value}</textarea>
</p>`;
const textinputcolor = () => `
<p>
${desc}:
<input type="text" class="icmeColorPickerText" ${attrPath}
value="${value}" title="default: ${def}">
<input type="color" class="icmeColorPicker" ${attrPath}
value="${value}" title="default: ${def}">
</p>`;
const htmlByType = { checkbox, textinput, textarea, textinputcolor };
return htmlByType[type]();
}
loadOptions(index) {
const { id, desc, options } = this.modules[index];
const buildHTML = opt => this.buildOptionHTML(`${id}.${opt.id}`, opt);
const html = `<p>${desc}</p> ${options.map(buildHTML).join('')}`;
$('#icmeCfgModule').innerHTML = html;
ConfigWindow.initColorPickers();
}
static initColorPickers() {
$$('.icmeColorPicker').forEach(el => {
el.addEventListener('change', () => {
el.previousElementSibling.value = el.value;
});
});
$$('.icmeColorPickerText').forEach(el => {
el.addEventListener('change', () => {
el.nextElementSibling.value = el.value;
});
});
}
load() {
addCSS(`
#icmeCfgMain { font-family: verdana, arial, sans-serif; }
#icmeCfgMain hr {
border: 0;
height: 1px;
width: 100%;
background-color: #aaa;
margin: 7px 0px;
}
#icmeCfgMain h3 { color: #bbb; }
#icmeCfgModule { margin: 10px 0; }
#icmeCfgModule > p { margin-bottom: 0.5em; }
#icmeCfgModule > p.icmeCfgInlineOpt { display: inline-block; margin-right: 5px }
#icmeCfgModule input { margin: 0px 3px; }
#icmeCfgModule input[type=text] { font-family: monospace }
#icmeCfgModule .icmeCfgTextareaDesc { vertical-align: top; margin-right: 5px }
`);
// Create and append a new item in the drop down menu under your username
const cfgLink = `
<li>
<a id="icmeCfgTrigger" href="#"
title="Configure iCheckMovies Enhanced script options">ICM Enhanced</a>
</li>`;
$('ul#profileOptions').insertAdjacentHTML('beforeend', cfgLink);
this.modules.sort((a, b) => (a.title > b.title ? 1 : -1));
const options = this.modules.map(m => `<option>${m.title}</option>`);
const ver = this.globalCfg.data.script_info.version;
const cfgMainHtml = `
<div id="icmeCfgMain">
<h3>iCheckMovies Enhanced ${ver} configuration</h3>
<select id="icmeCfgModuleList" name="modulelist">${options}</select>
<hr>
<div id="icmeCfgModule"></div>
</div>
`;
document.body.insertAdjacentHTML('beforeend', cfgMainHtml);
const elCfgMain = $('#icmeCfgMain');
const elModuleList = elCfgMain.querySelector('#icmeCfgModuleList');
elCfgMain.addEventListener('change', e => {
if (!['INPUT', 'TEXTAREA'].includes(e.target.tagName)) return;
const path = e.target.dataset.cfgPath;
if (!path) return;
if (!this.globalCfg.toggle(path)) {
this.globalCfg.set(path, e.target.value);
}
this.globalCfg.save();
});
elModuleList.addEventListener('change', () => {
this.loadOptions(elModuleList.selectedIndex);
});
elModuleList.dispatchEvent(new Event('change'));
ConfigWindow.loadModal(elCfgMain, $('#icmeCfgTrigger'));
}
static loadModal(elContent, elTrigger) {
addCSS(`
#icmeCfgModalOverlay {
display: none;
position: fixed;
z-index: 3000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.icmeCfgModal {
background-color: #f5f5ef;
margin: 80px auto;
padding: 15px 30px;
border: 1px solid #888;
width: 800px;
height: 450px;
}
.icmeCfgModalClose {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.icmeCfgModalClose:hover,
.icmeCfgModalClose:focus {
color: black;
cursor: pointer;
}
`);
document.body.insertAdjacentHTML('beforeend', `
<div id="icmeCfgModalOverlay">
<div class="icmeCfgModal">
<span class="icmeCfgModalClose">×</span>
</div>
</div>
`);
const elModalOverlay = $('#icmeCfgModalOverlay');
const elModal = elModalOverlay.querySelector('.icmeCfgModal');
const elClose = $('.icmeCfgModalClose');
elModal.append(elContent);
elTrigger.addEventListener('click', e => {
e.preventDefault();
elModalOverlay.style.display = 'block';
});
elClose.addEventListener('click', () => {
elModalOverlay.style.display = 'none';
});
window.addEventListener('click', e => {
if (e.target !== elModalOverlay) return;
elModalOverlay.style.display = 'none';
});
}
}
// ----- Modules -----
class RandomFilmLink extends BaseModule {
constructor(globalCfg) {
super(globalCfg);
this.metadata = {
title: 'Random film link',
desc: 'Show a "Help me pick a film" link on movie lists with unchecked movies.' +
'<br>Suggestions don\'t repeat until all have been shown once. ' +
'Click on the list tab\'s label to return to the full list.',
id: 'random_film',
enableOn: ['movieList', 'movieListSpecial'], // movieListGeneral doesn't make sense here
options: [BaseModule.getStatus(true)],
};
this.randomIndices = [];
}
attach() {
// Disable on completed lists and list of checked/favs.
// If a user unchecks a movie, it will show up only after reloading
if (!$$('#itemListMovies > li.unchecked').length) return;
const html =
`<span style="float: right; margin-left: 15px">
<a href="#" id="icmeRandomFilm">Help me pick a film!</a>
</span>`;
addToMovieListBar(html);
$('#icmeRandomFilm').addEventListener('click', e => {
e.preventDefault();
this.pickRandomFilm();
});
// Allow resetting visible movies on /movies/watchlist/ etc. by clicking on tab's label
const elActiveTab = $('.tabMenu > .active');
if (!elActiveTab.querySelector('a')) {
elActiveTab.addEventListener('click', () => {
$$('#itemListMovies > li').forEach(el => {
el.style.display = 'list-item';
});
});
}
}
pickRandomFilm() {
const elUnchecked = $$('#itemListMovies > li.unchecked');
if (!elUnchecked.length) return;
if (!this.randomIndices.length) {
this.randomIndices = [...Array(elUnchecked.length).keys()];
RandomFilmLink.shuffle(this.randomIndices);
}
const selectedIndex = this.randomIndices.pop();
$$('#itemListMovies > li').forEach(el => {
el.style.display = 'none';
});
elUnchecked[selectedIndex].style.display = 'list-item';
}
// https://stackoverflow.com/a/12646864/6270692
static shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
}
class UpcomingAwardsList extends BaseModule {
constructor(globalCfg) {
super(globalCfg);
this.metadata = {
title: 'Upcoming awards (individual lists)',
desc: 'Show numbers of checks needed for getting awards on individual lists',
id: 'ua_list',
enableOn: ['movieList'],
options: [BaseModule.getStatus(true), {
id: 'show_negative',
desc: 'Show negative values for received awards',
type: 'checkbox',
default: true,
}],
};
}
attach() {
if (!$('#itemListMovies')) return;
const parseNum = sel => Number($(sel).textContent.match(/\d+/));
const totalItems = parseNum('#listFilterMovies');
const checks = parseNum('#topListMoviesCheckedCount');
const getSpan = ([award, cutoff]) => {
const neededForAward = Math.ceil(totalItems * cutoff) - checks;
if (!this.config.show_negative && neededForAward <= 0) {
return '';
}
return `<span style="margin-left: 30px">${award}: <b>${neededForAward}</b></span>`;
};
const awardTypes = [['Bronze', 0.5], ['Silver', 0.75], ['Gold', 0.9], ['Platinum', 1]];
const html = `<span><b>Upcoming awards:</b>${awardTypes.map(getSpan).join('')}`;
addToMovieListBar(html);
}
}
class UpcomingAwardsOverview extends BaseModule {
constructor(globalCfg) {
super(globalCfg);
this.metadata = {
title: 'Upcoming awards overview',
desc: 'Show a summary of upcoming awards on the progress page and lists of your ' +
' watchlisted/fav. lists',
id: 'ua',
enableOn: ['listsSpecial', 'progress'],
options: [BaseModule.getStatus(true), {
id: 'hide_imdb',
desc: 'Add all IMDb top-50s to hidden lists (you can unhide them afterwards)',
type: 'checkbox',
default: false,
}],
};
this.lists = [];
this.hiddenLists = [];
}
attach() {
if (!$('.listItemToplist')) return;
const hiddenLists = this.loadHiddenLists();
const listObjs = UpcomingAwardsOverview.parseLists();
UpcomingAwardsOverview.sortListObjects(listObjs);
UpcomingAwardsOverview.loadCss();
UpcomingAwardsOverview.loadHtml(listObjs, hiddenLists);
UpcomingAwardsOverview.addListeners(hiddenLists);
}
loadHiddenLists() {
const hiddenLists = load('icme_hidden_lists') ?? [];
if (!this.config.hide_imdb) return hiddenLists;
const imdbUrls = [
'1910s', '1920s', '1930s', '1940s', '1950s', '1960s', '1970s', '1980s', '1990s',
'2000s', '2010s', 'action', 'adventure', 'animation', 'biography', 'comedy',
'crime', 'documentary', 'drama', 'family', 'fantasy', 'film-noir', 'history',
'horror', 'independent', 'mini-series', 'music', 'musical', 'mystery', 'romance',
'sci-fi', 'shorts', 'sport', 'thriller', 'war', 'western',
].map(s => `/lists/imdbs+${s}+top+50/`);
const hiddenAndImdb = [...new Set([...hiddenLists, ...imdbUrls])]; // remove duplicates
save('icme_hidden_lists', hiddenAndImdb);
// This is a one-off action, disable the option so that it's not repeated every time
this.config.hide_imdb = false;
this.globalCfg.save();
return hiddenAndImdb;
}
static parseLists() {
// Use different selectors depending on the page
const sel = {
progress: { rank: 'span.rank', title: 'h3 > a' },
lists: { rank: 'span.info > strong:first-of-type', title: 'h2 > a.title' },
};
const curSel = UpcomingAwardsOverview.matchesPageType('progress') ? sel.progress : sel.lists;
const awardTypes = [['Bronze', 0.5], ['Silver', 0.75], ['Gold', 0.9], ['Platinum', 1]];
const elLists = $$('#progressall > li, #itemListToplists > li');
return [...elLists].flatMap(el => {
const counts = el.querySelector(curSel.rank).textContent.match(/\d+/g);
if (!counts) return [];
const [checks, totalItems] = counts.map(Number);
const elTitle = el.querySelector(curSel.title);
const listTitle = elTitle.title.replace(/^View the | top list$/g, '');
const listUrl = elTitle.pathname;
const apply = cutoff => Math.ceil(totalItems * cutoff) - checks;
return awardTypes
.map(([awardType, cutoff]) => ({ awardType, neededForAward: apply(cutoff) }))
.filter(({ neededForAward }) => neededForAward > 0)
.map((obj, i) => ({ ...obj, listTitle, listUrl, isNext: i === 0 }));
});
}
static sortListObjects(listObjs) {
// By least required checks ASC, then by award type DESC, then by list title ASC
const awardOrder = { Bronze: 0, Silver: 1, Gold: 2, Platinum: 3 };
listObjs.sort((a, b) =>
a.neededForAward - b.neededForAward ||
awardOrder[b.awardType] - awardOrder[a.awardType] ||
a.listTitle.localeCompare(b.listTitle));
}
static loadCss() {
const unhideIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAA' +
'AQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW' +
'1hZ2VSZWFkeXHJZTwAAAGrSURBVDjLvZPZLkNhFIV75zjvYm7VGFNCqoZUJ+roKUUpjR' +
'uqp61Wq0NKDMelGGqOxBSUIBKXWtWGZxAvobr8lWjChRgSF//dv9be+9trCwAI/vIE/2' +
'6gXmviW5bqnb8yUK028qZjPfoPWEj4Ku5HBspgAz941IXZeze8N1bottSo8BTZviVWrE' +
'h546EO03EXpuJOdG63otJbjBKHkEp/Ml6yNYYzpuezWL4s5VMtT8acCMQcb5XL3eJE8V' +
'gBlR7BeMGW9Z4yT9y1CeyucuhdTGDxfftaBO7G4L+zg91UocxVmCiy51NpiP3n2treUP' +
'ujL8xhOjYOzZYsQWANyRYlU4Y9Br6oHd5bDh0bCpSOixJiWx71YY09J5pM/WEbzFcDmH' +
'vwwBu2wnikg+lEj4mwBe5bC5h1OUqcwpdC60dxegRmR06TyjCF9G9z+qM2uCJmuMJmaN' +
'ZaUrCSIi6X+jJIBBYtW5Cge7cd7sgoHDfDaAvKQGAlRZYc6ltJlMxX03UzlaRlBdQrzS' +
'CwksLRbOpHUSb7pcsnxCCwngvM2Rm/ugUCi84fycr4l2t8Bb6iqTxSCgNIAAAAAElFTk' +
'SuQmCC';
const hideIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQC' +
'AYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AA' +
'IDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAE+SURBVHja1JO/SsNwEMc/P7Fos2TqE1joL' +
'B3EpRQaobsUAj6AL9C9ce8L+ACOTlkKUiglIA5iHqAdOndpk9Ik/QXO4SeSSAShkwdf7' +
'nf3uzvurxIRjqETjqSjA5yWpPsbAA8YAeqHrQAPgMfjS3UGudZervUIxyHXWnAciu9c6' +
'1GutVf0UcUmJnfXUu/3jXB+TjafA3DW6UCaGpvJhPrTq6oMsL29BBC71zOKRsPw9dr8T' +
'6cAyn7+qC4hSxJs11WbIIAoguXSIIrYBAG266osSX6fQrbfA3DY7cCyYLs1sCyjK9hUl' +
'rC4agBIcziE2aw8g26XxXgMoJpv6+oMDmlqnH0f4phVGLIKQ4hj8H2awyGHNC2vroh8I' +
'2zVvLBVExm05YsjgzZFXdiqeUWfUgnvF+pPi9ReSnUP/ucxfQ4ASu+wNb1N4vcAAAAAS' +
'UVORK5CYII=';
addCSS(`
#icmeUAO {
z-index: 0;
position: relative;
margin-top: 0;
margin-bottom: 20px;
}
#icmeUAOTableContainer {
position: relative;
top: 0;
width: 830px;
height: 240px;
overflow: scroll;
}
#icmeUAOTableToggleContainer {
position: relative;
left: 0;
top: 0;
width: 200px;
}
#icmeUAOLinks {
position: absolute;
right: 0;
top: 0;
font-weight: bold;
}
.icmeUAOAward td:nth-child(1) { width: 65px; }
.icmeUAOAward td:nth-child(2) { width: 65px; }
.icmeUAOAward td:nth-child(3) div { height: 28px; overflow: hidden; }
.icmeUAOAward td:nth-child(4) { width: 70px; }
.icmeToggleList {
width: 16px;
height: 16px;
cursor: pointer;
}
.icmeUAOAward.icmeHidden .icmeToggleList { background-image: url(${unhideIcon}); }
.icmeUAOAward:not(.icmeHidden) .icmeToggleList { background-image: url(${hideIcon}); }
#icmeUAOTable .icmeUAOAward { display: none; }
#icmeUAOTable:not(.icmeHidden) .icmeUAOAward.icmeHidden { display: none !important; }
#icmeUAOTable.icmeAll .icmeUAOAward,
#icmeUAOTable.icmeNext .icmeUAOAward.icmeNext,
#icmeUAOTable.icmeBronze .icmeUAOAward.icmeBronze,
#icmeUAOTable.icmeSilver .icmeUAOAward.icmeSilver,
#icmeUAOTable.icmeGold .icmeUAOAward.icmeGold,
#icmeUAOTable.icmePlatinum .icmeUAOAward.icmePlatinum,
#icmeUAOTable.icmeHidden .icmeUAOAward.icmeHidden { display: table-row; }
`);
}
static loadHtml(listObjs, hiddenLists) {
const html = `
<div id="icmeUAO">
<p id="icmeUAOTableToggleContainer">
<a id="icmeUAOTableToggle" href="#">
<span style="display: none">Show upcoming awards</span>
<span>Hide upcoming awards</span>
</a>
</p>
<p id="icmeUAOLinks">
Display:
<a id="icmeAll" class="icmeUAOFilter" href="#">All</a>,
<a id="icmeNext" class="icmeUAOFilter" href="#">Next</a>,
<a id="icmeBronze" class="icmeUAOFilter" href="#">Bronze</a>,
<a id="icmeSilver" class="icmeUAOFilter" href="#">Silver</a>,
<a id="icmeGold" class="icmeUAOFilter" href="#">Gold</a>,
<a id="icmePlatinum" class="icmeUAOFilter" href="#">Platinum</a>,
<a id="icmeHidden" class="icmeUAOFilter" href="#">Hidden</a> |
<a id="icmeToggleSize" href="#">
<span style="display: none">Minimize</span>
<span>Maximize</span>
</a>
</p>
<div id="icmeUAOTableContainer" class="container">
<table id="icmeUAOTable" class="icmeAll">
<thead>
<tr>
<th>Awards</th>
<th>Checks</th>
<th>List title</th>
<th>(Un)Hide</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>`;
const sel = UpcomingAwardsOverview.matchesPageType('progress') ? '#listOrdering' : '#itemContainer';
$(sel).insertAdjacentHTML('beforebegin', html);
const htmlAwards = listObjs.map(({ listTitle, listUrl, awardType, neededForAward, isNext }) => `
<tr class="icmeUAOAward icme${awardType} ${isNext ? 'icmeNext' : ''}
${hiddenLists.includes(listUrl) ? 'icmeHidden' : ''}"
data-list-url="${listUrl}">
<td>${awardType}</td>
<td>${neededForAward}</td>
<td>
<div>
<a class="icmeListTitle" href="${listUrl}">${listTitle}</a>
</div>
</td>
<td>
<div class="icmeToggleList" title="Toggle the list's visibility"></div>
</td>
</tr>
`).join('');
$('#icmeUAOTable tbody').insertAdjacentHTML('beforeend', htmlAwards);
}
static addListeners(hiddenLists) {
const elAwards = [...$$('#icmeUAOTable .icmeUAOAward')];
const elTable = $('#icmeUAOTable');
elTable.addEventListener('click', e => {
if (!e.target.classList.contains('icmeToggleList')) return;
e.preventDefault();
const { listUrl } = e.target.closest('.icmeUAOAward').dataset;
const index = hiddenLists.indexOf(listUrl);
const isVisible = index === -1;
if (isVisible) {
hiddenLists.push(listUrl);
} else {
hiddenLists.splice(index, 1);
}
elAwards
.filter(el => el.dataset.listUrl === listUrl)
.forEach(el => { el.classList.toggle('icmeHidden'); });
save('icme_hidden_lists', hiddenLists);
});
const elToggle = $('#icmeUAOTableToggle');
elToggle.addEventListener('click', e => {
e.preventDefault();
const els = $$('#icmeUAOLinks, #icmeUAOTableContainer');
[...els, ...elToggle.children].forEach(el => {
el.style.display = el.style.display === 'none' ? '' : 'none';
});
});
const elToggleSize = $('#icmeToggleSize');
const elContainer = $('#icmeUAOTableContainer');
elToggleSize.addEventListener('click', e => {
e.preventDefault();
elContainer.style.height = elContainer.style.height === 'auto' ? '240px' : 'auto';
[...elToggleSize.children].forEach(el => {
el.style.display = el.style.display === 'none' ? '' : 'none';
});
});
$$('.icmeUAOFilter').forEach(elFilter => elFilter.addEventListener('click', e => {
e.preventDefault();
elTable.className = elFilter.id; // switch to data attr if you add more classes to table
}));
}
}
class CustomMovieColors extends BaseModule {
constructor(globalCfg) {
super(globalCfg);
this.metadata = {
title: 'Custom movie colors',
desc: 'Set movie colors on lists for your favs/watchlist/dislikes',
id: 'movie_colors',
enableOn: ['movieList', 'movieListGeneral', 'movieListSpecial', 'movieSearch',
'listsGeneral', 'listsSpecial'],
options: [BaseModule.getStatus(true), {
id: 'favorite',
desc: 'Favorites',
type: 'textinputcolor',
default: '#ffdda9',
}, {
id: 'watchlist',
desc: 'Watchlist',
type: 'textinputcolor',
default: '#ffffd6',
}, {
id: 'disliked',
desc: 'Disliked',
type: 'textinputcolor',
default: '#ffad99',
}],
};
}
attach() {
const colors = [
['favorite', this.config.favorite],
['watch', this.config.watchlist],
['hated', this.config.disliked]];
const buildCSS = ([className, color]) => {
const sel = `#itemListMovies li.${className}`;
return `${sel}, ${sel} ul.optionIconMenu { background-color: ${color} !important; }`;
};
addCSS(colors.map(buildCSS).join(''));
}
}
class ListCrossRef extends BaseModule {
constructor(globalCfg) {
super(globalCfg);
this.metadata = {
title: 'Cross-reference lists',
desc: 'Cross-reference lists to find which movies they share',
id: 'list_cross_ref',
enableOn: ['listsGeneral', 'listsSpecial', 'progress'],
options: [BaseModule.getStatus(true), {
id: 'match_all',
desc: 'Find movies that appear on all selected lists',
type: 'checkbox',
default: false,
}, {
id: 'match_min',
desc: 'Otherwise, find movies that appear on at least N lists (N > 1)',
type: 'textinput',
default: 2,
}, {
id: 'unchecked_only',
desc: 'Find only unchecked movies',
type: 'checkbox',
default: true,
}],
};
}
attach() {
if (!$('.listItemToplist')) return;
const htmlActions = `
<div id="icmeCRActions">
Cross-reference lists:
<button id="icmeCRStartSel">Start selection</button>
<button id="icmeCRCancelSel">Cancel selection</button>
<button id="icmeCRSelectAll">Select all</button>
<button id="icmeCRRun">Run</button>
</div>`;
const sel = ListCrossRef.matchesPageType('progress') ? '#listOrdering' : '#itemContainer';
$(sel).insertAdjacentHTML('beforebegin', htmlActions);
addCSS(`
#icmeCRActions { margin-bottom: 18px; }
#icmeCRActions:not(.icmeCRSelecting) :not(#icmeCRStartSel) { display: none; }
#icmeCRActions.icmeCRSelecting #icmeCRStartSel { display: none; }
.icmeCRSelected, .icmeCRSelected .progress {
background-color: #bbbbbb !important;
}
.icmeCRHover, .icmeCRHover .progress {
background-color: #cccccc !important;
}
.icmeCRPending, .icmeCRPending .progress {
background-color: #ffffb2 !important;
}
`);
this.selectionStarted = false;
this.attachSelectionHandlers();
const elActions = $('#icmeCRActions');
const [elStart, elCancel, elSelectAll, elRun] = $$('#icmeCRActions button');
elStart.addEventListener('click', () => {
elActions.classList.add('icmeCRSelecting');
this.selectionStarted = true;
});
elCancel.addEventListener('click', () => {
elActions.classList.remove('icmeCRSelecting');
this.selectionStarted = false;
$$('.icmeCRSelected, .icmeCRHover').forEach(el => {
el.classList.remove('icmeCRSelected', 'icmeCRHover');
});
});
elSelectAll.addEventListener('click', () => {
// Select lists only from the active tab (for /progress/)
$$(':is(ol[id^=progress]:not([style*=none]), #itemListToplists) .listItemToplist').forEach(el => {
el.classList.add('icmeCRSelected');
});
});
const setButtonState = bool => [elCancel, elSelectAll, elRun].forEach(el => {
el.disabled = bool;
});
elRun.addEventListener('click', () => {
setButtonState(true);
this.selectionStarted = false;
this.run().then(() => {
setButtonState(false);
elActions.classList.remove('icmeCRSelecting');
});
});
}
attachSelectionHandlers() {
const eventTypes = ['click', 'mouseover', 'mouseout'];
const elContainers = $$('ol[id^=progress], #itemListToplists');
for (const type of eventTypes) {
elContainers.forEach(elContainer => elContainer.addEventListener(type, e => {
const elList = e.target.closest('.listItemToplist');
if (!this.selectionStarted || !elList) return;
if (e.type === 'mouseover') {
elList.classList.add('icmeCRHover');
} else if (e.type === 'mouseout') {
elList.classList.remove('icmeCRHover');
} else if (e.type === 'click') {
elList.classList.toggle('icmeCRSelected');
}
}));
}
}
async run() {
const elLists = [...$$('.icmeCRSelected')];
const results = await this.fetchMovies(elLists);
const counter = {};
results.forEach(elMovies => ListCrossRef.updateCounter(elMovies, counter));
this.output(elLists, counter);
}
async fetchMovies(elLists) {
const sel = `#itemListMovies > li${this.config.unchecked_only ? '.unchecked' : ''}`;
const results = [];
for (const elList of elLists) {
const url = elList.querySelector('a.title').href;
elList.classList.add('icmeCRPending');
/* eslint-disable no-await-in-loop -- Load pages one by one to reduce the load */
const elMovies = await extractFrom(url, el => el.querySelectorAll(sel));
results.push(elMovies);
await sleep(500);
/* eslint-enable no-await-in-loop */
elList.classList.remove('icmeCRPending', 'icmeCRSelected');
}
return results;
}
static updateCounter(elMovies, counter) {
elMovies.forEach(elMovie => {
const { id } = elMovie;
if (counter[id]) {
counter[id].count += 1;
return;
}
// Compatibility with the NewTabs module
const owned = load('icme_owned_movies') ?? {};
if (owned[id]) {
elMovie.classList.remove('notowned');
elMovie.classList.add('owned');
}
const elTitle = elMovie.querySelector('h2 a');
const title = elTitle.textContent.trim();
const url = elTitle.href;
const year = elMovie.querySelector('.info > a:first-of-type').textContent;
counter[id] = { count: 1, title, url, year, el: elMovie };
});
}
output(elLists, counter) {
let cutoff = this.config.match_all ? elLists.length : this.config.match_min;
cutoff = Math.max(2, cutoff); // doesn't make sense to have a cutoff lower than 2
const isOnEnoughLists = id => counter[id].count >= Math.max(2, cutoff);
const movies = Object.keys(counter).filter(isOnEnoughLists).map(k => counter[k]);
// Sort by checks DESC, then by year ASC, then by title ASC
movies.sort((a, b) =>
b.count - a.count || a.year - b.year || a.title.localeCompare(b.title));
// Collapse visible lists from previous runs
$$('.topListMoviesFilter.active a').forEach(el => el.click());
const listTitles = elLists.map(el => `
<li><b>${el.querySelector('.title').textContent.trim()}</b></li>
`);
const sel = ListCrossRef.matchesPageType('progress') ? '#progressall' : '#itemContainer';
$(sel).insertAdjacentHTML('afterend', `
<div class="icmeCRResults">
${movies.length} ${this.config.unchecked_only ? 'unchecked' : ''} movies
appear on ${this.config.match_all ? 'all' : `at least ${cutoff}`} of these lists:
<ul>${listTitles.join('')}</ul>
</div>
`);
if (!movies.length) return;
const elResults = $('.icmeCRResults');
elResults.insertAdjacentHTML('beforeend', `
<ul class="tabMenu tabMenuPush">
<li class="topListMoviesFilter active">
<a href="#" title="View all movies">All (${movies.length})</a>
</li>
<li class="icmeCRExport">
<a href="#" title="Export all movies in CSV format">Export CSV</a>
</li>
</ul>
<ol id="itemListMovies" class="itemList listViewNormal"></ol>
`);
// Target only the topmost list (in case there are several)
const elMovieList = elResults.querySelector('#itemListMovies');
for (const movie of movies) {
movie.el.querySelector('.rank').innerHTML = movie.count;
movie.el.style.display = ''; // movies from fetched lists might be hidden
elMovieList.append(movie.el);
}
elResults.scrollIntoView(); // scroll only after all elements have been added
// Make movie lists collapsible
elResults.querySelector('.topListMoviesFilter a').addEventListener('click', e => {
e.preventDefault();
const elMovieFilter = e.target.parentElement;
elMovieFilter.classList.toggle('active');
elMovieList.style.display = elMovieFilter.classList.contains('active') ? '' : 'none';
});
// Allow exporting results as a .csv file
const elExport = elResults.querySelector('.icmeCRExport a');
const filename = 'Cross-referencing results';
const { delimiter, bom } = this.globalCfg.data.export_lists;
// eslint-disable-next-line no-use-before-define
ExportLists.export(elExport, elMovieList.children, filename, delimiter, bom);
}
}
class HideTags extends BaseModule {
constructor(globalCfg) {
super(globalCfg);
this.metadata = {
title: 'Hide tags',
desc: 'Hide tags on movie lists and lists of lists in normal view',
id: 'hide_tags',
// ICM bug: movieListGeneral and movieSearch never have tags
enableOn: ['listsGeneral', 'listsSpecial', 'listsSearch',
'movieList', 'movieListGeneral', 'movieListSpecial', 'movieSearch', 'movieRankings'],
options: [BaseModule.getStatus(false), {
id: 'list_tags',
frontDesc: 'Hide on: ',
desc: 'lists',
type: 'checkbox',
inline: true,
default: true,
}, {
id: 'movie_tags',
desc: 'movies',
type: 'checkbox',
inline: true,
default: true,
}, {
id: 'show_on_hover',
desc: 'Show tags when moving the cursor over a movie or a list',
type: 'checkbox',
default: false,
}],
};
}
attach() {
if (this.config.list_tags) {
// /lists/ and /movies/<title>/rankings/ have different structure
addCSS(`
#itemListToplists.listViewNormal > li > .info:last-child,
#itemListToplists > li > .tagList {
display: none !important;
}
`);
}
if (this.config.movie_tags) {
addCSS(`
#itemListMovies.listViewNormal > li > .tagList {
display: none !important;
}
`);
}
if (this.config.show_on_hover) {
addCSS(`
#itemListToplists.listViewNormal > li:hover > .info:last-child,
#itemListToplists > li:hover > .tagList,
#itemListMovies.listViewNormal > li:hover > .tagList {
display: block !important;
}
`);
}
}
}
class NewTabs extends BaseModule {
constructor(globalCfg) {
super(globalCfg);
this.metadata = {
title: 'New tabs',
desc: 'Add additional tabs on movie lists',
id: 'new_tabs',
enableOn: ['movieList', 'movieListGeneral', 'movieListSpecial', 'movieSearch',
'movie', 'movieRankings'],
options: [BaseModule.getStatus(false), {
id: 'owned_tab',
frontDesc: 'Create tabs for: ',
desc: 'owned movies',
type: 'checkbox',
inline: true,
default: false,
}, {
id: 'wlist_tab',
desc: 'watchlisted movies',
type: 'checkbox',
inline: true,
default: false,
}, {
id: 'free_account',
desc: 'Store owned movies (emulates the paid feature; ' +
'enable only if you have a free account)',
type: 'checkbox',
default: false,
}],
};
}
attach() {
if (this.config.free_account) NewTabs.trackOwned();
if (!$('#itemListMovies')) return;
if (NewTabs.matchesPageType('movieList') && (this.config.wlist_tab || this.config.owned_tab)) {
NewTabs.prepareTabBar();
if (this.config.wlist_tab) NewTabs.addNewTab('watch', 'watchlist', 'optionAddWatchlist');
if (this.config.owned_tab) NewTabs.addNewTab('owned', 'owned', 'optionMarkOwned');
}
}
static prepareTabBar() {
// Gain some extra space in the tab bar
const elAllTab = $('#listFilterMovies a');
elAllTab.textContent = elAllTab.textContent.replace(' movies', '');
// Move the 'order by' and view switch elements to the list title
$('#topList').insertAdjacentHTML('beforeend', `
<div id="icmeOrderByAndView"></div>
`);
addCSS(`
#icmeOrderByAndView {
z-index: 200;
position: absolute;
top: 30px;
right: 0;
width: 300px;
height: 20px;
}
`);
const elOrderBy = $('#listOrdering');
const elView = $('#listViewswitch');
$('#icmeOrderByAndView').append(elOrderBy, elView);
}
static addNewTab(itemClass, title, btnClass) {
const elMovieList = $('#itemListMovies');
title = title.toLowerCase();
const titleCap = title[0].toUpperCase() + title.slice(1);
const count = elMovieList.querySelectorAll(`:scope > li.${itemClass}`).length;
const tabHtml = `
<li id="listFilter${titleCap}" class="topListMoviesFilter">
<a title="View all your ${title} movies" href="#">
${titleCap}
<span id="topListMovies${titleCap}Count">(${count})</span>
</a>
</li>`;
$('#listFilterNew').insertAdjacentHTML('beforebegin', tabHtml);
const elTabLink = $(`#listFilter${titleCap} a`);
elTabLink.addEventListener('click', e => {
e.preventDefault();
elMovieList.querySelectorAll(':scope > li.listItem')
.forEach(el => { el.style.display = 'none'; });
elMovieList.querySelectorAll(`:scope > li.${itemClass}`)
.forEach(el => { el.style.display = ''; });
$('#topListAllMovies').style.display = 'none'; // hide 'Show all'
const elTab = elTabLink.parentElement;
elTab.parentElement.querySelector('.active').classList.remove('active');
elTab.classList.add('active');
});
// To work around the owned button click bubbling to ICM, the button stops propagation,
// so the tab count update must happen before that, at the capturing phase
elMovieList.addEventListener('click', e => {
if (!e.target.classList.contains(btnClass)) return;
const curCount = elMovieList.querySelectorAll(`:scope > li.${itemClass}`).length;
// This capture happens before the movie class is updated (by ICM or the script)
const delta = e.target.closest('li.listItem').classList.contains(itemClass) ? -1 : 1;
$(`#topListMovies${titleCap}Count`).textContent = `(${curCount + delta})`;
}, true);
}
static trackOwned() {
const owned = load('icme_owned_movies') ?? {};
const elMarkOwnedArr = $$('.optionMarkOwned');
elMarkOwnedArr.forEach(elMarkOwned => {
const elCheckbox = elMarkOwned.closest('.optionIconMenu').previousElementSibling;
const elMovie = elCheckbox.parentElement;
const id = elCheckbox.id.replace('check', 'movie');
if (owned[id]) {
elMovie.classList.remove('notowned');
elMovie.classList.add('owned');
}
elMarkOwned = removePremiumPopup(elMarkOwned);
elMarkOwned.addEventListener('click', e => {
e.preventDefault();
// ICM intercepts clicks by the class name, throwing an error in the console
e.stopPropagation();
// Storage could've changed in the meanwhile in other tabs
const ownedFresh = load('icme_owned_movies') ?? {};
if (ownedFresh[id]) {
delete ownedFresh[id];
} else {
ownedFresh[id] = true;
}
elMovie.classList.toggle('notowned');
elMovie.classList.toggle('owned');
save('icme_owned_movies', ownedFresh);
});
});
}
}
class LargePosters extends BaseModule {
constructor(globalCfg) {
super(globalCfg);
this.metadata = {
title: 'Large posters',
desc: 'Show large posters on individual lists (replaces normal view)',
id: 'large_posters',
enableOn: ['movieList', 'movieListGeneral', 'movieListSpecial'],
options: [BaseModule.getStatus(true), {
id: 'default_view',
desc: 'Use as the default list view',
type: 'checkbox',
default: false,
}, {
id: 'noinfo',
desc: 'Hide info (title, year, lists)',
type: 'checkbox',
default: false,
}],
};
}
attach() {
if (!$('#itemListMovies')) return;
if (this.config.default_view) {
this.load();
return;
}
const link = `
<span style="float: right; margin-left: 15px">
<a id="icmeLPLink" href="#">Large posters</a>
</span>`;
addToMovieListBar(link);
const elLink = $('#icmeLPLink');
elLink.addEventListener('click', e => {
e.preventDefault();
this.load();
elLink.remove();
});
}
load() {
const root = '#itemListMovies.listViewNormal';
let css = `
${root} > .listItem {
float: left;
width: 255px;
}
${root} .listItem .listImage {
float: none;
width: 230px;
height: 305px;
left: -18px;
top: -18px;
margin: 0;
}
${root} .listImage a {
width: 100%;
height: 100%;
background: url("/images/dvdCover.png") no-repeat scroll center center transparent;
}
${root} .listImage .coverImage {
width: 190px;
height: 258px;
top: 21px;
left: 19px;
right: auto;
}
${root} .listItem .rank {
top: 15px;
position: absolute;
height: auto;
width: 65px;
right: 0;
margin: 0;
font-size: 30px;
}
${root} .listItem .rank .positiondifference span { font-size: 12px; }
${root} .listItem h2 {
z-index: 11;
font-size: 14px;
width: 100%;
margin:-30px 0 0 0;
}
${root} .listItem .info {
font-size: 12px;
width: 100%;
height: auto;
line-height: 16px;
margin-top: 4px;
}
${root} .checkbox { top: 85px; right: 12px; }
${root} .optionIconMenu { top: 120px; right: 20px; }
${root} .optionIconMenu li { display: block; }
${root} .optionIconMenuCheckbox { right: 20px; }
${root}.icmeLPNoInfo :is(h2, .tagList, .info) { display: none; }
${root}.icmeLPNoInfo .listItem { height: 270px; }
#itemListMovies.listViewCompact > .listItem { height: auto; }
`;
css = css.replace(/;/g, ' !important;');
addCSS(css);
// Normal view is used as the basis for the large posters view
LargePosters.enableNormalView();
$$('#itemListMovies div.coverImage').forEach(elCover => {
elCover.style.display = 'none';
const imgUrl = elCover.style.backgroundImage.split('"')[1]
.replace('/small/', '/medium/')
.replace('defaultCoverSmall', 'defaultCoverMedium');
const imgHtml = `<img class="coverImage" src="${imgUrl}" loading="lazy">`;
elCover.insertAdjacentHTML('afterend', imgHtml);
});
if (this.config.noinfo) {
$('#itemListMovies').classList.add('icmeLPNoInfo');
} else {
// Imitate click on the 'Show all' button
const elShowAllBtn = $('#topListAllMovies');
if (elShowAllBtn) {
$$('#itemListMovies > .listItem')
.forEach(el => { el.style.display = ''; });
elShowAllBtn.style.display = 'none';
}
// Tags and long titles (if they are shown) can increase item's height
LargePosters.adjustHeights();
}
}
static enableNormalView() {
const [elNormalView, elCompactView] = $$('#listViewswitch a');
if (elNormalView.classList.contains('active')) return;
// Modified from ICM source code (triggering the click event requires @run-at document-idle)
elCompactView.classList.remove('active');
elNormalView.classList.add('active');
const elList = $('.itemList');
elList.classList.replace('listViewCompact', 'listViewNormal');
}
static adjustHeights() {
const getHeight = el => parseFloat(getComputedStyle(el).height);
$$('.listItemMovie:nth-child(3n-2)').forEach(el1 => {
const el2 = el1.nextElementSibling ?? el1;
const el3 = el2.nextElementSibling ?? el1;
const maxHeight = Math.max(...[el1, el2, el3].map(getHeight));
[el1, el2, el3].forEach(el => {
el.style.height = `${maxHeight}px`;
});
});
}
}
class ProgressPage extends BaseModule {
constructor(globalCfg) {
super(globalCfg);
this.metadata = {
title: 'Progress page',
desc: 'Change the order of lists on the progress page.<br>All settings can be toggled ' +
'without reloading the page; click on the tab label to apply them',
id: 'progress_page',
enableOn: ['progress'],
options: [BaseModule.getStatus(false), {
id: 'sort_by_completion',
frontDesc: '',
desc: 'Sort lists by completion rate',
type: 'checkbox',
inline: true,
default: true,
}, {
id: 'desc_order',
desc: 'in descending order',
type: 'checkbox',
inline: true,
default: true,
}, {
id: 'left_to_right',
desc: 'Fill columns from left to right',
type: 'checkbox',
default: false,
}, {
id: 'single_col',
desc: 'Show as a single column',
type: 'checkbox',
default: false,
}, {
id: 'hide_imdb',
desc: 'Hide IMDb lists from "All" tab',
type: 'checkbox',
default: false,
}],
};
}
attach() {
addCSS('.itemList.icmePPSingleCol .listItem.listItemProgress { float: none !important; }');
this.originalOrder = {};
this.rearrange('all');
const elFilters = $$('#progressFilter [id^=progressFilter-]');
elFilters.forEach(el => el.addEventListener('click', () => {
const [, section] = el.id.split('-');
this.rearrange(section);
}));
}
rearrange(section) {
const elContainer = $(`#progress${section}`);
elContainer.classList.toggle('icmePPSingleCol', this.config.single_col);
let elLists = [...elContainer.children];
elLists.forEach(el => el.remove());
elLists = ProgressPage.straighten(elLists);
// Remember the original order at the page load (elLists must not be mutated)
if (!this.originalOrder[section]) {
this.originalOrder[section] = elLists;
}
// Undo further manipulations in case settings have changed
elLists = this.originalOrder[section];
if (this.config.sort_by_completion) {
const order = this.config.desc_order === true ? -1 : 1;
const getWidth = el => parseFloat(el.querySelector('.progress').style.width);
const widths = new Map(elLists.map(el => [el, getWidth(el)]));
elLists = [...elLists].sort((a, b) => order * (widths.get(a) - widths.get(b)));
}
if (this.config.hide_imdb && section === 'all') {
elLists = elLists.filter(el => !el.classList.contains('imdb'));
}
if (!this.config.single_col && !this.config.left_to_right) {
// Restore the default two-column view
elLists = ProgressPage.interweave(elLists);
}
elContainer.append(...elLists);
}
// [1, 'a', 2, 'b', 3, 'c'] -> [1, 2, 3, 'a', 'b', 'c']
// [1, 'a', 2, 'b', 3, 'c', 4] -> [1, 2, 3, 4, 'a', 'b', 'c']
static straighten(list) {
const even = list.filter((_, i) => i % 2 === 0);
const odd = list.filter((_, i) => i % 2 !== 0);
return [...even, ...odd];
}
// [1, 2, 3, 'a', 'b', 'c'] -> [1, 'a', 2, 'b', 3, 'c']
// [1, 2, 3, 4, 'a', 'b', 'c'] -> [1, 'a', 2, 'b', 3, 'c', 4]
static interweave(list) {
const res = [];
const halfLen = Math.ceil(list.length / 2);
for (let i = 0; i < halfLen; i++) {
res.push(list[i]);
if (i + halfLen < list.length) {
res.push(list[i + halfLen]);
}
}
return res;
}
}
class GroupMovieLists extends BaseModule {
constructor(globalCfg) {
super(globalCfg);
this.metadata = {
title: 'Group movie lists',
desc: 'Organize a movie\'s "In lists" tab (<a href="/movies/pulp+fiction/rankings/">' +
'example</a>) by grouping lists together and moving them to the top.<br>To create ' +
'a group with your watchlisted/fav. lists click "Copy urls for a list group" ' +
'on their page and paste into the fields below. You can also edit the groups manually',
id: 'group_movie_lists',
enableOn: ['movie', 'movieList', 'movieListGeneral', 'movieListSpecial',
'movieRankings', 'movieSearch', 'listsGeneral', 'listsSpecial'],
options: [BaseModule.getStatus(true), {
id: 'redirect',
desc: 'Redirect "in # lists" links to the tab with all lists',
type: 'checkbox',
inline: true,
default: true,
}, {
id: 'by_name',
desc: 'sorted by name',
type: 'checkbox',
inline: true,
default: false,
}, {
id: 'sort_official',
frontDesc: 'Move to the top: ',
desc: 'official',
type: 'checkbox',
inline: true,
newline: true,
default: true,
}, {
id: 'sort_own',
desc: 'created by you',
type: 'checkbox',
inline: true,
default: true,
}, {
id: 'sort_groups',
desc: 'from groups 1-2',
type: 'checkbox',
inline: true,
default: true,
}, {
id: 'sort_filmos',
desc: 'filmographies',
type: 'checkbox',
inline: true,
default: true,
}, {
id: 'sort_nonpersonal',
desc: 'non-personal',
type: 'checkbox',
inline: true,
default: true,
}, {
id: 'group1',
desc: 'Group 1',
type: 'textarea',
default: [],
}, {
id: 'group2',
desc: 'Group 2',
type: 'textarea',
default: [],
}],
};
// multiline regex that leaves only list name, excl. a common beginning and parameters
this.reURL = /^[ \t]*(?:https?:\/\/)?(?:www\.)?(?:icheckmovies.com)?\/?(?:lists)?\/?([^?\s]+\/)(?:\?.+)?[ \t]*$/gm;
}
attach() {
if (GroupMovieLists.matchesPageType('movieRankings')) this.reorderLists();
if (GroupMovieLists.matchesPageType('listsSpecial')) GroupMovieLists.addExportLink();
if (!this.config.redirect) return;
this.fixLinks();
this.fixLinksInNewNodes();
}
reorderLists() {
addCSS(`
.icmeGMLGroupEnd:not(:last-child) {
margin-bottom: 25px;
border-bottom: 2px solid #555;
}
`);
const elContainer = $('#itemListToplists');
let lists = [...elContainer.children];
const isNotInArr = toExclude => el => !toExclude.includes(el);
const getShortUrl = el => el.querySelector('a.title').pathname.slice(7);
const group1Urls = this.getGroup('group1');
const group2Urls = this.getGroup('group2');
const username = $('.showProfileOptions').href.match(/profiles\/(.+)\//)?.[1];
const groupLogic = [
{
option: this.config.sort_official,
isInGroup: el =>
el.querySelector('.tagList a[href$="user%3Aicheckmovies"]') &&
// ICM bug: deleted lists reset to icheckmovies user
!el.querySelector('.title').href.endsWith('//'),
}, {
option: this.config.sort_own,
isInGroup: el => el.querySelector(`.tagList a[href$="user%3A${username}"]`),
}, {
option: this.config.sort_groups,
isInGroup: el => group1Urls.includes(getShortUrl(el)),
}, {
option: this.config.sort_groups,
isInGroup: el => group2Urls.includes(getShortUrl(el)),
}, {
option: this.config.sort_filmos,
isInGroup: el => el.textContent.toLowerCase().includes('filmography'),
}, {
option: this.config.sort_nonpersonal,
isInGroup: el => !el.querySelector('.tagList a[href$="category%3Apersonal"]'),
},
];
for (const { option, isInGroup } of groupLogic) {
if (!option) continue;
const group = lists.filter(isInGroup);
GroupMovieLists.move(group, elContainer);
lists = lists.filter(isNotInArr(group));
}
}
static move(elLists, elContainer) {
if (!elLists.length) return;
const elGroupEnds = elContainer.querySelectorAll('.icmeGMLGroupEnd');
if (elGroupEnds.length) {
elGroupEnds[elGroupEnds.length - 1].after(...elLists);
} else {
elContainer.prepend(...elLists);
}
elLists[elLists.length - 1].classList.add('icmeGMLGroupEnd');
}
getGroup(group) {
let groupUrls = this.config[group];
if (typeof groupUrls !== 'string') return groupUrls;
console.log(`GroupMovieLists: parsing ${group}`);
groupUrls = groupUrls.trim().replace(this.reURL, '$1').split('\n');
this.config[group] = groupUrls;
this.globalCfg.save();
return groupUrls;
}
static addExportLink() {
addNearOrderByLinks(`
<a id="icmeGMLLink" class="icmeOrderByLink" href="#">Copy urls for a list group</a>
`);
$('#icmeGMLLink').addEventListener('click', e => {
e.preventDefault();
const listLinks = [...$$('#itemListToplists > li')]
.filter(el => !el.querySelector('.tagList a[href$="user%3Aicheckmovies"'))
.map(el => el.querySelector('.title').href.split('/lists/')[1]);
const msg = 'Done! Now you can paste the urls into the "Group 1/Group 2" fields in the "Group movie lists" settings.';
navigator.clipboard.writeText(listLinks.join('\n')).then(() => alert(msg));
});
}
fixLinks(elContainer = document) {
const sel = '.listItemMovie .info a[href*="/rankings/"], #listFilterLists a';
const elLinks = elContainer.querySelectorAll(sel);
elLinks.forEach(el => {
el.href = el.href.replace('?tags=user:icheckmovies', '');
el.href += this.config.by_name ? '?sort=name' : '';
});
}
// Cross-referencing adds new blocks that must also be fixed
fixLinksInNewNodes() {
const onListOfLists = GroupMovieLists.matchesPageType(['listsGeneral', 'listsSpecial']);
const isCREnabled = this.globalCfg.data.list_cross_ref.enabled;
const elCRActions = $('#icmeCRActions');
if (!onListOfLists || !isCREnabled || !elCRActions) return;
const mut = new MutationObserver(mutList => mutList.forEach(({ addedNodes }) => {
for (const el of addedNodes) {
if (el.classList?.contains('icmeCRResults')) {
this.fixLinks(el);
}
}
}));
mut.observe(elCRActions.parentElement, { childList: true });
}
}
class ExportLists extends BaseModule {
constructor(globalCfg) {
super(globalCfg);
this.metadata = {
title: 'Export lists',
desc: 'Download any list as .csv (doesn\'t support search results).<br>' +
'Emulates the paid feature, enable only if you have a free account. Keep in mind ' +
'that some sites (like Letterboxd) accept only comma-separated .csv',
id: 'export_lists',
enableOn: ['movieList', 'movieListGeneral', 'movieListSpecial'],
options: [BaseModule.getStatus(false), {
id: 'delimiter',
desc: 'Use as delimiter (accepts \';\' or \',\'; otherwise uses \\t)',
type: 'textinput',
default: ',',
}, {
id: 'bom',
desc: 'Include BOM (required for Excel)',
type: 'checkbox',
default: true,
}],
};
}
attach() {
if (!$('#itemListMovies')) return;
let elExport = $('.optionExport');
if (!elExport) { // /movies/unchecked/, /movies/checked/
$('#listTitle').insertAdjacentHTML('afterbegin', `
<ul class="optionIconMenu">
<li>
<a class="optionIcon optionExport" href="#" title="Export this list to CSV">
Export this list to CSV
</a>
</li>
</ul>
`);
elExport = $('.optionExport');
}
elExport = removePremiumPopup(elExport);
const elMovies = $$('#itemListMovies > li');
const filename = $(':is(#topList, #listTitle) > h1').textContent;
ExportLists.export(elExport, elMovies, filename, this.config.delimiter, this.config.bom);
}
static export(elExport, elMovies, filename, sep, useBom) {
if (sep !== ',' && sep !== ';') sep = '\t';
const wrap = field => (field.includes('"') || field.includes(sep) ?
`"${field.replace(/"/g, '""')}"` : field);
const colNames = ['rank', 'title', 'aka', 'year', 'official_toplists',
'checked', 'favorite', 'dislike', 'imdburl'];
elExport.addEventListener('click', () => {
const rows = [...elMovies].map(el => {
const rank = el.querySelector('.rank')?.textContent.match(/\d+/)[0] ?? '-';
const title = wrap(el.querySelector('h2 > a').textContent);
const aka = wrap(el.querySelector('.info > em')?.textContent ?? '');
const year = el.querySelector('.info > a:first-of-type')?.textContent ?? '';
const toplists = el.querySelector('.info > a:nth-of-type(2)')?.textContent.match(/\d+/)[0] ?? 0;
const checked = el.classList.contains('checked') ? 'yes' : 'no';
const isFav = el.classList.contains('favorite') ? 'yes' : 'no';
const isDislike = el.classList.contains('hated') ? 'yes' : 'no';
const imdbUrl = el.querySelector('.optionIMDB').href;
const cols = [rank, title, aka, year, toplists, checked, isFav, isDislike, imdbUrl];
return `${cols.join(sep)}`;
});
const data = `${colNames.join(sep)}\n${rows.join('\n')}`;
// For Excel compat: BOM, ; or , as separator and no sep=
const bom = useBom ? '\uFEFF' : '';
elExport.href = `data:text/csv;charset=utf-8,${bom}${encodeURIComponent(data)}`;
elExport.download = `${filename}.csv`;
}, { once: true });
}
}
class ProgressTopX extends BaseModule {
constructor(globalCfg) {
super(globalCfg);
this.metadata = {
title: 'Progress: checks for Top-1000',
desc: 'Find out how many checks you need to get into Top-25/50/100/1000/...' +
'<br>Adds a link to the progress page that will attach this number to each list.',
id: 'progress_top_x',
enableOn: ['progress'],
options: [BaseModule.getStatus(true), {
id: 'target_page',
desc: 'Ranking page you want to be on (page x 25 = rank)',
type: 'textinput',
default: '40',
}],
};
}
attach() {
addNearOrderByLinks(`
<a id="icmePTXLink" class="icmeOrderByLink" href="#">
Checks to get into Top-${Number(this.config.target_page) * 25}
</a>
`);
const elLink = $('#icmePTXLink');
// Can't pass the value directly in case of user changing it and not reloading
elLink.addEventListener('click', event => this.addStats(event));
}
addStats(event) {
event.preventDefault();
const targetPage = Number(this.config.target_page); // * 25 = target rank
const elActiveTab = [...$$('.itemListCompact[id^="progress"]')]
.filter(el => el.style.display !== 'none')[0];
const elListsWithoutStats = [...elActiveTab.children]
.filter(el => !el.querySelector('.rank a:first-child'));
const lists = elListsWithoutStats.map(elList => ({
elTarget: elList.querySelector('.rank'),
listUrl: elList.querySelector('.title').href,
checks: Number(elList.querySelector('.rank').textContent.match(/\d+|-/g)[0]),
rank: Number(elList.querySelector('.rank').textContent.match(/\d+|-/g)[2]),
}));
const getMinChecksFromTopusersPage = el => {
const elLastProfile = el.querySelector('.listItemProfile:last-child');
return Number(elLastProfile.querySelector('.info strong').textContent);
};
lists.forEach(async ({ elTarget, listUrl, checks, rank }) => {
if (rank < targetPage * 25) return; // don't skip NaNs for lists with 0 checks
// Pages higher than the last available page return the last page
const url = `${listUrl}topusers/?page=${targetPage}`;
const minChecks = await extractFrom(url, getMinChecksFromTopusersPage);
const dif = minChecks - checks;
const elText = elTarget.childNodes[0];
elText.remove();
elTarget.insertAdjacentHTML('afterbegin', `
<a href="${url}" title="Checks needed to get into Top-${targetPage * 25}">
${elText.textContent} - ${dif}
</a>
`);
});
}
}
class QuickListReorder extends BaseModule {
constructor(globalCfg) {
super(globalCfg);
this.metadata = {
title: 'Quick list reordering',
desc: 'Double-click a list\'s rank to edit it. ' +
'Hit Enter key or click outside to move the list to that position.',
id: 'quick_list_reorder',
enableOn: ['listsSpecial', 'movieListSpecial'],
options: [BaseModule.getStatus(true)],
};
}
attach() { // eslint-disable-line class-methods-use-this
const elContainer = $('#itemListToplists.sortable, #itemListMovies.sortable');
if (!elContainer) return; // /movies/checked/ are not sortable
let oldRank;
elContainer.addEventListener('dblclick', e => {
if (!e.target.matches('.rank')) return;
e.target.contentEditable = 'true';
e.target.focus();
oldRank = Number(e.target.textContent.trim());
});
elContainer.addEventListener('keydown', e => {
if (!e.target.matches('.rank') || e.which !== 13) return;
e.target.blur(); // sends the 'focusout' event
});
elContainer.addEventListener('focusout', e => {
if (!e.target.matches('.rank')) return;
const newRank = Number(e.target.textContent.trim());
QuickListReorder.moveList(oldRank, newRank, e.target, elContainer);
});
}
static moveList(oldRank, newRank, elRank, elContainer) {
const inProperRange = newRank > 0 && newRank <= elContainer.children.length;
if (!newRank || !inProperRange || newRank === oldRank) {
elRank.textContent = oldRank;
return;
}
const elList = elRank.closest('.listItem');
const elListToShift = elContainer.children[newRank - 1];
const moveDir = newRank < oldRank ? 'before' : 'after';
elListToShift[moveDir](elList);
// Modified from ICM source code
const { id } = $('#itemListToplists, #itemListMovies');
unsafeWindow.$.iCheckMovies.reOrderTypeSerializedItems[id] =
unsafeWindow.$('#itemListToplists, #itemListMovies').sortable('serialize');
unsafeWindow.$.iCheckMovies.reOrder(id);
}
}
// ----- Main -----
// Main application; initializes, registers and loads modules.
class App {
constructor(globalCfg) {
this.modules = [];
this.globalCfg = globalCfg;
this.configWindow = new ConfigWindow(globalCfg);
}
register(Module) {
const module = new Module(this.globalCfg);
this.modules.push(module);
module.syncGlobalCfg();
this.configWindow.addModule(module.metadata);
}
load() {
for (const m of this.modules) {
if (m.isOnSupportedPage()) {
if (m.config.enabled) {
console.log(`Attaching ${m.constructor.name}`);
m.attach();
} else {
console.log(`Skipping ${m.constructor.name}`);
}
}
}
this.configWindow.load();
}
}
const globalCfg = new GlobalCfg();
const useModules = [
RandomFilmLink,
HideTags,
UpcomingAwardsList,
CustomMovieColors,
UpcomingAwardsOverview,
ListCrossRef,
NewTabs,
LargePosters,
ProgressPage,
GroupMovieLists,
ExportLists,
ProgressTopX,
QuickListReorder,
];
const app = new App(globalCfg);
useModules.forEach(m => app.register(m));
app.load();
console.log('ICM Enhanced is ready.');
// Links for testing, make sure every attached module works (check the console):
// https://www.icheckmovies.com/lists/favorited/
// https://www.icheckmovies.com/profiles/progress/
// https://www.icheckmovies.com/lists/venice+film+festival+-+golden+lion/
// https://www.icheckmovies.com/movies/watchlist/
// https://www.icheckmovies.com/movies/metropolis/rankings/