improve file previews

This commit is contained in:
2020-06-14 16:02:15 +02:00
parent 881796b416
commit 4f0393a674
3 changed files with 32 additions and 10 deletions

View File

@@ -67,6 +67,10 @@ function formatNumber(amt, precision) {
return amt return amt
} }
function formatThousands(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
}
function formatDataVolume(amt, precision) { function formatDataVolume(amt, precision) {
if (precision < 3) { precision = 3; } if (precision < 3) { precision = 3; }
if (amt >= 1e12) { if (amt >= 1e12) {

View File

@@ -27,8 +27,8 @@ function Toolbar(viewer) {
Toolbar.prototype.setFile = function(file) { Toolbar.prototype.setFile = function(file) {
this.currentFile = file this.currentFile = file
this.spanViews.innerText = file.views this.spanViews.innerText = formatThousands(file.views)
this.spanDownloads.innerText = Math.round((file.bandwidth_used/file.size)*10)/10 this.spanDownloads.innerText = formatThousands(Math.round(file.bandwidth_used/file.size))
this.spanSize.innerText = formatDataVolume(file.size, 3) this.spanSize.innerText = formatDataVolume(file.size, 3)
} }

View File

@@ -7,19 +7,37 @@ function FileViewer(viewer, file, next) {
this.container.classList = "image-container" this.container.classList = "image-container"
this.container.appendChild(document.createElement("br")) 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 = document.createElement("img")
this.icon.style.display = "inline-block"
this.icon.style.verticalAlign = "middle"
this.icon.src = this.file.icon_href this.icon.src = this.file.icon_href
this.container.appendChild(this.icon) this.container.appendChild(this.icon)
this.container.appendChild(document.createElement("br")) this.fileDetails = document.createElement("div")
this.container.appendChild(document.createTextNode(file.name)) this.fileDetails.style.display = "inline-block"
this.container.appendChild(document.createElement("br")) this.fileDetails.style.textAlign = "left"
this.container.appendChild(document.createTextNode("Type: "+file.mime_type)) this.fileDetails.style.paddingLeft = "8px"
this.container.appendChild(document.createElement("br")) this.fileDetails.style.verticalAlign = "middle"
this.container.appendChild(document.createElement("br"))
this.container.appendChild(document.createTextNode( this.fileDetails.appendChild(document.createTextNode("Name: "+file.name))
"Press the 'Download' button in the menu to download this file" 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) { FileViewer.prototype.render = function(parent) {