code dump

autoindex.css

@@ -84,14 +84,48 @@ table tr:nth-child(2n) {
 .movie-description {
     color: #fff;
 }
-.plain-mode {
+.form {
     padding: 1rem;
     color: #999;
 }
-.plain-mode label {
+.form label {
     margin-left: 1rem;
     cursor: pointer;
 }
+.movie-buttons a, button {
+    position: relative;
+    background-color: #001a80;
+    color: #5799ff;
+    border: 0;
+    padding: 0.25rem 1rem;
+    border-radius: 5px;
+    font-weight: bold;
+    cursor: pointer;
+    font-size: 1rem;
+}
+.movie-buttons a:hover, button:hover {
+    background-color: #001b88;
+}
+.movie-buttons a:active, button:active {
+    background-color: #001466;
+}
+button .tooltip {
+    position: absolute;
+    left: 100%;
+    top: 0;
+    background-color: #001153;
+    padding: 0.25rem;
+    margin-left: 0.25rem;
+    pointer-events: none;
+}
+.movie-buttons {
+    display: flex;
+    flex-direction: row;
+    margin-top: auto;
+}
+.movie-buttons a {
+    margin-right: 0.5rem;
+}
 @media screen and (max-width: 1200px) {
     .inner {
         width: 100%;

autoindex.js

@@ -6,7 +6,7 @@ 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>
     <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
@@ -15,14 +15,26 @@ const arrow = `
         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>
+  </g>
 </svg>
 `
 
+function reencodeURI(uri) {
+  return encodeURIComponent(decodeURIComponent(uri));
+}
+
+function getHref(tag) {
+  return tag.getAttribute('href');
+}
+
 function findByHref(href) {
-  return allLinks.filter((link) => decodeURIComponent(link.getAttribute('href')) === decodeURIComponent(href));
+  return allLinks.filter((link) => {
+    return reencodeURI(getHref(link)) === reencodeURI(href)
+  });
 }
 
 function findByInfoFile(infoFile) {
+  console.log(infoFile)
   const found = ['avi', 'mp4', 'mkv'].reduce((last, current) => {
     const element = findByHref(infoFile.replace(infoRegex, '.' + current))[0];
     return element ? element : last;
@@ -57,9 +69,10 @@ async function createXMLRequest(nfo) {
 }
 
 function createOrImproveMovieMeta(original, thumbnail, nfo) {
-  let imgTag = `<img class="thumbnail" src="${thumbnail}"/>`;
+  let imgTag = `<img class="thumbnail" src="${thumbnail ? reencodeURI(getHref(thumbnail)) : ''}"/>`;
   let movieTitle = `<div class="movie-title">${original.innerText}</div>`;
   let movieDescription = `<div class="movie-description"></div>`;
+  let movieButtons = `<div class="movie-buttons"></div>`;
 
   if (!thumbnail && !nfo) {
     return;
@@ -69,21 +82,23 @@ function createOrImproveMovieMeta(original, thumbnail, nfo) {
     imgTag = original.querySelector('.thumbnail');
     movieTitle = original.querySelector('.movie-title');
     movieDescription = original.querySelector('.movie-description');
+    movieButtons = original.querySelector('.movie-buttons');
     if (thumbnail) {
-      imgTag.src = thumbnail;
+      imgTag.src = reencodeURI(getHref(thumbnail));
     }
   } else {
     original.classList.add('movie');
-    original.innerHTML = imgTag + '<div class="meta-wrap">' + movieTitle + movieDescription + '</div>';
+    original.innerHTML = imgTag + '<div class="meta-wrap">' + movieTitle + movieDescription + movieButtons + '</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');
+    movieButtons = original.querySelector('.movie-buttons');
   }
 
   if (nfo) {
-    createXMLRequest(nfo.href)
+    createXMLRequest(reencodeURI(getHref(nfo)))
       .then((content) => {
         if (!content) {
           return;
@@ -93,6 +108,8 @@ function createOrImproveMovieMeta(original, thumbnail, nfo) {
         const plotEl = content.querySelector('plot');
         const airedEl = content.querySelector('aired');
         const premieredEl = content.querySelector('premiered');
+        const imdbEl = content.querySelector('uniqueid[type="imdb"]');
+        const tvdbEl = content.querySelector('uniqueid[type="tvdb"]');
 
         if (!titleEl || !plotEl) {
           return;
@@ -114,20 +131,52 @@ function createOrImproveMovieMeta(original, thumbnail, nfo) {
 
         movieTitle.innerText = title;
         movieDescription.innerText = plotEl.textContent;
+        if (imdbEl) {
+          const imlink = document.createElement('a');
+          imlink.target = '_blank';
+          imlink.innerText = 'IMDb';
+          imlink.href = `https://www.imdb.com/title/${imdbEl.textContent}`;
+          movieButtons.appendChild(imlink);
+        }
+        if (tvdbEl) {
+          const tvlink = document.createElement('a');
+          tvlink.target = '_blank';
+          tvlink.innerText = 'The TVDB';
+          tvlink.href = `http://www.thetvdb.com/?tab=series&id=${tvdbEl.textContent}`;
+          movieButtons.appendChild(tvlink);
+        }
+        if (getHref(nfo) !== 'tvshow.nfo' &&
+            navigator && navigator.clipboard &&
+            navigator.clipboard.writeText) {
+          const copybutton = document.createElement('button');
+          copybutton.innerText = 'Copy direct URL';
+          movieButtons.appendChild(copybutton);
+          copybutton.addEventListener('click', (e) => {
+            e.preventDefault();
+            const popup = document.createElement('div');
+            popup.className = 'tooltip';
+            popup.innerText = 'Copied!';
+            const url = window.location.href + reencodeURI(getHref(original));
+            navigator.clipboard.writeText(url).then(() => {
+              copybutton.appendChild(popup);
+              setTimeout(() => copybutton.removeChild(popup), 1000);
             });
+          });
+        }
+      })
+    .catch((e) => console.error(e));
   }
 }
 
 let tvShow;
 function accountForMetadata() {
   allLinks.forEach((link) => {
-    const url = link.getAttribute('href');
+    const url = getHref(link);
     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' && !allLinks.find((found) => getHref(found) === 'tvshow.nfo')) {
-        if (url === 'poster.jpg' && !isTVShow) {
           findOriginal = document.querySelector('a:not([href=".."])');
         } else {
           if (tvShow) {
@@ -145,11 +194,9 @@ function accountForMetadata() {
       } else if (url.startsWith('season') && url.includes('poster')) {
         const sn = url.match(/season(\d+)/);
         if (sn) {
-          const number = parseInt(sn[1], 10);
+          findOriginal = allLinks.find((allurl) => allurl.innerText.includes(parseInt(sn[1], 10)));
-          const findByNumber = allLinks.find((allurl) => allurl.innerText.includes(number));
+        } else if (url.includes('specials')) {
-          if (findByNumber) {
+          findOriginal = allLinks.find((allurl) => allurl.innerText.toLowerCase().startsWith('special'));
-            findOriginal = findByNumber;
-          }
         }
       } else {
         findOriginal = findByInfoFile(url);
@@ -168,28 +215,28 @@ function accountForMetadata() {
   });
 }
 
-function createToggleCheckbox(plainMode) {
+function createToggleCheckbox(field, value, description) {
   const form = document.createElement('div');
   const checkbox = document.createElement('input');
   const label = document.createElement('label');
-  form.className = 'plain-mode';
+  form.className = 'form ' + field;
   checkbox.type = 'checkbox';
-  checkbox.id = 'plainmode'
+  checkbox.id = field
-  label.innerText = 'Disable metadata / display plain index listing (less bandwidth required)';
+  label.innerText = description;
-  label.setAttribute('for', 'plainmode');
+  label.setAttribute('for', field);
   form.appendChild(checkbox);
   form.appendChild(label)
   bodyInner.appendChild(form);
 
   checkbox.addEventListener('change', (e) => {
     if (checkbox.checked) {
-      window.localStorage.setItem('plainMode', 'true');
+      window.localStorage.setItem(field, 'true');
     } else {
-      window.localStorage.removeItem('plainMode');
+      window.localStorage.removeItem(field);
     }
     window.location.reload();
   });
-  checkbox.checked = plainMode === 'true';
+  checkbox.checked = value === 'true';
 }
 
 if ('localStorage' in window) {
@@ -197,7 +244,7 @@ if ('localStorage' in window) {
   if (plainMode !== 'true') {
     accountForMetadata();
   }
-  createToggleCheckbox(plainMode);
+  createToggleCheckbox('plainMode', plainMode, 'Disable metadata / display plain index listing (less bandwidth required)');
 } else {
   accountForMetadata();
 }