some usability fixes

res/static/res/script/DetailsWindow.js

@@ -2,25 +2,47 @@ var DetailsWindow = {
 	visible: false,
 	toggle: function () {
 		if (this.visible) {
-			$("#info-popup").fadeOut(500);
+			$("#info_popup").fadeOut(500);
 			$("#btnDetails").removeClass("button_highlight");
 			this.visible = false;
 		} else {
-			$("#info-popup").fadeIn(500);
+			$("#info_popup").fadeIn(500);
 			$("#btnDetails").addClass("button_highlight");
 			this.visible = true;
 		}
 	},
 	setDetails: function (file) {
-		var fileInfo = "<table>"
-			+ "<tr><td>Name<td><td>" + escapeHTML(file.file_name) + "</td></tr>"
-			+ "<tr><td>Url<td><td><a href=\"/u/" + file.id + "\">Open</a></td></tr>"
-			+ "<tr><td>Mime Type<td><td>" + escapeHTML(file.mime_type) + "</td></tr>"
-			+ "<tr><td>Id<td><td>" + file.id + "</td></tr>"
-			+ "<tr><td>Size<td><td class=\"bytecounter\">" + file.file_size + "</td></tr>"
-			+ "<tr><td>Upload Date<td><td>" + file.date_upload + "</td></tr>"
-			+ "<tr><td>Description<td><td>" + escapeHTML(file.desc) + "</td></tr>"
-			+ "</table>";
-		$("#info-fileDetails").html(fileInfo);
+		if (Viewer.isList) {
+			//  Lists give incomplete file information, so we have to request
+			//  more details in the background. File descriptions only exist in
+			//  lists, so for that we use the data provided in the page source
+			$.ajax({
+				dataType: "json",
+				url: apiEndpoint + "/file/" + file.id + "/info",
+				success: function(data){
+					$("#info_file_details").html(
+						"<table>"
+						+ "<tr><td>Name<td><td>" + escapeHTML(data.file_name) + "</td></tr>"
+						+ "<tr><td>Url<td><td><a href=\"/u/" + data.id + "\">/u/" + data.id + "</a></td></tr>"
+						+ "<tr><td>Mime Type<td><td>" + escapeHTML(data.mime_type) + "</td></tr>"
+						+ "<tr><td>Id<td><td>" + data.id + "</td></tr>"
+						+ "<tr><td>Size<td><td class=\"bytecounter\">" + data.file_size + "</td></tr>"
+						+ "<tr><td>Upload Date<td><td>" + data.date_upload + "</td></tr>"
+						+ "<tr><td>Description<td><td>" + escapeHTML(file.description) + "</td></tr>"
+						+ "</table>"
+					);
+				}
+			});
+		} else {
+			$("#info_file_details").html(
+				"<table>"
+				+ "<tr><td>Name<td><td>" + escapeHTML(file.file_name) + "</td></tr>"
+				+ "<tr><td>Mime Type<td><td>" + escapeHTML(file.mime_type) + "</td></tr>"
+				+ "<tr><td>Id<td><td>" + file.id + "</td></tr>"
+				+ "<tr><td>Size<td><td class=\"bytecounter\">" + file.file_size + "</td></tr>"
+				+ "<tr><td>Upload Date<td><td>" + file.date_upload + "</td></tr>"
+				+ "</table>"
+			);
+		}
 	}
-};
+};

res/static/res/script/ListNavigator.js

@@ -6,7 +6,7 @@ var ListNavigator = {
 	data: [],
 	history: [],
 	shuffle: false,
-	
+
 	nextItem: function(){
 		if(!Viewer.isList){
 			return;
@@ -24,7 +24,7 @@ var ListNavigator = {
 
 		this.setItem(this.position);
 	},
-	
+
 	previousItem: function(){
 		if(!Viewer.isList){
 			return;
@@ -38,22 +38,22 @@ var ListNavigator = {
 
 		this.setItem(this.position);
 	},
-	
+
 	randItem: function(){
 		if(!Viewer.isList){
 			return;
 		}
-		
+
 		// Avoid viewing the same file multiple times
 		var rand;
 		do {
 			rand = Math.round(Math.random() * this.length);
 			console.log("rand is " + rand);
 		} while(this.inHistory(rand));
-		
+
 		this.setItem(rand);
 	},
-	
+
 	setItem: function(index){
 		if(index >= this.length){
 			this.position = 0;
@@ -61,10 +61,10 @@ var ListNavigator = {
 			this.position = index;
 		}
 
-		// Set the URL hash 
+		// Set the URL hash
 		location.hash = "item=" + this.position;
 		Viewer.setFile(this.data[this.position]);
-		
+
 		this.addToHistory(index);
 
 		$("#listNavigatorItems").find("*").css("border-color", "#333");
@@ -79,27 +79,27 @@ var ListNavigator = {
 				queue: false
 			}
 		);
-	
+
 		this.loadThumbnails(index);
 	},
-	
+
 	addToHistory: function(index){
 		if(this.history.length >= (this.length - 6)){
 			this.history.shift();
 		}
-		
+
 		this.history.push(index);
 	},
-	
+
 	inHistory: function(index){
 		var i = $.inArray(index, this.history); // Returns -1 when the item is not found
-		
+
 		return (i !== -1); // Return false when it's not in the array
 	},
-	
+
 	toggleShuffle: function(){
 		this.shuffle = !this.shuffle; // :P
-		
+
 		if(this.shuffle){
 			$("#btnShuffle > span").html(" Shuffle ☑"); // Check icon
 			$("#btnShuffle").addClass("button_highlight");
@@ -108,40 +108,40 @@ var ListNavigator = {
 			$("#btnShuffle").removeClass("button_highlight");
 		}
 	},
-	
+
 	loadThumbnails: function(index){
-		var startPos = +index - 30; 
+		var startPos = +index - 30;
 		var endPos = +index + 30;
 		// fyi, the + is to let javascript know it's actually a number instead of a string
-		
+
 		if(startPos < 0){
 			startPos = 0;
 		}
-		
+
 		if(endPos >= this.length){
 			endPos = this.length - 1;
 		}
 		console.log(endPos);
-		
+
 		var navigatorItems = $("#listNavigatorItems").children().toArray();
-		
+
 		for (i = startPos; i <= endPos; i++){
 			var thumb = "/api/file/" + this.data[i].id + "/thumbnail";
 			var name = this.data[i].file_name;
-			
+
 			var itemHtml = escapeHTML(name) + "<br>"
 				+ "<img src=\"" + thumb + "\" "
 				+ "class=\"listItemThumbnail lazy\" alt=\"" + escapeHTML(name) + "\"/>";
-			
+
 			navigatorItems[i].innerHTML = itemHtml;
 		}
 	},
-	
+
 	init: function(data){
 		var hashPos = getHashValue("item");
 		this.data = data;
 		this.length = data.length;
-		
+
 		$.each(data, function(i, item){
 			var filename;
 			if(item.file_name !== "null"){
@@ -158,51 +158,51 @@ var ListNavigator = {
 				+ "</div>";
 
 			$("#listNavigatorItems").append(itemHtml);
-			
+
 		});
-		
+
 		// Skip to this file if the parameter is set
 		if(Number.isInteger(parseInt(hashPos))){
 			this.setItem(hashPos);
 		}else{
 			this.setItem(0);
 		}
-		
+
 		// Add the list download button to the toolbar
 		var btnDownloadList = document.createElement("button");
 		btnDownloadList.setAttribute("id", "btnDownloadList");
 		btnDownloadList.setAttribute("class", "toolbar_button button_full_width");
 		btnDownloadList.setAttribute("onClick", "Toolbar.downloadList();");
-		
+
 		var btnDownloadListImg = document.createElement("img");
 		btnDownloadListImg.setAttribute("src", "/res/img/floppy_small.png");
 		btnDownloadListImg.setAttribute("alt", "Download List");
-		
+
 		var btnDownloadListText = document.createElement("span");
 		btnDownloadListText.innerHTML = "&nbsp;All Files";
-		
+
 		btnDownloadList.appendChild(btnDownloadListImg);
 		btnDownloadList.appendChild(btnDownloadListText);
 		$("#btnDownload").after(btnDownloadList);
-		
+
 		// Add the shuffle button to the toolbar
 		var btnShuffle = document.createElement("button");
 		btnShuffle.setAttribute("id", "btnShuffle");
 		btnShuffle.setAttribute("class", "toolbar_button button_full_width");
 		btnShuffle.setAttribute("onClick", "ListNavigator.toggleShuffle();");
-		
+
 		var btnShuffleImg = document.createElement("img");
 		btnShuffleImg.setAttribute("src", "/res/img/shuffle_small.png");
 		btnShuffleImg.setAttribute("alt", "Shuffle playback order");
-		
+
 		var btnShuffleText = document.createElement("span");
 		btnShuffleText.innerHTML = "&nbsp;Shuffle&nbsp;&#x2610;";
-		
+
 		btnShuffle.appendChild(btnShuffleImg);
 		btnShuffle.appendChild(btnShuffleText);
-		
+
 		$("#btnShare").after(btnShuffle);
-		
+
 		// We need to adjust the height of some elements to make the navigation bar fit
 		var navHeight = $("#listNavigator").height() + 2;
 		window.setTimeout(function(){
@@ -211,7 +211,7 @@ var ListNavigator = {
 			$("#toolbar").animate(              {top: navHeight},{"duration": 1500, "queue": false});
 			$("#button-expand-toolbar").animate({top: navHeight},{"duration": 1500, "queue": false});
 			$("#sharebar").animate(             {top: navHeight},{"duration": 1500, "queue": false});
-			$("#info-popup").css("top", "120px");
+			$("#info_popup").css("top", "120px");
 		}, 100);
 	}
 };
@@ -221,4 +221,4 @@ var ListNavigator = {
 function getHashValue(key) {
 	var matches = location.hash.match(new RegExp(key + '=([^&]*)'));
 	return matches ? matches[1] : null;
-}
+}

res/static/res/style/viewer.css

@@ -182,7 +182,7 @@ body{
    || MISC COMPONENTS ||
    ===================== */
 
-.full-popup{
+.full_popup{
 	position: fixed;
 	display: none;
 	background-color: var(--background_color);
@@ -233,6 +233,7 @@ table > tbody > tr {border: none !important;}
 	color: var(--text_color);
 	font-size: 16px;
 	font-family: 'Ubuntu', sans-serif;
+	line-height: 20px;
 	text-align: right;
 	display: inline-block;
 	background-image: url("/res/img/bytecounter.png");

res/template/file_viewer.html

@@ -32,6 +32,8 @@
 		<meta property="og:image:url"   content="{{.OGData.Image}}" />
 		<meta property="article:author" content="Fornax96" />
 		<link rel="image_src"              href="{{.OGData.Image}}" />
+
+		<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
 	</head>
 
 	<body>
@@ -122,15 +124,45 @@
 			</button>
 		</div>
 
-		<div id="info-popup" class="full-popup">
+		<div id="info_popup" class="full_popup">
 			<img alt="Close" src="/res/img/cross.png"
 			     style="position: absolute; top: 5px; right: 5px; width: 40px; height: 40px; cursor: pointer;"
 			     onclick="DetailsWindow.toggle();"/>
 			Click the help button again to close this overlay.<br/>
 
 			<h3>File Info</h3>
-			<span id="info-fileDetails"></span>
-			<span id="info-about">{{template "file_info_popup"}}</span>
+			<span id="info_file_details"></span>
+			<span id="info_about">
+				<h3>About</h3>
+				Pixeldrain is a file sharing platform.
+				<a href="/" target="_blank">Visit the home page for more information.</a>
+
+				<h3>Keyboard Controls</h3>
+				<table>
+					<tr><td colspan="2">File Shortcuts</td></tr>
+					<tr><td>c</td><td> = Copy URL of this page</td></tr>
+					<tr><td>i</td><td> = Toggle details window (this window)</td></tr>
+					<tr><td>s</td><td> = Download the file you are currently viewing</td></tr>
+					<tr><td colspan="2">List Shortcuts</td></tr>
+					<tr><td>a or &#8592;</td><td> = View previous item in list</td></tr>
+					<tr><td>d or &#8594;</td><td> = View next item in list</td></tr>
+					<tr><td>r</td><td> = Toggle shuffle (<b><u>r</u></b>andom)</td></tr>
+					<tr><td>SHIFT + s</td><td> = Download all the files in the list as a zip archive</td></tr>
+				</table>
+
+				<h3>Credits</h3>
+				All server side code written by
+				<a target="_blank" href="https://fornaxian.com/">Fornax (me)</a>.
+				<br/>
+				<br/>
+				Code syntax highlighting is by
+				<a target="_blank" href="https://github.com/google/code-prettify">Google Code-prettify</a>.
+				<br/>
+				<br/>
+				Thanks to the Mozilla team for their wonderful PDF viewer
+				<a target="_blank" href="https://github.com/mozilla/pdf.js">pdf.js</a>.
+				<br/>
+			</span>
 		</div>
 
 		<div id="filepreview">