breadcrumbs
This commit is contained in:
parent
0f6a5c3a9e
commit
24badd5cb8
@ -132,6 +132,41 @@ button .tooltip {
|
||||
.timestamp .original {
|
||||
color: gray;
|
||||
}
|
||||
#dirname {
|
||||
padding: 1rem;
|
||||
}
|
||||
.directory#dirname {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.directory-link {
|
||||
padding: 0.5rem 1rem 0.5rem 3rem;
|
||||
background-color: #05275b;
|
||||
display: flex;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.directory-link:nth-child(2n+1) {
|
||||
background-color: #0b3a80;
|
||||
}
|
||||
.directory-link::after {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 29px solid transparent;
|
||||
border-bottom: 29px solid transparent;
|
||||
border-left: 29px solid #05275b;
|
||||
position: absolute;
|
||||
right: -29px;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
.directory-link:nth-child(2n+1)::after {
|
||||
border-left-color: #0b3a80;
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
.inner {
|
||||
width: 100%;
|
||||
|
153
autoindex.js
153
autoindex.js
@ -1,6 +1,7 @@
|
||||
const allLinks = [...document.getElementsByTagName('a')];
|
||||
const bodyInner = document.querySelector('.inner');
|
||||
const tableElem = document.querySelector('table');
|
||||
const dirnameElem = document.querySelector('#dirname');
|
||||
const infoRegex = /(-thumb)?\.(jpg|nfo|srt)$/;
|
||||
let infoFiles = 0;
|
||||
let infoFilesAccounted = 0;
|
||||
@ -31,19 +32,21 @@ function getHref(tag) {
|
||||
|
||||
function findByHref(href) {
|
||||
return allLinks.filter((link) => {
|
||||
return reencodeURI(getHref(link)) === reencodeURI(href)
|
||||
return reencodeURI(getHref(link)) === reencodeURI(href);
|
||||
});
|
||||
}
|
||||
|
||||
function findWholeNumberInText(text, matchNumber) {
|
||||
const numbers = text.match(/\d+/g);
|
||||
return numbers
|
||||
&& numbers.length
|
||||
&& numbers.map((x) => parseInt(x, 10)).some((number) => number === matchNumber);
|
||||
return (
|
||||
numbers &&
|
||||
numbers.length &&
|
||||
numbers.map((x) => parseInt(x, 10)).some((number) => number === matchNumber)
|
||||
);
|
||||
}
|
||||
|
||||
function findByInfoFile(infoFile) {
|
||||
const found = ['mkv', 'mp4', 'avi'].reduce((last, current) => {
|
||||
const found = ['mkv', 'mp4', 'avi', 'webm'].reduce((last, current) => {
|
||||
const element = findByHref(infoFile.replace(infoRegex, '.' + current))[0];
|
||||
return element || last;
|
||||
}, null);
|
||||
@ -53,9 +56,20 @@ function findByInfoFile(infoFile) {
|
||||
const pZ = (n) => n.toString().padStart(2, '0');
|
||||
function restampDateTime(datetime, includeTime = true) {
|
||||
const date = new Date(datetime);
|
||||
const [month, day, year] = [date.getMonth() + 1, date.getDate(), date.getFullYear()];
|
||||
const [hour, minutes, seconds] = [date.getHours(), date.getMinutes(), date.getSeconds()];
|
||||
return `${pZ(day)}/${pZ(month)}/${year}${includeTime ? ` ${pZ(hour)}:${pZ(minutes)}:${pZ(seconds)}` : ''}`;
|
||||
const [month, day, year] = [
|
||||
date.getMonth() + 1,
|
||||
date.getDate(),
|
||||
date.getFullYear(),
|
||||
];
|
||||
const [hour, minutes, seconds] = [
|
||||
date.getHours(),
|
||||
date.getMinutes(),
|
||||
date.getSeconds(),
|
||||
];
|
||||
return `${year}/${pZ(month)}/${pZ(day)}${
|
||||
includeTime ? ` ${pZ(hour)}:${pZ(minutes)}:${pZ(seconds)}` : ''
|
||||
}`;
|
||||
// return `${pZ(day)}/${pZ(month)}/${year}${includeTime ? ` ${pZ(hour)}:${pZ(minutes)}:${pZ(seconds)}` : ''}`;
|
||||
}
|
||||
|
||||
function deduplicateJointEpisode(textContent) {
|
||||
@ -86,7 +100,12 @@ async function createXMLRequest(nfo) {
|
||||
|
||||
// Fill metadata boxes, generate buttons
|
||||
function fillMeta(
|
||||
content, original, nfo, movieTitle, movieDescription, movieButtons
|
||||
content,
|
||||
original,
|
||||
nfo,
|
||||
movieTitle,
|
||||
movieDescription,
|
||||
movieButtons
|
||||
) {
|
||||
infoFilesAccounted += 1;
|
||||
if (!content) {
|
||||
@ -105,10 +124,14 @@ function fillMeta(
|
||||
}
|
||||
|
||||
if (airedEl || premieredEl) {
|
||||
const timestamp = original.parentElement.parentElement.querySelector('.timestamp');
|
||||
const timestamp =
|
||||
original.parentElement.parentElement.querySelector('.timestamp');
|
||||
if (timestamp) {
|
||||
const original = timestamp.innerText;
|
||||
const airdate = restampDateTime((airedEl || premieredEl).textContent, false);
|
||||
const airdate = restampDateTime(
|
||||
(airedEl || premieredEl).textContent,
|
||||
false
|
||||
);
|
||||
const wrapper = `<span class="airdate">${airdate}</span>`;
|
||||
const originalWrapper = ` <span class="original">(${original})</span>`;
|
||||
timestamp.innerHTML = wrapper + originalWrapper;
|
||||
@ -117,7 +140,7 @@ function fillMeta(
|
||||
|
||||
const episode = content.querySelector('episode');
|
||||
const season = content.querySelector('season');
|
||||
let title = titleEl.textContent
|
||||
let title = titleEl.textContent;
|
||||
if (episode && season) {
|
||||
title = `(S${season.textContent} E${episode.textContent}) ` + title;
|
||||
original.parentElement.setAttribute('data-episode', episode.textContent);
|
||||
@ -144,10 +167,10 @@ function fillMeta(
|
||||
|
||||
// Add "copy direct url" button
|
||||
if (
|
||||
getHref(nfo) !== 'tvshow.nfo'
|
||||
&& navigator
|
||||
&& navigator.clipboard
|
||||
&& navigator.clipboard.writeText
|
||||
getHref(nfo) !== 'tvshow.nfo' &&
|
||||
navigator &&
|
||||
navigator.clipboard &&
|
||||
navigator.clipboard.writeText
|
||||
) {
|
||||
const copybutton = document.createElement('button');
|
||||
copybutton.innerText = 'Copy direct URL';
|
||||
@ -169,7 +192,9 @@ function fillMeta(
|
||||
// Replace list entry with a metadata box
|
||||
// Either create or populate
|
||||
function createOrImproveMovieMeta(original, thumbnail, nfo) {
|
||||
let imgTag = `<img class="thumbnail" src="${thumbnail ? reencodeURI(getHref(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>`;
|
||||
@ -188,7 +213,7 @@ function createOrImproveMovieMeta(original, thumbnail, nfo) {
|
||||
}
|
||||
} else {
|
||||
original.classList.add('movie');
|
||||
original.innerHTML = imgTag + '<div class="meta-wrap">' + movieTitle + movieDescription + movieButtons + '</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');
|
||||
@ -200,7 +225,16 @@ function createOrImproveMovieMeta(original, thumbnail, nfo) {
|
||||
// Fetch metadata from the nfo file and populate the info box
|
||||
if (nfo) {
|
||||
createXMLRequest(reencodeURI(getHref(nfo)))
|
||||
.then((content) => fillMeta(content, original, nfo, movieTitle, movieDescription, movieButtons))
|
||||
.then((content) =>
|
||||
fillMeta(
|
||||
content,
|
||||
original,
|
||||
nfo,
|
||||
movieTitle,
|
||||
movieDescription,
|
||||
movieButtons
|
||||
)
|
||||
)
|
||||
.catch((e) => {
|
||||
infoFilesAccounted += 1;
|
||||
console.error(e);
|
||||
@ -236,19 +270,24 @@ function waitUntilInfoComplete() {
|
||||
|
||||
// Get episode name or name of file
|
||||
const getCellValue = (tr, idx) =>
|
||||
tr.children[idx].getAttribute('data-episode')
|
||||
|| tr.children[idx].innerText
|
||||
|| tr.children[idx].textContent;
|
||||
tr.children[idx].getAttribute('data-episode') ||
|
||||
tr.children[idx].innerText ||
|
||||
tr.children[idx].textContent;
|
||||
|
||||
// Compare numeric or (locale-aware, numeric-aware) by string values
|
||||
const comparer = (idx, asc) => (a, b) => ((v1, v2) =>
|
||||
v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2, 'et', { numeric: true })
|
||||
)(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
|
||||
const comparer = (idx, asc) => (a, b) =>
|
||||
((v1, v2) =>
|
||||
v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2)
|
||||
? v1 - v2
|
||||
: v1.toString().localeCompare(v2, 'et', { numeric: true }))(
|
||||
getCellValue(asc ? a : b, idx),
|
||||
getCellValue(asc ? b : a, idx)
|
||||
);
|
||||
|
||||
// Table sort by column index
|
||||
const sortTableValues = (index) =>
|
||||
Array.from(tableElem.querySelectorAll('tr:nth-child(n+2):not(.btn-back)'))
|
||||
.sort(comparer(index, this.asc = !this.asc))
|
||||
.sort(comparer(index, (this.asc = !this.asc)))
|
||||
.forEach((tr) => tableElem.appendChild(tr));
|
||||
|
||||
let tvShow;
|
||||
@ -260,10 +299,13 @@ function accountForMetadata() {
|
||||
if (url.match(infoRegex)) {
|
||||
// Hide metadata file
|
||||
link.parentElement.parentElement.style.display = 'none';
|
||||
let findOriginal
|
||||
let findOriginal;
|
||||
// Place TV show information in the beginning of the table
|
||||
if (url === 'tvshow.nfo' || url === 'poster.jpg') {
|
||||
if (url === 'poster.jpg' && !allLinks.find((found) => getHref(found) === 'tvshow.nfo')) {
|
||||
if (
|
||||
url === 'poster.jpg' &&
|
||||
!allLinks.find((found) => getHref(found) === 'tvshow.nfo')
|
||||
) {
|
||||
findOriginal = document.querySelector('a:not([href=".."])');
|
||||
} else {
|
||||
if (tvShow) {
|
||||
@ -283,17 +325,21 @@ function accountForMetadata() {
|
||||
// Find season by number
|
||||
const sn = url.match(/season(\d+)/);
|
||||
if (sn) {
|
||||
findOriginal = allLinks.find(
|
||||
({ innerText }) => {
|
||||
return innerText.endsWith('/')
|
||||
&& findWholeNumberInText(innerText, parseInt(sn[1], 10));
|
||||
findOriginal = allLinks.find(({ innerText }) => {
|
||||
return (
|
||||
innerText.endsWith('/') &&
|
||||
findWholeNumberInText(innerText, parseInt(sn[1], 10))
|
||||
);
|
||||
});
|
||||
// Find specials folder
|
||||
} else if (url.includes('specials')) {
|
||||
findOriginal = allLinks.find(({ innerText }) => {
|
||||
const matchAgainst = innerText.toLowerCase();
|
||||
return (matchAgainst.startsWith('specials') || matchAgainst.startsWith('extras'))
|
||||
&& innerText.endsWith('/');
|
||||
return (
|
||||
(matchAgainst.startsWith('specials') ||
|
||||
matchAgainst.startsWith('extras')) &&
|
||||
innerText.endsWith('/')
|
||||
);
|
||||
});
|
||||
}
|
||||
// Find the video file associated with this info file
|
||||
@ -306,9 +352,10 @@ function accountForMetadata() {
|
||||
if (url.match(/.nfo$/)) {
|
||||
infoFiles += 1;
|
||||
}
|
||||
createOrImproveMovieMeta(findOriginal,
|
||||
createOrImproveMovieMeta(
|
||||
findOriginal,
|
||||
url.match(/.jpg$/) ? link : undefined,
|
||||
url.match(/.nfo$/) ? link : undefined,
|
||||
url.match(/.nfo$/) ? link : undefined
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -328,11 +375,11 @@ function createToggleCheckbox(field, value, description) {
|
||||
const label = document.createElement('label');
|
||||
form.className = 'form ' + field;
|
||||
checkbox.type = 'checkbox';
|
||||
checkbox.id = field
|
||||
checkbox.id = field;
|
||||
label.innerText = description;
|
||||
label.setAttribute('for', field);
|
||||
form.appendChild(checkbox);
|
||||
form.appendChild(label)
|
||||
form.appendChild(label);
|
||||
bodyInner.appendChild(form);
|
||||
|
||||
checkbox.addEventListener('change', (e) => {
|
||||
@ -346,18 +393,42 @@ function createToggleCheckbox(field, value, description) {
|
||||
checkbox.checked = value === 'true';
|
||||
}
|
||||
|
||||
function createDirTree() {
|
||||
dirnameElem.classList.add('directory');
|
||||
const dirSplit = dirnameElem.innerText.split('/').slice(1).filter((item) => !!item);
|
||||
dirSplit.unshift('');
|
||||
dirnameElem.innerHTML = '';
|
||||
let lastPath = '';
|
||||
for (const dir of dirSplit) {
|
||||
lastPath += dir + '/';
|
||||
const atag = document.createElement('a');
|
||||
atag.innerText = dir;
|
||||
atag.classList.add('directory-link');
|
||||
atag.href = lastPath;
|
||||
dirnameElem.appendChild(atag);
|
||||
}
|
||||
}
|
||||
|
||||
if ('localStorage' in window) {
|
||||
const plainMode = window.localStorage.getItem('plainMode');
|
||||
if (plainMode !== 'true') {
|
||||
timestampify();
|
||||
accountForMetadata();
|
||||
}
|
||||
createToggleCheckbox('plainMode', plainMode, 'Disable metadata / display plain index listing (less bandwidth required)');
|
||||
createToggleCheckbox(
|
||||
'plainMode',
|
||||
plainMode,
|
||||
'Disable metadata / display plain index listing (less bandwidth required)'
|
||||
);
|
||||
} else {
|
||||
timestampify();
|
||||
accountForMetadata();
|
||||
}
|
||||
|
||||
document.querySelectorAll('th').forEach((th) => th.addEventListener('click', (() => {
|
||||
document.querySelectorAll('th').forEach((th) =>
|
||||
th.addEventListener('click', () => {
|
||||
sortTableValues(Array.from(th.parentNode.children).indexOf(th));
|
||||
})));
|
||||
})
|
||||
);
|
||||
|
||||
createDirTree();
|
||||
|
Loading…
Reference in New Issue
Block a user