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();
}