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

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

@ -5,60 +5,114 @@ const audio_formats = ["mp3", "flac", "opus", "ogg", "m4a"];
const image_formats = ["jpg", "jpeg", "gif", "png", "bmp", "webp"];
const overlay = document.getElementById("overlay");
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)
localStorage['audio_volume'] = 0.5;
function mousescroll(e) {
overlay.addEventListener("mouseup", e => {
if (e.target.tagName !== "DIV") return;
if (e.button === 0) {
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 send_to_overlay(pathname, media_type_element) {
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})`;
}
function onvolumechange(e) {
localStorage['audio_volume'] = e.target.volume;
}
const ext_filter = (ext, pathname) => pathname.toLowerCase().endsWith(ext);
function to_overlay(eltyp, pathname) {
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'];
e.target.style.transform = `scale(${g_scale})`; });
}
el.src = pathname;
overlay.appendChild(el);
overlay.appendChild(el_label);
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;
}
document.getElementById("overlay").addEventListener("click", e => {
e.target.firstChild.remove();
e.target.firstChild.remove();
e.target.style.visibility = "hidden";
g_scale = 1;
const [b_prev, b_next] = overlay.getElementsByTagName("button");
b_prev.addEventListener("click", e => {
do {
if (g_current_row.previousSibling === null)
g_current_row = g_last_row;
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)
.filter(e => e.lastChild.innerHTML != "DIR").map(l => l.firstChild.firstChild);
b_next.addEventListener("click", () => {
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 => {
const pathname = e.target.pathname;
if (video_formats.some(ext => ext_filter(ext, pathname)))
to_overlay("video", pathname);
else if (audio_formats.some(ext => ext_filter(ext, pathname)))
to_overlay("audio", pathname);
else if (image_formats.some(ext => ext_filter(ext, pathname)))
to_overlay("img", pathname);
if (overlay.firstChild != null)
window.addEventListener("keydown", e => {
if (overlay.style.visibility === "hidden" || e.isComposing)
return;
if (e.code === "ArrowLeft")
b_prev.click();
else if (e.code === "ArrowRight")
b_next.click();
else if (e.code === "Escape")
overlay_close();
});
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