From 49172781454bc62d5968bba215129153976e892c Mon Sep 17 00:00:00 2001 From: Evert Prants Date: Mon, 24 May 2021 22:05:42 +0300 Subject: [PATCH] code dump --- autoindex.css | 38 +++++++++++++++++- autoindex.js | 107 ++++++++++++++++++++++++++++++++++++-------------- 2 files changed, 113 insertions(+), 32 deletions(-) diff --git a/autoindex.css b/autoindex.css index b67c763..5e9c20b 100644 --- a/autoindex.css +++ b/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%; diff --git a/autoindex.js b/autoindex.js index e1ef450..843db41 100644 --- a/autoindex.js +++ b/autoindex.js @@ -6,23 +6,35 @@ const infoRegex = /(-thumb)?\.(jpg|nfo|srt)$/; const arrow = ` - - + + + ` +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 = ``; + let imgTag = ``; let movieTitle = `
${original.innerText}
`; let movieDescription = `
`; + let movieButtons = `
`; 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 + '
' + movieTitle + movieDescription + '
'; + original.innerHTML = imgTag + '
' + movieTitle + movieDescription + movieButtons + '
'; 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' && !isTVShow) { + if (url === 'poster.jpg' && !allLinks.find((found) => getHref(found) === 'tvshow.nfo')) { 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); - const findByNumber = allLinks.find((allurl) => allurl.innerText.includes(number)); - if (findByNumber) { - findOriginal = findByNumber; - } + findOriginal = allLinks.find((allurl) => allurl.innerText.includes(parseInt(sn[1], 10))); + } else if (url.includes('specials')) { + findOriginal = allLinks.find((allurl) => allurl.innerText.toLowerCase().startsWith('special')); } } 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' - label.innerText = 'Disable metadata / display plain index listing (less bandwidth required)'; - label.setAttribute('for', 'plainmode'); + checkbox.id = field + label.innerText = description; + 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(); }