mediaserver-nginx-autoindexer/autoindex.js

const allLinks = [...document.getElementsByTagName('a')];
const bodyInner = document.querySelector('.inner');
const tableElem = document.querySelector('table');
const infoRegex = /(-thumb)?\.(jpg|nfo|srt)$/;

const arrow = `
<svg version="1.1" id="back-arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 492 492" style="enable-background:new 0 0 492 492;" xml:space="preserve">
<g>
  <g>
    <path fill="#fff" d="M464.344,207.418l0.768,0.168H135.888l103.496-103.724c5.068-5.064,7.848-11.924,7.848-19.124
      c0-7.2-2.78-14.012-7.848-19.088L223.28,49.538c-5.064-5.064-11.812-7.864-19.008-7.864c-7.2,0-13.952,2.78-19.016,7.844
      L7.844,226.914C2.76,231.998-0.02,238.77,0,245.974c-0.02,7.244,2.76,14.02,7.844,19.096l177.412,177.412
      c5.064,5.06,11.812,7.844,19.016,7.844c7.196,0,13.944-2.788,19.008-7.844l16.104-16.112c5.068-5.056,7.848-11.808,7.848-19.008
      c0-7.196-2.78-13.592-7.848-18.652L134.72,284.406h329.992c14.828,0,27.288-12.78,27.288-27.6v-22.788
      C492,219.198,479.172,207.418,464.344,207.418z"/>
  </g>
</svg>
`

function findByHref(href) {
  return allLinks.filter((link) => decodeURIComponent(link.getAttribute('href')) === decodeURIComponent(href));
}

function findByInfoFile(infoFile) {
  const found = ['avi', 'mp4', 'mkv'].reduce((last, current) => {
    const element = findByHref(infoFile.replace(infoRegex, '.' + current))[0];
    return element ? element : last;
  }, null);
  return found;
}

function deduplicateJointEpisode(textContent) {
  return new Promise((resolve, reject) => {
    const lns = textContent.split('\n');
    const result = [];
    let passed = 0;
    for (const line of lns) {
      if (line.startsWith('<episodedetails>')) {
        if (passed === 1) {
          break;
        }
        passed = 1;
      }
      result.push(line);
    }
    resolve(result.join('\n'));
  });
}

const parser = new window.DOMParser();
async function createXMLRequest(nfo) {
  return fetch(nfo)
    .then((response) => response.text())
    .then((text) => deduplicateJointEpisode(text))
    .then((str) => parser.parseFromString(str, 'text/xml'));
}

function createOrImproveMovieMeta(original, thumbnail, nfo) {
  let imgTag = `<img class="thumbnail" src="${thumbnail}"/>`;
  let movieTitle = `<div class="movie-title">${original.innerText}</div>`;
  let movieDescription = `<div class="movie-description"></div>`;

  if (!thumbnail && !nfo) {
    return;
  }

  if (original.parentElement.classList.contains('enhanced')) {
    imgTag = original.querySelector('.thumbnail');
    movieTitle = original.querySelector('.movie-title');
    movieDescription = original.querySelector('.movie-description');
    if (thumbnail) {
      imgTag.src = thumbnail;
    }
  } else {
    original.classList.add('movie');
    original.innerHTML = imgTag + '<div class="meta-wrap">' + movieTitle + movieDescription + '</div>';
    original.parentElement.classList.add('enhanced');
    // quick innerHTML hack to create elements here lol
    imgTag = original.querySelector('.thumbnail');
    movieTitle = original.querySelector('.movie-title');
    movieDescription = original.querySelector('.movie-description');
  }

  if (nfo) {
    createXMLRequest(nfo.href)
      .then((content) => {
        if (!content) {
          return;
        }

        const titleEl = content.querySelector('title');
        const plotEl = content.querySelector('plot');
        const airedEl = content.querySelector('aired');
        const premieredEl = content.querySelector('premiered');

        if (!titleEl || !plotEl) {
          return;
        }

        if (airedEl || premieredEl) {
          const timestamp = original.parentElement.parentElement.querySelector('.timestamp');
          if (timestamp) {
            timestamp.innerText = (airedEl || premieredEl).textContent;
          }
        }

        const episode = content.querySelector('episode');
        const season = content.querySelector('season');
        let title = titleEl.textContent
        if (episode && season) {
          title = `(S${season.textContent} E${episode.textContent}) ` + title;
        }

        movieTitle.innerText = title;
        movieDescription.innerText = plotEl.textContent;
      });
  }
}

let tvShow;
function accountForMetadata() {
  allLinks.forEach((link) => {
    const url = link.getAttribute('href');
    if (url.match(infoRegex)) {
      link.parentElement.parentElement.style.display = 'none';
      let findOriginal
      if (url === 'tvshow.nfo' || url === 'poster.jpg') {
        const isTVShow = allLinks.find((found) => found.getAttribute('href') === 'tvshow.nfo');
        if (url === 'poster.jpg' && !isTVShow) {
          findOriginal = document.querySelector('a:not([href=".."])');
        } else {
          if (tvShow) {
            findOriginal = tvShow;
          } else {
            const wrapper = document.createElement('div');
            wrapper.className = 'highlight';
            tvShow = document.createElement('a');
            tvShow.className = 'movie';
            wrapper.appendChild(tvShow);
            bodyInner.insertBefore(wrapper, tableElem);
            findOriginal = tvShow;
          }
        }
      } else if (url.startsWith('season') && url.includes('poster')) {
        const sn = url.match(/season(\d+)/);
        if (sn) {
          const number = parseInt(sn[1], 10);
          const findByNumber = allLinks.find((allurl) => allurl.innerText.includes(number));
          if (findByNumber) {
            findOriginal = findByNumber;
          }
        }
      } else {
        findOriginal = findByInfoFile(url);
      }
      if (findOriginal) {
        createOrImproveMovieMeta(findOriginal,
          url.match(/.jpg$/) ? link : undefined,
          url.match(/.nfo$/) ? link : undefined,
        );
      }
    }
    if (url === '..') {
      link.parentElement.parentElement.classList.add('btn-back');
      link.innerHTML = arrow + 'Back (..)';
    }
  });
}

function createToggleCheckbox(plainMode) {
  const form = document.createElement('div');
  const checkbox = document.createElement('input');
  const label = document.createElement('label');
  form.className = 'plain-mode';
  checkbox.type = 'checkbox';
  checkbox.id = 'plainmode'
  label.innerText = 'Disable metadata / display plain index listing (less bandwidth required)';
  label.setAttribute('for', 'plainmode');
  form.appendChild(checkbox);
  form.appendChild(label)
  bodyInner.appendChild(form);

  checkbox.addEventListener('change', (e) => {
    if (checkbox.checked) {
      window.localStorage.setItem('plainMode', 'true');
    } else {
      window.localStorage.removeItem('plainMode');
    }
    window.location.reload();
  });
  checkbox.checked = plainMode === 'true';
}

if ('localStorage' in window) {
  const plainMode = window.localStorage.getItem('plainMode');
  if (plainMode !== 'true') {
    accountForMetadata();
  }
  createToggleCheckbox(plainMode);
} else {
  accountForMetadata();
}