Implemented a functionality to view videos and listen to audio without the need to leave a page. Now they just opened in an overlay.
This commit is contained in:
parent
1f0c62176a
commit
b0a8467f8d
@ -9,8 +9,9 @@
|
||||
--background-color: #0a0a0a;
|
||||
--primary-color: #cd2682;
|
||||
--secondary-color: #9f2b68;
|
||||
--text-color: #f5f5f5;
|
||||
--text-color: #f5f5f5;
|
||||
--text-indent: 1.6rem;
|
||||
--view-background-color: #f5f5f574;
|
||||
scrollbar-color: var(--primary-color) var(--background-color); }
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
@ -18,7 +19,8 @@
|
||||
--background-color: #f5f5f5;
|
||||
--primary-color: #9f2b68;
|
||||
--secondary-color: #cd2682;
|
||||
--text-color: #0a0a0a; } }
|
||||
--text-color: #0a0a0a;
|
||||
--view-background-color: #0a0a0a74; } }
|
||||
|
||||
* { margin: 0; }
|
||||
|
||||
@ -99,6 +101,24 @@ nav h1 {
|
||||
|
||||
section { margin-top: 1rem; }
|
||||
|
||||
#view {
|
||||
align-items: center;
|
||||
background-color: var(--view-background-color);
|
||||
display: none;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
vertical-align: middle;
|
||||
width: 100%; }
|
||||
|
||||
#view audio,
|
||||
#view video {
|
||||
flex: none;
|
||||
margin: 0 auto;
|
||||
max-height: 100%;
|
||||
max-width: 100%; }
|
||||
|
||||
table { overflow-y: scroll; width: 100%; }
|
||||
|
||||
tr { vertical-align: top; }
|
||||
|
32
files/static/assets/js/main.js
Normal file
32
files/static/assets/js/main.js
Normal file
@ -0,0 +1,32 @@
|
||||
const video_formats = ["webm", "mp4"];
|
||||
const audio_formats = ["mp3", "flac", "opus", "ogg", "m4a"];
|
||||
|
||||
(() => {
|
||||
document.getElementById("view").addEventListener("click", e => {
|
||||
e.target.firstChild.remove();
|
||||
e.target.style.display = "none";
|
||||
});
|
||||
|
||||
const file_links = Array.from(document.getElementsByTagName('tr')).slice(2).filter((e) => e.lastChild.innerHTML != "DIR").map(v => v.firstChild.firstChild);
|
||||
|
||||
file_links.forEach(f => f.addEventListener('click', e => {
|
||||
if (video_formats.some(ext => e.target.pathname.endsWith(ext))) {
|
||||
e.preventDefault();
|
||||
const video = document.createElement("video");
|
||||
video.autoplay = true;
|
||||
video.controls = true;
|
||||
video.src = e.target.pathname;
|
||||
document.getElementById("view").appendChild(video);
|
||||
document.getElementById("view").style.display = "flex";
|
||||
} else if (audio_formats.some(ext => e.target.pathname.endsWith(ext))) {
|
||||
e.preventDefault();
|
||||
const audio = document.createElement("audio");
|
||||
audio.autoplay = true;
|
||||
audio.controls = true;
|
||||
audio.src = e.target.pathname;
|
||||
document.getElementById("view").appendChild(audio);
|
||||
document.getElementById("view").style.display = "flex";
|
||||
}
|
||||
}));
|
||||
})();
|
||||
|
@ -9,6 +9,7 @@ html(lang='en')
|
||||
meta(name='description' content=description)
|
||||
link(rel='icon' type='image/svg+xml' href='/shared/img/favicon.svg' sizes='any')
|
||||
link(href='/assets/css/main.css' rel='stylesheet')
|
||||
script(src='/assets/js/main.js' defer)
|
||||
body
|
||||
header
|
||||
svg#logo(viewBox='0 -25 216 40')
|
||||
@ -33,4 +34,5 @@ html(lang='en')
|
||||
tr
|
||||
td #[a(href=item.link)= item.name]
|
||||
td!= moment(item.datetime, clientTZ)
|
||||
td= item.size
|
||||
td= item.size
|
||||
div#view
|
Loading…
Reference in New Issue
Block a user