Skip to content
Snippets Groups Projects
Commit 215d74f2 authored by Nicolas Pernoud's avatar Nicolas Pernoud
Browse files

fix: opening on slow connections

parent 85168e58
Branches
No related tags found
No related merge requests found
Pipeline #6678 passed
...@@ -21,7 +21,33 @@ export class Open { ...@@ -21,7 +21,33 @@ export class Open {
return GID(this, id); return GID(this, id);
} }
update(isNext) { async show(animated) {
// Create empty modal
this.openModal = document.createElement("div");
this.openModal.classList.add("modal", "is-active");
if (animated) this.openModal.classList.add("animate__animated", "animate__fadeIn");
this.openModal.innerHTML = this.emptyTemplate();
document.body.appendChild(this.openModal);
// Add events
this.gid("open-close").addEventListener("click", async () => {
await AnimateCSS(this.openModal, "fadeOut");
this.openModal.parentNode.removeChild(this.openModal);
});
this.gid("open-previous").addEventListener("click", () => {
this.seek(false);
});
this.gid("open-next").addEventListener("click", () => {
this.seek(true);
});
this.gid("open-share").addEventListener("click", () => {
const shareModal = new Share(this.hostname, this.file);
shareModal.show();
});
// Display
this.showContent();
}
seek(isNext) {
const idx = isNext ? this.index + 1 : this.index - 1; const idx = isNext ? this.index + 1 : this.index - 1;
if (idx >= 0 && idx < this.files.length) { if (idx >= 0 && idx < this.files.length) {
const type = GetType(this.files[idx]); const type = GetType(this.files[idx]);
...@@ -30,17 +56,13 @@ export class Open { ...@@ -30,17 +56,13 @@ export class Open {
this.file = this.files[idx]; this.file = this.files[idx];
this.type = type; this.type = type;
this.url = `${this.fullHostname}${this.file.path}`; this.url = `${this.fullHostname}${this.file.path}`;
this.openModal.parentNode.removeChild(this.openModal); this.showContent();
this.show(false);
} }
} }
} }
async show(animated) { async showContent() {
this.user = await Auth.GetUser(); this.user = await Auth.GetUser();
this.openModal = document.createElement("div");
this.openModal.classList.add("modal", "is-active");
if (animated) this.openModal.classList.add("animate__animated", "animate__fadeIn");
let content; let content;
let token; let token;
if (this.type == "text") { if (this.type == "text") {
...@@ -83,25 +105,10 @@ export class Open { ...@@ -83,25 +105,10 @@ export class Open {
HandleError(e); HandleError(e);
} }
} }
this.openModal.innerHTML = this.computeTemplate(content, token); this.updateTemplate(content, token);
document.body.appendChild(this.openModal);
this.gid("open-close").addEventListener("click", async () => {
await AnimateCSS(this.openModal, "fadeOut");
this.openModal.parentNode.removeChild(this.openModal);
});
this.gid("open-previous").addEventListener("click", () => {
this.update(false);
});
this.gid("open-next").addEventListener("click", () => {
this.update(true);
});
this.gid("open-share").addEventListener("click", () => {
const shareModal = new Share(this.hostname, this.file);
shareModal.show();
});
} }
computeTemplate(content, token) { emptyTemplate() {
return /* HTML */ ` return /* HTML */ `
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card"> <div class="modal-card">
...@@ -109,13 +116,7 @@ export class Open { ...@@ -109,13 +116,7 @@ export class Open {
<button class="delete navbar-menu-icon" aria-label="close" id="${this.prefix}open-close"></button> <button class="delete navbar-menu-icon" aria-label="close" id="${this.prefix}open-close"></button>
<p class="modal-card-title has-text-centered">${this.file.name}</p> <p class="modal-card-title has-text-centered">${this.file.name}</p>
</header> </header>
<section class="modal-card-body is-paddingless flex-container"> <section id="${this.prefix}content" class="modal-card-body is-paddingless flex-container"></section>
${this.type == "other" ? /* HTML */ ` <embed src="${this.url}?token=${token}&inline" type="application/pdf" width="100%" style="height: 75vh;" /> ` : ""}
${this.type == "image" ? `<img id="${this.prefix}open-image" src="${this.url}?token=${token}" alt="Previewed image" />` : ""}
${this.type == "audio" ? /* HTML */ ` <audio controls autoplay><source src="${this.url}?token=${token}" /></audio> ` : ""}
${this.type == "video" ? /* HTML */ ` <video controls autoplay><source src="${this.url}?token=${token}" /></video> ` : ""}
${this.type == "text" ? /* HTML */ ` <textarea class="textarea" readonly>${content}</textarea> ` : ""}
</section>
<footer class="modal-card-foot"> <footer class="modal-card-foot">
<button id="${this.prefix}open-previous" class="button"> <button id="${this.prefix}open-previous" class="button">
<span class="icon is-small"><i class="fas fa-arrow-circle-left"></i></span> <span class="icon is-small"><i class="fas fa-arrow-circle-left"></i></span>
...@@ -130,4 +131,14 @@ export class Open { ...@@ -130,4 +131,14 @@ export class Open {
</div> </div>
`; `;
} }
updateTemplate(content, token) {
this.gid("content").innerHTML = /* HTML */ `
${this.type == "other" ? /* HTML */ ` <embed src="${this.url}?token=${token}&inline" type="application/pdf" width="100%" style="height: 75vh;" /> ` : ""}
${this.type == "image" ? `<img id="${this.prefix}open-image" src="${this.url}?token=${token}" alt="Previewed image" />` : ""}
${this.type == "audio" ? /* HTML */ ` <audio controls autoplay><source src="${this.url}?token=${token}" /></audio> ` : ""}
${this.type == "video" ? /* HTML */ ` <video controls autoplay><source src="${this.url}?token=${token}" /></video> ` : ""}
${this.type == "text" ? /* HTML */ ` <textarea class="textarea" readonly>${content}</textarea> ` : ""}
`;
}
} }
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<div class="navbar-brand"> <div class="navbar-brand">
<div class="navbar-item"> <div class="navbar-item">
<a class="button is-primary is-rounded is-outlined" href="https://www.github.com/nicolaspernoud/Vestibule" target="_blank" rel="noopener noreferrer"> <a class="button is-primary is-rounded is-outlined" href="https://www.github.com/nicolaspernoud/Vestibule" target="_blank" rel="noopener noreferrer">
<span>4.3.37</span> <span>4.3.38</span>
<span class="icon"> <span class="icon">
<svg <svg
class="svg-inline--fa fa-github fa-w-16" class="svg-inline--fa fa-github fa-w-16"
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment