// ==UserScript==
// @name         Letterboxd Titles
// @namespace    https://letterboxd.com/
// @version      0.1
// @description  Force titles to be displayed above movie posters (on some pages only)
// @author       n00bCod3r (https://github.com/n00bCod3rr)
// @match        https://letterboxd.com/*
// @grant        none
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';
    function addTitles() {
        const maxTitleLength = 35;
        let movieInfo = "";
        //ul that will contain all the movie posters
        const posterNodeListContainer = document.querySelector('ul.poster-list');
        posterNodeListContainer.style.alignItems = "flex-end";
        const posterNodeList = document.querySelectorAll('li>div[class*="film-poster-"]');
        //for every movie
        for (const elem of posterNodeList) {
            //since the function will be called on scroll event, I add a class to every element that is tweaked so that the div is added only once
            const elemClasses = elem.className;
            if (!elemClasses.includes('tweaked')) {
                elem.className += ' tweaked';
                const movieTitle = elem.dataset.filmName;
                //if the movie title is too long, trim it (change maxTitleLeght as you please)
                if (movieTitle.length > maxTitleLength) {
                    const trimmedMovieTitle = `${movieTitle.substring(0,maxTitleLength-3)}...`;
                    movieInfo = `${trimmedMovieTitle}\n(${elem.dataset.filmReleaseYear})`;
                }
                else {
                    movieInfo = `${elem.dataset.filmName} (${elem.dataset.filmReleaseYear})`;
                }
                //Title (yyyy)
                const width = elem.offsetWidth; //this will become the width of the divNode
                const divNode = document.createElement("div");
                divNode.innerHTML = movieInfo; //writes Movietitle <br/> (year) inside the div
                //set width, text-align, overflow-wrap CSS properties for the div
                divNode.style.width = `${width}px`;
                divNode.style.textAlign = "center";
                divNode.style.overflowWrap = "break-word"; //long words will go in a new line
                //targets the DOM node father of the current div node, and insert the new divNode as its first child (to show the div above the poster image)
                const nodeElemParent = elem.parentNode;
                nodeElemParent.insertBefore(divNode, elem);
            }
        }
    }
    //wait for page to load
    window.addEventListener('load', function() {
        addTitles();
        const currentURL = window.location.href;
        console.log(currentURL);
        if (currentURL.includes('/list/') || currentURL.includes('/watchlist/')) {
            document.addEventListener('scroll', addTitles, false);
        };
    }, false);

})();