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
@ -11,6 +11,7 @@
|
|||||||
--secondary-color: #9f2b68;
|
--secondary-color: #9f2b68;
|
||||||
--text-color: #f5f5f5;
|
--text-color: #f5f5f5;
|
||||||
--text-indent: 1.6rem;
|
--text-indent: 1.6rem;
|
||||||
|
--view-background-color: #f5f5f574;
|
||||||
scrollbar-color: var(--primary-color) var(--background-color); }
|
scrollbar-color: var(--primary-color) var(--background-color); }
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
@ -18,7 +19,8 @@
|
|||||||
--background-color: #f5f5f5;
|
--background-color: #f5f5f5;
|
||||||
--primary-color: #9f2b68;
|
--primary-color: #9f2b68;
|
||||||
--secondary-color: #cd2682;
|
--secondary-color: #cd2682;
|
||||||
--text-color: #0a0a0a; } }
|
--text-color: #0a0a0a;
|
||||||
|
--view-background-color: #0a0a0a74; } }
|
||||||
|
|
||||||
* { margin: 0; }
|
* { margin: 0; }
|
||||||
|
|
||||||
@ -99,6 +101,24 @@ nav h1 {
|
|||||||
|
|
||||||
section { margin-top: 1rem; }
|
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%; }
|
table { overflow-y: scroll; width: 100%; }
|
||||||
|
|
||||||
tr { vertical-align: top; }
|
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)
|
meta(name='description' content=description)
|
||||||
link(rel='icon' type='image/svg+xml' href='/shared/img/favicon.svg' sizes='any')
|
link(rel='icon' type='image/svg+xml' href='/shared/img/favicon.svg' sizes='any')
|
||||||
link(href='/assets/css/main.css' rel='stylesheet')
|
link(href='/assets/css/main.css' rel='stylesheet')
|
||||||
|
script(src='/assets/js/main.js' defer)
|
||||||
body
|
body
|
||||||
header
|
header
|
||||||
svg#logo(viewBox='0 -25 216 40')
|
svg#logo(viewBox='0 -25 216 40')
|
||||||
@ -34,3 +35,4 @@ html(lang='en')
|
|||||||
td #[a(href=item.link)= item.name]
|
td #[a(href=item.link)= item.name]
|
||||||
td!= moment(item.datetime, clientTZ)
|
td!= moment(item.datetime, clientTZ)
|
||||||
td= item.size
|
td= item.size
|
||||||
|
div#view
|
Loading…
Reference in New Issue
Block a user