Arav/dwelling-files
1
0
Fork 0
Code Releases 8 Activity

Overlay was reworked from ground up. Now you can use prev and next buttons to go through media. Or use left and right arrow keys. Also ESC to close an overlay.

Browse Source
This commit is contained in:
Alexander Andreev 2022-09-20 03:39:42 +04:00
parent 5a47a0a5e1
commit 9827c5f731
Signed by: Arav
GPG Key ID: 0388CC8FAA51063F
1 changed files with 149 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

244
web/assets/js/main.js
View File

@ -5,143 +5,197 @@ const audio_formats = ["mp3", "flac", "opus", "ogg", "m4a"];
const image_formats = ["jpg", "jpeg", "gif", "png", "bmp", "webp"]; const image_formats = ["jpg", "jpeg", "gif", "png", "bmp", "webp"];
const overlay = document.getElementById("overlay"); const overlay = document.getElementById("overlay");
let g_scale = 1; const overlay_content = overlay.children[1].firstChild;
const overlay_label = overlay.children[1].lastChild;
let g_scale = 1;
let g_current_row = null;
const g_first_row = document.getElementsByTagName("tbody")[0].firstChild;
const g_last_row = document.getElementsByTagName("tbody")[0].lastChild;
const file_links = Array.from(document.getElementsByTagName("tbody")[0].children)
.filter(e => e.lastChild.innerHTML != "DIR").map(l => l.firstChild.firstChild);
if (localStorage.getItem('audio_volume') == null) if (localStorage.getItem('audio_volume') == null)
localStorage['audio_volume'] = 0.5; localStorage['audio_volume'] = 0.5;
function mousescroll(e) { overlay.addEventListener("mouseup", e => {
e.preventDefault(); if (e.target.tagName !== "DIV") return;
g_scale = Math.min(Math.max(0.25, g_scale + (e.deltaY * -0.001)), 4); if (e.button === 0) {
e.target.style.transform = `scale(${g_scale})`; overlay_content.children[0].remove();
overlay.style.visibility = "hidden";
g_scale = 1; } });
function determine_media_element(path) {
path = path.toLowerCase();
if (video_formats.some(ext => path.endsWith(ext)))
return "video";
else if (audio_formats.some(ext => path.endsWith(ext)))
return "audio";
else if (image_formats.some(ext => path.endsWith(ext)))
return "img";
return undefined;
} }
function onvolumechange(e) { function send_to_overlay(pathname, media_type_element) {
localStorage['audio_volume'] = e.target.volume; if (media_type_element === undefined)
return false;
if (overlay_content.children.length != 0)
overlay_content.children[0].remove();
const media_element = document.createElement(media_type_element);
media_element.src = pathname;
overlay_label.textContent = decodeURI(pathname.substr(pathname.lastIndexOf("/") + 1));
if (media_type_element !== "audio") {
media_element.addEventListener("wheel", e => {
e.preventDefault();
g_scale = Math.min(Math.max(0.25, g_scale + (e.deltaY * -0.001)), 4);
e.target.style.transform = `scale(${g_scale})`; });
}
if (media_type_element !== "img") {
media_element.autoplay = media_element.controls = true;
media_element.addEventListener("volumechange", e => {
localStorage['audio_volume'] = e.target.volume; });
media_element.volume = localStorage["audio_volume"];
}
overlay_content.appendChild(media_element);
overlay.style.visibility = "visible";
return true;
} }
const ext_filter = (ext, pathname) => pathname.toLowerCase().endsWith(ext);
function to_overlay(eltyp, pathname) { const [b_prev, b_next] = overlay.getElementsByTagName("button");
const el = document.createElement(eltyp);
const el_label = document.createElement("span");
el_label.textContent = decodeURI(pathname.substr(pathname.lastIndexOf("/") + 1));
if (eltyp !== "audio") el.addEventListener('wheel', mousescroll);
if (eltyp !== "img") {
el.autoplay = el.controls = true;
el.addEventListener("volumechange", onvolumechange);
el.volume = localStorage['audio_volume'];
}
el.src = pathname;
overlay.appendChild(el);
overlay.appendChild(el_label);
overlay.style.visibility = "visible";
}
document.getElementById("overlay").addEventListener("click", e => { b_prev.addEventListener("click", e => {
e.target.firstChild.remove(); do {
e.target.firstChild.remove(); if (g_current_row.previousSibling === null)
e.target.style.visibility = "hidden"; g_current_row = g_last_row;
g_scale = 1; else
g_current_row = g_current_row.previousSibling;
} while (!send_to_overlay(g_current_row.firstChild.firstChild.pathname,
determine_media_element(g_current_row.firstChild.firstChild.pathname)));
e.preventDefault();
}); });
const file_links = Array.from(document.getElementsByTagName('tr')).slice(2) b_next.addEventListener("click", () => {
.filter(e => e.lastChild.innerHTML != "DIR").map(l => l.firstChild.firstChild); do {
if (g_current_row.nextSibling === null)
g_current_row = g_first_row;
else
g_current_row = g_current_row.nextSibling;
} while (!send_to_overlay(g_current_row.firstChild.firstChild.pathname,
determine_media_element(g_current_row.firstChild.firstChild.pathname)));
});
file_links.forEach(f => f.addEventListener('click', e => { window.addEventListener("keydown", e => {
const pathname = e.target.pathname; if (overlay.style.visibility === "hidden" || e.isComposing)
if (video_formats.some(ext => ext_filter(ext, pathname))) return;
to_overlay("video", pathname); if (e.code === "ArrowLeft")
else if (audio_formats.some(ext => ext_filter(ext, pathname))) b_prev.click();
to_overlay("audio", pathname); else if (e.code === "ArrowRight")
else if (image_formats.some(ext => ext_filter(ext, pathname))) b_next.click();
to_overlay("img", pathname); else if (e.code === "Escape")
if (overlay.firstChild != null) overlay_close();
e.preventDefault(); });
}));
for (let i = 0; i < file_links.length; ++i)
file_links[i].addEventListener("click", e => {
g_current_row = e.target.parentNode.parentNode;
if (send_to_overlay(e.target.pathname, determine_media_element(e.target.pathname)))
e.preventDefault();
});
//// SORT BY COLUMN //// SORT BY COLUMN
const [thead_name, thead_date, thead_size] = document.getElementsByTagName('thead')[0] const [thead_name, thead_date, thead_size] = document.getElementsByTagName('thead')[0]
.children[0].children; .children[0].children;
const tbody = document.getElementsByTagName('tbody')[0]; const tbody = document.getElementsByTagName('tbody')[0];
let g_sort_reverse = false; let g_sort_reverse = false;
thead_name.classList.toggle("clickable"); thead_name.classList.toggle("clickable");
thead_name.addEventListener('click', e => { thead_name.addEventListener('click', e => {
e.preventDefault(); e.preventDefault();
sortTable((a,b) => { sortTable((a,b) => {
const a_name = a.children[0].textContent.toLowerCase(); const a_name = a.children[0].textContent.toLowerCase();
const b_name = b.children[0].textContent.toLowerCase(); const b_name = b.children[0].textContent.toLowerCase();
return a_name < b_name ? -1 : a_name > b_name ? 1 : 0; return a_name < b_name ? -1 : a_name > b_name ? 1 : 0;
}, null, null, thead_name, [thead_date, thead_size]); }, null, null, thead_name, [thead_date, thead_size]);
}); });
thead_date.classList.toggle("clickable"); thead_date.classList.toggle("clickable");
thead_date.addEventListener('click', e => { thead_date.addEventListener('click', e => {
e.preventDefault(); e.preventDefault();
sortTable((a,b) => { sortTable((a,b) => {
const a_date = new Date(a.children[1].textContent.slice(0, -4)); const a_date = new Date(a.children[1].textContent.slice(0, -4));
const b_date = new Date(b.children[1].textContent.slice(0, -4)); const b_date = new Date(b.children[1].textContent.slice(0, -4));
return a_date - b_date; return a_date - b_date;
}, null, null, thead_date, [thead_name, thead_size]); }, null, null, thead_date, [thead_name, thead_size]);
}); });
const units = {"B": 0, "KiB": 1, "MiB": 2, "GiB": 3, "TiB": 4}; const units = {"B": 0, "KiB": 1, "MiB": 2, "GiB": 3, "TiB": 4};
function sizeToBytes(size, unit) { function sizeToBytes(size, unit) {
if (units[unit] == 0) return size; if (units[unit] == 0) return size;
for (let i = 0; i <= units[unit]; ++i) size *= 1024; for (let i = 0; i <= units[unit]; ++i) size *= 1024;
return size; return size;
} }
thead_size.classList.toggle("clickable"); thead_size.classList.toggle("clickable");
thead_size.addEventListener('click', e => { thead_size.addEventListener('click', e => {
e.preventDefault(); e.preventDefault();
sortTable( sortTable(
(a,b) => { (a,b) => {
if (a.textContent == "DIR") if (a.textContent == "DIR")
return 1; return 1;
let [a_size, a_unit] = a.children[2].textContent.split(" "); let [a_size, a_unit] = a.children[2].textContent.split(" ");
let [b_size, b_unit] = b.children[2].textContent.split(" "); let [b_size, b_unit] = b.children[2].textContent.split(" ");
return sizeToBytes(+a_size, a_unit) - sizeToBytes(+b_size, b_unit); return sizeToBytes(+a_size, a_unit) - sizeToBytes(+b_size, b_unit);
}, },
e => e.children[2].textContent == "DIR", e => e.children[2].textContent == "DIR",
e => e.children[2].textContent != "DIR", e => e.children[2].textContent != "DIR",
thead_size, [thead_name, thead_date]); thead_size, [thead_name, thead_date]);
}); });
function sortTable(compareFn, filterFn, filterNegFn, target, other) { function sortTable(compareFn, filterFn, filterNegFn, target, other) {
let records = Array.from(document.getElementsByTagName('tbody')[0].children); let records = Array.from(document.getElementsByTagName('tbody')[0].children);
let dirs = []; let dirs = [];
if (filterFn != null) { if (filterFn != null) {
dirs = records.filter(filterFn); dirs = records.filter(filterFn);
records = records.filter(filterNegFn); records = records.filter(filterNegFn);
} }
records.sort(compareFn); records.sort(compareFn);
tbody.textContent = ""; tbody.textContent = "";
other.forEach(v => { other.forEach(v => {
v.classList.remove("sort-up"); v.classList.remove("sort-up");
v.classList.remove("sort-down"); v.classList.remove("sort-down");
}); });
if (filterFn != null) if (filterFn != null)
tbody.append(...dirs); tbody.append(...dirs);
if (g_sort_reverse) { if (g_sort_reverse) {
tbody.append(...records.reverse()); tbody.append(...records.reverse());
target.classList.add("sort-up"); target.classList.add("sort-up");
target.classList.remove("sort-down"); target.classList.remove("sort-down");
} else { } else {
tbody.append(...records); tbody.append(...records);
target.classList.add("sort-down"); target.classList.add("sort-down");
target.classList.remove("sort-up"); target.classList.remove("sort-up");
} }
g_sort_reverse = !g_sort_reverse; g_sort_reverse = !g_sort_reverse;
} }