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


'use strict';
window.addEventListener('load', () => {
  if (document.querySelector('ul.poster-list')) {
    addTitles();
    document.addEventListener('scroll', () => {
      console.log('scrolled');
      addTitles()
    }, false);
  }
}, false);

function addTitles() {

  const maxTitleLength = 25;
  let movieInfo = "";
  //force elements to be vertically aligned at the end
  document.querySelector('ul.poster-list').style.alignItems = "flex-end";

  document.querySelectorAll('li>div[class*="film-poster-"]')
    .forEach(elem => {
      //prevent the script to break on scrolling
      if (elem.dataset.filmName != undefined) {
        //mark tweaked posters for when user will scroll
        if (!elem.className.includes('tweaked')) {
          elem.className += ' tweaked';

          const movieTitle = elem.dataset.filmName;
          const relaseYear = elem.dataset.filmReleaseYear;
          movieInfo = movieTitle.length > maxTitleLength ? `${movieTitle.substring(0, maxTitleLength - 7)}... (${relaseYear})` : `${movieTitle} (${relaseYear})`

          const divNode = document.createElement("div");
          //set styles
          const css = divNode.style;
          css.width = `${elem.offsetWidth}px`;
          css.textAlign = "center";
          css.overflowWrap = "break-word"; //prevent long words to break layout
          //set content
          divNode.textContent = movieInfo; 
          //insert div above the poster image
          elem.parentNode.insertBefore(divNode, elem);
        }
      }
    })
}
s