`;
document.querySelector('div.lister-search').insertAdjacentHTML('afterend', uiHTML);
const innerIDs = [
'mode-list',
'mode-ratings',
'film-list',
'start',
'skip',
'retry',
'films-remaining',
'current-film',
'search-mode-box',
'search-mode',
'regexp-box',
'regexp',
'import',
'import-sel',
'file-import',
];
const camelCase = s => s.replace(/-[a-z]/g, m => m[1].toUpperCase());
// Main object for interacting with the script's UI; keys match element ids
const ui = Object.assign(...innerIDs.map(id => ({
[camelCase(id)]: document.getElementById(`ilh-${id}`),
})));
ui.freezables = [ui.modeList, ui.modeRatings, ui.filmList, ui.start, ui.regexp, ui.searchMode];
const elIMDbSearch = document.getElementById('add-to-list-search');
const elIMDbResults = document.getElementById('add-to-list-search-results');
// ----- HANDLERS AND ACTIONS -----
const convertRating = n => Math.ceil(n / 10) || 1; // 0..100 -> 1..10
// d3 skips a row if a row conversion function returns null
const joinOrSkip = (...fields) => (fields.includes(undefined) ? null : fields.join(','));
const rowConverters = {
imdb: row => joinOrSkip(row['Your Rating'], row.Const),
rym: row => joinOrSkip(row.Rating, row.Title),
// .csv exported from Criticker have spaces between column names
criticker: row => joinOrSkip(convertRating(+row.Score), row[' IMDB ID']),
};
const prepareImport = e => {
const isLegalParser = Boolean(rowConverters[e.target.value]); // in case of html-js mismatch
ui.fileImport.disabled = !isLegalParser;
};
const handleImport = e => {
const format = ui.importSel.value;
const reader = new FileReader();
reader.onload = event => {
const fileStr = event.target.result;
ui.filmList.value = d3.csvParse(fileStr, rowConverters[format]).join('\n');
};
const [file] = e.target.files;
reader.readAsText(file);
};
const RatingManager = {
rating: 0,
regex: /^([1-9]|10),(.*)$/i,
match: (line, mode, regex) => regex.exec(line),
processMatch: ([, rating, filmTitle], callback) => {
RatingManager.rating = rating;
callback(filmTitle);
},
afterClick: async (imdbID, callback) => {
console.log(`RatingManager::afterClick: Rating ${imdbID}`);
const moviePage = await fetch(
`http://www.imdb.com/title/${imdbID}/`,
{ credentials: 'same-origin' },
);
const authHash = new DOMParser()
.parseFromString(await moviePage.text(), 'text/html')
.getElementById('star-rating-widget')
.dataset.auth;
const params = {
tconst: imdbID,
rating: RatingManager.rating,
auth: authHash,
tracking_tag: 'list',
};
const postResp = await fetch('http://www.imdb.com/ratings/_ajax/title', {
method: 'POST',
body: new URLSearchParams(params),
credentials: 'same-origin',
});
if (postResp.ok) {
callback();
} else {
alert(`Rating failed. Status code ${postResp.status}`);
}
},
};
const ListManager = {
regex: /((?:tt|nm)\d+)/i, // IMDb IDs
match: (line, mode, regex) => ({
/* eslint-disable no-sparse-arrays */
// 'auto' - search for an id (if a string has one) or for a full non-empty string
auto: s => ListManager.regex.exec(s) || s && [, s],
imdbid: s => ListManager.regex.exec(s),
line: s => s && [, s],
regexp: s => regex.exec(s),
/* eslint-enable no-sparse-arrays */
})[mode](line),
processMatch: ([, filmTitle], callback) => callback(filmTitle),
afterClick: (imdbID, callback) => callback(),
};
const App = {
manager: ListManager,
films: [],
regexObj: null,
run: () => {
// Set the default value for the 'Regexp' mode
ui.regexp.value = App.manager.regex.source;
ui.importSel.addEventListener('change', prepareImport);
ui.fileImport.addEventListener('change', handleImport);
ui.searchMode.addEventListener('change', () => {
ui.regexpBox.style.display = ui.searchMode.value === 'regexp' ? '' : 'none';
ui.filmList.placeholder = searchModeHints[ui.searchMode.value];
});
ui.modeList.addEventListener('change', () => {
App.manager = ListManager;
ui.import.style.display = 'none';
ui.regexp.value = App.manager.regex.source;
ui.regexpBox.style.display = ui.searchMode.value === 'regexp' ? '' : 'none';
ui.searchModeBox.style.display = '';
ui.filmList.placeholder = searchModeHints[ui.searchMode.value];
});
ui.modeRatings.addEventListener('change', () => {
App.manager = RatingManager;
ui.import.style.display = '';
ui.regexp.value = App.manager.regex.source;
ui.regexpBox.style.display = '';
ui.searchModeBox.style.display = 'none';
ui.filmList.placeholder = searchModeHints.rating;
});
ui.start.addEventListener('click', () => {
// This will be used only for ListManager's 'regexp' mode or RatingManager
App.regexObj = new RegExp(ui.regexp.value, 'i');
// Disable relevant UI elements
ui.freezables.forEach(el => {
el.disabled = true;
});
App.films = ui.filmList.value.trim().split('\n');
App.handleNext();
});
// When the search popup loses focus, IMDb will hide it after 300 ms,
// so all button clicks that want to keep it visible need to be delayed
ui.skip.addEventListener('click', () =>
setTimeout(() => App.handleNext(), 350));
ui.retry.addEventListener('click', () =>
setTimeout(() => elIMDbSearch.dispatchEvent(new Event('keydown')), 350));
},
handleNext: () => {
if (App.films.length) {
App.search(App.films.shift());
} else { // if last film
App.reset();
}
},
reset: () => {
App.films = [];
App.regexObj = null;
ui.freezables.forEach(el => {
el.disabled = false;
});
ui.currentFilm.value = '';
elIMDbSearch.value = '';
},
search: line => {
line = line.trim();
ui.currentFilm.value = line;
ui.filmsRemaining.textContent = App.films.length;
ui.filmList.value = App.films.join('\n');
const result = App.manager.match(line, ui.searchMode.value, App.regexObj);
if (result) {
App.manager.processMatch(result, filmTitle => {
// Set imdb search input field to film title and trigger search
elIMDbSearch.value = filmTitle;
elIMDbSearch.dispatchEvent(new Event('keydown'));
});
} else {
App.handleNext();
}
},
};
// Handle clicks on search results by a user or the script
elIMDbResults.addEventListener('click', e => {
const imdbID = e.target.closest('a').dataset.const;
if (!imdbID || !imdbID.startsWith('tt')) return;
App.manager.afterClick(imdbID, () => {
setTimeout(() => App.handleNext(), REQUEST_DELAY);
});
});
// Monitor for changes to the search result box.
// If the search was for IMDb URL/ID, the only result is clicked automatically
const mut = new MutationObserver(mutList => mutList.forEach(({ addedNodes }) => {
if (!addedNodes.length || !/(nm|tt)\d{7}/i.test(ui.currentFilm.value)) return;
addedNodes[0].click();
}));
mut.observe(elIMDbResults, { childList: true });
App.run();