From 4f0393a674f7d33de74d57302846e7624efc3d15 Mon Sep 17 00:00:00 2001 From: Wim Brand Date: Sun, 14 Jun 2020 16:02:15 +0200 Subject: [PATCH] improve file previews --- res/include/script/dependencies/util.js | 4 +++ res/include/script/file_viewer/Toolbar.js | 4 +-- .../file_viewer/viewer_scripts/FileViewer.js | 34 ++++++++++++++----- 3 files changed, 32 insertions(+), 10 deletions(-) diff --git a/res/include/script/dependencies/util.js b/res/include/script/dependencies/util.js index 5c0171a..08384b4 100644 --- a/res/include/script/dependencies/util.js +++ b/res/include/script/dependencies/util.js @@ -67,6 +67,10 @@ function formatNumber(amt, precision) { return amt } +function formatThousands(x) { + return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " "); +} + function formatDataVolume(amt, precision) { if (precision < 3) { precision = 3; } if (amt >= 1e12) { diff --git a/res/include/script/file_viewer/Toolbar.js b/res/include/script/file_viewer/Toolbar.js index d7be9b4..837d8c1 100644 --- a/res/include/script/file_viewer/Toolbar.js +++ b/res/include/script/file_viewer/Toolbar.js @@ -27,8 +27,8 @@ function Toolbar(viewer) { Toolbar.prototype.setFile = function(file) { this.currentFile = file - this.spanViews.innerText = file.views - this.spanDownloads.innerText = Math.round((file.bandwidth_used/file.size)*10)/10 + this.spanViews.innerText = formatThousands(file.views) + this.spanDownloads.innerText = formatThousands(Math.round(file.bandwidth_used/file.size)) this.spanSize.innerText = formatDataVolume(file.size, 3) } diff --git a/res/include/script/file_viewer/viewer_scripts/FileViewer.js b/res/include/script/file_viewer/viewer_scripts/FileViewer.js index 1d7d20c..d6d0697 100644 --- a/res/include/script/file_viewer/viewer_scripts/FileViewer.js +++ b/res/include/script/file_viewer/viewer_scripts/FileViewer.js @@ -7,19 +7,37 @@ function FileViewer(viewer, file, next) { this.container.classList = "image-container" this.container.appendChild(document.createElement("br")) + this.title = document.createElement("h1") + this.title.innerText = "You are viewing a file on pixeldrain" + this.container.appendChild(this.title) + this.icon = document.createElement("img") + this.icon.style.display = "inline-block" + this.icon.style.verticalAlign = "middle" this.icon.src = this.file.icon_href this.container.appendChild(this.icon) - this.container.appendChild(document.createElement("br")) - this.container.appendChild(document.createTextNode(file.name)) - this.container.appendChild(document.createElement("br")) - this.container.appendChild(document.createTextNode("Type: "+file.mime_type)) - this.container.appendChild(document.createElement("br")) - this.container.appendChild(document.createElement("br")) - this.container.appendChild(document.createTextNode( - "Press the 'Download' button in the menu to download this file" + this.fileDetails = document.createElement("div") + this.fileDetails.style.display = "inline-block" + this.fileDetails.style.textAlign = "left" + this.fileDetails.style.paddingLeft = "8px" + this.fileDetails.style.verticalAlign = "middle" + + this.fileDetails.appendChild(document.createTextNode("Name: "+file.name)) + this.fileDetails.appendChild(document.createElement("br")) + this.fileDetails.appendChild(document.createTextNode("Type: "+file.mime_type)) + this.fileDetails.appendChild(document.createElement("br")) + this.fileDetails.appendChild(document.createTextNode( + "No preview is available for this file type. Download to view it locally" )) + this.fileDetails.appendChild(document.createElement("br")) + + this.btnDL = document.getElementById("btn_download").cloneNode(true) + this.btnDL.addEventListener("click", () => { viewer.toolbar.download() }) + this.btnDL.classList = "button_highlight" + this.fileDetails.appendChild(this.btnDL) + + this.container.appendChild(this.fileDetails) } FileViewer.prototype.render = function(parent) {