☰

Letterboxd Member Film Search

A script to search films on letterboxd user pages.

// ==UserScript==
// @name        Letterboxd Member Film Search
// @namespace   Letterboxd Scripts
// @require     https://raw.githubusercontent.com/leeoniya/uFuzzy/main/dist/uFuzzy.iife.min.js#md5=bb235b8e02b810454ff08e525eaad5bf
// @require     https://raw.githubusercontent.com/DVLP/localStorageDB/master/localdata.min.js#md5=97a20450ea0da49baf22e762a2468d0f
// @match       https://letterboxd.com/*/films/
// @match       https://letterboxd.com/*/films/page/*/
// @match       https://letterboxd.com/*/films/by/*/
// @match       https://letterboxd.com/*/films/by/*/page/*/
// @grant       none
// @version     1.0.1
// @author      Tempest
// @description A script to search films on letterboxd user pages.
// ==/UserScript==

(function () {
    'use strict';

    //regex to get username
    function extractUsername(url) {
        const regex = /https:\/\/letterboxd\.com\/([^/]+)\/films\/?/;
        const match = url.match(regex);
        if (match && match.length > 1) {
            return match[1];
        } else {
            return null;
        }
    }

    //fetch the html for a page and convert it to a DOM document
    async function fetchDocument(url) {
        let response = await fetch(url);
        let text = await response.text();
        if (!fetchDocument.parser) fetchDocument.parser = new DOMParser();
        return fetchDocument.parser.parseFromString(text, 'text/html');
    }

    function constructHaystack() {
        haystack = filmObjectsArray.map((film) => `${film.title}`);
        haystack.pop();
    }

    async function incrementCache() {
        const filmsPerPage = 72;
        const lastPageTemp = await fetchDocument(userUrl + totalPages);
        const newFilmCount =
            (totalPages - 1) * filmsPerPage +
            lastPageTemp.querySelectorAll('.poster-container').length;

        const difference = newFilmCount - (filmObjectsArray.length - 1);
        if (difference === 0) {
            constructHaystack();
            return;
        }

        filmObjectsArray.pop(); //pop date;
        const pagesToFetch = Math.ceil(difference / filmsPerPage);
        await getPagesIncrement(pagesToFetch, difference);
        filmObjectsArray.push(new Date()); //insert date
        ldb.set(`${username}.filmObjectsArray`, filmObjectsArray, () => {
            constructHaystack();
        });
    }

    //construct an array where each film is an object with title, link and rating
    async function constructFilmObjectsArray(html, count = 100) {
        const posterList = html.querySelectorAll('.poster-container');

        if (count < 72) {
            for (let i = 0; i < count; i++) {
                const poster = posterList[i];
                const title = poster.querySelector('img').getAttribute('alt');
                const link = poster
                    .querySelector('div')
                    .getAttribute('data-target-link');
                const ratingSpan = poster.querySelector(
                    '.poster-viewingdata span'
                );
                const rating = ratingSpan === null ? '' : ratingSpan.innerText;

                filmObjectsArray.push({ title, link, rating });
            }
            return;
        }

        posterList.forEach((poster) => {
            const title = poster.querySelector('img').getAttribute('alt');
            const link = poster
                .querySelector('div')
                .getAttribute('data-target-link');
            const ratingSpan = poster.querySelector('.poster-viewingdata span');
            const rating = ratingSpan === null ? '' : ratingSpan.innerText;

            filmObjectsArray.push({ title, link, rating });
        });
    }

    function isDataOld() {
        const threshold = 7; // max cache age in days
        const currentTime = new Date();
        const cacheTime = filmObjectsArray[filmObjectsArray.length - 1];

        const differenceInMilliseconds = Math.abs(currentTime - cacheTime);
        const millisecondsPerDay = 1000 * 60 * 60 * 24;
        const differenceInDays = Math.floor(
            differenceInMilliseconds / millisecondsPerDay
        );
        return differenceInDays >= threshold;
    }

    async function loadData() {
        filmObjectsArray = [];
        await getPages(totalPages);
        filmObjectsArray.push(new Date());
        ldb.set(`${username}.filmObjectsArray`, filmObjectsArray, () => {});
        constructHaystack();
    }

    //loop through each page and add fims to the object array
    async function getPages(count) {
        const loadingSpan = document.querySelector('#loading-span');
        for (let i = 1; i <= count; i++) {
            loadingSpan.innerText = `Loading page ${i} of ${count}`;
            constructFilmObjectsArray(await fetchDocument(userUrl + i));
        }
        loadingSpan.classList.add('hide');
    }

    async function getPagesIncrement(count, difference) {
        const url =
            'https://letterboxd.com/' + username + '/films/by/date/page/';
        const loadingSpan = document.querySelector('#loading-span');
        for (let i = 1; i <= count; i++) {
            loadingSpan.innerText = `Updating page ${i} of ${count}`;
            i === count
                ? constructFilmObjectsArray(
                      await fetchDocument(url + i),
                      difference
                  )
                : constructFilmObjectsArray(await fetchDocument(url + i));
        }
        loadingSpan.classList.add('hide');
    }

    //uFuzzy search
    function search(searchTerm) {
        let idxs = uf.filter(haystack, searchTerm);
        return idxs.map((i) => filmObjectsArray[i]);
    }

    function addDeleteUserCacheButton(ul) {
        const li = document.createElement('li');
        li.innerHTML = `<a class="item" href="#" style="padding-right: 24px;">Delete ${username}'s cache</a>`;
        ul.appendChild(li);
        li.addEventListener('click', (e) => {
            e.preventDefault();
            ldb.delete(`${username}.filmObjectsArray`);
            window.location.reload();
        });
    }

    function addDeleteAllCacheButton(ul) {
        const li = document.createElement('li');
        li.innerHTML = `<a class="item" href="#">Delete all cache</a>`;
        ul.appendChild(li);
        li.addEventListener('click', (e) => {
            e.preventDefault();
            ldb.clear();
            window.location.reload();
        });
    }

    function addCacheControlButtons() {
        let genreList = null;
        document.querySelectorAll('.smenu-selected').forEach((item) => {
            if (item.innerText.trim() === 'Genre')
                genreList =
                    item.parentElement.querySelector('.divider-line ul');
        });

        addDeleteUserCacheButton(genreList);
        addDeleteAllCacheButton(genreList);
    }

    //construct a list of results or hide the list if no results
    function displayResults(results) {
        searchResults.innerHTML = '';

        if (results.length === 0) {
            hideSearchResults();
            return;
        }

        results.forEach((result) => {
            const li = document.createElement('li');
            li.innerHTML = `
                <a href="${result.link}">
                    ${result.title}
                    <span class="directors">${result.rating}</span>
                </a>
            `;
            searchResults.appendChild(li);
        });

        showSearchResults();
    }

    function showSearchResults() {
        searchDiv.classList.add('visible');
    }

    function hideSearchResults() {
        searchDiv.classList.remove('visible');
    }

    const styles = `
        .user-film-search {
            border-radius:15px;
            box-shadow:0 1px 0 #414d5e;
            color:#89a;
            display:block;
            font-size:1rem;
            height:30px;
            line-height:1.30769231;
            padding:8px 30px 8px 10px;
            margin-bottom: 5px;
            margin-top: 5px;
            width: 100%;
        }
    
        #loading-span {
            position: relative;
            left: 10px;
            font-size: 0.87rem;
        }
    
        .search-flex {
            display: flex;
            align-items: flex-end;
        }
    
        .search-div {
            position: absolute;
            top: 35px;
            left: 211px;
            width:250px;
        }
    
        .hide {
            display: none;
        }
    
        .result-div li {
            color:#fff;
            cursor:default;
            display:block;
            font-size:13px;
            line-height:1.5;
            margin:0;
            overflow:hidden;
            padding:5px 8px 5px 10px;
            text-shadow:0 -1px 0 rgba(0,0,0,.2);
            float: initial;
            text-transform: initial;
            letter-spacing: initial;
            margin-left: inital;
        }
    
        .result-div li:hover {
            background-color:#00ac1c;
            text-shadow:0 -1px 0 rgba(0,0,0,.2);
        }
    
        .result-div a {
            color: #fff;
            display:initial;
        }
    
        .result-div a:hover {
            border-bottom: initial;
            padding-bottom: initial;
        }
    
        .visible {
            display: block;
        }
    `;

    //add styles
    const styleSheet = document.createElement('style');
    styleSheet.innerText = styles;
    document.head.appendChild(styleSheet);

    // calculate available width for search bar
    const subNav = document.querySelector('.sub-nav');
    const contentNav = document.querySelector('#content-nav');
    const sortOptions = document.querySelector('.sorting-selects');
    const availableWidth = contentNav.offsetWidth - sortOptions.offsetWidth;
    subNav.style.width = `${availableWidth}px`;

    //add search bar
    subNav.classList.add('search-flex');
    const searchLi = document.createElement('li');
    searchLi.classList.add('search-li');
    searchLi.innerHTML = `
        <span id="loading-span"></span>
        <input
            type="text"
            class="user-film-search field -borderless"
            inputmode="search"
            value=""
            id="filmSearch"
        />
    `;
    subNav.appendChild(searchLi);

    const username = extractUsername(document.URL);
    const userUrl = 'https://letterboxd.com/' + username + '/films/page/';

    const lastPage = document.querySelector(
        '.paginate-pages ul li:last-of-type'
    );
    const totalPages = lastPage === null ? 1 : Number(lastPage.innerText);

    let filmObjectsArray = [];
    let haystack = [];

    const uf = new uFuzzy();

    //add results div
    const searchInput = document.querySelector('#filmSearch');
    const wrapper = document.querySelector('.sub-nav-wrapper');
    const searchDiv = document.createElement('div');

    searchDiv.innerHTML = `<ul id="searchResults" class="result-div" style="max-height: 400px; overflow: auto"></ul>`;
    searchDiv.classList.add('ac_results', 'search-div', 'hide');
    wrapper.appendChild(searchDiv);
    const searchResults = document.querySelector('#searchResults');

    searchInput.addEventListener('input', function () {
        const query = this.value.toLowerCase();
        if (query === '') searchResults.innerHTML = '';
        else displayResults(search(query));
    });

    searchInput.addEventListener('focus', () => showSearchResults());
    searchInput.addEventListener('blur', () =>
        setTimeout(() => {
            hideSearchResults();
        }, 100)
    );

    //retreive data from IndexedDB, if not found fetch and store
    ldb.get(`${username}.filmObjectsArray`, function (val) {
        filmObjectsArray = val;
        if (filmObjectsArray === null || isDataOld()) loadData();
        else incrementCache();
        addCacheControlButtons();
    });
})();