pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add compat file viewer

Browse Source
This commit is contained in:
Wim Brand
2020-01-28 12:51:21 +01:00
parent cb4082fd44
commit 8151aaa18e
23 changed files with 552 additions and 702 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
res/include/script/file_viewer/DetailsWindow.js
View File

@@ -1,48 +1,48 @@
function DetailsWindow(viewer) {let dw = this;
dw.viewer = viewer;
dw.visible = false;
dw.fileID = "";
dw.graph = 0;
function DetailsWindow(viewer) {
this.viewer = viewer;
this.visible = false;
this.fileID = "";
this.graph = 0;
dw.divPopup = document.getElementById("details_popup");
dw.btnDetails = document.getElementById("btn_details");
dw.btnCloseDetails = document.getElementById("btn_close_details");
dw.divFileDetails = document.getElementById("info_file_details");
this.divPopup = document.getElementById("details_popup");
this.btnDetails = document.getElementById("btn_details");
this.btnCloseDetails = document.getElementById("btn_close_details");
this.divFileDetails = document.getElementById("info_file_details");
dw.btnDetails.addEventListener("click", () => { dw.toggle(); });
dw.btnCloseDetails.addEventListener("click", () => { dw.toggle(); });
this.btnDetails.addEventListener("click", () => { this.toggle(); });
this.btnCloseDetails.addEventListener("click", () => { this.toggle(); });
}
DetailsWindow.prototype.toggle = function() {let dw = this;
if (dw.visible) {
dw.divPopup.style.opacity = "0";
dw.divPopup.style.visibility = "hidden";
dw.btnDetails.classList.remove("button_highlight");
dw.visible = false;
DetailsWindow.prototype.toggle = function() {
if (this.visible) {
this.divPopup.style.opacity = "0";
this.divPopup.style.visibility = "hidden";
this.btnDetails.classList.remove("button_highlight");
this.visible = false;
} else {
dw.divPopup.style.opacity = "1";
dw.divPopup.style.visibility = "visible";
dw.btnDetails.classList.add("button_highlight");
dw.visible = true;
this.divPopup.style.opacity = "1";
this.divPopup.style.visibility = "visible";
this.btnDetails.classList.add("button_highlight");
this.visible = true;
// This is a workaround for a chrome bug which makes it so hidden
// windows can't be scrolled after they are shown
dw.divPopup.focus();
this.divPopup.focus();
if (dw.graph === 0) {
dw.renderGraph();
if (this.graph === 0) {
this.renderGraph();
}
dw.updateGraph(dw.fileID);
this.updateGraph(this.fileID);
}
}
DetailsWindow.prototype.setDetails = function(file) {let dw = this;
DetailsWindow.prototype.setDetails = function(file) {
let desc = "";
if (dw.viewer.isList) {
if (this.viewer.isList) {
desc = file.description;
}
dw.fileID = file.id;
dw.divFileDetails.innerHTML = "<table>"
this.fileID = file.id;
this.divFileDetails.innerHTML = "<table>"
+ "<tr><td>Name<td><td>" + escapeHTML(file.name) + "</td></tr>"
+ "<tr><td>URL<td><td><a href=\"/u/" + file.id + "\">"+domainURL()+"/u/" + file.id + "</a></td></tr>"
+ "<tr><td>Mime Type<td><td>" + escapeHTML(file.mime_type) + "</td></tr>"
@@ -53,25 +53,25 @@ DetailsWindow.prototype.setDetails = function(file) {let dw = this;
+ "<tr><td>Description<td><td>" + escapeHTML(desc) + "</td></tr>"
+ "</table>";
if(dw.visible) {
dw.updateGraph(file.id);
if(this.visible) {
this.updateGraph(file.id);
}
}
DetailsWindow.prototype.updateGraph = function(fileID) {let dw = this;
DetailsWindow.prototype.updateGraph = function(fileID) {
console.log("updating graph "+fileID);
fetch(apiEndpoint+"/file/" + fileID + "/timeseries?interval=60?days=14").then(resp => {
if (!resp.ok) {return null;}
return resp.json();
}).then(resp => {
dw.graph.data.labels = resp.labels;
dw.graph.data.datasets[0].data = resp.downloads;
dw.graph.data.datasets[1].data = resp.views;
dw.graph.update();
this.graph.data.labels = resp.labels;
this.graph.data.datasets[0].data = resp.downloads;
this.graph.data.datasets[1].data = resp.views;
this.graph.update();
})
}
DetailsWindow.prototype.renderGraph = function() {let dw = this;
DetailsWindow.prototype.renderGraph = function() {
console.log("rendering graph");
Chart.defaults.global.defaultFontColor = "#b3b3b3";
Chart.defaults.global.defaultFontSize = 15;
@@ -81,7 +81,7 @@ DetailsWindow.prototype.renderGraph = function() {let dw = this;
Chart.defaults.global.tooltips.mode = "index";
Chart.defaults.global.tooltips.axis = "x";
Chart.defaults.global.tooltips.intersect = false;
dw.graph = new Chart(
this.graph = new Chart(
document.getElementById('bandwidth_chart'),
{
type: 'line',

146
res/include/script/file_viewer/ListNavigator.js
View File

@@ -1,23 +1,24 @@
function ListNavigator(viewer, data) {let ln = this;
ln.viewer = viewer;
ln.data = data;
ln.length = data.length;
ln.position = 0;
ln.history = [];
ln.shuffle = false;
function ListNavigator(viewer, files) {
this.viewer = viewer;
this.files = files;
this.length = files.length;
this.position = 0;
this.history = [];
this.shuffle = false;
ln.divListNavigator = document.getElementById("list_navigator");
this.divListNavigator = document.getElementById("list_navigator");
ln.btnDownloadList = document.getElementById("btn_download_list");
ln.btnDownloadList.style.display = "";
ln.btnDownloadList.addEventListener("click", () => { ln.downloadList(); });
ln.btnShuffle = document.getElementById("btn_shuffle");
ln.btnShuffle.style.display = "";
ln.btnShuffle.addEventListener("click", () => { ln.toggleShuffle(); });
this.btnDownloadList = document.getElementById("btn_download_list");
if (files.id !== "") {
this.btnDownloadList.style.display = "";
this.btnDownloadList.addEventListener("click", () => { this.downloadList(); });
}
this.btnShuffle = document.getElementById("btn_shuffle");
this.btnShuffle.style.display = "";
this.btnShuffle.addEventListener("click", () => { this.toggleShuffle(); });
// Render list contents in list navigator div
data.forEach((item, i) => {
files.forEach((item, i) => {
let filename;
if(item.name !== "null"){
filename = item.name;
@@ -27,89 +28,92 @@ function ListNavigator(viewer, data) {let ln = this;
let d = document.createElement("div");
d.classList = "file_button list_item";
d.addEventListener("click", () => { ln.setItem(i); });
d.addEventListener("click", () => { this.setItem(i); });
d.innerText = filename;
ln.divListNavigator.appendChild(d);
this.divListNavigator.appendChild(d);
});
// Make the navigator visible
ln.divListNavigator.style.display = "inline-block";
this.divListNavigator.style.display = "inline-block";
// Skip to the file defined in the link hash
if(Number.isInteger(parseInt(getHashValue("item")))){
ln.setItem(parseInt(getHashValue("item")));
let matches = location.hash.match(new RegExp('item=([^&]*)'));
let hashID = matches ? matches[1] : null;
if(Number.isInteger(parseInt(hashID))){
this.setItem(parseInt(hashID));
}else{
ln.setItem(0);
this.setItem(0);
}
}
ListNavigator.prototype.nextItem = function() {let ln = this;
if(ln.shuffle){
ln.randItem();
ListNavigator.prototype.nextItem = function() {
if(this.shuffle){
this.randItem();
return;
}
if (ln.position >= ln.length) {
ln.position = 0;
if (this.position >= this.length) {
this.position = 0;
} else {
ln.position++;
this.position++;
}
ln.setItem(ln.position);
this.setItem(this.position);
}
ListNavigator.prototype.previousItem = function() {let ln = this;
if(ln.position === 0){
ln.position = ln.length - 1;
ListNavigator.prototype.previousItem = function() {
if(this.position === 0){
this.position = this.length - 1;
}else{
ln.position--;
this.position--;
}
ln.setItem(ln.position);
this.setItem(this.position);
}
ListNavigator.prototype.randItem = function() {let ln = this;
ListNavigator.prototype.randItem = function() {
// Avoid viewing the same file multiple times
let rand;
do {
rand = Math.round(Math.random() * ln.length);
rand = Math.round(Math.random() * this.length);
console.log("rand is " + rand);
} while(ln.history.indexOf(rand) > -1);
} while(this.history.indexOf(rand) > -1);
ln.setItem(rand);
this.setItem(rand);
}
ListNavigator.prototype.setItem = function(index) {let ln = this;
if(index >= ln.length){
ln.position = 0;
ListNavigator.prototype.setItem = function(index) {
if(index >= this.length){
this.position = 0;
}else{
ln.position = index;
this.position = index;
}
// Set the URL hash
location.hash = "item=" + ln.position;
ln.viewer.setFile(ln.data[ln.position]);
location.hash = "item=" + this.position;
this.viewer.setFile(this.files[this.position]);
ln.addToHistory(index);
ln.loadThumbnails(index);
this.addToHistory(index);
this.loadThumbnails(index);
document.querySelectorAll("#list_navigator > .file_button_selected").forEach(el => {
el.classList.remove("file_button_selected");
});
let selectedItem = ln.divListNavigator.children[ln.position];
let selectedItem = this.divListNavigator.children[this.position];
selectedItem.classList.add("file_button_selected");
let cst = window.getComputedStyle(selectedItem);
let itemWidth = selectedItem.offsetWidth + parseInt(cst.marginLeft) + parseInt(cst.marginRight);
let start = ln.divListNavigator.scrollLeft;
let end = ((ln.position * itemWidth) + (itemWidth / 2)) - (ln.divListNavigator.clientWidth / 2);
let start = this.divListNavigator.scrollLeft;
let end = ((this.position * itemWidth) + (itemWidth / 2)) - (this.divListNavigator.clientWidth / 2);
let steps = 60; // One second
let stepSize = (end - start)/steps;
let animateScroll = (pos, step) => {
ln.divListNavigator.scrollLeft = pos;
this.divListNavigator.scrollLeft = pos;
if (step < steps) {
requestAnimationFrame(() => {
@@ -120,31 +124,30 @@ ListNavigator.prototype.setItem = function(index) {let ln = this;
animateScroll(start, 0);
}
ListNavigator.prototype.downloadList = function() {let ln = this;
document.getElementById("download_frame").src = "/api/list/" + ln.viewer.listId + "/zip";
ListNavigator.prototype.downloadList = function() {
document.getElementById("download_frame").src = "/api/list/" + this.viewer.listId + "/zip";
}
ListNavigator.prototype.addToHistory = function(index) {let ln = this;
if(ln.history.length >= (ln.length - 6)){
ln.history.shift();
ListNavigator.prototype.addToHistory = function(index) {
if(this.history.length >= (this.length - 6)){
this.history.shift();
}
ln.history.push(index);
this.history.push(index);
}
ListNavigator.prototype.toggleShuffle = function() {let ln = this;
ln.shuffle = !ln.shuffle; // :P
ListNavigator.prototype.toggleShuffle = function() {
this.shuffle = !this.shuffle; // :P
if(ln.shuffle){
if(this.shuffle){
document.querySelector("#btn_shuffle > span").innerHTML = "Shuffle&nbsp;&#x2611;"; // Check icon
ln.btnShuffle.classList.add("button_highlight");
this.btnShuffle.classList.add("button_highlight");
}else{
document.querySelector("#btn_shuffle > span").innerHTML = "Shuffle&nbsp;&#x2610;"; // Empty checkbox
ln.btnShuffle.classList.remove("button_highlight");
this.btnShuffle.classList.remove("button_highlight");
}
}
ListNavigator.prototype.loadThumbnails = function(index) {let ln = this;
ListNavigator.prototype.loadThumbnails = function(index) {
let startPos = +index - 50;
let endPos = +index + 50;
// fyi, the + is to let javascript know it's actually a number instead of a string
@@ -152,9 +155,8 @@ ListNavigator.prototype.loadThumbnails = function(index) {let ln = this;
if(startPos < 0){
startPos = 0;
}
if(endPos >= ln.length){
endPos = ln.length - 1;
if(endPos >= this.length){
endPos = this.length - 1;
}
let navigatorItems = document.getElementById("list_navigator").children
@@ -164,8 +166,8 @@ ListNavigator.prototype.loadThumbnails = function(index) {let ln = this;
continue; // Thumbnail already loaded
}
let thumb = "/api/file/" + ln.data[i].id + "/thumbnail?width=48&height=48";
let name = ln.data[i].name;
let thumb = "/api/file/" + this.files[i].id + "/thumbnail?width=48&height=48";
let name = this.files[i].name;
let itemHtml = "<img src=\"" + thumb + "\" "
+ "class=\"list_item_thumbnail\" alt=\"" + escapeHTML(name) + "\"/>"
@@ -174,11 +176,3 @@ ListNavigator.prototype.loadThumbnails = function(index) {let ln = this;
navigatorItems[i].innerHTML = itemHtml;
}
}
// Misc function, don't really know where else to put it
function getHashValue(key) {
let matches = location.hash.match(new RegExp(key + '=([^&]*)'));
return matches ? matches[1] : null;
}

114
res/include/script/file_viewer/Toolbar.js
View File

@@ -1,73 +1,73 @@
function Toolbar(viewer) {let t = this;
t.viewer = viewer;
t.visible = false;
t.sharebarVisible = false;
function Toolbar(viewer) {
this.viewer = viewer;
this.visible = false;
this.sharebarVisible = false;
t.divToolbar = document.getElementById("toolbar");
t.divFilePreview = document.getElementById("filepreview");
t.downloadFrame = document.getElementById("download_frame");
t.spanViews = document.getElementById("stat_views");
t.spanDownloads = document.getElementById("stat_downloads");
t.spanSize = document.getElementById("stat_size");
this.divToolbar = document.getElementById("toolbar");
this.divFilePreview = document.getElementById("filepreview");
this.downloadFrame = document.getElementById("download_frame");
this.spanViews = document.getElementById("stat_views");
this.spanDownloads = document.getElementById("stat_downloads");
this.spanSize = document.getElementById("stat_size");
t.btnToggleToolbar = document.getElementById("btn_toggle_toolbar");
t.btnDownload = document.getElementById("btn_download");
t.btnCopyLink = document.getElementById("btn_copy");
t.spanCopyLink = document.querySelector("#btn_copy > span");
t.btnShare = document.getElementById("btn_share");
t.divSharebar = document.getElementById("sharebar");
this.btnToggleToolbar = document.getElementById("btn_toggle_toolbar");
this.btnDownload = document.getElementById("btn_download");
this.btnCopyLink = document.getElementById("btn_copy");
this.spanCopyLink = document.querySelector("#btn_copy > span");
this.btnShare = document.getElementById("btn_share");
this.divSharebar = document.getElementById("sharebar");
t.btnToggleToolbar.addEventListener("click", () => { t.toggle(); });
t.btnDownload.addEventListener("click", () => { t.download(); });
t.btnCopyLink.addEventListener("click", () => { t.copyUrl(); });
t.btnShare.addEventListener("click", () => { t.toggleSharebar(); });
this.btnToggleToolbar.addEventListener("click", () => { this.toggle(); });
this.btnDownload.addEventListener("click", () => { this.download(); });
this.btnCopyLink.addEventListener("click", () => { this.copyUrl(); });
this.btnShare.addEventListener("click", () => { this.toggleSharebar(); });
}
Toolbar.prototype.toggle = function() {let t = this;
if (t.visible) {
if (t.sharebarVisible) { t.toggleSharebar(); }
Toolbar.prototype.toggle = function() {
if (this.visible) {
if (this.sharebarVisible) { this.toggleSharebar(); }
t.divToolbar.style.left = "-8em";
t.divFilePreview.style.left = "0px";
t.btnToggleToolbar.classList.remove("button_highlight");
t.visible = false;
this.divToolbar.style.left = "-8em";
this.divFilePreview.style.left = "0px";
this.btnToggleToolbar.classList.remove("button_highlight");
this.visible = false;
} else {
t.divToolbar.style.left = "0px";
t.divFilePreview.style.left = "8em";
t.btnToggleToolbar.classList.add("button_highlight");
t.visible = true;
this.divToolbar.style.left = "0px";
this.divFilePreview.style.left = "8em";
this.btnToggleToolbar.classList.add("button_highlight");
this.visible = true;
}
}
Toolbar.prototype.toggleSharebar = function() {let t = this;
Toolbar.prototype.toggleSharebar = function() {
if (navigator.share) {
navigator.share({
title: t.viewer.title,
text: "Download " + t.viewer.title + " here",
title: this.viewer.title,
text: "Download " + this.viewer.title + " here",
url: window.location.href
});
return;
}
if(t.sharebarVisible){
t.divSharebar.style.left = "-8em";
t.btnShare.classList.remove("button_highlight")
t.sharebarVisible = false;
if(this.sharebarVisible){
this.divSharebar.style.left = "-8em";
this.btnShare.classList.remove("button_highlight")
this.sharebarVisible = false;
}else{
t.divSharebar.style.left = "8em";
t.btnShare.classList.add("button_highlight")
t.sharebarVisible = true;
this.divSharebar.style.left = "8em";
this.btnShare.classList.add("button_highlight")
this.sharebarVisible = true;
}
}
Toolbar.prototype.download = function() {let t = this;
Toolbar.prototype.download = function() {
let triggerDL = (captchaResp = "") => {
if (captchaResp === "") {
t.downloadFrame.src = apiEndpoint+"/file/"+
t.viewer.currentFile+"?download";
this.downloadFrame.src = apiEndpoint+"/file/"+
this.viewer.currentFile+"?download";
} else {
t.downloadFrame.src = apiEndpoint+"/file/"+
t.viewer.currentFile+"?download&recaptcha_response="+captchaResp;
this.downloadFrame.src = apiEndpoint+"/file/"+
this.viewer.currentFile+"?download&recaptcha_response="+captchaResp;
}
}
@@ -87,7 +87,7 @@ Toolbar.prototype.download = function() {let t = this;
return;
}
fetch(apiEndpoint+"/file/"+t.viewer.currentFile+"/availability").then(resp => {
fetch(apiEndpoint+"/file/"+this.viewer.currentFile+"/availability").then(resp => {
return resp.json();
}).then(resp => {
let popupDiv = document.getElementById("captcha_popup");
@@ -130,28 +130,28 @@ Toolbar.prototype.download = function() {let t = this;
});
}
Toolbar.prototype.copyUrl = function() {let t = this;
Toolbar.prototype.copyUrl = function() {
if(copyText(window.location.href)) {
console.log('Text copied');
t.spanCopyLink.innerText = "Copied!";
t.btnCopyLink.classList.add("button_highlight")
this.spanCopyLink.innerText = "Copied!";
this.btnCopyLink.classList.add("button_highlight")
} else {
console.log('Copying not supported');
t.spanCopyLink.innerText = "Error!";
this.spanCopyLink.innerText = "Error!";
alert("Your browser does not support copying text.");
}
// Return to normal
setTimeout(() => {
t.spanCopyLink.innerText = "Copy";
t.btnCopyLink.classList.remove("button_highlight")
this.spanCopyLink.innerText = "Copy";
this.btnCopyLink.classList.remove("button_highlight")
}, 60000);
}
Toolbar.prototype.setStats = function(file) {let t = this;
t.spanViews.innerText = file.views
t.spanDownloads.innerText = Math.round((file.bandwidth_used/file.size)*10)/10;
t.spanSize.innerText = formatDataVolume(file.size, 3);
Toolbar.prototype.setStats = function(file) {
this.spanViews.innerText = file.views
this.spanDownloads.innerText = Math.round((file.bandwidth_used/file.size)*10)/10;
this.spanSize.innerText = formatDataVolume(file.size, 3);
}

114
res/include/script/file_viewer/Viewer.js
View File

@@ -1,27 +1,27 @@
function Viewer(type, viewToken, data) {let v = this;
function Viewer(type, viewToken, data) {
// Set defaults
v.toolbar = null;
v.listNavigator = null;
v.detailsWindow = null;
v.divFilepreview = null;
v.currentFile = "";
v.title = ""; // Contains either the file name or list title
v.listId = "";
v.viewToken = "";
v.isList = false;
v.isFile = false;
v.initialized = false;
this.toolbar = null;
this.listNavigator = null;
this.detailsWindow = null;
this.divFilepreview = null;
this.currentFile = "";
this.title = ""; // Contains either the file name or list title
this.listId = "";
this.viewToken = "";
this.isList = false;
this.isFile = false;
this.initialized = false;
v.viewToken = viewToken;
v.toolbar = new Toolbar(v);
v.detailsWindow = new DetailsWindow(v);
this.viewToken = viewToken;
this.toolbar = new Toolbar(this);
this.detailsWindow = new DetailsWindow(this);
v.divFilepreview = document.getElementById("filepreview");
this.divFilepreview = document.getElementById("filepreview");
// On small screens the toolbar takes too much space, so it collapses
// automatically
if (v.divFilepreview.clientWidth > 600 && !v.toolbar.visible) {
v.toolbar.toggle();
if (this.divFilepreview.clientWidth > 600 && !this.toolbar.visible) {
this.toolbar.toggle();
}
// The close button only works if the window has an opener. So we hide
@@ -31,41 +31,41 @@ function Viewer(type, viewToken, data) {let v = this;
}
if (type === "file") {
v.isFile = true;
v.currentFile = data.id;
v.title = data.name;
v.setFile(data);
this.isFile = true;
this.currentFile = data.id;
this.title = data.name;
this.setFile(data);
} else if (type === "list") {
v.isList = true;
v.listId = data.id;
v.title = data.title;
v.listNavigator = new ListNavigator(v, data.data);
this.isList = true;
this.listId = data.id;
this.title = data.title;
this.listNavigator = new ListNavigator(this, data.files);
}
v.renderSponsors();
window.addEventListener("resize", e => { v.renderSponsors(e); });
this.renderSponsors();
window.addEventListener("resize", e => { this.renderSponsors(e); });
// Register keyboard shortcuts
document.addEventListener("keydown", e => { v.keyboardEvent(e); });
document.addEventListener("keydown", e => { this.keyboardEvent(e); });
v.initialized = true;
this.initialized = true;
}
Viewer.prototype.setFile = function(file) {let v = this;
v.currentFile = file.id;
if (v.isList) {
Viewer.prototype.setFile = function(file) {
this.currentFile = file.id;
if (this.isList) {
document.getElementById("file_viewer_headerbar_title").style.lineHeight = "1em";
document.getElementById("file_viewer_list_title").innerText = this.title;
document.getElementById("file_viewer_file_title").innerText = file.name;
document.title = v.title + " ~ " + file.name + " ~ pixeldrain";
document.title = this.title + " ~ " + file.name + " ~ pixeldrain";
} else {
document.getElementById("file_viewer_file_title").innerText = file.name;
document.title = file.name + " ~ pixeldrain";
}
// Update the file details
v.detailsWindow.setDetails(file);
v.toolbar.setStats(file);
this.detailsWindow.setDetails(file);
this.toolbar.setStats(file);
// Register a new view. We don't care what this returns becasue we can't
// do anything about it anyway
@@ -73,47 +73,47 @@ Viewer.prototype.setFile = function(file) {let v = this;
{
method: "POST",
headers: {"Content-Type": "application/x-www-form-urlencoded"},
body: "token="+v.viewToken
body: "token="+this.viewToken
}
);
// Clear the canvas
v.divFilepreview.innerHTML = "";
this.divFilepreview.innerHTML = "";
let nextItem = () => {
if (v.listNavigator !== null) {
v.listNavigator.nextItem();
if (this.listNavigator !== null) {
this.listNavigator.nextItem();
}
};
if (
file.mime_type.startsWith("image")
) {
new ImageViewer(v, file).render(v.divFilepreview);
new ImageViewer(this, file).render(this.divFilepreview);
} else if (
file.mime_type.startsWith("video") ||
file.mime_type === "application/matroska" ||
file.mime_type === "application/x-matroska"
) {
new VideoViewer(v, file, nextItem).render(v.divFilepreview);
new VideoViewer(this, file, nextItem).render(this.divFilepreview);
} else if (
file.mime_type.startsWith("audio") ||
file.mime_type === "application/ogg" ||
file.name.endsWith(".mp3")
) {
new AudioViewer(v, file, nextItem).render(v.divFilepreview);
new AudioViewer(this, file, nextItem).render(this.divFilepreview);
} else if (
file.mime_type === "application/pdf" ||
file.mime_type === "application/x-pdf"
) {
new PDFViewer(v, file).render(v.divFilepreview);
new PDFViewer(this, file).render(this.divFilepreview);
} else if (
file.mime_type.startsWith("text") ||
file.id === "demo"
) {
new TextViewer(v, file).render(v.divFilepreview);
new TextViewer(this, file).render(this.divFilepreview);
} else {
new FileViewer(v, file).render(v.divFilepreview);
new FileViewer(this, file).render(this.divFilepreview);
}
}
@@ -152,7 +152,7 @@ Viewer.prototype.renderSponsors = function() {
}
}
Viewer.prototype.keyboardEvent = function(evt) {let v = this;
Viewer.prototype.keyboardEvent = function(evt) {
if (evt.ctrlKey || evt.altKey) {
return // prevent custom shortcuts from interfering with system shortcuts
}
@@ -160,33 +160,33 @@ Viewer.prototype.keyboardEvent = function(evt) {let v = this;
switch (evt.keyCode) {
case 65: // A or left arrow key go to previous file
case 37:
if (v.listNavigator != null) {
v.listNavigator.previousItem();
if (this.listNavigator != null) {
this.listNavigator.previousItem();
}
break;
case 68: // D or right arrow key go to next file
case 39:
if (v.listNavigator != null) {
v.listNavigator.nextItem();
if (this.listNavigator != null) {
this.listNavigator.nextItem();
}
break;
case 83:
if (evt.shiftKey) {
v.listNavigator.downloadList(); // SHIFT + S downloads all files in list
this.listNavigator.downloadList(); // SHIFT + S downloads all files in list
} else {
v.toolbar.download(); // S to download the current file
this.toolbar.download(); // S to download the current file
}
break;
case 82: // R to toggle list shuffle
if (v.listNavigator != null) {
v.listNavigator.toggleShuffle();
if (this.listNavigator != null) {
this.listNavigator.toggleShuffle();
}
break;
case 67: // C to copy to clipboard
v.toolbar.copyUrl();
this.toolbar.copyUrl();
break;
case 73: // I to open the details window
v.detailsWindow.toggle();
this.detailsWindow.toggle();
break;
case 81: // Q to close the window
window.close();

50
res/include/script/file_viewer/viewer_scripts/AudioViewer.js
View File

@@ -1,33 +1,33 @@
function AudioViewer(viewer, file, next) {let v = this;
v.viewer = viewer;
v.file = file;
v.next = next;
function AudioViewer(viewer, file, next) {
this.viewer = viewer;
this.file = file;
this.next = next;
v.container = document.createElement("div");
v.container.classList = "image-container";
v.container.appendChild(document.createElement("br"));
this.container = document.createElement("div");
this.container.classList = "image-container";
this.container.appendChild(document.createElement("br"));
v.icon = document.createElement("img");
v.icon.src = "/res/img/mime/audio.png";
v.container.appendChild(v.icon);
this.icon = document.createElement("img");
this.icon.src = "/res/img/mime/audio.png";
this.container.appendChild(this.icon);
v.container.appendChild(document.createElement("br"));
v.container.appendChild(document.createTextNode(file.name));
v.container.appendChild(document.createElement("br"));
v.container.appendChild(document.createElement("br"));
this.container.appendChild(document.createElement("br"));
this.container.appendChild(document.createTextNode(file.name));
this.container.appendChild(document.createElement("br"));
this.container.appendChild(document.createElement("br"));
v.element = document.createElement("audio");
v.element.autoplay = "autoplay";
v.element.controls = "controls";
v.element.style.width = "90%";
v.element.addEventListener("ended", () => { v.next(); }, false);
this.element = document.createElement("audio");
this.element.autoplay = "autoplay";
this.element.controls = "controls";
this.element.style.width = "90%";
this.element.addEventListener("ended", () => { this.next(); }, false);
v.source = document.createElement("source");
v.source.src = apiEndpoint+"/file/"+v.file.id;
v.element.appendChild(v.source);
v.container.appendChild(v.element);
this.source = document.createElement("source");
this.source.src = apiEndpoint+"/file/"+this.file.id;
this.element.appendChild(this.source);
this.container.appendChild(this.element);
}
AudioViewer.prototype.render = function(parent) {let v = this;
parent.appendChild(v.container);
AudioViewer.prototype.render = function(parent) {
parent.appendChild(this.container);
}

38
res/include/script/file_viewer/viewer_scripts/FileViewer.js
View File

@@ -1,27 +1,27 @@
function FileViewer(viewer, file, next) {let v = this;
v.viewer = viewer;
v.file = file;
v.next = next;
function FileViewer(viewer, file, next) {
this.viewer = viewer;
this.file = file;
this.next = next;
v.container = document.createElement("div");
v.container.classList = "image-container";
v.container.appendChild(document.createElement("br"));
this.container = document.createElement("div");
this.container.classList = "image-container";
this.container.appendChild(document.createElement("br"));
v.icon = document.createElement("img");
v.icon.src = apiEndpoint+"/"+file.thumbnail_href;
v.container.appendChild(v.icon);
this.icon = document.createElement("img");
this.icon.src = apiEndpoint+"/"+file.thumbnail_href;
this.container.appendChild(this.icon);
v.container.appendChild(document.createElement("br"));
v.container.appendChild(document.createTextNode(file.name));
v.container.appendChild(document.createElement("br"));
v.container.appendChild(document.createTextNode("Type: "+file.mime_type));
v.container.appendChild(document.createElement("br"));
v.container.appendChild(document.createElement("br"));
v.container.appendChild(document.createTextNode(
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"
));
}
FileViewer.prototype.render = function(parent) {let v = this;
parent.appendChild(v.container);
FileViewer.prototype.render = function(parent) {
parent.appendChild(this.container);
}

102
res/include/script/file_viewer/viewer_scripts/ImageViewer.js
View File

@@ -1,48 +1,48 @@
function ImageViewer(viewer, file) {let v = this;
v.viewer = viewer;
v.file = file;
v.zoomed = false;
v.x = 0;
v.y = 0;
v.dragging = false;
function ImageViewer(viewer, file) {
this.viewer = viewer;
this.file = file;
this.zoomed = false;
this.x = 0;
this.y = 0;
this.dragging = false;
v.container = document.createElement("dv");
v.container.classList = "image-container";
// v.container.style.lineHeight = "0";
this.container = document.createElement("dv");
this.container.classList = "image-container";
// this.container.style.lineHeight = "0";
v.element = document.createElement("img");
v.element.classList = "pannable center drop-shadow";
v.element.src = apiEndpoint+"/file/"+v.file.id;
v.element.addEventListener("dblclick", (e) => { return v.doubleclick(e); });
v.element.addEventListener("doubletap", (e) => { return v.doubleclick(e); });
v.element.addEventListener("mousedown", (e) => { return v.mousedown(e); });
document.addEventListener("mousemove", (e) => { return v.mousemove(e); });
document.addEventListener("mouseup", (e) => { return v.mouseup(e); });
this.element = document.createElement("img");
this.element.classList = "pannable center drop-shadow";
this.element.src = apiEndpoint+"/file/"+this.file.id;
this.element.addEventListener("dblclick", (e) => { return this.doubleclick(e); });
this.element.addEventListener("doubletap", (e) => { return this.doubleclick(e); });
this.element.addEventListener("mousedown", (e) => { return this.mousedown(e); });
document.addEventListener("mousemove", (e) => { return this.mousemove(e); });
document.addEventListener("mouseup", (e) => { return this.mouseup(e); });
v.container.appendChild(v.element);
this.container.appendChild(this.element);
}
ImageViewer.prototype.render = function(parent) {let v = this;
parent.appendChild(v.container);
ImageViewer.prototype.render = function(parent) {
parent.appendChild(this.container);
}
ImageViewer.prototype.doubleclick = function(e) {let v = this;
if (v.zoomed) {
v.element.style.maxWidth = "100%";
v.element.style.maxHeight = "100%";
v.element.style.top = "50%";
v.element.style.left = "auto";
v.element.style.transform = "translateY(-50%)";
v.container.style.overflow = "hidden";
v.zoomed = false;
ImageViewer.prototype.doubleclick = function(e) {
if (this.zoomed) {
this.element.style.maxWidth = "100%";
this.element.style.maxHeight = "100%";
this.element.style.top = "50%";
this.element.style.left = "auto";
this.element.style.transform = "translateY(-50%)";
this.container.style.overflow = "hidden";
this.zoomed = false;
} else {
v.element.style.maxWidth = "none";
v.element.style.maxHeight = "none";
v.element.style.top = "0";
v.element.style.left = "";
v.element.style.transform = "none";
v.container.style.overflow = "scroll";
v.zoomed = true;
this.element.style.maxWidth = "none";
this.element.style.maxHeight = "none";
this.element.style.top = "0";
this.element.style.left = "";
this.element.style.transform = "none";
this.container.style.overflow = "scroll";
this.zoomed = true;
}
e.preventDefault();
@@ -50,11 +50,11 @@ ImageViewer.prototype.doubleclick = function(e) {let v = this;
return false;
}
ImageViewer.prototype.mousedown = function(e) {let v = this;
if (!v.dragging && e.which === 1 && v.zoomed) {
v.x = e.pageX;
v.y = e.pageY;
v.dragging = true;
ImageViewer.prototype.mousedown = function(e) {
if (!this.dragging && e.which === 1 && this.zoomed) {
this.x = e.pageX;
this.y = e.pageY;
this.dragging = true;
e.preventDefault();
e.stopPropagation();
@@ -62,13 +62,13 @@ ImageViewer.prototype.mousedown = function(e) {let v = this;
}
}
ImageViewer.prototype.mousemove = function(e) {let v = this;
if (v.dragging) {
v.container.scrollLeft = v.container.scrollLeft - (e.pageX - v.x);
v.container.scrollTop = v.container.scrollTop - (e.pageY - v.y);
ImageViewer.prototype.mousemove = function(e) {
if (this.dragging) {
this.container.scrollLeft = this.container.scrollLeft - (e.pageX - this.x);
this.container.scrollTop = this.container.scrollTop - (e.pageY - this.y);
v.x = e.pageX;
v.y = e.pageY;
this.x = e.pageX;
this.y = e.pageY;
e.preventDefault();
e.stopPropagation();
@@ -77,9 +77,9 @@ ImageViewer.prototype.mousemove = function(e) {let v = this;
}
ImageViewer.prototype.mouseup = function(e) {let v = this;
if (v.dragging) {
v.dragging = false;
ImageViewer.prototype.mouseup = function(e) {
if (this.dragging) {
this.dragging = false;
e.preventDefault();
e.stopPropagation();

18
res/include/script/file_viewer/viewer_scripts/PDFViewer.js
View File

@@ -1,13 +1,13 @@
function PDFViewer(viewer, file) {let v = this;
v.viewer = viewer;
v.file = file;
function PDFViewer(viewer, file) {
this.viewer = viewer;
this.file = file;
v.container = document.createElement("iframe");
v.container.classList = "image-container";
v.container.style.border = "none";
v.container.src = "/res/misc/pdf-viewer/web/viewer.html?file="+apiEndpoint+"/file/"+file.id;
this.container = document.createElement("iframe");
this.container.classList = "image-container";
this.container.style.border = "none";
this.container.src = "/res/misc/pdf-viewer/web/viewer.html?file="+apiEndpoint+"/file/"+file.id;
}
PDFViewer.prototype.render = function(parent) {let v = this;
parent.appendChild(v.container);
PDFViewer.prototype.render = function(parent) {
parent.appendChild(this.container);
}

56
res/include/script/file_viewer/viewer_scripts/TextViewer.js
View File

@@ -1,56 +1,56 @@
function TextViewer(viewer, file) {let v = this;
v.viewer = viewer;
v.file = file;
v.pre = null;
v.prettyprint = null;
function TextViewer(viewer, file) {
this.viewer = viewer;
this.file = file;
this.pre = null;
this.prettyprint = null;
v.container = document.createElement("div");
v.container.classList = "text-container";
this.container = document.createElement("div");
this.container.classList = "text-container";
if (file.name.endsWith(".md") || file.name.endsWith(".markdown") || file.id === "demo") {
v.getMarkdown();
this.getMarkdown();
} else {
v.getText();
this.getText();
}
}
TextViewer.prototype.getText = function() {let v = this;
v.pre = document.createElement("pre");
v.pre.classList = "pre-container prettyprint linenums";
v.pre.innerText = "Loading...";
v.container.appendChild(v.pre);
TextViewer.prototype.getText = function() {
this.pre = document.createElement("pre");
this.pre.classList = "pre-container prettyprint linenums";
this.pre.innerText = "Loading...";
this.container.appendChild(this.pre);
if (v.file.size > 1<<22) { // File larger than 4 MiB
v.pre.innerText = "File is too large to view online.\nPlease download and view it locally.";
if (this.file.size > 1<<22) { // File larger than 4 MiB
this.pre.innerText = "File is too large to view online.\nPlease download and view it locally.";
return;
}
fetch(apiEndpoint+"/file/"+v.file.id).then(resp => {
fetch(apiEndpoint+"/file/"+this.file.id).then(resp => {
if (!resp.ok) { return Promise.reject(resp.status); }
return resp.text();
}).then(resp => {
v.pre.innerText = resp;
this.pre.innerText = resp;
// Load prettyprint script
v.prettyprint = document.createElement("script");
v.prettyprint.src = "https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert";
v.container.appendChild(v.prettyprint);
this.prettyprint = document.createElement("script");
this.prettyprint.src = "https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert";
this.container.appendChild(this.prettyprint);
}).catch(err => {
v.pre.innerText = "Error loading file: "+err;
this.pre.innerText = "Error loading file: "+err;
});
}
TextViewer.prototype.getMarkdown = function() {let v = this;
fetch("/u/"+v.file.id+"/preview").then(resp => {
TextViewer.prototype.getMarkdown = function() {
fetch("/u/"+this.file.id+"/preview").then(resp => {
if (!resp.ok) { return Promise.reject(resp.status); }
return resp.text();
}).then(resp => {
v.container.innerHTML = resp;
this.container.innerHTML = resp;
}).catch(err => {
v.container.innerText = "Error loading file: "+err;
this.container.innerText = "Error loading file: "+err;
});
}
TextViewer.prototype.render = function(parent) {let v = this;
parent.appendChild(v.container);
TextViewer.prototype.render = function(parent) {
parent.appendChild(this.container);
}

34
res/include/script/file_viewer/viewer_scripts/VideoViewer.js
View File

@@ -1,24 +1,24 @@
function VideoViewer(viewer, file, next) {let v = this;
v.viewer = viewer;
v.file = file;
v.next = next;
function VideoViewer(viewer, file, next) {
this.viewer = viewer;
this.file = file;
this.next = next;
v.vidContainer = document.createElement("div");
v.vidContainer.classList = "image-container";
this.vidContainer = document.createElement("div");
this.vidContainer.classList = "image-container";
v.vidElement = document.createElement("video");
v.vidElement.autoplay = "autoplay";
v.vidElement.controls = "controls";
v.vidElement.classList = "center drop-shadow";
v.vidElement.addEventListener("ended", () => { v.next(); }, false);
this.vidElement = document.createElement("video");
this.vidElement.autoplay = "autoplay";
this.vidElement.controls = "controls";
this.vidElement.classList = "center drop-shadow";
this.vidElement.addEventListener("ended", () => { this.next(); }, false);
v.videoSource = document.createElement("source");
v.videoSource.src = apiEndpoint+"/file/"+v.file.id;
this.videoSource = document.createElement("source");
this.videoSource.src = apiEndpoint+"/file/"+this.file.id;
v.vidElement.appendChild(v.videoSource);
v.vidContainer.appendChild(v.vidElement);
this.vidElement.appendChild(this.videoSource);
this.vidContainer.appendChild(this.vidElement);
}
VideoViewer.prototype.render = function(parent) {let v = this;
parent.appendChild(v.vidContainer);
VideoViewer.prototype.render = function(parent) {
parent.appendChild(this.vidContainer);
}